个人中心
gpt4 book ai didi

javascript - 测验游戏选择在 Javascript 中无法正常工作

转载 作者：行者123 更新时间：2023-11-28 00:06:20 25 4
gpt4 key购买 nike

我尝试用 Javascript 和 HTML 创建一个小测验游戏，但它还不能正常工作。如果我选择正确的答案并让它验证，我会得到错误的输出。在我的函数 showExercise 中，我尝试在调用它时始终以不同的顺序设置可能的答案。因此，用户无法通过模式选择正确的答案。我感谢任何建议和更正。

这是我的代码:

<!DOCTYPE html>
<html>

  <head>
    <title>Quizgame</title>
  </head>

  <body>

    <h1>Quizgame</h1>
    <form>
      <fieldset>
        <legend id="question">Quizgame</legend>
        <input type="radio" name="choice" id="1" value="1">
        <label for="1">Placeholder</label><br>
        <input type="radio" name="choice" id="2" value="2">
        <label for="2">Placeholder</label><br>
        <input type="radio" name="choice" id="3" value="3">
        <label for="3">Placeholder</label><br>
        <input type="radio" name="choice" id="4" value="4">
        <label for="4">Placeholder</label><br>
        <button onclick="validateInput()">Check</button>
      </fieldset>
    </form>

    <script type="text/javascript">

      var exercise = [];
      var index = 0;

      exercise[index] = {
        question:       "Convert this binary number 01000001 to a decimal number:",
        correctAnswer:  "65",
        answer:         [ "127", "33", "42", "65" ]
      };
      index++;
      exercise[index] = {
        question:       "How many combinations can you reach with 3 bits?",
        correctAnswer:  "8",
        answer:         [ "11", "9", "6", "8" ]
      };

      function random( from, to ) 
      {
        min = from > to ? to : from;
        max = to < from ? from : to;
        return( Math.floor( Math.random() * (max - min + 1 ) + min ) );
      }

      function showExercise( val ) 
      {
        document.getElementById( "question" ).innerHTML = exercise[val].question;
        for( var i = 0; i < 4; i++ )
        {
          var index = random( 0, 3 - i );
          console.log(index);
          document.getElementsByTagName( "label" )[i].innerHTML = exercise[val].answer[index];
          exercise[val].answer[index] = exercise[val].answer[3 - i];
        }
      }

      randV = random( 0, index );

      function validateInput()
      {
        var radio = document.getElementsByName( "choice" );
        for( var i = 0; i < radio.length; i++ )
        {
          if( radio[i].checked )
          {
            if( exercise[randV].answer[i] == exercise[randV].correctAnswer[0] )
            {
              alert("Right");
            }
            else
            {
              alert( "Wrong" );
            }
            break;
          }
        }
      }

      showExercise( randV );
    </script>

  </body>

</html>

最佳答案

代码中的问题是，您以随机顺序将可能的答案分配给单选按钮的标签，但将该单选按钮映射到它在答案数组中表示的答案的索引丢失了。

为了解决此问题，我对您的代码进行了最小的更改，以将映射存储在每个单选按钮的 value 属性中。然后，当用户做出选择并单击“检查”时，将检索所选单选按钮的映射并用于查找答案数组。

<html>
  <head>
    <title>Quizgame</title>
  </head>

  <body>

    <h1>Quizgame</h1>
    <form>
      <fieldset>
        <legend id="question">Quizgame</legend>
        <input type="radio" name="choice" id="1" value="1">
        <label for="1">Placeholder</label><br>
        <input type="radio" name="choice" id="2" value="2">
        <label for="2">Placeholder</label><br>
        <input type="radio" name="choice" id="3" value="3">
        <label for="3">Placeholder</label><br>
        <input type="radio" name="choice" id="4" value="4">
        <label for="4">Placeholder</label><br>
        <button onclick="validateInput()">Check</button>
      </fieldset>
    </form>

    <script type="text/javascript">

      var exercise = [];
      var index = 0;

      exercise[index] = {
        question:       "Convert this binary number 01000001 to a decimal number:",
        correctAnswer:  "65",
        answer:         [ "127", "33", "42", "65" ]
      };
      index++;
      exercise[index] = {
        question:       "How many combinations can you reach with 3 bits?",
        correctAnswer:  "8",
        answer:         [ "11", "9", "6", "8" ]
      };

      function random( from, to ) 
      {
        min = from > to ? to : from;
        max = to < from ? from : to;
        return( Math.floor( Math.random() * (max - min + 1 ) + min ) );
      }

      function showExercise( val ) 
      {
        document.getElementById( "question" ).innerHTML = exercise[val].question;
        for( var i = 0; i < 4; i++ )
        {
          var index = random( 0, 3 - i );
          console.log(index);
          document.getElementsByTagName( "label" )[i].innerHTML = exercise[val].answer[index];

          //Store the original index to the answer option in the 
          //value attribute of the radio button.
          document.getElementById((i+1).toString()).value = index.toString();
          exercise[val].answer[index] = exercise[val].answer[3 - i];
        }
      }

      randV = random( 0, index );

      function validateInput()
      {
        var radio = document.getElementsByName( "choice" );
        for( var i = 0; i < radio.length; i++ )
        {
          if( radio[i].checked )
          {
            //Retrieve the original index from the radio button
            // and use it to look up the answer array.
            var lOriginalIndex = document.getElementById((i+1).toString()).value;
            if( exercise[randV].answer[lOriginalIndex] == exercise[randV].correctAnswer)
            {

              alert("Right");
            }
            else
            {
              alert( "Wrong" );
            }
            break;
          }
        }
      }

      showExercise( randV );
    </script>

  </body>

</html>

关于javascript - 测验游戏选择在 Javascript 中无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31312430/

25 4 0
文章推荐： javascript - javascript(ECMAScript) 赋值运算符如何工作
文章推荐： javascript - 我必须在客户端创建记录吗？
文章推荐： javascript - 添加缓存文件 .appcache 停止 jquery ajax 调用
文章推荐： javascript - 带有 $http 请求的复选框 ng-click 上的 Angular JS 无限循环
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com