在线添加2位数字和1位数字测验(1)

📌 相关文章

📜 在线添加2位数字和1位数字测验(1)

📅 最后修改于: 2023-12-03 15:37:45.798000 🧑 作者: Mango

在线添加2位数字和1位数字测验

这是一款简单的Web测验应用程序，用于测试用户的2位数字加1位数字的技能。

功能

随机生成一个2位数和一个1位数，然后将其相加并显示给用户。
用户必须输入其计算结果，并将其与正确答案进行比较。
如果用户回答正确，则应显示一个成功消息。
如果用户回答错误，则应显示一个失败消息。

界面

本应用程序的用户界面非常简单。它只包含一个用于显示问题的文本输入框和一个用于输入用户答案的文本框。下面是示例界面的截图。

Web测验界面截图

技术栈

应用程序是用以下技术栈构建的：

前端：HTML、CSS、JavaScript、Bootstrap
后端：Python、 Flask

代码片段

前端

<!DOCTYPE html>
<html>
<head>
	<title>在线2位数和1位数加法测验</title>
	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
	<div class="container">
		<h2>2位数和1位数加法测验</h2>
		<hr>

		<div class="row">
			<div class="col-md-6">
				<div class="card">
					<div class="card-body">
						<h5 class="card-title">题目</h5>
						<h1 id="question"></h1>
					</div>
				</div>
			</div>

			<div class="col-md-6">
				<div class="card">
					<div class="card-body">
						<form>
							<div class="form-group">
								<label for="answer">你的答案</label>
								<input type="text" class="form-control" id="answer" required>
							</div>
							
							<button type="submit" class="btn btn-primary">提交</button>
						</form>
					</div>
				</div>
			</div>
		</div>

		<div class="result" style="display: none;">
			<div class="alert" role="alert"></div>
			<button class="btn btn-primary restart">再测一次</button>
		</div>

	</div>

	<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
	<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
	<script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>

后端

from flask import Flask, render_template, request, jsonify
import random

app = Flask(__name__)

@app.route('/')
def index():
	return render_template('index.html')

@app.route('/check_answer', methods=['POST'])
def check_answer():
	answer = int(request.form.get('answer'))
	result = int(request.form.get('result'))

	if answer == result:
		return jsonify(status='success')
	else:
		return jsonify(status='fail')

@app.route('/get_question', methods=['GET'])
def get_question():
	num1 = random.randint(10, 99)
	num2 = random.randint(1, 9)
	result = num1 + num2

	return jsonify(num1=num1, num2=num2, result=result)

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

总结

这款Web测验应用程序非常适合那些正在学习2位数和1位数加法的学生和儿童。它非常简单易用，可以帮助他们更好地掌握加法技能。同时，它也是一个很好的Python-Flask练手项目。