DjangoのテンプレートタグとJavaScriptを併用して簡単なクイズの正誤判定を行いたい

Question

前提・実現したいこと

Djangoの練習を行うために、出題された英単語に対し、正しい意味を選択した場合に点数を加算するプログラムを作成しています。JavaScriptをほとんど触ったことがないので、手動で作成したコンテキストをhtml側のテンプレートタグで展開し、そこで判定するためのサンプルを作成している状況です。

問題と回答の紐付けの方法をかんがえ

発生している問題・エラーメッセージ

正しい答えを選択して集計ボタンを押しても、点数が0点から変化しない状態です。

該当のソースコード

views.py

def sample(request):
    quiz_answer_dict = {
        'sample': {'例': ['りんご', '取る', '例', '考える']},
        'think': {'考える': ['オレンジ', '考える', '取る', 'お茶']},
        'listen': {'聞く': ['見る', '泳ぐ', '聞く', '得する']},
        'swim': {'泳ぐ': ['りんご', '例', '泳ぐ', 'ノート']},
    }

    return render(
        request,
        'wordapp/quiz_sample.html',
        {'quiz_answer_dict': quiz_answer_dict}
    )

<h3>クイズ</h3>
{% for question_english, answer_choice_dict in quiz_answer_dict.items %}
    <div class="quiz">
        <p class="question_english">{{ question_english }}</p>
        {% for answer, choice_list in answer_choice_dict.items %}
            <p class="answer">answer: {{ answer }}</p>
                <form name="choice_form">
                    {% csrf_token %}
                    {% for choice in choice_list %}
                        <input class="choice" type="radio" value="{{ choice }}" name="choice">choice: {{ choice }}
                    {% endfor %}
                </form>
        {% endfor %}
    </div>
{% endfor %}
<input type="button" value="集計" onclick="aggregate()">
<p>正解した問題数 <span id="number_of_right_answer"></span></p>

function aggregate(){
    let number_of_right_answer = 0;
    const quiz_list = document.querySelectorAll("div.quiz");
    console.log(quiz_list);
    /*
    問題単位のループ
    */
    for (let i = 0; i < quiz_list.length; i++){
        const quiz = quiz_list[i];
        const answer = quiz.querySelectorAll("p.answer");
        const choices = quiz.querySelectorAll("input[name='choice']");
        /*
        選択肢単位のループ
        */
        for (let j = 0; j < choices.length; j++){
            if(choices[j].checked){
                if(choices[j].value == answer){
                    number_of_right_answer++;
                    break;
                }
            }
        }
    }

    document.getElementById("number_of_right_answer").textContent = number_of_right_answer;
}

試したこと

こちらを参考に、

• formに名前をつけて、一括して取得してから判定する方法

↓

const choice1 = document.form1.value;

の1,2,...と変化していく変数名をfor文とlengthから作成する方法が思いつかなかったので断念しました。

• inputのname属性の値を利用して、一括して取得して判定する方法

↓

const choice = document.getElementsByName("choice1");

問題と回答を紐付ける方法を思いつかなかったので断念しました。

補足情報（FW/ツールのバージョンなど）

python 3.7.9
Django 3.1.6

Answer 1

Django側から渡しているデータの形があまりよくないような気がします。
また生成されるhtml内の各要素にidがないのでJavaScriptでアクセスしにくいのが原因だと思います。

一例ですが、サンプルコードを書きました。
(POST送信している様子がないのでformタグや{% csrf_token %}は飾りです)

• views.py

def sample(request):
    quizzes = [
        {
            'id': 1,
            'word': 'sample',
            'answer': '例',
            'choices': ['りんご', '取る', '例', '考える']
        },
        {
            'id': 2,
            'word': 'think',
            'answer': '考える',
            'choices': ['オレンジ', '考える', '取る', 'お茶']
        },
        {
            'id': 3,
            'word': 'listen',
            'answer': '聞く',
            'choices': ['見る', '泳ぐ', '聞く', '得する']
        },
        {
            'id': 4,
            'word': 'swim',
            'answer': '泳ぐ',
            'choices': ['りんご', '例', '泳ぐ', 'ノート']
        }
    ]

    return render(
        request,
        'wordapp/quiz_sample.html',
        {'quizzes': quizzes}
    )

• quiz_sample.html

<h3>クイズ</h3>
<form>
    {% csrf_token %}
    <input type="hidden" id="quiz-length" value="{{ quizzes | length }}">
    {% for quiz in quizzes %}
    <div class="quiz">
        <p class="question_english">{{ quiz.word }}</p>
        <p class="answer">answer: {{ quiz.answer }}</p>
        <input type="hidden" id="answer-{{ quiz.id }}" value="{{ quiz.answer }}">
        {% for choice in quiz.choices %}
        <input id="choice-{{ quiz.id }}-{{ forloop.counter }}" class="choice" type="radio" value="{{ choice }}"
               name="quiz-{{ quiz.id }}">
        <label for="choice-{{ quiz.id }}-{{ forloop.counter }}">choice: {{ choice }}</label>
        {% endfor %}
    </div>
    {% endfor %}
    <input type="button" value="集計" onclick="aggregate()">
    <p>正解した問題数 <span id="number_of_right_answer"></span></p>
</form>

• JavaScript

function aggregate() {
    let result = 0;
    let quiz_length = document.getElementById('quiz-length').value;
    // 問題単位のループ
    for (var i = 1; i <= quiz_length; i++) {
        var answer = document.getElementById(`answer-${i}`).value;
        var choices = document.getElementsByName(`quiz-${i}`);
        // 選択肢単位のループ
        for (var j = 0; j < choices.length; j++) {
            if (choices[j].checked) {
                if (answer == choices[j].value) {
                    result++;
                    break;
                }
            }
        }
    }
    document.getElementById("number_of_right_answer").textContent = result;
}

Comments

[kensoon]

ご対応ありがとうございました。当初想像していた通りに動作させることができました。

errormaker74さんのご指摘の中で、自分が理解できていなかった、知らなかった、考えつかなかった内容が以下になります。
・コンテキストは辞書で渡されるのが基本であり、チュートリアルのように.値でアクセスできるため、わざわざ直で展開するための辞書を作るのは無駄である
・idを設定することで、getElementByIdにより、階層構造を意識せずに値を取得できる。また、階層構造を利用する際も、極力無駄な階層は減らすべきである
・問題のサイズや答えなど、直接HTMLで表示するものではなくても、そこにhiddenとiidを設定すれば、Script上で利用しやすくなる

以上のように、非常に示唆に富んだ、有り難い回答でした。繰り返しになりますが、本当にご対応ありがとうございました。