Flask MCQ测验结果页优化：高亮作答与正确答案

Got it, let's get your results page showing which answers you picked and which were correct—here's a step-by-step solution:

1. Update the Flask Backend Logic #

First, we need to capture the user's selected answers for each question and pass that data along to the results template. Modify your quiz function's POST handler like this:

import os
import random
from flask import Flask, render_template, request
app = Flask(__name__)
quiz_host = os.environ.get('FLASK_HOST')
quiz_port = os.environ.get('FLASK_PORT')
questions = [
    {'id':1, 'question':'what is 2 + 3','correct':'5','choices':['1','2','3','5']},  # Fixed the correct answer here (2+3 is 5, not 2!)
    {'id':2,'question':'what is 4 + 6','correct':'10','choices':['10','11','12','13']}
]

@app.route("/quiz", methods=['POST', 'GET'])
def quiz():
    if request.method == 'GET':
        return render_template("index.html", data=questions)
    else:
        result = 0
        total = len(questions)
        # Capture user's choices for each question
        for question in questions:
            question_id = str(question.get('id'))
            user_choice = request.form.get(question_id)
            question['user_choice'] = user_choice  # Add user's selection to the question dict
            if user_choice == question.get('correct'):
                result += 1
        # Pass the updated questions (with user choices) to the results template
        return render_template('results.html', total=total, result=result, data=questions)

if __name__ == "__main__":
    app.run(host=quiz_host, port=quiz_port)

Quick note: I fixed the correct answer for the first question (2+3 is 5, not 2) since that was a clear typo—adjust it back if that was intentional!

2. Update the results.html Template #

Now we'll modify the template to disable radio buttons (since it's a results page, users shouldn't re-select options), highlight the user's chosen answer, and flag the correct answer (even if the user picked the wrong one). Here's the updated code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Junior Cert Random Question Generator</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/stylesheet_results.css') }}">
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>
<body>
<div>
<h1>Your Results!</h1>
<br>
<h2>You scored {{ result }} out of {{ total }}!</h2>
{% for question in data %}
<div class="question-box">
    <h3>{{ question.question }}</h3>
    {% for answer in question.choices %}
    <div class="answer-item 
        {% if answer == question.user_choice %}user-picked{% endif %}
        {% if answer == question.correct %}is-correct{% endif %}
        {% if answer == question.user_choice and answer != question.correct %}wrong-pick{% endif %}">
        <input type="radio" id="{{ answer }}-{{ question.id }}" name="{{ question.id }}" value="{{ answer }}" disabled 
            {% if answer == question.user_choice %}checked{% endif %}>
        <label for="{{ answer }}-{{ question.id }}">{{ answer }}</label>
    </div>
    {% endfor %}
</div>
{% endfor %}
</div>
</body>
</html>

3. Add CSS for Clear Highlighting #

Create or update static/styles/stylesheet_results.css with these styles to make the answer status immediately visible:

.question-box {
    margin: 25px 0;
    padding: 18px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background-color: #f9f9f9;
}

.answer-item {
    margin: 10px 0;
    padding: 8px 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
}

/* Highlight the user's selection */
.user-picked {
    background-color: #fff3cd;
    border-left: 5px solid #ffc107;
}

/* Highlight the correct answer */
.is-correct {
    background-color: #d4edda;
    border-left: 5px solid #28a745;
}

/* Highlight when the user picked the wrong answer */
.wrong-pick {
    background-color: #f8d7da;
    border-left: 5px solid #dc3545;
}

/* Style disabled radio buttons */
input[type="radio"]:disabled {
    cursor: not-allowed;
    margin-right: 8px;
}

How This Works: #

• Backend: We add a user_choice key to each question dictionary, storing exactly what the user selected. This updated list of questions is passed to the results template alongside the score.
• Frontend: For each answer option, we apply CSS classes based on three scenarios:
  1. It's the user's pick → user-picked (yellow highlight)
  2. It's the correct answer → is-correct (green highlight)
  3. It's the user's pick but wrong → wrong-pick (red highlight, overrides the yellow)
• CSS: The classes use distinct background colors and left borders so users can instantly tell their choices apart from the correct answers.

内容的提问来源于stack exchange，提问作者Slowat_Kela