如何使用JavaScript创建数学问题生成器？_Javascript_Html

如何使用JavaScript创建数学问题生成器？

javascript html

如何使用JavaScript创建数学问题生成器？,javascript,html,Javascript,Html,我基本上是在尝试创建一个包含数学问题生成器的网站（针对2年级或3年级的学生），当我运行代码时，它会给我一切：问题、检查按钮、输出区域，但每当我输入实际答案时，它似乎总是告诉我答案是错误的，有人能帮我吗我把这个代码放在我在WordPress上的一个网站上代码如下： <!DOCTYPE HTML> <html lang="en"> <body> <div id="11question"></div&

我基本上是在尝试创建一个包含数学问题生成器的网站（针对2年级或3年级的学生），当我运行代码时，它会给我一切：问题、检查按钮、输出区域，但每当我输入实际答案时，它似乎总是告诉我答案是错误的，有人能帮我吗

我把这个代码放在我在WordPress上的一个网站上

代码如下：

<!DOCTYPE HTML> 
<html lang="en">

<body>
<div id="11question"></div>
<input id="answer">
<button id="check" onclick="check()">Check</button>
</body>


<script>
num5 = 500;
num6 = 500;

var operations = {
'+': function (num5, num6) {return num5 + num6;},
'-': function (num5, num6) {return num5 - num6;},
'x': function (num5, num6) {return num5 * num6;}
}
operations = ['+','-','x'][Math.min(Math.floor(Math.random()*3))];
accans= num5 + operations +  num6;
num5 = Math.floor(Math.random() * 10) + 1;
num6 = Math.floor(Math.random() * 10) + 1;
operations = ['+','-','x'][Math.min(Math.floor(Math.random()*3))];
accans= num5 + operations +  num6;
document.getElementById("11question").innerHTML = num5 + operations + num6;

function newquestion() {
    document.getElementById('answer').value = "";
    document.getElementById('answer').style.backgroundColor = "white";
    num5 = 500;
    num6 = 500;
    var operations = {
    '+': function (num5, num6) {return num5 + num6;},
    '-': function (num5, num6) {return num5 - num6;},
    'x': function (num5, num6) {return num5 * num6;}
    }
operations = ['+','-','x'][Math.min(Math.floor(Math.random()*3))];
    accans= num5 + operations +  num6;


    num5 = Math.floor(Math.random() * 10) + 1;
    num6 = Math.floor(Math.random() * 10) + 1;
    operations = ['+','-','x'][Math.min(Math.floor(Math.random()*3))];
    accans= num5 + operations + num6;


document.getElementById("11question").innerHTML = num5 + operations  + num6;
}


function check() {
    answer = document.getElementById('answer').value;
    if (accans == answer) {
        document.getElementById('answer').style.backgroundColor = "green";
        setTimeout(newquestion, 1500);
    }
    else if (accans != answer) {
        document.getElementById('answer').style.backgroundColor = "red";
        setTimeout(newquestion, 1500);
    }
}
</script>
</html>


