Quiz modification – display the answer

@BrenthosFeb 20.2021

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](https://github.com/briancodex/quiz-app-js)
[This quiz coding tutorial Youtube](https://youtu.be/f4fB9Xg2JEY?t=9)

to post a comment

JavaScript

5 Comments(s) _↴

@SempervivumFeb 20.2021 — #I modified the quiz as you required.

game.css, note `/* begin correct answer green flashing */</C> and <C>/* end correct answer green flashing */

</C>:
 <CODE>

<i>
 </i>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;
 }
 }<i>
 </i>

</CODE>
 game.js, I modified this forEach loop only:
 <CODE>

<i>
 </i>choices.forEach(choice =&gt; {
 choice.addEventListener('click', e =&gt; {
 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(() =&gt; {
 // remove all classes previously set
 choiceContainers.forEach(item =&gt; {
 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)
 })
 })<i>
 </i>

@BrenthosauthorFeb 20.2021 — #@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

![](https://i.ibb.co/MhpnQkS/quizss.png)

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! :)

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

@rpg2009Feb 21.2021 — #> @Sempervivum#1628318

> choiceContainers.forEach(item => {

> item.classList.remove('correct')

> item.classList.remove('correct-flashing')

> item.classList.remove('incorrect')

> })

Checking up on [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) and you can remove multiple classes in one go.

``javascript<i>
 </i>choiceContainers.forEach(item =&gt; {
 item.classList.remove('correct', 'correct-flashing', 'incorrect')
 })<i>
 </i>``

@aajinfoFeb 21.2021 — #Nice and helpful [information](http://aajinformation.com/)

Also in #JavaScript _↴

Loading webpage into a table annoying textarea property - this happening to anyone else?Sync multiple youtube videos with jquery or javascrip... or any other method ??

Success!

Help @Brenthos spread the word by sharing this article on Twitter...

Tweet This

Quiz modification – display the answer

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Quiz modification – display the answer

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