Javascript JS加法游戏：我如何显示4个可能的答案，其中3个是随机的，1个是正确的答案？（包括代码笔）

我正在用JS构建一个游戏。游戏规则很简单：你被问到（num1）+（num2）等于什么（正如你在代码笔中看到的）

在游戏中，你有4种可能的选择来回答问题

我们陷入困境，我现在正在创建那些可能的选项：我想显示三个假随机数和一个正确的和

我的JS：

var num1 = Math.floor((Math.random() * 30) + 10);
var num2 = Math.floor((Math.random() * 30) + 10);
var result = num1 + num2;

document.getElementById('field1').innerHTML = num1;
document.getElementById('field2').innerHTML = num2;

var options = {
    option1: document.getElementById('option1'),
    option2: document.getElementById('option2'),
    option3: document.getElementById('option3'),
    option4: document.getElementById('option4'),
}

这是我的密码笔：

我该怎么做

---

我很感激所有的答案

解决方案有点复杂，描述每一行需要很长时间，所以如果有什么不清楚的地方，请随时询问。需要说明的是，卡片上的数字顺序也是随机生成的。这是：

函数洗牌（o）{
对于（var j，x，i=o.length；i；j=parseInt（Math.random（）*i），x=o[--i]，o[i]=o[j]，o[j]=x）；
返回o；
};
函数startName（）{
var num1=数学地板（（数学随机（）*30）+10）；
var num2=数学楼层（（数学随机（）*30）+10）；
var结果=num1+num2；
var-otherNumbers=[]；
var计数器=0；
document.getElementById（'field1'）。innerHTML=num1；
document.getElementById（'field2'）。innerHTML=num2；
变量选项={
选项1:document.getElementById（'option1'），
选项2:document.getElementById（'option2'），
选项3:document.getElementById（'option3'），
选项4:document.getElementById（'option4'），
}
函数生成器域编号（）{
对于（变量i=0；计数器<3；i++）{
var num=Math.floor（（Math.random（）*30）+10）；
if（num！==结果和计数器<3）{
计数器++；
otherNumbers.push（num）；
}否则{
GeneratorDomainNumber（）；
}
}
}
GeneratorDomainNumber（）；
其他数字。推送（结果）；
otherNumbers=随机播放（otherNumbers）；
var arrCount=otherNumbers.length-1；
for（变量输入选项）{
如果（arrCount>=0）{
选项[key].innerHTML=otherNumbers[arrCount]；
计数--；
}
}
}
startGame（）
.App{
文本对齐：居中；
}
.应用程序徽标{
动画：应用程序徽标旋转无限20秒线性；
高度：60px；
}
.应用程序标题{
背景色：#222；
高度：180像素；
填充：20px；
颜色：白色；
}
.应用程序介绍{
字体大小：大号；
}
@关键帧应用程序徽标旋转{
从{变换：旋转（0度）；}
到{变换：旋转（360度）；}
}
.文本信息{
颜色：#fff；
字体大小：粗体；
字号：2.1rem；
}
.问题{
字号：2rem；
}
.选项{
利润率：5%；
显示器：flex；
右边距：-12px；
左边距：-12px；
弯曲方向：行；
柔性包装：包装；
对齐项目：拉伸；
弹性：10自动；
}
.菲尔德{
显示器：flex；
填充：12px；
弯曲方向：立柱；
调整内容：灵活启动；
对齐项目：拉伸；
弹性：1；
}
.字段块{
显示器：flex；
最小高度：160px；
填充：10%；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
/*弹性：10自动*/
边界半径：4px；
背景色：#f9bad0；
字号：6rem；
颜色：#fff；
光标：指针；
}
.测验{
颜色：#ddd；
利润率：2%；
背景色：#ec1561；
填充：2%；
宽度：90%；
位置：相对位置；
}
.按钮{
显示器：flex；
高度：48px；
右边填充：16px；
左侧填充：16px；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
flex:0自动；
边界半径：4px；
背景色：#2fcaaa；
盒影：0 1px 3px 0 rgba（0,0,0.05），0 2px 12px 0 rgba（0,0,0,1）；
过渡：框阴影200ms缓解；
颜色：#fff；
字号：500；
文本对齐：居中；
光标：指针；
}
.测验.之后{
位置：绝对位置；
最高：5%；
左：5%；
宽度：90%；
身高：80%；
/*显示：无*/
颜色：#FFF；
文本对齐：居中；
对齐项目：居中；
证明内容：中心；
显示器：flex；
不透明度：0.8；
字体大小：3rem；
}
.对{
背景颜色：绿色；
}
.错了{
背景色：#D91E18；
}
.隐藏{
显示：无！重要；
}

添加2个数字|快乐学习！
添加游戏
在本节课中，我们将介绍添加2个数字的游戏

5和5的和是多少？
10
10
10
10
再玩一次
以下是一个您可以参考的解决方案


document.addEventListener（“DOMContentLoaded”，函数（事件）{
var num1=数学地板（（数学随机（）*30）+10）；
var num2=数学楼层（（数学随机（）*30）+10）；
var结果=num1+num2；
document.getElementById（'field1'）。innerHTML=num1；
document.getElementById（'field2'）。innerHTML=num2；
var opts=[]；
对于（var i=0；i，根据我的评论，您需要重新运行该数字生成器，为其余3个选项生成新的和不正确的答案。您需要注意以下几点：

您必须避免冲突，即不要生成与答案相同的数字，或与任何预生成的错误选项相同的数字。我们可以使用
while
循环进行此简单检查
您可以使用泛型函数生成
num1
+
num2
，以便再次使用该函数生成错误答案
不要给选项提供唯一的ID，只需给它们一个泛型类，例如
。我们希望能够知道我们有多少个选项，以便生成正确数量的答案+不正确的答案
在将它们附加到DOM之前，您可能希望先添加它们，否则它们都将具有包含正确答案的第一个元素
旁注：虽然您的原始答案中没有提到，但我希望您想知道，当u
var num1 = Math.floor((Math.random() * 30) + 10);
var num2 = Math.floor((Math.random() * 30) + 10);
var result = num1 + num2;

var ansIndex=(Math.floor((Math.random()*10))%4)+1; //this index will be the position of the correct answer

var option=[];

//the below loop fills the options array with random but unique options
for(var i=0;i<4;i++){
   var temp=Math.floor((Math.random() * 30) + 10);
   if(final.indexOf(temp)==(-1)){
        option.push(temp);
        continue;
   }
   else{
        i--;
   }
}

//finally the correct option is overwritten
option[ansIndex-1]=result;


var answer=document.getElementsByClassName("field-block");
answer[0].innerHTML=option[0];
answer[1].innerHTML=option[1];
answer[2].innerHTML=option[2];
answer[3].innerHTML=option[3];



document.getElementById('field1').innerHTML = num1;
document.getElementById('field2').innerHTML = num2;