2017-07-20 10 views
0

私はJavaScript開発の世界で初めてです。私は父親の生徒が学校で遊ぶことができる小さなゲームを作成するためにそれを取りました。このゲームは、4つの異なる数学演算(加算、減算、乗算、除算)で構成されています。学生が操作ボタンをクリックすると、新しいページに転送されます。このページには1〜10の数字が入ります。この番号は静的な番号として使用されます。ユーザーがこの番号を選択すると、10種類の問題が解決します。最初の数字は1〜12の乱数で、2番目の数字は前にページで選択した数字になります。 10の問題を完了した後、彼らはどの質問を逃したかを知らせるページで挨拶されます。私は追加部分のコードを始めましたが、いくつかの問題がありました。簡単な数学のゲームを作成する

1)ある機能から別の機能に回答を転送するにはどうすればよいですか?これは入力を確認するために使用されます。

2)静的な番号&を選択するためにswitch文を使用する方が直感的でしょうか?

3)このゲームの作成を容易にする他の方法はありますか?

私はあなたに事前に感謝し、長いポストをお詫びしたいと思います。私は少し失われて、何らかのフィードバックを得たいと思っています。

var x; 
 

 
function startAdd() { 
 

 
    var random = new Array(); 
 
    for (var i = 0; i < 1; i++) { 
 

 
    random.push(Math.floor(Math.random() * 13)); 
 
    // console.log(random[i]); 
 
    } 
 

 
    var allRadioButtons = document.getElementsByName("dif"); 
 
    var secondNumber; 
 

 
    for (var i in allRadioButtons) { 
 
    if (allRadioButtons[i].checked) { 
 
     secondNumber = +allRadioButtons[i].value; 
 
     break; 
 
    } 
 
    } 
 

 
    for (var a = 0; a < 1; a++) { 
 

 
    document.getElementById('probFirst').innerHTML = random[a]; 
 
    document.getElementById('probSecond').innerHTML = secondNumber; 
 

 

 
    /* 
 
       compareUser(); 
 
       function compareUser(){ 
 

 
       if (prob !=) 
 
       } */ 
 

 

 
    } 
 
} 
 

 
function myFunction() { 
 
    var x = document.getElementById("userNumb").value; 
 
    document.getElementById("Answer").innerHTML = x; 
 
}
<title>RicoMath - Addition</title> 
 

 
<body> 
 
    <h1>RicoMath</h1> 
 
    <h1 class="add">Addition</h1> 
 
    <h2>Difficulty</h2> 
 
    <div id="options"> 
 
    <div> 
 
     <input id="num1" type="radio" name="dif" value="1"> 
 
     <label for="num1">1</label> 
 
    </div> 
 
    <div> 
 
     <input id="num2" type="radio" name="dif" value="2"> 
 
     <label for="num2">2</label> 
 
    </div> 
 
    <div> 
 
     <input id="num3" type="radio" name="dif" value="3" checked> 
 
     <label for="num3">3</label> 
 
    </div> 
 
    <div> 
 
     <input id="num4" type="radio" name="dif" value="4"> 
 
     <label for="num4">4</label> 
 
    </div> 
 
    <div> 
 
     <input id="num5" type="radio" name="dif" value="5"> 
 
     <label for="num5">5</label> 
 
    </div> 
 
    <button onclick="startAdd()">Begin!!!!</button> 
 
    <h4 id='probFirst'></h4> 
 
    <h4 id='probSecond'></h4> 
 
    </div> 
 
    <input type="number" id="userNumb" value=""> 
 
    <button onclick='myFunction()'>Enter UserNumb</button> 
 
    <p id="Answer"></p> 
 
</body>

+0

結果を新しいhtmlページまたは同じページに転送しますか?また、テキストでは、まず4種類のアクションの中から選択するようにユーザーに求めますが、スニペットは5つの数字から選択するよう求めていますか? –

+0

@toing_toing結果を別のページに転送したいと思います。私は操作のためのボタンをすでに作成しています。私は次の作業に移る前に作業作業を作成することに焦点を当てています。テスト目的で最大5つの数字を作成しました。速い応答に感謝します! –

答えて

1

1)あなたのための簡単なオプションは、同じHTMLファイル内の別々のページの別々のdivを持っているだろう、あなたの次の「ページ」にデータを転送するには。その後、「次のページ」に移動する必要があるときは、他のページを表示して非表示にする必要があるdivを表示します。ここで

は、HTML +実施例とそのための純粋なJavaScriptコードです:

<body> 
<div id="page1" style="border-width:2px;border-style:solid"> 
your first page 
<button onclick="showPage2()">Go to Page 2</button> 
</div> 
<div id="page2" style="border-width:2px;border-style:solid"> 
2nd page 
</div> 
<div id="page3"> 
3rd page 
</div> 
<script> 
showPage1(); 
function hide(id){ 
     document.getElementById(id).hidden = true; 
    } 
    function show(id){ 
     document.getElementById(id).hidden = false; 
    } 

    function showPage1(){ 
    show("page1"); 
    hide("page2"); 
    hide("page3"); 
    } 

    function showPage2(){ 
    show("page2"); 
    hide("page1"); 
    hide("page3"); 
    } 
</script> 
</body> 

は、ここでは同じであるので、ちょうどdocument.getElementById()を使用し、入力からあなたの価値を転送するにworking fiddle.

ですhtmlドキュメント。

var rates = document.getElementById('options').value; 

あなたが入力ボックスから値を取得するために、同じ方法を使用することができます。ちょうど()あなたのコードにつきとして使用し、ラジオボタン、リストから選択した値を取得するには

2)。空の入力のチェックを追加し、値を取得する前にラジオボタンが選択されているかどうかを確認してください。

私が行ったようにループする必要はありません。

3)確かに学び、jqueryを学んでください。それはあなたの努力をはるかに少なくします。

これは役立ち、幸せなコーディングに役立ちます。

関連する問題