Thread: [Solved] Quiz app modification

Originally Posted by Norm

What language is this written in? It does not look like a Java program.

Hi Norm,

This quiz is written using HTML, CSS and Javascript.
-https://youtu.be/f4fB9Xg2JEY?t=9

Originally Posted by Norm

That's what it looked like. This forum is for Java

Oh.. how embarrassing.
My apologies.

Anyway if someone needs it I got it working the way as I described in my first post.

game.css

body {
    color: #fff;
}
 
.choice-container {
    display: flex;
    margin-bottom: 0.8rem;
    width: 100%;
    border-radius: 4px;
    background: rgb(18, 93, 255);
    font-size: 3rem;
    min-width: 80rem;
}
 
/* begin correct answer green flashing */
 
.choice-container.correct-flashing {
    animation: green-flashing-ani 1s infinite;
}
 
@keyframes green-flashing-ani {
    0% {
        background: linear-gradient(32deg, rgba(11, 223, 36) 0%, rgb(41, 232, 111) 100%);
    }
    49.9% {
        background: linear-gradient(32deg, rgba(11, 223, 36) 0%, rgb(41, 232, 111) 100%);
    }
    50% {
        background: transparent;
    }
    100% {
        background: transparent;
    }
}
 
/* end correct answer green flashing */
 
.choice-container:hover {
    cursor: pointer;
    box-shadow: 0 0.4rem 1.4rem 0 rgba(6, 103, 247, 0.5);
    transform: scale(1.02);
    transform: transform 100ms;
}
 
.choice-prefix {
    padding: 2rem 2.5rem;
    color: white;
}
 
.choice-text {
    padding: 2rem;
    width: 100%;
}
 
.correct {
    background: linear-gradient(32deg, rgba(11, 223, 36) 0%, rgb(41, 232, 111) 100%);
}
 
.incorrect {
    background: linear-gradient(32deg, rgba(230, 29, 29, 1) 0%, rgb(224, 11, 11, 1) 100%);
}
 
/* Heads up Display */
 
#hud {
    display: flex;
    justify-content: space-between;
}
 
.hud-prefix {
    text-align: center;
    font-size: 2rem;
}
 
.hud-main-text {
    text-align: center;
}
 
#progressBar {
    width: 20rem;
    height: 3rem;
    border: 0.2rem solid rgb(11, 223, 36);
    margin-top: 2rem;
    border-radius: 50px;
    overflow: hidden;
}
 
#progressBarFull {
    height: 100%;
    background: rgb(11, 223, 36);
    width: 0%;
}
 
@media screen and (max-width: 768px) {
    .choice-container {
        min-width: 40rem;
    }
}

game.js

const question = document.querySelector('#question');
const choices = Array.from(document.querySelectorAll('.choice-text'));
const progressText = document.querySelector('#progressText');
const scoreText = document.querySelector('#score');
const progressBarFull = document.querySelector('#progressBarFull');
const choiceContainers = Array.from(document.querySelectorAll('.choice-container'));
 
let currentQuestion = {}
let acceptingAnswers = true
let score = 0
let questionCounter = 0
let availableQuestions = []
 
let questions = [
    {
        question: 'What is 2 + 2?',
        choice1: '2',
        choice2: '4',
        choice3: '21',
        choice4: '17',
        answer: 2,
    },
    {
        question:
            "The tallest building in the world is located in which city?",
        choice1: "Dubai",
        choice2: "New York",
        choice3: "Shanghai",
        choice4: "None of the above",
        answer: 1,
    },
    {
        question: "What percent of American adults believe that chocolate milk comes from brown cows?",
        choice1: "20%",
        choice2: "18%",
        choice3: "7%",
        choice4: "33%",
        answer: 3,
    },
    {
        question: "Approximately what percent of U.S. power outages are caused by squirrels?",
        choice1: "10-20%",
        choice2: "5-10%",
        choice3: "15-20%",
        choice4: "30%-40%",
        answer: 1,
    }
]
 
const SCORE_POINTS = 100
const MAX_QUESTIONS = 4
 
startGame = () => {
    questionCounter = 0
    score = 0
    availableQuestions = [...questions]
    getNewQuestion()
}
 
getNewQuestion = () => {
    if(availableQuestions.length === 0 || questionCounter > MAX_QUESTIONS) {
        localStorage.setItem('mostRecentScore', score)
 
        return window.location.assign('/end.html')
    }
 
    questionCounter++
    progressText.innerText = `Question ${questionCounter} of ${MAX_QUESTIONS}`
    progressBarFull.style.width = `${(questionCounter/MAX_QUESTIONS) * 100}%`
 
    const questionsIndex = Math.floor(Math.random() * availableQuestions.length)
    currentQuestion = availableQuestions[questionsIndex]
    question.innerText = currentQuestion.question
 
    choices.forEach(choice => {
        const number = choice.dataset['number']
        choice.innerText = currentQuestion['choice' + number]
    })
 
    availableQuestions.splice(questionsIndex, 1)
 
    acceptingAnswers = true
}
 
choices.forEach(choice => {
    choice.addEventListener('click', e => {
        if (!acceptingAnswers) return
 
        // get container of correct answer
        const correctContainer = choiceContainers[currentQuestion.answer - 1];
 
        acceptingAnswers = false
        const selectedChoice = e.target
        const selectedAnswer = selectedChoice.dataset['number']
 
        // set class to apply according answer correct or not
        let classToApply = selectedAnswer == currentQuestion.answer ? 'correct' : 'incorrect'
 
        // correct answer?
        if (classToApply === 'correct') {
            // answer correct
            // increment score only if there was no wrong answer
            if (!correctContainer.classList.contains('correct-flashing')) {
                incrementScore(SCORE_POINTS)
            }
            // after 1 sec:
            setTimeout(() => {
                // remove all classes previously set
                choiceContainers.forEach(item => {
                    item.classList.remove('correct')
                    item.classList.remove('correct-flashing')
                    item.classList.remove('incorrect')
                })
                getNewQuestion()
            }, 1000)
 
        } else {
            // answer incorrect
            // make container of correct answer flash
            correctContainer.classList.add('correct-flashing')
            // accept answer again
            acceptingAnswers = true
        }
 
        selectedChoice.parentElement.classList.add(classToApply)
    })
})
 
incrementScore = num => {
    score +=num
    scoreText.innerText = score
}
 
startGame()