Flask加法选择题应用故障求助：选项渲染与题目重载问题

1. 无法渲染选择题选项 #

常见问题及修复方式：

• 后端未传递选项数据到模板：确保在render_template中传入生成好的选项列表，比如示例里的return render_template('index.html', ..., options=options)。
• 模板循环语法错误：用Jinja2的{% for option in options %}遍历选项，同时给每个单选框设置唯一id和对应label，保证交互逻辑正常。

2. 提交答案后无法加载新题目 #

常见问题及修复方式：

• 未用Session维护状态：通过Flask的session存储答对次数、正确答案等数据，跨请求保留状态（必须设置app.secret_key才能启用Session）。
• 表单提交后未重定向：POST请求处理完成后用redirect(url_for('index'))，避免页面刷新重复提交，同时触发GET请求生成新题目。
• 未重新生成题目逻辑：在GET请求分支里每次都生成新的题目和选项，确保每次访问（包括重定向后）都加载全新内容。

完整修改代码 #

app.py #

from flask import Flask, render_template, request, session, redirect, url_for
import random

app = Flask(__name__)
app.secret_key = 'your-secure-secret-key'  # 替换为安全随机值，生产环境务必使用加密密钥

@app.route('/', methods=['GET', 'POST'])
def index():
    # 初始化答对次数
    if 'correct_count' not in session:
        session['correct_count'] = 0
    
    # 完成10题后重置会话并显示完成页
    if session['correct_count'] >= 10:
        session.pop('correct_count', None)
        return render_template('complete.html')
    
    if request.method == 'POST':
        user_answer = request.form.get('answer')
        correct_answer = session.get('correct_answer')
        
        if user_answer and int(user_answer) == correct_answer:
            session['correct_count'] += 1
        
        # 重定向到GET请求生成新题目
        return redirect(url_for('index'))
    
    # 生成新题目和选项
    num1 = random.randint(1, 20)
    num2 = random.randint(1, 20)
    correct_answer = num1 + num2
    
    # 生成不重复的干扰选项
    options = [correct_answer]
    while len(options) < 4:
        wrong_answer = random.randint(1, 40)
        if wrong_answer not in options:
            options.append(wrong_answer)
    random.shuffle(options)
    
    # 存储正确答案到Session，用于后续验证
    session['correct_answer'] = correct_answer
    
    return render_template('index.html', num1=num1, num2=num2, options=options, correct_count=session['correct_count'])

if __name__ == '__main__':
    app.run(debug=True)

index.html #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>加法练习</title>
</head>
<body>
    <h2>已答对 {{ correct_count }}/10 题</h2>
    <p>{{ num1 }} + {{ num2 }} = ?</p>
    <form method="POST">
        {% for idx, option in enumerate(options) %}
            <div>
                <input type="radio" name="answer" id="opt-{{ idx }}" value="{{ option }}" required>
                <label for="opt-{{ idx }}">{{ option }}</label>
            </div>
        {% endfor %}
        <br>
        <button type="submit">提交答案</button>
    </form>
</body>
</html>

complete.html #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>练习完成</title>
</head>
<body>
    <h1>🎉 恭喜你完成10道加法题！</h1>
    <a href="/">点击重新开始练习</a>
</body>
</html>

关键注意事项 #

• 必须设置app.secret_key，否则Session无法正常工作，生产环境建议使用随机生成的高安全密钥。
• 采用Post/Redirect/Get设计模式处理表单提交，彻底避免重复提交问题。
• 选项生成时确保不重复，防止出现多个正确答案的情况。

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