带有单选按钮 JavaScript 的随机测验

random quiz with radio buttons javascript

本文关键字：随机 JavaScript 单选按钮      更新时间：2023-09-26

我想执行以下操作。当用户访问我的页面时，我希望有一个提示，询问用户他们想要回答多少问题（从 1 到 10）。如果用户输入例如 5，则应显示 5 个随机选择的问题（可能为 10 个）。此外，不得有重复项。我想告诉你，我对javascript一点经验都没有。我已经做了一些事情，但我需要你关于数组的帮助。我在需要帮助的地方发表了评论。我也愿意接受其他方法。

谢谢

以带有 3 个问题的单选按钮为例的 HTML 代码

<html>
<head>

</head>
<title> Submitting information </title> </head>
<body>

 <form id="quiz">
 <br/>
 What's the capital of Bulgaria?
 <br>
 <input type="radio" name="q1" id="city1" value="Sofia"/>
               <label for="city1">Sofia</label> 
    <br>
 <input type="radio" name="q1" id="city2" value="Buchurest" />
               <label for="city2">Buchurest</label> <br>
 <input type="radio" name="q1" id="city3" value="Skopie" />
               <label for="city3">Skopie</label>
  <br> <br> <br>
     What's the capital of Mexico?
 <br>
 <input type="radio" name="q2" id="cit1" value="Mexico city"/>
               <label for="cit1">Mexico city</label>
    <br>
 <input type="radio" name="q2" id="cit2" value="Karakaz" />
               <label for="cit2">Karakaz</label> <br>
 <input type="radio" name="q2" id="cit3" value="Lisbon" />
               <label for="cit3">Lisbon</label>
       <br> <br> <br>
             Who's the current UK prime minister?
   <br>
  <input type="radio" name="q3" id="qq1" value="David Cameron"/>
               <label for="qq1">David Cameron</label>
    <br>
  <input type="radio" name="q3" id="qq2" value="Lloyd George" />
               <label for="qq2">Lloyd George</label> <br>
  <input type="radio" name="q3" id="qq3" value="Gordon Brown" />
               <label for="qq3">Gordon Brown</label>

  </p>
  </form>

 </body>
 </html>

这是一个棘手的部分。这是我的javascript代码：

 function randomInt(low, high) 
 // Given   : low <= high 
 // Returns : a random integer in the range [low, high] 
 { 
  return Math.floor(Math.random()*(high-low+1)) + low; 
 }          
        function randomOneOf(list) 
   // Given  : list is a nonempty list (array) 
   // Returns: a random item from the list 
    {    
     return list[randomInt(0, list.length-1)]; 
      }
    var global = prompt("Select No of questions which you want to be               
     displayed")
    // function to document.write specific No of random questions from a set of   
      questions  (between 1 and 10). 
    // For example user may prompt 5 random questions to be displayed out of 10 
    function result()
    {
        // create an array to store the quiz questions
        var arr = new Array();
        arr[0] = ??               //how to store the quiz questions??. 
      Maybe form('quiz').q1 or ??. Thanks
        arr[1] = ??
        arr[2] = ??
        .. // till 10
        // create another array to store the random number questions that 
      should appear
        var newarr = new Array();
        // finding the first random no.
        var s = function randomOneOf(arr)
        // add the first number to the new array of random numbers
        newarr.push(s);
        n = 1;
        // add the rest of the questions to the array depending on global 
     var (how many numbers of questions the user wants)
        while (n <= global)
            {
                // find the 2nd random Number
                n = function randomOneOf(arr)
                for (var i = 0; i < newarr.length; i++)
                   {
    // not allowing duplicates within the random numbers
                        if n.value != newarr[i]
                           {
                                newarr.push(n) 
                                n++
                            }
                   }                       
            }
            // displaying the random questions 
                for (var k = 0; k < newarr.length; k++)
                    {
                        for j = 0; j < arr.length; j++)
                            if (newarr[k] == arr[j])
                            {
                    document.write(newarr[k]);
                            }
                    }   
     }

你可以做这样的事情：

<b>Please enter the number of questions you would like to answer:</b> <input id='numQ' type='text'/>
<script>
    var quiz = {
        "questions": ["question1", ..., "question10"],
        "answerswers": [
            {"answerswers": ["a1", "a2", "a3", "a4"], "correct": 1}, 
            ..., 
            {"answerswers": ["a1", "a2", "a3", "a4"], "correct": 3}
        ]
    };
    //You may want to error check here for correct type (int) and non-null value
    var numQ = document.getElementById('numQ').value; 
    var questionsAsked = [];
    while (numQ >= 1) { //Not counting down to 0 because numQ is an inclusive value
        //Generate random number r from [0-9]
        if(questionsAsked.indexOf(r) > -1) {
            //this question has been used before, do nothing
        } else { //This question hasn't been used yet
            //Write to the page however you want quiz.questions[r]
            questionsAsked.push(r);
            --numQ;
        }
    }
</script>
相关文章：