0

我已经学习 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>

谢谢

4

2 回答 2

0

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

HTML附加：

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

}
于 2013-04-06T09:24:41.200 回答
0

您可以使用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并bubble显示div inp.

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

这是代码；

//variable to maintain the current answer
var curAns = 0;

//Here, I get all the DOMElements I will use 
var playBtn = document.getElementById('playBtn');

var bubble = document.getElementById('bubble');

var inp = document.getElementById('inp');
var ans = document.getElementById('ans');
var subBtn = document.getElementById('subBtn');

var feedback = document.getElementById('feedback');

//I add the event listeners
//This is equivalent to using 'onclick'
//in the HTML, and doing it this way is only
//my personal preference
playBtn.addEventListener('click', function() {userAnswer();}, false);
subBtn.addEventListener('click', function() {evalAnswer();}, false);

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

//This function will be executed when 'Play Now!' is clicked.
var userAnswer = function() {
    //Get two separate random numbers in
    //numb1 and numb2
    var numb1 = number();
    var numb2 = number();
    var symbol = '';

    var randomSymbol = Math.random();

    //Determine the operation to be used
    //and compute the corresponding correct answer for the current
    //question
    if (randomSymbol > 0.5)  {
        symbol = "+";
        curAns = numb1+numb2;
    } else {
        symbol = "-";
        curAns = numb1-numb2;
    }

    //Add math question to bubble
    bubble.innerHTML = 'What is ' + numb1 + ' ' + symbol + ' ' + numb2 + '?';
    feedback.innerHTML = '';

    //Make inp div visible
    inp.style.display = 'block';
    //Reset input value to ''
    ans.value = '';
};

//This function will be executed when 'Submit' is clicked
var evalAnswer = function() {
    //Simply compare input value with computed
    //answer and update feedback 
    if(parseInt(ans.value) !== curAns) {
        feedback.innerHTML = 'Wrong answer, try again!';
    }
    else {
        feedback.innerHTML = 'You got it right, congratulations!';
    }
};

这是一个工作示例。

希望有帮助！

于 2013-04-06T10:28:53.783 回答