为测验生成器添加多项选项

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)

应该改组选项的顺序。

问题生成器代码：

＆＃13;

＆＃13;

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;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这应该可以解决问题。这是很多代码，以及它的外观基本框架。您必须更改特性和细节，使其适合您想要做的事情。如果您对正在做什么或如何修改它以适合您的代码有任何疑问，请告诉我们！

要注意的主要功能是randomAnswerGenerator。它接受正确的答案值作为参数，并返回一个包含随机生成的答案选项数组的对象，以及正确答案的索引。

我试着评论发生了什么以及你可能会改变什么。希望这有帮助。

＆＃13;

＆＃13;

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);
           }
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>