How do I randomize multiple unordered lists within a randomized ordered list?

Question

I'm trying to make a test with randomized questions(randomize the ordered list) that contain randomized answers(randomize the unordered lists). I can get the ordered list to randomize, but I can only get one unordered list to randomize. The code only randomizes the first unordered list it finds. I would like to randomize all the unordered lists. Any help is appreciated.

<ol>
<li>What are the three main areas of the Standard User Interface?
  <ul type="none">
    <li><input type="radio" name="q1" value="0" />A. Header, Banner, Frame, Application Window</li>
    <li><input type="radio" name="q1" value="0" />B. Content Frame, Homepage, Form </li>
    <li><input type="radio" name="q1" value="1" />C. Application Navigator, Banner Frame, Content Frame </li>
    <li><input type="radio" name="q1" value="0" />D. None of the above</li>
  </ul>
</li>

<li>In the User interface, what is the gray toolbar called which allows you to add bookmarks?<br/>

  <ul type="none">
    <li><input type="radio" name="g2" value="0" />A. Gauge</li><br />
    <li><input type="radio" name="g2" value="1" />B. Edge</li><br />
    <li><input type="radio" name="g2" value="0" />C. Remedy</li><br />
    <li><input type="radio" name="g2" value="0" />D. Banner</li><br />
  </ul><br/>
</li>

<li>What can be captured in an update set?<br/>

  <ul type="none">
    <li><input type="radio" name="g3" value="0" />A. Modified CI Rules</li><br />
    <li><input type="radio" name="g3" value="1" />B. Business Rules</li><br />
    <li><input type="radio" name="g3" value="0" />C. Scheduled Jobs</li><br />
    <li><input type="radio" name="g3" value="0" />D. None of the above</li><br />
  </ul>
</li>

<li>What should you always do before you commit an update set?<br/>

  <ul type="none">
    <li><input type="radio" name="g4" value="1" />A. Preview</li><br />
    <li><input type="radio" name="g4" value="0" />B. Merge</li><br />
    <li><input type="radio" name="g4" value="0" />C. Ignore</li><br />
    <li><input type="radio" name="g4" value="0" />D. All of the above</li><br />
  </ul>
</li>

<li>Which of the following is a Business Rule best pratice?<br/>

  <ul type="none">
    <li><input type="radio" name="g5" value="1" />A. Make business rules small and specific</li><br />
    <li><input type="radio" name="g5" value="0" />B. Use of conditions is not necessary</li><br />
    <li><input type="radio" name="g5" value="0" />C. Global business rules should be used</li><br />
    <li><input type="radio" name="g5" value="0" />D. None of the above</li><br />
  </ul>
</li>

<li>Which of the following is a Client Script best practice?<br/>

  <ul type="none">
    <li><input type="radio" name="g6" value="0" />A. Use hard coded data</li><br />
    <li><input type="radio" name="g6" value="0" />B. Maximize server lookup</li><br />
    <li><input type="radio" name="g6" value="1" />C. Do not use g_form.getReference()</li><br />
    <li><input type="radio" name="g6" value="0" />D. All of the above</li><br />
  </ul>
 </li>

 <li>Which of the following are debugging features?<br/>


  <ul type="none">
    <li><input type="radio" name="g7" value="0"/>A. Debug Business Rule</li><br />
    <li><input type="radio" name="g7" value="0"/>B. Javascript</li><br />
    <li><input type="radio" name="g7" value="1"/>C. A and B</li><br />
    <li><input type="radio" name="g7" value="0"/>D. None of the above</li><br />
  </ul>
</li>


</ol>

Here is my randomization code:

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

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

    ul.parentNode.replaceChild(temp, ol); 
}

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

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

    ul.parentNode.replaceChild(temp, ul); 
}

Side note: Pretty bad practice if you randomize them and "All of the above" is third on the list. Would that include the fourth choice or not? Plus, aren't you going to then have A/B/C/D out of order? And then how do you get answers like "A and B" if you don't know which ones are going to be labeled those letters? — thumbtackthief
– thumbtackthief, Commented Feb 17, 2015 at 21:54
This is not complete there will be like 50 questions for now im just trying to figure out how randomize a bunch of lists, and i posted my code that i have to randomize. — TheNamesZero
– TheNamesZero, Commented Feb 17, 2015 at 22:01
In your first for loop you reference variable ul, instead of ol, which is already defined at that point. — Lori
– Lori, Commented Feb 17, 2015 at 22:27
If you use the radio button values like that the people taking the test will be able to lookup the correct answer from the inspector! :P — TRGWII
– TRGWII, Commented Feb 17, 2015 at 22:46

Community · Accepted Answer · 2017-05-23 11:57:02Z

1

document.querySelector() works for the ol element because there is only one. To capture the uls use querySelectorAll and loop through value of same. There is also a problem in that the parent nodes of ol and ul get lost. The parentNode.replaceChild... statements have to come after, not within, the for loops. In the loop over the querySelectorAll value, the parent node has to be backed up; see setting parent node in javascript

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

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

    }
    ol.parentNode.replaceChild(temp, ol); 

    var ul = document.querySelectorAll('ul'), parent;
    console.log("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]);
    }

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered Feb 17, 2015 at 23:14

Lori

1,4221 gold badge23 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TheNamesZero Over a year ago

Ah i see, thank you so much i would make sense to put the replaceChild after everything. Also did not know about the querySelectorAll() method.

Collectives™ on Stack Overflow

How do I randomize multiple unordered lists within a randomized ordered list?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related