CODEWITHSUNDEEP
javascripthtml
FaceMann
FaceMann

Reputation: 39

How can I code such that the user can only go to the next question after inputting an answer for the previous question? HTMLl/JS

I'm making a quiz. And I don't know how to do this:

The user needs to be directed to the next question only after he/she answers the current question. At the moment, you can still press Next. And if the Sumbit button at the end doesn't work, it means that you've missed answering a question. So you have to search back and figure out the question that you've missed.

I hope somebody can help me or can give me some tips!

HTML:

<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>


  <body>

      <div class="header">
        <h1>Which animal are you?</h1>
      </div>

        <form id="personalityQuiz" class="answers">

          <div class="slide active-slide">

            <h3> 1. First of all, how would you describe your height as...</h3>
            <input type="radio" name="height" value="q011" required>Short<br>
            <input type="radio" name="height" value="q012" required>Average<br>
            <input type="radio" name="height" value="q013" required>Tall<br>

            <input type="button" class="btnNext1" value="Next">

          </div>
          
          <div class="slide">
            <h3> 2. Your eyes are...</h3>
            <input type="radio" name="eyes" value="q021" required>Brown<br>
            <input type="radio" name="eyes" value="q022" required>Hazel<br>
            <input type="radio" name="eyes" value="q023" required>Green<br>

            <input type="button" class="btnPrev1" value="Back">
            <input type="button" class="btnNext1" value="Next">

          </div>
         
          <div class="slide">

            <h3> 3. In my free time I like to... </h3>
            <input type="radio" name="hobby" value="q031" required>play sports<br>
            <input type="radio" name="hobby" value="q032" required>be outside<br>
            <input type="radio" name="hobby" value="q033" required>hang out with friends<br>


            <input type="button" class="btnPrev1" value="Back">
            <input type="submit" value="Submit">

          </div>

        </form>

      <div class="result" id=cat> you are a cat</div>
      <div class="result" id=dog> you are a dog</div>
      <div class="result" id=horse> you are a horse</div>
      <div class="result" id=fish> you are a fish</div>
      <div class="result" id=lion> you are a lion</div>




      <script type='text/javascript' src='script.js'></script>
    </div>
  
    <div class="footer"></div>

  </body>

</html>

Javascript:

    $("#personalityQuiz").submit(function(event) {
    
      var qalookup = {
        "q011": ["cat", "dog"],
        "q012": ["fish"],
        "q013": ["lion", "horse"],
    
        "q021": ["horse"],
        "q022": ["lion"],
        "q023": ["fish", "dog", "cat"],
    
        "q031": ["fish"],
        "q032": ["dog", "cat"],
        "q033": ["lion", "horse"],
      };
    
      event.preventDefault();
      var answers = $(this).serializeArray();
      var scores = {
        cat: 0,
        dog: 0,
        horse: 0,
        fish: 0,
        lion: 0
      };
    
      $(".result").hide();
    
      for (var answer of answers) {
        var ans = qalookup[answer.value];
        ans.forEach(function(val) {
          scores[val] += 1;
        });
      }
    
      var maxAnimal = "cat";
      for (var animal in scores) {
        if (scores[animal] > scores[maxAnimal]) {
          maxAnimal = animal;
        }
      }
    
      $("#personalityQuiz").css('display', 'none');
      $(".result#" + maxAnimal).css('display', 'block');
    
    });
    
    $('.btnNext1').click(function() {
      var currentSlide = $('.active-slide').stop().fadeOut(500, function() {
        $(this).removeClass('active-slide');
        currentSlide.next().stop().fadeIn(500).addClass('active-slide');
      });
    });
    
    
    $('.btnPrev1').click(function() {
      var currentSlide = $('.active-slide').stop().fadeOut(500, function() {
        $(this).removeClass('active-slide');
        currentSlide.prev().stop().fadeIn(500).addClass('active-slide');
      });
    });

Upvotes: 0

Views: 162

Answers (1)

ItsMeNaira
ItsMeNaira

Reputation: 358

Sort of a duck-tapey answer but: have a variable, called whatever, let's say score. When you answer a question, increment this variable by 1.

Only allow input/the next question IF the score is greater or equal to that questions score.

If you have completed question 5, your score is 5. you can go back to see questions 1,2,3,4 and 5 but you cannot input anything on 6 as input is disabled

Upvotes: 1

Related Questions