### 基于
Flask的在线答题系统设计
#### 项目结构概述
为了构建一个完整的基于
Flask的在线答题系统，可以按照以下方式组织项目的目录结构：
```plaintext
/
flask_quiz_app
/static
css/
js/
/templates
base.html
quiz.html
result.html
/models
models.py
/views
views.py
config.py
app.py
```
---
#### 核心代码实现
##### `app.py`
- 主程序入口
这是整个应用的核心文件，负责初始化
Flask应用并加载配置。
```python
from
flask import
Flask, render_template
from views.views import quiz_blueprint
app =
Flask(__name__)
app.config.from_pyfile('config.py') # 加载配置文件
# 注册蓝图
app.register_blueprint(quiz_blueprint)
@app.route('/')
def home():
return render_template('base.html')
if __name__ == '__main__':
app.run(debug=True)
```
---
##### `config.py`
- 配置管理
用于存储全局配置参数，例如数据库连接字符串或其他环境变量。
```python
DEBUG = True
SECRET_KEY = 'your_secret_key'
SQLALCHEMY_DATABASE_URI = 'sqlite:///quiz.db'
SQLALCHEMY_TRACK_MODIFICATIONS = False
```
---
##### `/models/models.py`
- 数据库模型定义
通过 SQLAlchemy 定义数据表结构，包括题目、选项和用户的答案记录。
```python
from
flask_sqlalchemy import SQLAlchemy
db = SQLAlchemy()
class Question(db.Model):
id = db.Column(db.Integer, primary_key=True)
question_text = db.Column(db.String(500), nullable=False)
correct_answer = db.Column(db.String(100), nullable=False)
class Option(db.Model):
id = db.Column(db.Integer, primary_key=True)
option_text = db.Column(db.String(200), nullable=False)
is_correct = db.Column(db.Boolean, default=False)
question_id = db.Column(db.Integer, db.ForeignKey('question.id'), nullable=False)
class UserAnswer(db.Model):
id = db.Column(db.Integer, primary_key=True)
user_id = db.Column(db.Integer, nullable=False)
question_id = db.Column(db.Integer, db.ForeignKey('question.id'), nullable=False)
selected_option = db.Column(db.String(200), nullable=False)
```
---
##### `/views/views.py`
- 路由逻辑处理
该
模块实现了主要的功能路由，包括显示题目页面以及提交答案后的结果反馈。
```python
from
flask import Blueprint, request, jsonify, redirect, url_for, flash, session
from ..models.models import db, Question, Option, UserAnswer
quiz_blueprint = Blueprint('quiz', __name__)
@quiz_blueprint.route('/quiz')
def show_questions():
questions = Question.query.all()
options = {}
for q in questions:
options[q.id] = [{'text': o.option_text} for o in Option.query.filter_by(question_id=q.id).all()]
return {'questions': [{q.question_text: options.get(q.id)} for q in questions]}
@quiz_blueprint.route('/submit_answers', methods=['POST'])
def submit_answers():
data = request.json
score = 0
for qid, answer in data.items():
question = Question.query.get(int(qid))
if question.correct_answer == answer:
score += 1
return jsonify({'score': f'{score}/{len(data.keys())}'})
```
---
##### `/templates/quiz.html`
- 提供前端交互界面
HTML 页面展示了题目及其对应的选项，并允许用户选择答案后提交。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF
-8">
<title>Quiz System</title>
</head>
<body>
<h1>Online Quiz</h1>
<form id="quizForm">
{% for question in questions %}
<div>
<p>{{ loop.index }}. {{ question }}</p>
{% for opt in options[loop.index] %}
<label><input type="radio" name="{{ loop.parent.loop.index }}" value="{{ opt.text }}"> {{ opt.text }}</label><br>
{% endfor %}
</div>
{% endfor %}
<button type="button" onclick="submitAnswers()">Submit Answers</button>
</form>
<
script>
function submitAnswers() {
const formData = {};
document.querySelectorAll('input[type=radio]:checked').forEach((el) => {
formData[el.name] = el.value;
});
fetch('/submit_answers', { method: 'POST', headers: { 'Content
-Type': 'application/json' }, body: JSON.stringify(formData)})
.then(response => response.json())
.then(result => alert(`Your Score: ${result.score}`));
}
</
script>
</body>
</html>
```
---
### 功能扩展建议
除了基本的答题功能外，还可以考虑加入以下特性：
- **用户认证**：集成
Flask-Login 实现用户注册与登录功能[^4]。
- **异步请求优化**：利用 `asyncio` 和 `aiohttp` 改善性能表现[^2]。
- **响应式布局**：采用 Bootstrap 设计美观且兼容移动端的 UI 界面[^3]。
---
Flask-Script扩展允许在Flask应用中添加命令行脚本，如启动服务器、数据库管理等。通过Manager实例管理和运行命令，支持通过Command子类、@command和@option修饰符创建命令。本文档介绍了如何创建和运行命令，以及启动参数的使用。
最低0.47元/天 解锁文章
扫一扫
260
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
