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

あなたの質問から私が理解しているのは、プロンプト ボックスで JS によって駆動されるのではなく、HTML 自体で同じ機能が必要であるということです。そうであれば、コードへの以下の追加が役立ちます。

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

どちらの関数もまったく同じことを行います。2 つの別々の乱数を取得するために 2 つの別々の関数は必要ありません。したがって、機能は 1 つだけで十分です。

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

次に、2 つの関数があります。userAnswer「今すぐプレイ!」時に新しい質問を投稿するには がクリックされ、たとえば、evalAnswer「送信」がクリックされたときに入力フィールドに書かれた回答を評価します。

ではuserAnswer、2 つの新しい乱数を生成し、それらに対してどの操作を実行するかを決定します。この時点で、答えを自分で評価し、それをグローバル変数に格納するだけです。これにより、答えを評価するときに物事が簡単になります。単純な比較を行うだけで済みます。

それ以外は、 を更新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 に答える