检查
num5=500；
num6=500；
var操作={
“+”：函数（num5，num6）{返回num5+num6；}，
'-'：函数（num5，num6）{返回num5-num6；}，
“x”：函数（num5，num6）{返回num5*num6；}
}
操作=['+'、'-'、'x'][Math.min（Math.floor（Math.random（）*3））；
accans=num5+操作+num6；
num5=Math.floor（Math.random（）*10）+1；
num6=Math.floor（Math.random（）*10）+1；
操作=['+'、'-'、'x'][Math.min（Math.floor（Math.random（）*3））；
accans=num5+操作+num6；
document.getElementById（“11question”）.innerHTML=num5+operations+num6；
函数newquestion（）{
document.getElementById（'answer'）。value=“”；
document.getElementById（'answer'）.style.backgroundColor=“白色”；
num5=500；
num6=500；
var操作={
“+”：函数（num5，num6）{返回num5+num6；}，
'-'：函数（num5，num6）{返回num5-num6；}，
“x”：函数（num5，num6）{返回num5*num6；}
}
操作=['+'、'-'、'x'][Math.min（Math.floor（Math.random（）*3））；
accans=num5+操作+num6；
num5=Math.floor（Math.random（）*10）+1；
num6=Math.floor（Math.random（）*10）+1；
操作=['+'、'-'、'x'][Math.min（Math.floor（Math.random（）*3））；
accans=num5+操作+num6；
document.getElementById（“11question”）.innerHTML=num5+operations+num6；
}
函数检查（）{
answer=document.getElementById（'answer'）.value；
if（accans==应答）{
document.getElementById（'answer'）.style.backgroundColor=“绿色”；
setTimeout（newquestion，1500）；
}
else if（accans！=答案）{
document.getElementById（'answer'）.style.backgroundColor=“红色”；
setTimeout（newquestion，1500）；
}
}

在这里

函数newQuestion（）{
让val1；
让val2；
让我们回答；
让手术；
//将10更改为任意范围的数字
设tmp=[Math.ceil（Math.random（）*10），Math.ceil（Math.random（）*10）]；
tmp.sort（）；
开关（Math.round（Math.random（）*4））{
案例1：
//要防止小数点答案，请通过乘法创建问题
val2=tmp[1]；
答案=tmp[0]；
val1=val2*答案；
操作=“/”；
打破
案例2：
val1=tmp[0]；
val2=tmp[1]；
答案=val1*val2；
操作=“x”；
打破
案例3：
val1=tmp[0]；
val2=tmp[1]；
答案=val1+val2；
操作=“+”；
打破
案例4：
val1=tmp[1]；
val2=tmp[0]；
答案=val1-val2；
操作=“-”；
打破
违约：
返回newQuestion（）；
}
返回{val1，val2，应答，操作}；
}
document.getElementById（“btnChange”）.onclick=（）=>{
常量q=新问题（）；
//window.varname表示创建全局范围变量
window.currentQuestion=q；
document.getElementById(
“结果”
).innerText=`${q.val1}${q.operation}${q.val2}=…`；
};
//如果尚未单击，则创建问题
document.getElementById（“btnChange”）。单击（）；
document.getElementById（“btnCheck”）.onclick=（）=>{
if（document.getElementById（“输入”）.value==window.currentQuestion.answer）{
警惕（“右”）；
}否则{
警惕（“错误”）；
document.getElementById（“btnChange”）。单击（）；
}
};

变更问题
检查我已经重写了
标记之间的代码，因此它可以执行您想要的操作，如下所示。以下是你做错的主要事情：
您使用变量名operations
表示两种不同的内容：包含三个计算函数的对象，以及为给定计算选择的单个操作。我现在为后者命名为operationselected
，这样它们就不会互相覆盖

您没有使用在操作
对象中定义的函数来计算正确答案（accans
）。我使用新定义的operationselected
更改了计算，使其现在可以工作

有相当多的重复。我删除了很多做同样事情的行。这包括您可以在开始时自己调用newquestion（）
，而不是编写代码来创建两个新问题

您不必要地给出了num5
和num6
初始值

工作代码：
var operations = {
  '+': function (num5, num6) {return num5 + num6;},
  '-': function (num5, num6) {return num5 - num6;},
  'x': function (num5, num6) {return num5 * num6;}
}
var accans

newquestion()

function newquestion() {
    document.getElementById('answer').value = "";
    document.getElementById('answer').style.backgroundColor = "white";
    var num5 = Math.floor(Math.random() * 10) + 1;
    var num6 = Math.floor(Math.random() * 10) + 1;
    var operationChosen = ['+','-','x'][Math.min(Math.floor(Math.random()*3))];
    accans = operations[ operationChosen ]( num5, num6 )
    document.getElementById("11question").innerHTML = num5 + operationChosen + num6;
}

function check() {
    answer = document.getElementById('answer').value;
    if (accans == answer) {
        document.getElementById('answer').style.backgroundColor = "green";
        setTimeout(newquestion, 1500);
    }
    else if (accans != answer) {
        document.getElementById('answer').style.backgroundColor = "red";
        setTimeout(newquestion, 1500);
    }
}


var num1，num2，运算符
常数运算={
“+”：[“+”，（n，m）=>（n*1）+（m*1）]，//*1以防止1+1=11
“-”：[“-”，（n，m）=>n-m]，
“*”：[“x”，（n，m）=>n*m]
}
常量o=对象键（操作）
函数newQuestion（）{
document.getElementById（'answer'）.style.backgroundColor=“”
num1=Math.ceil（Math.random（）*10）
num2=Math.ceil（Math.random（）*10）
运算符=o[Math.floor（Math.random（）*o.length）]
document.getElementById（'11question'）。innerText=num1+operator+num2
}
函数检查（）{
var answer=document.getElementById（'answer'）
if（operations[operator][1]（num1，num2）=answer.value）{answer.style.backgroundColor=“green”}
else{answer.style.backgroundColor=“red”}
设置超时（新问题，1500）
}
newQuestion（）

检查
太好了。非常感谢。我还有一个问题，你建议我如何添加一个限制，不允许使用较小的数字-较大的数字（即4-9）。好吧，你想要的每个特定限制都需要自己的代码！因此，最简单的方法可能是将选择随机数的代码和操作分离到它们自己的函数中。你可以称之为func