爲測驗生成器添加多項選項

Question

我有一個乘法測驗，可以保持得分並跟蹤用戶完成測驗所需的時間。

我想將我的問題生成器添加到此代碼。

發電機應拉從陣列和隨機數信息，以創建像這樣的例子問題：

Question: 
Cinnamon has 2 pizza. 
Sammy has 6 more. 
What is the total amount they have altogether? 

Answer: 
10 

這個問題需要從一個隨機名稱陣列的名稱和數量由隨機數。

我能夠計算出答案，但我想在多項選擇選項中顯示答案。

我想使用隨機數字添加到答案給出錯誤的答案選項。

實施例：

Question: 
Cinnamon has 2 pizza. 
Sammy has 6 more. 
What is the total amount they have altogether? 

Option list:  
A) (correct answer)10 + random number (wrong option) 
B) (correct answer)10 - random number (wrong option) 
C) Correct answer 10 
D)(correct answer)10 + random number (wrong option) 

的選項的順序應該被混洗。

代碼問題產生：

var myName = ['Beth', 'Chris', 'Carl', 'April', 'Cinnamon']; 
 
var myMoreNames = ['Sammy', 'Dan', 'Devron', 'Livron', 'Paul']; 
 
var myamount = ['twice as many', 'half', 'three times as many']; 
 

 
var myfood = ['pizza', 'steak', 'pies', 'cookies', 'brownies']; 
 

 
var rand = Math.floor(Math.random() * myName.length); 
 
var rand2 = Math.floor(Math.random() * myfood.length); 
 
var rand3 = Math.floor(Math.random() * myMoreNames.length); 
 
var rand4 = Math.floor(Math.random() * myamount.length); 
 

 
var concat = myName[rand]; 
 
var concat2 = myfood[rand2]; 
 
var concat3 = myMoreNames[rand3]; 
 
var concat4 = myamount[rand4]; 
 

 
num1 = parseInt(Math.random() * 20) + 1; 
 
num2 = parseInt(Math.random() * 20) + 1; 
 

 
theSum = parseInt(num1) + parseInt(num2) + parseInt(num1); 
 

 
var randomnumber = Math.floor(Math.random() * 10) + 4;; 
 
var randomnumber2 = Math.floor(Math.random() * 20) + 10; 
 

 
document.getElementById("demo").innerHTML = (concat) + " has " + num1 + " " + (concat2) + ". " + (concat3) + " " + " " + " has " + num2 + " " + " more. What is the total amount they have altogether? " + theSum;

<p id="demo"></p>

Answer 1

這應該做的伎倆。這是很多代碼，以及它看起來的基本框架。你必須改變特性和細節，以適應你想要做的事情。如果您對什麼是在做什麼或如何修改以適合您的代碼有任何疑問，請告訴我！

要注意的主要功能是randomAnswerGenerator。它接受正確的答案值作爲參數，並返回一個包含隨機生成答案選項數組的對象，以及正確答案的索引。

我試圖評論發生了什麼以及您可能會改變什麼。希望這有助於。

function randomAnswerGenerator(answer){ 
 
    var answerChoices = []; 
 
    var correctAnswerIndex = Math.floor(Math.random() * 4); 
 
    
 
    var checkUnique = function(val){ //Let's put function here for readability 
 
     for(var i = 0; i < answerChoices.length; i ++){ 
 
      if(answerChoices[i] == val){ 
 
       return false; 
 
      } 
 
     } 
 
     return true; 
 
    } 
 
    
 
     for(var i = 0; i < 4; i ++){ 
 
     if(i == correctAnswerIndex){ //If this is the index for the correct answer, put correct answer here 
 
      answerChoices.push(answer); 
 
     } 
 
     else{ 
 
      var newAnswer = -1; 
 
      do{ 
 
      var randOpt = Math.floor(Math.random() * 2); //Should we add or subtract the random number 
 
      var randBase = Math.floor(Math.random() * 5) + 1; //Plus 1 so it doesn't equal zero. Change the 5 to modify how much the generated answers will differ from the real answer 
 
       if(randOpt == 0){ //Add 
 
        newAnswer = answer + randBase; 
 
       } 
 
       else{ //Subtract 
 
        newAnswer = answer - randBase; 
 
       } 
 
      } while(!checkUnique(newAnswer)) //Make sure wrong answer doesn't conflict with any other answers 
 
      answerChoices.push(newAnswer); //Add new fake answer to list 
 
     } 
 
     } 
 
    var returnData = { 
 
     answerChoices: answerChoices, 
 
     correctIndex: correctAnswerIndex 
 
    } 
 
    return returnData; 
 
    } 
 
    
 
    function generateList(){ 
 
    var parent = document.getElementById("main"); 
 
     while (parent.firstChild) { //Just clearing the list everytime a new one is generated 
 
      parent.removeChild(parent.firstChild); 
 
     }  
 
    
 
    var data = randomAnswerGenerator(10); 
 
    var answerChoices = data.answerChoices; 
 
    var correctIndex = data.correctIndex; 
 
      for(var i = 0; i < answerChoices.length; i ++){ 
 
       var div = document.createElement('div'); 
 
       div.innerHTML = answerChoices[i]; 
 
       if(i == correctIndex){ 
 
        div.setAttribute('class','correctChoice') //Do whatever you want here to identify the correct answer 
 
       } 
 
       parent.appendChild(div); 
 
      } 
 
    }

<div onclick='generateList()'> Click to generate answer </div> 
 
<div id="main"></div>

Answer 2

解決方案集成到你的代碼。我作爲一個單獨的答案發布，因爲其他答案更重要，因爲它包含了針對您的問題的邏輯和解釋。

var myName = ['Beth', 'Chris', 'Carl', 'April', 'Cinnamon']; 
 
var myMoreNames = ['Sammy', 'Dan', 'Devron', 'Livron', 'Paul']; 
 
var myamount = ['twice as many', 'half', 'three times as many']; 
 

 
var myfood = ['pizza', 'steak', 'pies', 'cookies', 'brownies']; 
 

 
var rand = Math.floor(Math.random() * myName.length); 
 
var rand2 = Math.floor(Math.random() * myfood.length); 
 
var rand3 = Math.floor(Math.random() * myMoreNames.length); 
 
var rand4 = Math.floor(Math.random() * myamount.length); 
 

 

 
var concat = myName[rand]; 
 
var concat2 = myfood[rand2]; 
 
var concat3 = myMoreNames[rand3]; 
 
var concat4 = myamount[rand4]; 
 

 

 
num1 = parseInt(Math.random() * 20) + 1; 
 
num2 = parseInt(Math.random() * 20) + 1; 
 

 

 
theSum = parseInt(num1) + parseInt(num2) + parseInt(num1); 
 

 

 
function randomAnswerGenerator(answer){ 
 
    var answerChoices = []; 
 
    var correctAnswerIndex = Math.floor(Math.random() * 4); 
 
    
 
    var checkUnique = function(val){ //Let's put function here for readability 
 
     for(var i = 0; i < answerChoices.length; i ++){ 
 
      if(answerChoices[i] == val){ 
 
       return false; 
 
      } 
 
     } 
 
     return true; 
 
    } 
 
    
 
     for(var i = 0; i < 4; i ++){ 
 
     if(i == correctAnswerIndex){ //If this is the index for the correct answer, put correct answer here 
 
      answerChoices.push(answer); 
 
     } 
 
     else{ 
 
      var newAnswer = -1; 
 
      do{ 
 
      var randOpt = Math.floor(Math.random() * 2); //Should we add or subtract the random number 
 
      var randBase = Math.floor(Math.random() * 5) + 1; //Plus 1 so it doesn't equal zero. Change the 5 to modify how much the generated answers will differ from the real answer 
 
       if(randOpt == 0){ //Add 
 
        newAnswer = answer + randBase; 
 
       } 
 
       else{ //Subtract 
 
        newAnswer = answer - randBase; 
 
       } 
 
      } while(!checkUnique(newAnswer)) //Make sure wrong answer doesn't conflict with any other answers 
 
      answerChoices.push(newAnswer); //Add new fake answer to list 
 
     } 
 
     } 
 
    var returnData = { 
 
     answerChoices: answerChoices, 
 
     correctIndex: correctAnswerIndex 
 
    } 
 
    return returnData; 
 
    } 
 

 

 
document.getElementById("demo").innerHTML = (concat) + " has " + num1 + " " + (concat2) + ". " + (concat3) + " " + " " + " has " + num2 + " " + " more. What is the total amount they have altogether? "; 
 

 

 
var randAnswers = randomAnswerGenerator(theSum); 
 

 
for(var i = 0; i < randAnswers.answerChoices.length; i ++){ //Can definitely clean this up. Fine for now, but not best way 
 
    document.getElementById("demo").appendChild(document.createElement("br")); 
 
    var but = document.createElement('input'); 
 
    var label = document.createElement('label'); 
 
    var div = document.createElement('div'); 
 
    but.setAttribute('type','checkbox'); 
 
    label.textContent = randAnswers.answerChoices[i]; 
 
    div.appendChild(but); 
 
    div.appendChild(label); 
 
    document.getElementById("demo").appendChild(div); 
 
}

<div id="demo"></div>