1

This is a working JavaScript Practice Quiz made by a noob (me).

the problem? as you can see the quiz, you can keep on clicking the answer button after you picked your answer. How can I avoid this?? I try using **onclick = null ** but I couldn't set it back to click state.

Thank you for your answers!!!!! Here is the QUIZ

<script>
    let answers = [{
        question: "01 What year is it",
        a: "1850",
        b: "1920",
        c: "*2020",
        d: "1995",
        correct: "c"
    }, {
        question: "02 What color is the Sun?",
        a: "*Yellow",
        b: "Red",
        c: "Green",
        d: "Purple",
        correct: "a"
    }, {
        question: "03 How do you say 'Hello' in French?",
        a: "I don't know",
        b: "Hi?",
        c: "Paris?",
        d: "*Bonjour",
        correct: "d"
    }, {
        question: "What was the color of Napoleon's white horse?",
        a: "*White",
        b: "Grey",
        c: "DarkBlue",
        d: "Rainbow",
        correct: "a"
    }];

    var slideIndex = 0;
    var scoring = 0;
    var q = document.getElementById("questionheader");
    var a = document.getElementById("a");
    var b = document.getElementById("b");
    var c = document.getElementById("c");
    var d = document.getElementById("d");


    showSlides(slideIndex);

    function plusSlides(n) {
        showSlides(slideIndex = slideIndex + n);
    }

    function showSlides(n) {
        a.classList.remove("green");
        b.classList.remove("green");
        c.classList.remove("green");
        d.classList.remove("green");
        a.classList.remove("red");
        b.classList.remove("red");
        c.classList.remove("red");
        d.classList.remove("red");
        a.classList.remove("borderGreen");
        b.classList.remove("borderGreen");
        c.classList.remove("borderGreen");
        d.classList.remove("borderGreen");
        document.getElementById("Goodjob").classList.remove("show")


        if (n > 3) {
            slideIndex = 3
        }
        if (n < 1) {
            slideIndex = 0
        }

        q.innerHTML = answers[slideIndex].question;
        a.innerHTML = answers[slideIndex].a;
        b.innerHTML = answers[slideIndex].b;
        c.innerHTML = answers[slideIndex].c;
        d.innerHTML = answers[slideIndex].d;

    }


    function checkAnswers(choice) {

        for (i = 0; i < answers.length; i++) {
            let right = answers[i].correct

            if (choice !== right && slideIndex == i) {

                document.getElementById(choice).classList.add("red")
                document.getElementById(right).classList.add("borderGreen")

            } else if (choice === right && slideIndex == i) {
                document.getElementById(right).classList.add("green")
                document.getElementById("Goodjob").classList.add("show")

            }

        }
    }

</script>

Pnfyorch
  • 35
  • 5

1 Answers1

1

You can set a flag that gets toggled when an answer is clicked. If the flag is already set when an answer is clicked, don't do anything. When advancing to a new slide, reset the flag:

function plusSlides(n) {
  slideAnswered = false;
  showSlides(slideIndex = slideIndex + n);
}

// ...

let slideAnswered = false;
function checkAnswers(choice) {
  if (slideAnswered) return;
  slideAnswered = true;
  // check answers for this slide...


let answers = [{
  question: "01 What year is it",
  a: "1850",
  b: "1920",
  c: "*2020",
  d: "1995",
  correct: "c"
}, {
  question: "02 What color is the Sun?",
  a: "*Yellow",
  b: "Red",
  c: "Green",
  d: "Purple",
  correct: "a"
}, {
  question: "03 How do you say 'Hello' in French?",
  a: "I don't know",
  b: "Hi?",
  c: "Paris?",
  d: "*Bonjour",
  correct: "d"
}, {
  question: "What was the color of Napoleon's white horse?",
  a: "*White",
  b: "Grey",
  c: "DarkBlue",
  d: "Rainbow",
  correct: "a"
}];

var slideIndex = 0;
var scoring = 0;
var q = document.getElementById("questionheader");
var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementById("c");
var d = document.getElementById("d");


showSlides(slideIndex);

function plusSlides(n) {
  slideAnswered = false;
  showSlides(slideIndex = slideIndex + n);
}

function showSlides(n) {
  a.classList.remove("green");
  b.classList.remove("green");
  c.classList.remove("green");
  d.classList.remove("green");
  a.classList.remove("red");
  b.classList.remove("red");
  c.classList.remove("red");
  d.classList.remove("red");
  a.classList.remove("borderGreen");
  b.classList.remove("borderGreen");
  c.classList.remove("borderGreen");
  d.classList.remove("borderGreen");
  document.getElementById("Goodjob").classList.remove("show")


  if (n > 3) {
    slideIndex = 3
  }
  if (n < 1) {
    slideIndex = 0
  }

  q.innerHTML = answers[slideIndex].question;
  a.innerHTML = answers[slideIndex].a;
  b.innerHTML = answers[slideIndex].b;
  c.innerHTML = answers[slideIndex].c;
  d.innerHTML = answers[slideIndex].d;

}

let slideAnswered = false;
function checkAnswers(choice) {
  if (slideAnswered) return;
  slideAnswered = true;
  for (i = 0; i < answers.length; i++) {
    let right = answers[i].correct

    if (choice !== right && slideIndex == i) {

      document.getElementById(choice).classList.add("red")
      document.getElementById(right).classList.add("borderGreen")

    } else if (choice === right && slideIndex == i) {
      document.getElementById(right).classList.add("green")
      document.getElementById("Goodjob").classList.add("show")

    }

  }
}
* {
  box-sizing: border-box
}

.container {
  width: 800px;
  height: 400px;
  margin: 0 auto;
}

.main {
  position: relative;
  width: 600px;
  height: 300px;
  border: gray 2px solid;
  text-align: center;
}

.content {
  padding: 20px;
}

.answers {
  margin: 0 auto;
  width: 100px;
  height: 30px;
  border: 1px black solid;
  margin-bottom: 5px;
  cursor: pointer;
}

.borderGreen {
  border: 2px solid green;
}

.green {
  background-color: green;
}

.red {
  background-color: rgb(248, 62, 62);
}

.Goodjob {
  display: none;
  width: 596px;
  height: 40px;
  position: absolute;
  bottom: 0;
  background-color: rgb(252, 199, 225);
  transition-duration: 1000ms;
  transition: ease;
}

.show {
  display: block;
}
<div class="container">
  <div class="main">
    <div class="content">
      <p id="questionheader"> </p>
      <div id="a" class="answers" onclick="checkAnswers('a')"></div>
      <div id="b" class="answers" onclick="checkAnswers('b')"></div>
      <div id="c" class="answers" onclick="checkAnswers('c')"></div>
      <div id="d" class="answers" onclick="checkAnswers('d')"></div>

    </div>
    <div id="Goodjob" class="Goodjob">Good Job!</div>
  </div>

  <div>

    <button onclick="plusSlides(1)">next</button>
  </div>

</div>

On a different note, it would be best to avoid inline handlers, they have way too many problems to be worth using in modern Javascript. Consider attaching the event listeners properly using Javascript instead:

for (const answer of document.querySelectorAll('.answers')) {
  answer.addEventListener('click', () => checkAnswers(answer.id));
}
document.querySelector('button').addEventListener('click', () => plusSlides(1));


let answers = [{
  question: "01 What year is it",
  a: "1850",
  b: "1920",
  c: "*2020",
  d: "1995",
  correct: "c"
}, {
  question: "02 What color is the Sun?",
  a: "*Yellow",
  b: "Red",
  c: "Green",
  d: "Purple",
  correct: "a"
}, {
  question: "03 How do you say 'Hello' in French?",
  a: "I don't know",
  b: "Hi?",
  c: "Paris?",
  d: "*Bonjour",
  correct: "d"
}, {
  question: "What was the color of Napoleon's white horse?",
  a: "*White",
  b: "Grey",
  c: "DarkBlue",
  d: "Rainbow",
  correct: "a"
}];

var slideIndex = 0;
var scoring = 0;
var q = document.getElementById("questionheader");
var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementById("c");
var d = document.getElementById("d");


showSlides(slideIndex);

function plusSlides(n) {
  slideAnswered = false;
  showSlides(slideIndex = slideIndex + n);
}

function showSlides(n) {
  a.classList.remove("green");
  b.classList.remove("green");
  c.classList.remove("green");
  d.classList.remove("green");
  a.classList.remove("red");
  b.classList.remove("red");
  c.classList.remove("red");
  d.classList.remove("red");
  a.classList.remove("borderGreen");
  b.classList.remove("borderGreen");
  c.classList.remove("borderGreen");
  d.classList.remove("borderGreen");
  document.getElementById("Goodjob").classList.remove("show")


  if (n > 3) {
    slideIndex = 3
  }
  if (n < 1) {
    slideIndex = 0
  }

  q.innerHTML = answers[slideIndex].question;
  a.innerHTML = answers[slideIndex].a;
  b.innerHTML = answers[slideIndex].b;
  c.innerHTML = answers[slideIndex].c;
  d.innerHTML = answers[slideIndex].d;

}

let slideAnswered = false;
function checkAnswers(choice) {
  if (slideAnswered) return;
  slideAnswered = true;
  for (i = 0; i < answers.length; i++) {
    let right = answers[i].correct

    if (choice !== right && slideIndex == i) {

      document.getElementById(choice).classList.add("red")
      document.getElementById(right).classList.add("borderGreen")

    } else if (choice === right && slideIndex == i) {
      document.getElementById(right).classList.add("green")
      document.getElementById("Goodjob").classList.add("show")

    }

  }
}


for (const answer of document.querySelectorAll('.answers')) {
  answer.addEventListener('click', () => checkAnswers(answer.id));
}
document.querySelector('button').addEventListener('click', () => plusSlides(1));
* {
  box-sizing: border-box
}

.container {
  width: 800px;
  height: 400px;
  margin: 0 auto;
}

.main {
  position: relative;
  width: 600px;
  height: 300px;
  border: gray 2px solid;
  text-align: center;
}

.content {
  padding: 20px;
}

.answers {
  margin: 0 auto;
  width: 100px;
  height: 30px;
  border: 1px black solid;
  margin-bottom: 5px;
  cursor: pointer;
}

.borderGreen {
  border: 2px solid green;
}

.green {
  background-color: green;
}

.red {
  background-color: rgb(248, 62, 62);
}

.Goodjob {
  display: none;
  width: 596px;
  height: 40px;
  position: absolute;
  bottom: 0;
  background-color: rgb(252, 199, 225);
  transition-duration: 1000ms;
  transition: ease;
}

.show {
  display: block;
}
<div class="container">
  <div class="main">
    <div class="content">
      <p id="questionheader"> </p>
      <div id="a" class="answers"></div>
      <div id="b" class="answers"></div>
      <div id="c" class="answers"></div>
      <div id="d" class="answers"></div>

    </div>
    <div id="Goodjob" class="Goodjob">Good Job!</div>
  </div>

  <div>

    <button>next</button>
  </div>

</div>
CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
  • It worked like a charm!!! Thank you so much!!!! I fixed the inline handlers too, that's something I never seen before... but I'm reading about it just now! Thank you so much!!!!! – Pnfyorch Apr 21 '20 at 05:54
  • When an answer solves your problem, you may consider marking it as Accepted (check the checkbox on the left) to indicate that the issue is resolved :) – CertainPerformance Apr 21 '20 at 05:54