提交答案後可以看到所有題目的對錯和正確答案。

<!-- quiz.html -->

    <script>
        // 顯示結果
        function displayResults(result) {
            // 隱藏提交按鈕，顯示總結區塊 ...

            // 標記結果和正確答案
            if (result.detailed_results) {
                result.detailed_results.forEach(item => {
                    const qIndex = item.question_index;
                    const isCorrect = item.is_correct;
                    const correctOption = item.correct_answer;

                    const questionCard = document.getElementById(`q-${qIndex}`);
                    if (!questionCard) return;

                    const resultFooter = questionCard.querySelector('.result-footer');
                    questionCard.classList.add(isCorrect ? 'correct' : 'incorrect');

                    // 標記選項顏色並禁用選項
                    const radioInputs = questionCard.querySelectorAll('input[type="radio"]');
                    radioInputs.forEach(radio => {
                        radio.disabled = true; // 禁用所有選項
                        const label = radio.nextElementSibling;
                        label.classList.remove('correct-option', 'user-incorrect-choice');

                        // 標記正確答案 (綠色)
                        if (radio.value === correctOption) {
                            label.classList.add('correct-option');
                        }

                        // 標記使用者選擇
                        if (radio.checked && !isCorrect) {
                            label.classList.add('user-incorrect-choice');
                        }
                    });

                    // 顯示標準答案
                    const summaryHtml = `
                        <div class="d-flex flex-wrap justify-content-between align-items-center">
                            <div class="text-sm text-dark">
                                <strong>標準答案：</strong> <span class="font-weight-bold text-success">${correctOption}</span>
                            </div>
                        </div>
                    `;
                    // 顯示 footer 
                    resultFooter.innerHTML = summaryHtml;
                    resultFooter.classList.remove('d-none');

                    // 更新導覽列狀態
                    updateNavigator(qIndex, true, true, isCorrect);
                });
            }
        }
    </script>

# views.py

@app.route('/submit_quiz', methods=['POST'])
def submit_quiz():
    ...
    quiz_results_for_report = []

    for index, question in enumerate(quiz_data, 1):
        q_key = f'question-{index}'
        user_answer = user_answers.get(q_key, None)
        is_correct = (user_answer == correct_answer)

        if is_correct:
            correct_count += 1
            total_score += SCORE_PER_QUESTION
        
        # 給前端顯示的數據
        quiz_results_for_report.append({
            "question_index": index,          
            "question_text": question.get('題目', 'N/A'),
            "is_correct": is_correct,
            "user_answer": user_answer,
            "correct_answer": correct_answer, # 必須傳回給前端
        })
            
    # 總結結果
    report_data = {
        ...
        "detailed_results": quiz_results_for_report
    }

    return jsonify({
        "success": True,
        "total_score": total_score,
        "correct_count": correct_count,
        "total_questions": total_questions,
        "score_per_question": SCORE_PER_QUESTION,
        "detailed_results": quiz_results_for_report, 
        "message": "測驗提交成功，結果已載入。"
    })