如何編碼，以便用戶在輸入上一個問題的答案后只能轉到下一個問題？ HTMLl/JS

Question

我在做一個測驗。 我不知道該怎么做：

用戶只有在他/她回答當前問題后才需要被引導到下一個問題。 目前，您仍然可以按Next 。 如果最后的Sumbit按鈕不起作用，則意味着您錯過了回答問題。 所以你必須回過頭來找出你錯過的問題。

我希望有人可以幫助我或可以給我一些提示！

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>Wich 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');
      });
    });

Answer 1

有點像鴨子般的答案，但是：有一個變量，叫做什么，比方說分數。 回答問題時，將此變量加 1。

如果分數大於或等於該問題的分數，則僅允許輸入/下一個問題。

如果您完成了第 5 題，您的分數為 5。您可以返回查看第 1、2、3、4 和 5 題，但您無法在第 6 題中輸入任何內容，因為輸入被禁用

如何編碼，以便用戶在輸入上一個問題的答案后只能轉到下一個問題？ HTMLl/JS

問題描述

1 個解決方案

解決方案1
1 2020-03-11 04:34:10

如何編碼，以便用戶在輸入上一個問題的答案后只能轉到下一個問題？ HTMLl/JS

問題描述

1 個解決方案

解決方案1 1 2020-03-11 04:34:10

解決方案1
1 2020-03-11 04:34:10