Question

我已经学习了几周的HTML / CSS / JavaScript，现在我正在练习一个迷你项目，其中包括让人们回答数学问题，并验证他们的答案。

我目前的进展可以在http://dany.faceflow.com

看到

我知道我可能没有使用最好的策略来开发这个迷你游戏，所以任何建议对此都有用。但是现在问题是我通过JS提示用变量获取用户答案，我想通过HTML表单（不那么烦人）来做。

在我的源代码中，您可以在函数中看到这一行：

var userInput = prompt(numb1 + symbol + numb2);

然后，仍然在同一个函数中，我有一个if / else结构来比较用户的答案和正确的答案。代码工作，我只是不知道如何使提示基于HTML的代替。我已经尝试了一个带有ID的html表单，并在JS中使用getElementById，document.write和其他一些东西，但我从来没有让它为那部分工作。

（这是所有的JS）

var number1 = function() {
    var numb1 = Math.floor(Math.random() * 41) + 10;
    return numb1;
}

var number2 = function() {
    var numb2 = Math.floor(Math.random() * 41) + 10;
    return numb2;
}


var userAnswer = function() {
    var numb1 = number1();
    var numb2 = number2();

    var randomSymbol = Math.random();

    if (randomSymbol > 0.5)  {
        var symbol = "+";
    } else {
        var symbol = "-";
    }

    // add the math question in the html bubble
    document.getElementById('bubble').innerHTML = numb1 + symbol + numb2;

    // Prompts the user to give an answer. Change this to HTML.
    var userInput = prompt(numb1 + symbol + numb2);

    //var userInput = document.getElementById('tw').value;


    if (symbol == "+" && userInput == (numb1 + numb2)) {
        document.getElementById('feedback').innerHTML = "Congratulations!";
    } else if (symbol == "+" && userInput !== (numb1 + numb2)) {
        document.getElementById('feedback').innerHTML = "Wrong!";
    } else if (symbol == "-" && userInput == (numb1 - numb2)) {
        document.getElementById('feedback').innerHTML = "Congratulations!";
    } else if (symbol == "-" && userInput !== (numb1 - numb2)) {
        document.getElementById('feedback').innerHTML = "Wrong!";
    } else {
        alert("Something wrong happened. Try again.");
    }

    return userInput;
}

（HTML）

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="css/stylesheet.css" />
        <script src="js/script.js"></script>
        <title>Improve Your Math Skills!</title>
    </head>

    <body>
        <center>

        <button onclick="userAnswer()">PLAY NOW!</button>

        <div id="bubble"></div>

        <div id="feedback"></div>


        <!-- <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> -->
        </center>
    </body>     
</html>

谢谢

Answer 1

我从您的问题中理解的是，您需要在HTML本身中使用相同的功能，而不是在提示框中由JS驱动，如果是这样，以下对代码的添加应该有所帮助：

HTML adition：

<div id="bubble"></div>
<div id="check_ans_div" style="display:none;">
  <input type="text" id="txt_answer" />
  <input type="submit" value="Check Answer" onclick="checkanswer()" />
</div>
<div id="feedback"></div>

JS改变：

    var number1 = function() {
        var numbx = Math.floor(Math.random() * 41) + 10;
        return numbx;
    }        
    var number2 = function() {
        var numby = Math.floor(Math.random() * 41) + 10;
        return numby;
    }
    var numb1=0; var numb2=0;
    var userAnswer = function() {
       numb1 = number1();
       numb2 = number2();

        var randomSymbol = Math.random();

        if (randomSymbol > 0.5)  {
            var symbol = "+";
        } else {
            var symbol = "-";
        }

        // add the math question in the html bubble
        document.getElementById('bubble').innerHTML = numb1 + symbol + numb2;
        if(document.getElementById('check_ans_div').style.display=='none') 
           document.getElementById('check_ans_div').style.display='block'; 
        document.getElementById('txt_answer').value='';

    }

function checkanswer(){

      var userInput= document.getElementById('txt_answer').value;
      if (symbol == "+" && userInput == (numb1 + numb2)) {
            document.getElementById('feedback').innerHTML = "Congratulations!";
        } else if (symbol == "+" && userInput !== (numb1 + numb2)) {
            document.getElementById('feedback').innerHTML = "Wrong!";
        } else if (symbol == "-" && userInput == (numb1 - numb2)) {
            document.getElementById('feedback').innerHTML = "Congratulations!";
        } else if (symbol == "-" && userInput !== (numb1 - numb2)) {
            document.getElementById('feedback').innerHTML = "Wrong!";
        } else {
            alert("Something wrong happened. Try again.");
        }

}

Answer 2

您可以使用input标记代替提示。像在Dinesh的回答中一样更改HTML;

<div id="bubble"></div>
<div id="inp" style="display: none;">
    <input type="text" id="ans"></input>&nbsp;<button id="subBtn">Submit</button>
</div>
<div id="feedback"></div>

现在，对于JavaScript，需要考虑一些事项。首先，你有

var number1 = function() {
    var numb1 = Math.floor(Math.random() * 41) + 10;
    return numb1;
}

var number2 = function() {
    var numb2 = Math.floor(Math.random() * 41) + 10;
    return numb2;
}

这两个功能完全相同;你不需要两个单独的函数来获得两个单独的随机数。所以，只有一个功能就足够了。

var number = function() {
    return Math.floor(Math.random() * 41) + 10;
};

其次，现在我们有两个功能。 userAnswer在“立即播放”时发布新问题！点击，例如，evalAnswer来评估点击“提交”时输入字段中写的答案。

在userAnswer中，您生成两个新的随机数，并确定将对它们进行哪些操作。此时，您可以自己简单地评估答案并将其存储在全局变量中。当您评估答案时，这会使事情变得更容易，您只需要进行简单的比较。

除此之外，您更新innerHTML的{{1}}并显示bubble div。

在inp中，您从evalAnswer获取值，并将其与先前计算的当前答案值进行比较，然后相应地更新ans。

这是代码;

feedback.innerHTML

<强> Here's a working example

希望有所帮助！

使用JS提示变量 - 如何通过HTML表单进行创建？

2 个答案: