frumbert/index.html

## index.html
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sort dom nodes</title>
</head>

<body>
  <p>Some typical markup. Input + Label, then a break. Super responsive, super accessible. We want to present them in random order but can't change the source because it is being injected by a black-box process as a template. Vanilla javascript can help us.</p>
  <p>Caveat: We don't want to sort the last element - we want that to remain in the last position. It has slightly different markup.</p>
  <p class="qn-question ">Please tell us why you haven't logged on?</p>

        <div class="qn-answer">
            <!-- Begin HTML generated template. -->
<input id="checkbox_74" value="74" name="q52[74]" type="checkbox"  />
<label for="checkbox_74"><p>I didn't have time</p>
</label>

<br />
<input id="checkbox_75" value="75" name="q52[75]" type="checkbox"  />
<label for="checkbox_75"><p>It didn't look applicable to me</p>
</label>

<br />
<input id="checkbox_76" value="76" name="q52[76]" type="checkbox"  />
<label for="checkbox_76"><p>I tried but had log in issues</p>
</label>

<br />
<input id="checkbox_77" value="77" name="q52[77]" type="checkbox"  />
<label for="checkbox_77"><p>I forgot about it</p>
</label>

<br />
<input id="checkbox_78" value="78" name="q52[78]" type="checkbox"  />
<label for="checkbox_78"><p>I wasn't interested in it</p>
</label>

<br />
<input id="checkbox_79" value="79" name="q52[79]" type="checkbox"  />
<label for="checkbox_79"><p>I don't need this kind of support</p>
</label>

<br />
<input id="checkbox_80" value="80" name="q52[80]" type="checkbox"  />
<label for="checkbox_80"><p>Other reason (please specify)</p>
</label>
<input size="25" name="q52[o80]" onclick="other_check(name)" value="" type="text" />
<br />
<!-- End HTML generated template. -->
          <script src="sort.js"></script>
  </div>
  </body>
</html>

## sort.js
// shuffle (fisher yates implementation)
function fy(a,b,c,d){c=a.length;while(c)b=Math.random()*c--|0,d=a[c],a[c]=a[b],a[b]=d}

// remove html comment nodes (optional)
for (node of document.querySelector(".qn-answer").childNodes) if (node.nodeType === Node.COMMENT_NODE) node.parentNode.removeChild(node);

// variables
let ar = [], tmp = [];
let pool = document.querySelector('.qn-answer');

// step through ELEMENTS (not nodes)
for (child of pool.children) {

    // split on each BR.
    // we want to also capture the last element
    if (child === pool.lastElementChild || child.nodeName === 'BR') {
        ar.push(tmp.join('')); // build html string of elements captured so far
        tmp = []; // reset for next iteration
    } else {
        tmp.push(child.outerHTML); // remember the current element
    }
}

let last = ar.pop(); // remove and remember the last item
fy(ar); // shuffle array of strings
ar.push(last); // and replace the last item

pool.innerHTML = ar.join('<br />'); // replace the source with the updated html
	<!doctype html>

	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>sort dom nodes</title>
	</head>

	<body>
	<p>Some typical markup. Input + Label, then a break. Super responsive, super accessible. We want to present them in random order but can't change the source because it is being injected by a black-box process as a template. Vanilla javascript can help us.</p>
	<p>Caveat: We don't want to sort the last element - we want that to remain in the last position. It has slightly different markup.</p>
	<p class="qn-question ">Please tell us why you haven't logged on?</p>

	<div class="qn-answer">
	<!-- Begin HTML generated template. -->
	<input id="checkbox_74" value="74" name="q52[74]" type="checkbox" />
	<label for="checkbox_74"><p>I didn't have time</p>
	</label>

	<br />
	<input id="checkbox_75" value="75" name="q52[75]" type="checkbox" />
	<label for="checkbox_75"><p>It didn't look applicable to me</p>
	</label>

	<br />
	<input id="checkbox_76" value="76" name="q52[76]" type="checkbox" />
	<label for="checkbox_76"><p>I tried but had log in issues</p>
	</label>

	<br />
	<input id="checkbox_77" value="77" name="q52[77]" type="checkbox" />
	<label for="checkbox_77"><p>I forgot about it</p>
	</label>

	<br />
	<input id="checkbox_78" value="78" name="q52[78]" type="checkbox" />
	<label for="checkbox_78"><p>I wasn't interested in it</p>
	</label>

	<br />
	<input id="checkbox_79" value="79" name="q52[79]" type="checkbox" />
	<label for="checkbox_79"><p>I don't need this kind of support</p>
	</label>

	<br />
	<input id="checkbox_80" value="80" name="q52[80]" type="checkbox" />
	<label for="checkbox_80"><p>Other reason (please specify)</p>
	</label>
	<input size="25" name="q52[o80]" onclick="other_check(name)" value="" type="text" />
	<br />
	<!-- End HTML generated template. -->
	<script src="sort.js"></script>
	</div>
	</body>
	</html>
	// shuffle (fisher yates implementation)
	function fy(a,b,c,d){c=a.length;while(c)b=Math.random()*c--\|0,d=a[c],a[c]=a[b],a[b]=d}

	// remove html comment nodes (optional)
	for (node of document.querySelector(".qn-answer").childNodes) if (node.nodeType === Node.COMMENT_NODE) node.parentNode.removeChild(node);

	// variables
	let ar = [], tmp = [];
	let pool = document.querySelector('.qn-answer');

	// step through ELEMENTS (not nodes)
	for (child of pool.children) {

	// split on each BR.
	// we want to also capture the last element
	if (child === pool.lastElementChild \|\| child.nodeName === 'BR') {
	ar.push(tmp.join('')); // build html string of elements captured so far
	tmp = []; // reset for next iteration
	} else {
	tmp.push(child.outerHTML); // remember the current element
	}
	}

	let last = ar.pop(); // remove and remember the last item
	fy(ar); // shuffle array of strings
	ar.push(last); // and replace the last item

	pool.innerHTML = ar.join('<br />'); // replace the source with the updated html