Question

我创建了一个网页，其中包含许多（超过100个）配对闪存卡，问题（图片）在点击时翻转到答案（图片）。如果可能的话，我希望能够随机化每个页面加载/刷新时问题/答案对加载的顺序。

    <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>

Answer 1

尝试

var QAPairs = [];
var QATotal = 200;  // total numbers of QA pairs
var QA = 20;  //number of QA pairs you want. Set to QATotal to include all QA pairs
while(QAPairs.length != QA){
  var rand = Math.floor(Math.random()*QATotal);
  if(QAPairs.indexOf(rand) == -1){
    QAPairs.push(rand);
    //  If you want to show them all at a 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 you want to show them one at a time
var i = 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++;
}

随机加载配对图像的方法

1 个答案: