Question

我有一个随机在屏幕上显示图片的代码：

<html>
<head>
<title>Test</title>

<script type="text/javascript">
  var imageURLs = [
       "www._.com/test.jpg" 
     , "www._.com/test.jpg"
     , "www._.com/test.jpg"
  ];
  function getImageTag() {
    var img = '<img src=\"';
    var randomIndex = Math.floor(Math.random() * imageURLs.length);
    img += imageURLs[randomIndex];
    img += '\" alt=\"Some alt text\"/>';
    return img;

  }
</script>


</head>
<body>
<script type="text/javascript">
  document.write(getImageTag());
</script>
</body>
</html>

每张照片都是数学问题。如何为每张图片分配不同的解决方案，并根据显示的图片放置一个输入框，用于检查输入与输入匹配的天气？

Answer 1

你可以这样试试..

<html>
<head>
<title>Test</title>

<script type="text/javascript">
    var imageURLs = [
    "1.png" 
    , "2.png"
    , "3.png"
    ];
    var answer = [  // create the answer array
    "brown" 
    , "blue"
    , "green"
    ];
    // make randomIndex global
    var randomIndex = Math.floor(Math.random() * imageURLs.length);

    // set image based on randomIndex
    function getImageTag() {
    var img = '<img src=\"';
    img += imageURLs[randomIndex];
    img += '\" alt=\"Some alt text\"/>';
    return img;
    }

    // check answer based on randomIndex
    function checkAnswer() {
    var ans = document.getElementById("in").value;
    if(ans == answer[randomIndex])
    alert("Hooray!");
    else
    alert("Try again");
    }
</script>


</head>
<body>
    <script type="text/javascript">
        document.write(getImageTag());
    </script>
    <br>
        <input type="text" id="in"/>
        <!-- Call checkAnswer() to verify-->
        <input type="submit" value="Go" onclick="checkAnswer()"/>
</body>
</html>

主要概念是这样的..

除了我们将随机索引设为全局变量
您正在根据存储在全局数组中的随机索引选择图像，类似地，我们根据以前以匹配方式存储在全局数组中的索引来选择答案。
每当用户给出答案时，我们都会使用之前的概念进行检查。

希望这能澄清我的所作所为。如果仍有疑惑，请发表评论。

HTML - 检查随机数学方程的正确答案

1 个答案: