javascript - Method for randomly loading paired images -

i've created webpage many (over 100) paired flash cards question (image) flipping answer (image) when clicked. if possible able randomise order in question/answer pairs load each page load/refresh.

    <div class="content4column gap">   <div class="card-container">     <div class="card click" data-direction="left">       <div class="front">             <img src="intermolecular/q1.png" width="100%" height="100%" alt="">       </div>       <div class="back">             <img src="intermolecular/a1.png" width="100%" height="100%" alt=""> </div></div></div></div> 

try

var qapairs = []; var qatotal = 200;  // total numbers of qa pairs var qa = 20;  //number of qa pairs want. set qatotal include qa pairs while(qapairs.length != qa){   var rand = math.floor(math.random()*qatotal);   if(qapairs.indexof(rand) == -1){     qapairs.push(rand);     //  if want show them @ time     document.getelementsbyclassname("card click")[0].innerhtml = document.getelementsbyclassname("card click")[0].innerhtml + '<div class="front">\             <img src="intermolecular/q' + qapairs[i] + '.png" width="100%" height="100%" alt="" />\         </div>\         <div class="back">\             <img src="intermolecular/a' + qapairs[i] + '.png" width="100%" height="100%" alt="" />\         </div>';   } }  // if want show them 1 @ time var = 0; function updatecard(){   document.getelementsbyclassname("card click")[0].innerhtml = '<div class="front">\             <img src="intermolecular/q' + qapairs[i] + '.png" width="100%" height="100%" alt="" />\       </div>\       <div class="back">\             <img src="intermolecular/a' + qapairs[i] + '.png" width="100%" height="100%" alt="" />\       </div>';   i++; }