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

Answer 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>