前提・実現したいこと
Javascriptで、簡単な早押しクイズのようなものを作りたいと考えています。
誰かと対戦形式にするのはJavascriptだけでは難しいと思うので、とりあえず初期段階として出来るだけ早い記録を出すという簡単なものを作りたいと考えています。
作りたい流れとしては以下の通りです。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
①「問題を表示する」ボタンを押すと、1文字ずつ問題が表示される
②途中で「回答する」ボタンを押すと、入力ダイアログが表示され回答を入力する
③正誤に関わらず、途中で押しても問題を全て表示し、正解も表示する
④同時に、正解なら上のヘッダー「X問/5問中 Y問正解」をX+1、Y+1にし、不正解ならX+1のみに変更。
⑤「次の問題へ」を押すと、前の問題が消えて①に戻る、以降5問まで繰り返し
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
発生している問題
【問題1】
③において、問題と回答は表示されるが、途中で回答ボタンを押すと、残っていた文字がその全文の問題の後に1文字ずつ再び表示が再開されてしまう。
(例えば、「世界一高い山は何?」という問題があって「世界一高い」の段階で回答ボタンを押すと、「世界一高い山は何?山は何?」となる)
【問題2】
一旦問題1は無視していたのですが、「次の問題へ」を押して問題は消せても、再び「問題を表示する」ボタンを押しても第2問目が表示されない。
該当のソースコード
HTML
1 <header> 2 <p><span id="all-cnt">0</span>問/10問中 <span id="maru-cnt">0</span>問正解</p> 3 </header> 4 <input type="button" value="問題を表示" onclick="int()"> 5 <p id="mondai"></p> 6 <button type="button" id="answer-btn" onclick="stop()">回答する</button> 7 <p id="seikai"></p> 8
Javascript
1var allcnt = 0; 2var marucnt = 0; 3var ans = ['aaa','bbb']; 4var qsn = ['第1問です。これは第1問です。これの答えはaaaです。','第2問です。これは第2問です。これの答えはbbbです。']; 5 6var k = 0; 7var q = 0; 8var a = 0; 9var question = qsn[q] 10function appchar(){ 11 var txt = question.charAt(k); 12 var x = document.getElementById("mondai").innerHTML; 13 if (k > question.length) { 14 clearInterval(); 15 } else{ 16 x = x + txt; 17 document.getElementById("mondai").innerHTML = x; 18 k+=1; 19 } 20} 21function int(){ 22 setInterval(appchar,300); 23} 24function stop() { 25 var result = prompt("答えを入力してください"); 26 if(result == ans[a]){ 27 alert("正解です!正解は" + ans[a] +"でした"); 28 document.getElementById("maru-cnt").innerHTML = marucnt + 1; 29 } else{ 30 alert("不正解です…。正解は" + ans[a] +"でした"); 31 } 32 document.getElementById("all-cnt").innerHTML = allcnt + 1; 33 document.getElementById("seikai").innerHTML = "正解: " + ans[a] + '<br/><button type="button" id="next" onclick="next()">次の問題へ</button>'; 34 document.getElementById("mondai").innerHTML = ""; 35 document.getElementById("mondai").innerHTML = "第1問です。これは第1問です。これの答えはaaaです。"; 36 clearInterval(); 37} 38 39function next() { 40 document.getElementById("mondai").innerHTML = ""; 41 document.getElementById("seikai").innerHTML = ""; 42 q=q+1; 43 a=a+1; 44}
今後としては
できれば、以下も実現したいと考えたいと思っています。
⑥5問終了後、今までの問題で表示した文字数を集計して結果発表の画面に表示させる。例えば1問目で8文字問題が表示された状態で回答するボタンを押したら8追加、というようにして5問分全て足して、その数が少ない方が良い、というように。(これをやらないと早押しの意味がないので…)
最後に
色々試しましたが、これが一番近くなったと思います…
配列の勉強をしたくてやってみたので、配列はぜひ使いたいと考えています!
ご回答、よろしくお願いいたします…!
ちなみにブラウザはGoogleChromeを使用しています。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/15 01:10
2020/01/15 02:38
2020/01/15 05:13