Skip to content

Instantly share code, notes, and snippets.

@frumbert
Created November 14, 2022 22:35
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save frumbert/13f63c40eb7c08870b3ff35925ad0abc to your computer and use it in GitHub Desktop.
Randomise all-except-last dom input elements with labels
<!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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment