JavaScript quiz with multiple questions

Question

Below I’ve made a small quiz with 4 questions and questions 2,3 and 4 are hidden with CSS, but you can try to remove the style from CSS (".pytja2, .pytja3, .pytja4 { display: none;}") to see all questions or put a style of display: hidden to each question one by one and you will see them.

I did that because I would like to show the next question when I click on the button Next then next question will show after I click Next button each time. But there’s a problem that I have with question 2 it’s not showing and it doesn’t show any error in Console Log and I added on JavaScript a function that when I click button Next then the first question would be hidden and it would show the next question, but I do not know what’s wrong.

<div class="quiz">
        <div id="pytja1">
         <span class="quest1">I am a ?</span> 
        <form class="questions1" action="">
          <input class="correct" type="radio" name="gender" value="male"> Male<br>
          <input type="radio" name="gender" value="female"> Female<br>
          <input type="radio" name="gender" value="other"> Other<br>  
          <input id="bot" type="button" value="Next">
        </form>
      </div>
      <div id="pytja2">
        <span class="quest2">Football has letters ?</span> 
        <form class="questions2" action="">
          <input class="correct" type="radio" name="gender" value="male"> 7<br>
          <input type="radio" name="gender" value="female"> 5<br>
          <input type="radio" name="gender" value="other"> 6<br>  
          <input id="bot" type="button" value="Next">
        </form>
      </div>
      <div id="pytja3">
        <span class="quest3">VV stands for ?</span> 
        <form class="questions3" action="">
          <input type="radio" name="gender" value="male"> BMW <br>
          <input class="correct" type="radio" name="gender" value="female"> Volksvagen<br>
          <input type="radio" name="gender" value="other"> Audi<br>  
          <input id="bot" type="button" value="Next">
        </form>
      </div>
      <div id="pytja4">
        <span class="quest4">What year it is ?</span> 
        <form class="questions4" action="">
          <input type="radio" name="gender" value="male"> 2017<br>
          <input type="radio" name="gender" value="female"> 2015<br>
          <input class="correct" type="radio" name="gender" value="other"> 2019<br>  
          <input id="bot-submit" type="submit" value="Submit">
        </form>
      </div>
      </div>

.quiz{
  margin-top: 50px;
  margin-left: 40%;
  width: 250px;
  height: 100px;
  background-color: coral;
}
.quest1{
  background-color: cadetblue;
  padding-right: 50px;
  margin-left: 30px;
  font-size: 22px;
}
.quest2{
  background-color: cadetblue;
  padding-right: 50px;
  margin-left: 30px;
  font-size: 22px;
  position: absolute;
  top: 3884px;
}
.quest3{
  background-color: cadetblue;
  padding-right: 50px;
  margin-left: 30px;
  font-size: 22px;
  position: absolute;
  top: 3884px;
}
.quest4{
  background-color: cadetblue;
  padding-right: 50px;
  margin-left: 30px;
  font-size: 22px;
  position: absolute;
  top: 3884px;
}
.questions1{
  margin-left: 28px;
  background-color: cyan;
  width: 220px;
  padding: 10px;
  font-size: 20px;
}
.questions2{
  margin-left: 28px;
  background-color: red;
  width: 150px;
  padding: 10px;
  font-size: 20px;
  position: absolute;
  top: 3925px;
}
.questions3{
  margin-left: 28px;
  background-color: greenyellow;
  width: 150px;
  padding: 10px;
  font-size: 20px;
  position: absolute;
  top: 3925px;
}
.questions4{
  margin-left: 28px;
  background-color: olivedrab;
  width: 150px;
  padding: 10px;
  font-size: 20px;
  position: absolute;
  top: 3925px;
}
.bot{
  margin-top: 10px;
}
.pytja2,.pytja3,.pytja4{
  display: none;
}
/* End of Quiz*/

let question2 = document.getElementById('pytja2');
let question3 = document.getElementById('pytja3');
let question4 = document.getElementById('pytja4');
let nextQuestion = document.getElementById('bot');
let result = document.getElementById('bot-submit');


nextQuestion.onclick = function () {
    if (nextQuestion === question1) {
        question1.style.display = 'none'
    } else if (nextQuestion === question2) {
        question2.style.display = 'block'
   }
}

There is no element with id bot. there are elements with class="bot" — Alex Kudryashev
– Alex Kudryashev, Commented Apr 18, 2019 at 20:12
@AlexKudryashev actually the first question has it. His code is kind of messy and inconsistent. — Kevin Vandy
– Kevin Vandy, Commented Apr 18, 2019 at 20:15
Just out of curiosity, but have you thought about using XHR/Ajax requests to retrieve the next question from the server upon having user click the Next button to go to the next question? You could then populate each respective div with the question/answers, and this would prevent users from being able to look at your source code and modify visibility. I know this is outside the realm of what you're asking, but might be food for thought... — Woodrow
– Woodrow, Commented Apr 18, 2019 at 20:20
@Woodrow I was thinking to do an easy project without Ajax or PHP because I still haven't learned Ajax yet — Behar
– Behar, Commented Apr 18, 2019 at 20:57
You could simply store the future questions in a JS object, and simply generate them when pressing next. Also, use a common class across similar elements, to not repeat your code - a simple .quest and .question test would reduce parts of your code by 75%. — Andu Andrici
– Andu Andrici, Commented Apr 18, 2019 at 20:59

Woodrow · Accepted Answer · 2019-04-18 21:42:44Z

1

So, it appears there was some confusion on your use of bot as an ID and as a CLASS selector within your code. I took the liberty of cleaning this up and making it so the Next buttons use .bot as a class. If you're going to re-use a name value on an element, class is the syntax to use. ID is supposed to be specific to one element in the DOM.

Also, if you are creating a form to submit all answers, it would be better to declare <form> once, and then have each set of radio buttons contain the same name for each set of questions e.g (gender, car, etc.) so when you process the form, it will be easy to grab the selected choices by the user for each set of questions.

I cleaned up some of the CSS as well to help, and added a for loop that binds an onclick function to each Next button in the form, so upon each click, it will check the parentNode.Id to see what div elements it should hide and make visible for each next question block. This for loop is achieved by referencing the class .bot using document.querySelectorAll('.bot');

Please let me know if you have any further questions or need me to explain further the changes I made in the below snippet:

let question1 = document.getElementById('pytja1');
let question2 = document.getElementById('pytja2');
let question3 = document.getElementById('pytja3');
let question4 = document.getElementById('pytja4');
let result = document.getElementById('bot-submit');
let nextButtons = document.querySelectorAll('.bot');

for (let i = 0; i < nextButtons.length; i++) {
  let nextQuestion = nextButtons[i];
  nextQuestion.onclick = function() {
    switchToNextQuestion(this);
  }
}

function switchToNextQuestion(nextQuestion) {
  let parentId = nextQuestion.parentNode.id;
  if (parentId === 'pytja1') {
    question1.style.display = 'none';
    question2.style.display = 'block';
  } else if (parentId === 'pytja2') {
    question2.style.display = 'none';
    question3.style.display = 'block';
  } else if (parentId === 'pytja3') {
    question3.style.display = 'none';
    question4.style.display = 'block';
  }
}

result.onclick = function() {
  alert('I am submitting the quiz!');
}

form {
  width: 100%;
  position: relative;
  float: left;
  padding-top: 50px;
}

.quiz {
  margin: 0px auto;
  width: 250px;
  height: 100px;
}

.quest1,
.quest2,
.quest3,
.quest4 {
  background-color: cadetblue;
  font-size: 22px;
}

.questions1 {
  margin-left: 28px;
  background-color: cyan;
  width: 220px;
  padding: 10px;
  font-size: 20px;
}

.questions2 {
  background-color: red;
}

.questions3 {
  background-color: greenyellow;
}

.questions4 {
  background-color: olivedrab;
}

.bot {
  margin-top: 10px;
}

#pytja2,
#pytja3,
#pytja4 {
  margin-left: 28px;
  display: none;
  width: 220px;
  padding: 10px;
  font-size: 20px;
}


/* End of Quiz*/

<form id="quiz-form">
  <div class="quiz">
    <div id="pytja1" class="questions1">
      <span class="quest1">I am a ?</span><br/>
      <input type="radio" name="gender" value="male" class="correct"> Male<br/>
      <input type="radio" name="gender" value="female"> Female<br/>
      <input type="radio" name="gender" value="other"> Other<br/>
      <input class="bot" type="button" value="Next" />
    </div>
    <div id="pytja2" class="questions2">
      <span class="quest2">Football has # letters ?</span><br/>
      <input type="radio" name="football" value="8" class="correct"> 8<br/>
      <input type="radio" name="football" value="5"> 5<br/>
      <input type="radio" name="football" value="6"> 6<br/>
      <input class="bot" type="button" value="Next" />
    </div>
    <div id="pytja3" class="questions3">
      <span class="quest3">VW stands for ?</span><br/>
      <input type="radio" name="car" value="BMW" /> BMW <br/>
      <input type="radio" name="car" value="Volkswagen" class="correct" /> Volkswagen<br/>
      <input type="radio" name="car" value="Audi" /> Audi<br/>
      <input class="bot" type="button" value="Next" />
    </div>
    <div id="pytja4" class="questions4">
      <span class="quest4">What year it is ?</span><br/>
      <input type="radio" name="year" value="2017" /> 2017<br/>
      <input type="radio" name="year" value="2015" /> 2015<br/>
      <input type="radio" name="year" value="2019" class="correct" /> 2019<br/>
      <input id="bot-submit" type="submit" value="Submit" />
    </div>
  </div>
</form>

edited Apr 18, 2019 at 21:42

answered Apr 18, 2019 at 21:35

Woodrow

2,8221 gold badge17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Behar Over a year ago

Thanks a lot for your help and even a working quiz like I was planning, thank you :) Just a question, why you used "if (parentId === 'pytja1')", why you didn't use button Next like this "if (nextButtons === 'pytja1')", asking this because I would need first to click button Next and compare with "pytja1", "pytja2" etc..

Woodrow Over a year ago

You're welcome. The reason I did parentId === 'pytja1', is because when you click on one of the Next buttons, the onclick event will then check to see what parent node (<div id="pytja1">) the Next button is a child of to determine where the user is within the quiz steps. This allows the function to determine how to hide/show each question as you progress in the quiz.

Woodrow Over a year ago

Just to clarify, if you wanted to add specific ID's to each next button, so <input type="button" id="next-button-1" class="bot" value="Next"/> you could then reference the button ID value itself inside the onclick function, and compare using that ID value === "next-button-1" instead of looking at the parent node to determine what to hide/show. Few different ways to skin this proverbial cat.

Behar Over a year ago

Thank you for explaining :)

Collectives™ on Stack Overflow

JavaScript quiz with multiple questions

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related