JS　強制終了とラジオボタンの非表示

実現したいこと

クイズがすべてで終わった後に終了されて正解数が出るようにしてるのですが、
・3問目もしくは4問目が不正解になったとき出題終了する要件を追加したい
・終了時の画面から問題やラジオボタンを消したい

発生している問題・分からないこと

・３問目４問目が不正解の時に正解数の表示はできるが問題などが消せない
・ラジオボタンを消す方法が分からない

該当のソースコード

<!DOCTYPE html>
<html>


<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="js/jquery-2.1.3.min.js"></script>
  <link rel="stylesheet" href="css/sample.css">
  <title>クイズ課題</title>

</head>

<body>

  <header>
    <h1>クイズ検定</h1>
    <h1 id="c"></h1>
  </header>
  <main>
    <p id="quest">問題</p>
    <p>

      <input type="radio" name="toi" value="1"><span id="toi1">選択肢１</span>
      <input type="radio" name="toi" value="2"><span id="toi2">選択肢２</span>
      <input type="radio" name="toi" value="3"><span id="toi3">選択肢３</span>

    </p>
  </main>
  <footer></footer>




  <script>
    //以下に配列を記述してください。
    //問題文[配列]
    const qs = [
      "通るときにしまって、通らないときに空いているものはなに？",
      "話すことがとても好きな道具は何？",
      "世界の真ん中にいる虫は何？",
      "小さな帽子をかぶっているのは誰？",
      "学校の中で先生が二人いる場所があります。どこでしょう？"
    ];


    //回答選択肢[多重配列]
    const toi = [
      ["踏切", "洗濯機", "冷蔵庫"], //toi[0][2] 答え冷蔵庫
      ["スプーン", "シャベル", "しゃもじ"],
      ["てんとう虫", "カマキリ", "蚊"],
      ["消防士", "警察官", "タクシー運転手"],
      ["非常階段", "運動場", "教室"]
    ];


    //答え[配列]
    const ans = [1, 2, 3, 1, 3]; //0門目の答え１　1門目の答え２　


    //1.最初の問題文＆回答選択肢＆回答値を設定
    //4.正解数カウント値を設定
    let i = 0;
    let count = 0;

    $("#quest").html(qs[i]);
    $("#toi1").html(toi[i][0]);
    $("#toi2").html(toi[i][1]);
    $("#toi3").html(toi[i][2]);



    //2.ラジオボタンをクリックしたらイベント発生！(クリックイベント)

    $("[name=toi]").on("click", function () {

      if ($(this).val() == ans[i]) {
        window.alert('正解！');
        count += 1;
       } else {
        window.alert('不正解！');
      }

      //1足して次の問題に移行
      i++;
      
      if (i < 5) {
        $("#quest").html(qs[i]);
        $("#toi1").html(toi[i][0]);
        $("#toi2").html(toi[i][1]);
        $("#toi3").html(toi[i][2]);
      
      } else {
        $("#c").html('クイズに' + count + '問正解しました！');

        window.alert("完了");


        let qele = document.getElementById('quest');
        let t1ele = document.getElementById('toi1');
        let t2ele = document.getElementById('toi2');
        let t3ele = document.getElementById('toi3');
        let btn = document.getElementsByName('toi');

        qele.style.display = 'none';
        t1ele.style.display = 'none';
        t2ele.style.display = 'none';
        t3ele.style.display = 'none';

        //ラジオボタンを消す
        btn.remove();

      }



    });






  </script>
</body>

</html>

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

調べたが見つけられなかった

補足

特になし

yambejp

2024/10/07 04:12

ご提示のソースだと普通にも動作してないように見えますが、データ構造を含めて大きく変えていいなら回答の用意があります。動作についてはもうすこし丁寧に説明した方がいいと思います。選択しただけで次に進むのも押し間違いとか一発アウトはちょっとユーザービリティが悪いかも

ayk52_o4r

2024/10/07 04:29

yambejpさんコメントありがとうございます。説明不足で分かりずらく申し訳ありません。基本部分は授業課題で作った部分になるので一発アウトは要件なのでその状態で完成させたいです。

yambejp

2024/10/07 04:32

課題なら仕方ないですね

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

回答2件

ベストアンサー

元ソースを最大限活用して3番目と4番目が不正解のときにフラグを立てると楽かと

javascript
1    const qs = [
2      "通るときにしまって、通らないときに空いているものはなに？",
3      "話すことがとても好きな道具は何？",
4      "世界の真ん中にいる虫は何？",
5      "小さな帽子をかぶっているのは誰？",
6      "学校の中で先生が二人いる場所があります。どこでしょう？"
7    ];
8    const toi = [
9      ["踏切", "洗濯機", "冷蔵庫"],
10      ["スプーン", "シャベル", "しゃもじ"],
11      ["てんとう虫", "カマキリ", "蚊"],
12      ["消防士", "警察官", "タクシー運転手"],
13      ["非常階段", "運動場", "教室"]
14    ];
15    const ans = [1, 2, 3, 1, 3]; //0門目の答え１　1門目の答え２　
16    let i = 0;
17    let count = 0;
18    let flag = true;
19
20    $("#quest").html(qs[i]);
21    $("#toi1").html(toi[i][0]);
22    $("#toi2").html(toi[i][1]);
23    $("#toi3").html(toi[i][2]);
24    $("[name=toi]").on("click", function () {
25      if ($(this).val() == ans[i]) {
26        alert('正解！');
27        count += 1;
28      } else {
29        alert('不正解！');
30        if(i==2 || i==3) flag=false;
31      }
32      $(this).prop('checked',false);
33      i++;
34      
35      if (i < 5 && flag) {
36        $("#quest").html(qs[i]);
37        $("#toi1").html(toi[i][0]);
38        $("#toi2").html(toi[i][1]);
39        $("#toi3").html(toi[i][2]);
40      } else {
41        $("#c").html('クイズに' + count + '問正解しました！');
42        alert("完了");
43        $('#quest,#toi1,#toi2,#toi3,[name="toi"]').hide();
44      }
45    });

投稿2024/10/07 04:54

yambejp

総合スコア116835

ayk52_o4r

2024/10/07 06:00

flagやhide()を知らなかったのでまたひとつ新しいことを知ることができました。分かりやすいコーディングを教えてくださりありがとうございました。

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

クイズが終わる条件はここに書かれています。

js
1if (i < 5) {

ですので、この終了条件を書き換えればいいです。
ここで気を付けるのは、前の行のi++で1増えてしまっていることです。ですので、前の質問で正解しているかどうかは、

js
1$(this).val() == ans[i - 1]

と書く必要があります。
ですので、たとえば不正解があればクイズを終了するように条件を変えるには、

js
1if (i < 5 && $(this).val() == ans[i - 1]) {

とすればいいです。あとは「3問目もしくは4問目」という条件も組み入れればいいでしょう。

ボタンを消すには、btnが要素ではなくてNodeListなので、forEach()で書き直すか、あるいはjQueryを使っているのですからjQueryの書き方に直してみるのもいいかと思います。

js
1let btn = $('[name=toi]')

投稿2024/10/07 04:56

Lhankor_Mhy

総合スコア36981

ayk52_o4r

2024/10/07 06:00

丁寧な解説ありがとうございます！！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.35%

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

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

質問する

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

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

JS　強制終了とラジオボタンの非表示

実現したいこと

発生している問題・分からないこと

該当のソースコード

試したこと・調べたこと

上記の詳細・結果

補足

関連した質問