Javascriptで暗算課題の作成

前提・実現したいこと

現在JavaScriptを使って暗算問題を作っています。
1002から順番に13を引いていくというもので、回答をテキストボックスに記入し、回答ボタンを押すと正誤判定します。

そこで教えていただきたいのですが、
・正解の場合は次の問題に進むにはどうすればよいのか。（989と回答したあと、976を回答すると正解となるには？）
・間違えた場合、最初に戻り989と回答しなければ正解とならないようにするにはどうすればよいのか。

よろしくお願いいたします。

JavaScript
1<!DOCTYPE HTML>
2<html>
3<head>
4<meta charset="utf-8">
5<title>心理学実験</title>
6<style type="text/css">
7*{
8  text-align:center;
9}
10</style>
11</head>
12<h1>暗算課題</h1>
13<div id="timer"></div>
14<form id="form2">
15<input type="text" id="answer">
16<input type="button" value="回答する" onclick="check()">
17</form>
18<script type="text/javascript">
19
20//解答
21var words =["989","976","963","950","937","924","911"];
22
23//関数設定
24var answer=document.getElementById("answer");
25var count = 0;
26
27//回答
28function check(){
29  var answer = document.getElementById("answer");
30  if(answer.value===words[0]){
31  alert("OK");
32  //次の問題に回答する
33  }else{
34  alert("不正解です。もう一度最初から計算してください。");
35 //最初の問題に戻る
36}
37}
38
39</script>
40</body>
41</html>

m.ts10806

2019/06/06 12:02

コードはマークダウンのcode機能を利用してご提示ください。

moka_

2019/06/07 09:07

失礼いたしました。次回から気をつけます。教えていただきありがとうございました！

m.ts10806

2019/06/07 09:08 編集

質問は編集できますので、今からでもマークダウンだけでも対応しておいていただけたらと。

行動規範の内容に同意します

回答4件

hidden を使った例です。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>心理学実験</title>
<style type="text/css">
*{
text-align:center;
}
</style>
</head>
<body onLoad="init()">
<h1>暗算課題</h1>
<div id="timer"></div>
<form id="form2">
<input type="text" id="answer">
<input type="hidden" id="sta">
<input type="hidden" id="dec">
<input type="hidden" id="cor">
<input type="button" value="回答する" onclick="check()">
</form>

<script type="text/javascript">
function init() {
  const start = 1002;
  const decrement = 13;

  document.getElementById("answer").value = "";
  document.getElementById("sta").value = start;
  document.getElementById("dec").value = decrement;
  document.getElementById("cor").value = start - decrement;
}
function check(){
  var answer = document.getElementById("answer");
  var obj_c = document.getElementById("cor");
  var obj_d = document.getElementById("dec");
  if (answer.value == obj_c.value) {
    alert("OK");
    //answer.value = "";
    obj_c.value -= obj_d.value;
  } else {
    alert("不正解です。もう一度最初から計算してください。");
    init();
  }
}
</script>
</body>
</html>

投稿2019/06/06 14:31

編集2019/06/06 14:35

takasima20

総合スコア7458

moka_

2019/06/07 09:08

回答ありがとうございます。参考になりました！

行動規範の内容に同意します

ベストアンサー

javascript
1<script type="text/javascript">
2
3
4const start = 1002;
5const unit = 13;
6var cur = start;
7
8//回答
9function check(){
10  if(document.getElementById("answer").value == (cur - unit)){
11    alert("OK");
12    cur -= unit;
13//次の問題に回答する
14  }else{
15    alert("不正解です。もう一度最初から計算してください。");
16//最初の問題に戻る
17    cur = start;
18  }
19  document.getElementById("answer").value = "";
20}
21
22</script>

投稿2019/06/06 13:29

papinianus

総合スコア12705

moka_

2019/06/07 09:10

回答ありがとうございます。実際にコードを書いてみた結果、問題なく動いてくれました！

行動規範の内容に同意します

グローバル変数を更新していく方法が早そうです

var base_number = 1002; // グローバル変数

function check(){
 var answer = document.getElementById("answer");
  
 if(answer.value === base_number - 12) {
  alert("OK");
  base_number = base_number - 12;
  //次の問題に回答する
  } else {
  alert("不正解です。もう一度最初から計算してください。");
  base_number = 1002; //初期化
  //最初の問題に戻る
 }
}

投稿2019/06/06 12:14