▍程式碼

<!-- quiz.html -->

<!-- 顯示結果 -->
<div>
    <div >
        <h2>測驗結果</h2>
        <p>總分：<strong id="final-score"></strong> / <span id="max-score"></span></p>
        <p>答對：<strong id="correct-count"></strong> 題 / 
        答錯：<strong id="incorrect-count"></strong> 題</p>
        <button class="btn btn-primary" onclick="location.reload()">重新測驗</button>
    </div>
</div>

<script>
    const quizData = {{ quiz_data | tojson }};
    const form = document.getElementById('quiz-form');
    const submitArea = document.getElementById('submit-area');
    const resultSummary = document.getElementById('result-summary');

    form.addEventListener('submit', async function(e) {
        e.preventDefault();

        const userAnswers = {};
        quizData.forEach((_, index) => {
            const questionIndex = index + 1;
            const radios = document.getElementsByName(`question-${questionIndex}`);
            for (const radio of radios) {
                if (radio.checked) {
                    userAnswers[`question-${questionIndex}`] = radio.value;
                    break;
                }
            }
        });

        // 檢查未答題目
        const totalQuestions = quizData.length;
        const answeredQuestions = Object.keys(userAnswers).length;

        if (answeredQuestions < totalQuestions) {
            if (!confirm(`您還有 ${totalQuestions - answeredQuestions} 題未作答，確定要送出嗎？`)) {
                return;
            }
        }

        // 禁用按鈕防止重複提交
        const submitButton = form.querySelector('button[type="submit"]');
        submitButton.disabled = true;
        submitButton.textContent = '評分中...';

        // 發送資料到後端
        try {
            const response = await fetch('/submit_quiz', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    answers: userAnswers,
                    quiz_data: quizData // 將原始題目（包含答案）傳遞回後端
                })
            });

            if (!response.ok) {
                const errorData = await response.json().catch(() => ({ message: '未知錯誤' }));
                throw new Error(`評分處理失敗: ${errorData.message}`);
            }

            const result = await response.json();

            displayResults(result);

        } catch (error) {
            console.error('評分失敗:', error);
            alert('評分時發生錯誤，請稍後再試。錯誤細節：' + error.message);
            submitButton.disabled = false;
            submitButton.textContent = '送出測驗';
        }
    });

    // 顯示評分結果
    function displayResults(result) {
        let correctCount = 0;
        let incorrectCount = 0;

        if (document.getElementById('final-score')) {
            document.getElementById('final-score').textContent = result.total_score;
        }
        if (document.getElementById('max-score')) {
            document.getElementById('max-score').textContent = result.total_questions * result.score_per_question;
        }

            if (!questionCard) {
                console.error(`找不到對應索引 ${item.index} 的題目卡片。`);
                if (!item.is_correct) {
                    // 雖然找不到卡片，但仍需計數
                    incorrectCount++;
                } else {
                    correctCount++;
                }
                return;
            }
        });

        // 更新總結計數
        if (document.getElementById('correct-count')) {
            document.getElementById('correct-count').textContent = correctCount;
        }
        if (document.getElementById('incorrect-count')) {
            document.getElementById('incorrect-count').textContent = incorrectCount;
        }

        if (submitArea) {
            submitArea.classList.add('d-none');
        }
        if (resultSummary) {
            resultSummary.classList.remove('d-none');
        }
    }
</script>

# view.py

@app.route('/submit_quiz', methods=['POST'])
def submit_quiz():
    try:
        # 接收前端資料
        data = request.get_json()
        user_answers = data.get('answers', {})
        quiz_data = data.get('quiz_data', [])
        
        total_score = 0
        score_per_question = 2
        results = []
        
        # 比對答案
        for q_index, question in enumerate(quiz_data, 1):
            question_key = f"question-{q_index}"
            user_choice = user_answers.get(question_key)
            correct_answer = question.get('答案')
            question_text = question.get('題目')
            
            is_correct = (user_choice == correct_answer)
            score = score_per_question if is_correct else 0
            total_score += score
            
            results.append({
                "index": q_index,
                "question": question_text,
                "user_answer": user_choice,
                "correct_answer": correct_answer,
                "is_correct": is_correct,
                "score": score
            })

        final_result = {
            "total_score": total_score,
            "total_questions": len(quiz_data),
            "results": results,
            "score_per_question": score_per_question
        }
        
        # 回傳評分
        return jsonify(final_result)
    
    except Exception as e:
        print(f"評分時發生錯誤: {e}")
        return jsonify({"error": "評分處理失敗", "message": str(e)}), 500