Quiz modification - display the answer - WebDeveloper.com Forums

Quiz modification - display the answer

Brenthos

Hi,

I'm trying to make a small modification for quiz which is created by briancodex. Right now when we select any quiz answer it changes color to green(correct) or red(incorrect) waits 1sec and displays next question. What I'm trying to modify is when we answer the question incorrect that answer should be marked red(like it's now) and the right answer should be marked green and blinking also until correct answer is not clicked quiz is paused. Probably this is not so hard to do, but I'm totally new to Javascript and have no idea where to begin.
For now I have modified game.js to display correct answer by alert

Source
This quiz coding tutorial Youtube

Sempervivum

I modified the quiz as you required.

game.css, note /* begin correct answer green flashing */ and /* end correct answer green flashing */:

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, I modified this forEach loop only:

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)
    })
})

rpg2009

Sempervivum
choiceContainers.forEach(item => {
item.classList.remove('correct')
item.classList.remove('correct-flashing')
item.classList.remove('incorrect')
})

Checking up on MDN and you can remove multiple classes in one go.

choiceContainers.forEach(item => {
  item.classList.remove('correct', 'correct-flashing', 'incorrect')
})

Brenthos

@Sempervivum

I'm very thankful for your help, appreciate it!
But after I tried the new code you posted I see there is error at line 89
How to define ''choiceContainers' ?

Uncaught ReferenceError: choiceContainers is not defined

EDIT:
It seems I have already fixed just by simply adding 1 line to top of game.js
const choiceContainers = Array.from(document.querySelectorAll('.choice-container'));

Now the quiz is working exactly as I wanted.
Once again, Sempervivum sincerely thank you for your help! 🙂

Sempervivum

Fine that you fixed it on your own. Yes, I forgot about this line when writing that I modified the forEach loop only.

aajinfo

Nice and helpful information