我如何得到一个有序列表,随机吐出一些列表

时间:2015-03-03 14:16:56

标签: javascript html

我有一个列表,随机显示测试中的所有问题,但我试图只有一些测试显示。

我尝试缩短列表的长度并以这种方式输出,但它仍然会使所有列表失效。任何帮助表示赞赏。

HTML

<!-- There are 40 questions but only want 30 to dislpay -->

<ol>
   <li >
      <p id = "question 1">What are the three main areas of the Standard User Interface?</p>
      <ul type="none">
         <li><input type="radio" name="q1" value="0"  /> Header, Banner, Frame, Application Window</li>
         <li><input type="radio" name="q1" value="0"  /> Content Frame, Homepage, Form </li>
         <li><input type="radio" name="q1" value="1"  /> Application Navigator, Banner Frame, Content Frame </li>
         <li><input type="radio" name="q1" value="0"  /> Larry, Moe, and Curly</li>
      </ul>
   </li>
   <li>
      <p id = "question 2">In the  User interface, what is the gray toolbar called which allows you to add bookmarks?</p>
      <ul type="none">
         <li><input type="radio" name="q2" value="0" /> Gauge</li>
         <li><input type="radio" name="q2" value="1" /> Edge</li>
         <li><input type="radio" name="q2" value="0" /> Remedy</li>
         <li><input type="radio" name="q2" value="0" /> Banner</li>
      </ul>
   </li>
   <li>
      <p id = "question 3">What can be captured in an update set?</p>
      <ul type="none">
         <li><input type="radio" name="q3" value="0" /> Modified CI Rules</li>
         <li><input type="radio" name="q3" value="1" /> Business Rules</li>
         <li><input type="radio" name="q3" value="0" /> Scheduled Jobs</li>
         <li><input type="radio" name="q3" value="0" /> None of these</li>
      </ul>
   </li>
</ol>

的JavaScript

// Function that randomizes the test questions that are displayed along 
// with the answers as soon as the page loads

function call_onLoad() {

    var ol = document.querySelector('ol');
    temp = ol.cloneNode(true);

    for (var i = temp.children.length - 10; i >= 0; i--;) {
        temp.appendChild(temp.children[Math.random() * i | 0]);
        alert(temp.children.length);

    }

    ol.parentNode.replaceChild(temp, ol);

    var ul = document.querySelectorAll('ul'),
        parent;
    alert("found " + ul.length + " ul's");

    for (var k = ul.length - 1; k >= 0; k--) {
        parent = ul[k].parentNode;
        temp = ul[k].cloneNode(true);

        for (var i = temp.children.length + 1; i--;) {
            temp.appendChild(temp.children[Math.random() * i | 0]);

        }

        parent.replaceChild(temp, ul[k]);
    }

}

1 个答案:

答案 0 :(得分:0)

我想出了如何将问题随机化,只输出我想要的东西。我只是把if(i&gt; = 30){            temp.removeChild(temp.children [Math.random()* i | 0])                     在用于附加问题列表的for循环中,它可以工作。不确定这是否是最佳方式,但它是否有效。

function call_onLoad() {

var ol = document.querySelector('ol');
temp = ol.cloneNode(true);

for (var i = temp.children.length - 10; i >= 0; i--;) {
    temp.appendChild(temp.children[Math.random() * i | 0]);
    alert(temp.children.length);
       if(i>=30){
            temp.removeChild(temp.children[Math.random() * i| 0])
                }
}

ol.parentNode.replaceChild(temp, ol);

var ul = document.querySelectorAll('ul'),
    parent;
alert("found " + ul.length + " ul's");

for (var k = ul.length - 1; k >= 0; k--) {
    parent = ul[k].parentNode;
    temp = ul[k].cloneNode(true);

    for (var i = temp.children.length + 1; i--;) {
        temp.appendChild(temp.children[Math.random() * i | 0]);

    }

    parent.replaceChild(temp, ul[k]);
}

}