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

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

ただいまの
回答率

89.89%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 127

st.

score 9

前提・実現したいこと

Javascriptで、簡単な早押しクイズのようなものを作りたいと考えています。
誰かと対戦形式にするのはJavascriptだけでは難しいと思うので、とりあえず初期段階として出来るだけ早い記録を出すという簡単なものを作りたいと考えています。

作りたい流れとしては以下の通りです。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
①「問題を表示する」ボタンを押すと、1文字ずつ問題が表示される
②途中で「回答する」ボタンを押すと、入力ダイアログが表示され回答を入力する
③正誤に関わらず、途中で押しても問題を全て表示し、正解も表示する
④同時に、正解なら上のヘッダー「X問/5問中 Y問正解」をX+1、Y+1にし、不正解ならX+1のみに変更。
⑤「次の問題へ」を押すと、前の問題が消えて①に戻る、以降5問まで繰り返し
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

発生している問題

【問題1】
③において、問題と回答は表示されるが、途中で回答ボタンを押すと、残っていた文字がその全文の問題の後に1文字ずつ再び表示が再開されてしまう。
(例えば、「世界一高い山は何?」という問題があって「世界一高い」の段階で回答ボタンを押すと、「世界一高い山は何?山は何?」となる)

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

該当のソースコード

   <header>
     <p><span id="all-cnt">0</span>問/10問中  <span id="maru-cnt">0</span>問正解</p>
   </header>
  <input type="button" value="問題を表示" onclick="int()">
    <p id="mondai"></p>
  <button type="button" id="answer-btn" onclick="stop()">回答する</button>
  <p id="seikai"></p>
var allcnt = 0;
var marucnt = 0;
var ans = ['aaa','bbb'];
var qsn = ['第1問です。これは第1問です。これの答えはaaaです。','第2問です。これは第2問です。これの答えはbbbです。'];

var k = 0;
var q = 0;
var a = 0;
var question = qsn[q]
function appchar(){
  var txt = question.charAt(k);
  var x = document.getElementById("mondai").innerHTML;
  if (k > question.length) {
        clearInterval();
    } else{
    x = x + txt;
    document.getElementById("mondai").innerHTML = x;
    k+=1;
    }
}
function int(){
  setInterval(appchar,300);
}
function stop() {
  var result = prompt("答えを入力してください");
  if(result == ans[a]){
    alert("正解です!正解は" + ans[a] +"でした");
    document.getElementById("maru-cnt").innerHTML = marucnt + 1;
  } else{
    alert("不正解です…。正解は" + ans[a] +"でした");
  }
  document.getElementById("all-cnt").innerHTML = allcnt + 1;
  document.getElementById("seikai").innerHTML = "正解: " + ans[a] + '<br/><button type="button" id="next" onclick="next()">次の問題へ</button>';
    document.getElementById("mondai").innerHTML = "";
    document.getElementById("mondai").innerHTML = "第1問です。これは第1問です。これの答えはaaaです。";
        clearInterval();
}

function next() {
    document.getElementById("mondai").innerHTML = "";
    document.getElementById("seikai").innerHTML = "";
    q=q+1;
    a=a+1;
}

今後としては

できれば、以下も実現したいと考えたいと思っています。
⑥5問終了後、今までの問題で表示した文字数を集計して結果発表の画面に表示させる。例えば1問目で8文字問題が表示された状態で回答するボタンを押したら8追加、というようにして5問分全て足して、その数が少ない方が良い、というように。(これをやらないと早押しの意味がないので…)

最後に

色々試しましたが、これが一番近くなったと思います…
配列の勉強をしたくてやってみたので、配列はぜひ使いたいと考えています!
ご回答、よろしくお願いいたします…!

ちなみにブラウザはGoogleChromeを使用しています。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+4

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/01/15 10:10

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

    キャンセル

  • 2020/01/15 11:38

    intervalID は setInterval時に変数に入れる必要があります。

    【WindowOrWorkerGlobalScope.setInterval() - Web API | MDN】
    https://developer.mozilla.org/ja/docs/Web/API/Window/setInterval#Examples

    キャンセル

  • 2020/01/15 14:13

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

    キャンセル

checkベストアンサー

+3

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/01/15 10:28

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

    キャンセル

  • 2020/01/15 10:57 編集

    document.getElementById("all-cnt").innerHTML = allcnt + 1;

    ではallcntの値は+1されないです。
    allcnt = allcnt+1; (省略形:allcnt+=1)
    を別で書きましょう。
    marucntも同様です。

    キャンセル

  • 2020/01/15 11:38

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

    キャンセル

  • 2020/01/15 11:39

    👍

    キャンセル

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

  • ただいまの回答率 89.89%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる