简体   繁体   English

单选按钮javascript随机测验

[英]random quiz with radio buttons javascript

I want to do the following. 我要执行以下操作。 When a user visits my page I want to have a prompt asking the user how many questions they want to take (from 1 till 10). 当用户访问我的页面时,我想提示您询问他们要回答多少个问题(从1到10)。 If the user enters eg 5 then 5 randomly selected questions should be displayed (out of 10 possible). 如果用户输入例如5个,则应显示5个随机选择的问题(可能的10个问题)。 Also, there must be no duplicates. 另外,不得重复。 I would like to inform you that I am not experienced in javascript at all. 我想通知您,我完全没有使用javascript的经验。 I have done something but I need your help about the arrays. 我已经做了一些事情,但是我需要您的有关数组的帮助。 I have put a comment where I need help. 我在需要帮助的地方发表了评论。 I am also open for other ways on how to do that. 我也对其他方法持开放态度。

Thanks 谢谢

html code with 3 questions radio buttons as an example 以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>

And here is a tricky part. 这是一个棘手的部分。 That's my javascript code: 那是我的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]);
                            }

                    }   
     }  

You could do something like: 您可以执行以下操作:

<b>Please enter the number of questions you would like to answer:</b> <input id='numQ' type='text'/>

<script>
    var quiz = {
        "questions": ["question1", ..., "question10"],
        "answers": [
            {"answers": ["a1", "a2", "a3", "a4"], "correct": 1}, 
            ..., 
            {"answers": ["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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM