【JavaScript】アキネーターのような「正解絞り込みクイズ」を設計したい！

プログラミング言語(JavaScript)を勉強し始めて数週間のひよっこです・・・皆様のお力をお借りしたいので、よろしくお願いいたします！

所用で、質問に回答していくと、答えが絞り込まれる設計の**「アキネーター」**のようなプログラムを、作成したくなりました・・・！

例として、実現したいことは以下のようなイメージです！

【実現したいこと】

【Yes/No質問（ラジオボタン）】
Q1.動物ですか？
Q2.首が長いですか？
Q3.植物ですか？
Q4.トゲがありますか？
Q5.人間ですか？
Q6.ミュージシャンですか？

【答えの可能性リスト（一覧で全て表示した状態で、「不正解」になったものからテキストを赤色に変化させたいです）】
・キャベツ
・サボテン
・象
・キリン
・マイケルジャクソン
・織田信長

そこで、初心者ながらに力技で次のようなコードを作ってみました。
※かなり非効率で長ったらしいコードだと思いますが、お許しください・・・

【html】

    <h1>質問</h1>
    <div id="Questions">

    <div>
        <p>Q. 動物ですか?</p>
        <label><input type="radio" name="RadGrpA1" id="A1Yes">YES</label>
        <label><input type="radio" name="RadGrpA1" id="A1No">No</label>
    </div>

    <div>
        <p>Q. 首が長いですか?</p>
        <label><input type="radio" name="RadGrpA2" id="A2Yes">YES</label>
        <label><input type="radio" name="RadGrpA2" id="A2No">No</label>
    </div>

    <div>
        <p>Q. 植物ですか?</p>
        <label><input type="radio" name="RadGrpA3" id="A3Yes">YES</label>
        <label><input type="radio" name="RadGrpA3" id="A3No">No</label>
    </div>

    <div>
        <p>Q. トゲがありますか?</p>
        <label><input type="radio" name="RadGrpA4" id="A4Yes">YES</label>
        <label><input type="radio" name="RadGrpA4" id="A4No">No</label>
    </div>

    <div>
        <p>Q. 人間ですか?</p>
        <label><input type="radio" name="RadGrpA5" id="A5Yes">YES</label>
        <label><input type="radio" name="RadGrpA5" id="A5No">No</label>
    </div>

    <div>
        <p>Q. ミュージシャンですか?</p>
        <label><input type="radio" name="RadGrpA6" id="A6Yes">YES</label>
        <label><input type="radio" name="RadGrpA6" id="A6No">No</label>
    </div>

    <h1>可能性</h1>
    <p id="Cabbage">キャベツ</p>
    <p id="Cactus">サボテン</p>
    <p id="Elephant">象</p>
    <p id="Giraffe">キリン</p>
    <p id="MichaelJackson">マイケルジャクソン</p>
    <p id="NobunagaOda">織田信長</p>
    
    </div>

【JavaScript】

document.getElementById("Questions").addEventListener("change", () => {

    let JudgeCabbage = "";
    let JudgeCactus = "";
    let JudgeElephant = "";
    let JudgeGiraffe = "";
    let JudgeMichaelJackson = "";
    let JudgeNobunagaOda = "";

    //Q1に対する回答
    if (document.getElementById("A1Yes").checked) {
        if (JudgeCabbage == "") {
            JudgeCabbage = "不正解";
        }
        if (JudgeCactus == "") {
            JudgeCactus = "不正解";
        }
        if (JudgeElephant == "") {
            JudgeElephant = "";
        }
        if (JudgeGiraffe == "") {
            JudgeGiraffe = "";
        }
        if (JudgeMichaelJackson == "") {
            JudgeMichaelJackson = "";
        }
        if (JudgeNobunagaOda == "") {
            JudgeNobunagaOda = "";
        }
    };

    if (document.getElementById("A1No").checked) {
        if (JudgeCabbage == "") {
            JudgeCabbage = "";
        }
        if (JudgeCactus == "") {
            JudgeCactus = "";
        }
        if (JudgeElephant == "") {
            JudgeElephant = "不正解";
        }
        if (JudgeGiraffe == "") {
            JudgeGiraffe = "不正解";
        }
        if (JudgeMichaelJackson == "") {
            JudgeMichaelJackson = "不正解";
        }
        if (JudgeNobunagaOda == "") {
            JudgeNobunagaOda = "不正解";
        }
    };

    //Q2に対する回答
    if (document.getElementById("A2Yes").checked) {
        if (JudgeCabbage == "") {
            JudgeCabbage = "不正解";
        }
        if (JudgeCactus == "") {
            JudgeCactus = "不正解";
        }
        if (JudgeElephant == "") {
            JudgeElephant = "不正解";
        }
        if (JudgeGiraffe == "") {
            JudgeGiraffe = "";
        }
        if (JudgeMichaelJackson == "") {
            JudgeMichaelJackson = "不正解";
        }
        if (JudgeNobunagaOda == "") {
            JudgeNobunagaOda = "不正解";
        }
    };

    if (document.getElementById("A2No").checked) {
        if (JudgeCabbage == "") {
            JudgeCabbage = "";
        }
        if (JudgeCactus == "") {
            JudgeCactus = "";
        }
        if (JudgeElephant == "") {
            JudgeElephant = "";
        }
        if (JudgeGiraffe == "") {
            JudgeGiraffe = "不正解";
        }
        if (JudgeMichaelJackson == "") {
            JudgeMichaelJackson = "";
        }
        if (JudgeNobunagaOda == "") {
            JudgeNobunagaOda = "";
        }
    };

    //Q3に対する回答
    if (document.getElementById("A3Yes").checked) {
        if (JudgeCabbage == "") {
            JudgeCabbage = "";
        }
        if (JudgeCactus == "") {
            JudgeCactus = "";
        }
        if (JudgeElephant == "") {
            JudgeElephant = "不正解";
        }
        if (JudgeGiraffe == "") {
            JudgeGiraffe = "不正解";
        }
        if (JudgeMichaelJackson == "") {
            JudgeMichaelJackson = "不正解";
        }
        if (JudgeNobunagaOda == "") {
            JudgeNobunagaOda = "不正解";
        }
    };

    if (document.getElementById("A3No").checked) {
        if (JudgeCabbage == "") {
            JudgeCabbage = "不正解";
        }
        if (JudgeCactus == "") {
            JudgeCactus = "不正解";
        }
        if (JudgeElephant == "") {
            JudgeElephant = "";
        }
        if (JudgeGiraffe == "") {
            JudgeGiraffe = "";
        }
        if (JudgeMichaelJackson == "") {
            JudgeMichaelJackson = "";
        }
        if (JudgeNobunagaOda == "") {
            JudgeNobunagaOda = "";
        }
    };

（//Q6に対する回答まで中略）

    if (JudgeCabbage == "不正解") {
        document.getElementById("Cabbage").style.color = "red";
    } else {
        document.getElementById("Cabbage").style.color = "black";
    }
    if (JudgeCactus == "不正解") {
        document.getElementById("Cactus").style.color = "red";
    } else {
        document.getElementById("Cactus").style.color = "black";
    }
    if (JudgeElephant == "不正解") {
        document.getElementById("Elephant").style.color = "red";
    } else {
        document.getElementById("Elephant").style.color = "black";
    }
    if (JudgeGiraffe == "不正解") {
        document.getElementById("Giraffe").style.color = "red";
    } else {
        document.getElementById("Giraffe").style.color = "black";
    }
    if (JudgeMichaelJackson == "不正解") {
        document.getElementById("MichaelJackson").style.color = "red";
    } else {
        document.getElementById("MichaelJackson").style.color = "black";
    }
    if (JudgeNobunagaOda == "不正解") {
        document.getElementById("NobunagaOda").style.color = "red";
    } else {
        document.getElementById("NobunagaOda").style.color = "black";
    }
});

・・・ここまで読んでくださり、ありがとうございます。。。

知識が乏しく、イメージ通りの動きを実現することで精一杯で、短くコーディングするアイデアが浮かびません。
この状態だと、問題や正解の選択肢が増えるとかなりの労力がかかってしまいます。
同じことを何度も記述しているので、少しでも短く記述する方法があれば、ぜひ教えていただきたいです。

また、実際には「不正解」の選択肢を赤色に変えるだけではなく、グレーアウトさせたり、視覚的な効果も加えたいです。その場合は、JavaScript側から該当（不正解）項目に「class属性」を付与して、それをCSSで脚色する、というイメージで当たっていますでしょうか？

どんな些細なアドバイスでも非常に助けになりますので、ぜひご回答いただけると嬉しいです！どうかよろしくお願いいたしますm(_ _)m

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

回答2件

今のロジックのまま短くするならこんな感じでいけそう
質問や回答が増えてもquestionLengthとanswersさえ変えればいいかな。

js
1const questionLength = 6;
2const answers = [
3  ['Cabbage',        false, false, true,  false, false, false],
4  ['Cactus',         false, false, true,  true,  false, false],
5  ['Elephant',       true,  false, false, false, false, false],
6  ['Giraffe',        true,  true,  false, false, false, false],
7  ['MichaelJackson', true,  false, false, false, true,  true ],
8  ['NobunagaOda',    true,  false, false, false, true,  false]
9];
10  
11const noAnswer = undefined;
12const judge = []
13  
14document.getElementById("Questions").addEventListener("change", () => {
15  for (let i = 1; i <= questionLength; i++) {
16    judge[i] = document.getElementById(`A${i}Yes`).checked ? 
17      true : document.getElementById(`A${i}No`).checked ?
18      false : noAnswer;
19  }
20  answers.forEach(answer => {
21    document.getElementById(answer[0]).style.color = 
22      judge.every((selected, idx) => {
23      return selected === noAnswer || selected === answer[idx];
24    }) ? 'black' : 'red';
25  });  
26});

投稿2021/05/13 23:34

macaron_xxx

総合スコア3191

KentaroxKondo

2021/05/28 13:21

>macaron_xxx様わざわざご丁寧に回答いただき、ありがとうございます！また、返信が遅くなり申し訳ございませんでした。非常に悩ましかったのですが、今回は初心者の私がより容易に理解することができた回答をベストアンサーとさせていただきました。 falseやtrueの扱い方や、``で挟んだり、${}という表記方法について、実はまだ理解が浅い状態ですが、とっても便利なものであることがわかったので、今後の課題として勉強させていただくモチベーションにつながりました！三項演算子というものも、全く知らなかったです。いつか同じ発想ができるようになりたいな〜と強く思いました！また、図々しいお願いですが、この質問には続きがございますので、およろしければ再度お知恵を拝借できれば幸いです。（不要な質問を非表示にする方法編：https://teratail.com/questions/340909）今後ともぜひ、よろしくお願いいたします！m(_ _)m

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

ベストアンサー

とりあえず、希望通りに動作するものが作れるのはよいのではないでしょうか。
あと、コードは短さよりも分かりやすさが優先される気がします。

javascript
1//(略)
2
3    let Judge = {Cabbage;"",Cactus:"",Elephant:"",Giraffe:"",MichaelJackson:"",NobunagaOda:""};
4
5    //Q1に対する回答
6    if (document.getElementById("A1Yes").checked) {
7        Judge.Cabbage = "不正解";
8        Judge.Cactus = "不正解";
9    }
10
11    if (document.getElementById("A1No").checked) {
12        Judge.Elephant = "不正解";
13        Judge.Giraffe = "不正解";
14        Judge.MichaelJackson = "不正解";
15        Judge.NobunagaOda = "不正解";
16    }
17
18//(略)
19
20    let obj;
21    obj = document.getElementById("Cabbage");
22    if (Judge.Cabbage == "不正解") {
23        obj.style.color = "red";
24    } else {
25        obj.style.color = "black";
26    }
27
28//(略)

--- 追記 ---
コードを短くするなら、諸条件を配列で持ちループで処理するのがよくあるかな。

javascript
1//(略)
2
3    const pat = [
4        {name:"A1Yes",miss:["Cabbage","Cactus"]},
5        {name:"A1No",miss:["Elephant","Giraffe","MichaelJackson","NobunagaOda"]},
6        //(略)
7    ];
8
9    for (let i=0; i<pat.length; i++) {
10        if (document.getElementById(pat[i].name).checked) {
11            for (let j=0; j<pat[i].miss.length; j++) {
12                Judge[pat[i].miss[j]] = "不正解";
13            }
14        }
15    }
16
17//(略)

あ、デバッグしてないので間違ってたらごめん

投稿2021/05/13 23:05

編集2021/05/13 23:32

takasima20

総合スコア7466

KentaroxKondo

2021/05/28 13:11

>takasima20様ベストアンサーを選ぶのに、かなり時間がかかってしまい申し訳ございませんでした。いただいた回答は、初心者ながらに（数日の間…）じっくりと吟味・勉強させていただき、お陰様でスマートなプログラムを作成することができました！初心者にもわかりやすい内容でご教示いただいたため、takasima20様をベストアンサーとさせていただきます。すぐにご回答いただけて、非常に助かりました！「連想配列」というものの重要さや使い方を学べて嬉しかったです。また、図々しいお願いですが、この質問には続きがありますので、もしもおよろしければ改めてお知恵をお借りできれば幸いです。不要な質問を非表示にする方法編：https://teratail.com/questions/340909 今後ともぜひ、よろしくお願いいたします！

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

あなたの回答