質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

958閲覧

【早押しクイズ】前の問題を回答後、次の問題に切り替えるプログラムを作りたい

cjaue.34

総合スコア15

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2020/01/14 15:13

前提・実現したいこと

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を使用しています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

clearInterval は intervalID を引数に与えないと、インターバルを止めません。

【window.clearInterval - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/clearInterval

投稿2020/01/14 15:29

kei344

総合スコア69357

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cjaue.34

2020/01/15 01:10

function intervalID() { setInterval(appchar,300); } function stop() {  ……  clearInterval(intervalID); } というように変えてみたのですが、やはり【問題1】は解決できませんでした…。使い方を間違えていますか…?
cjaue.34

2020/01/15 05:13

解決しました!ありがとうございます!
guest

0

ベストアンサー

【問題2】

一旦問題1は無視していたのですが、「次の問題へ」を押して問題は消せても、再び「問題を表示する」ボタンを押しても第2問目が表示されない。

kの初期化忘れと、question変数に問題セットしてないと思います。

JS

1 2function next() { 3 document.getElementById("mondai").innerHTML = ""; 4 document.getElementById("seikai").innerHTML = ""; 5 q=q+1; 6 a=a+1; 7 k=0; //初期化 8 question = qsn[q]; //次の問題をセット 9} 10

投稿2020/01/14 16:15

KazuSaka

総合スコア640

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cjaue.34

2020/01/15 01:28

本当ですね!第1問が消えて第2問が表示されるようになりました、ありがとうございます!! ただ第2問に移っても、marucntとallcntに値が+1されないのですが、こちらの解決方法ってありますでしょうか…?
KazuSaka

2020/01/15 01:58 編集

document.getElementById("all-cnt").innerHTML = allcnt + 1; ではallcntの値は+1されないです。 allcnt = allcnt+1; (省略形:allcnt+=1) を別で書きましょう。 marucntも同様です。
cjaue.34

2020/01/15 02:38

上手くいきました!!ありがとうございます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問