2025年人工智能元年，Python纸质编程课本的题目永远被固定了同样的ABCD。
"一千个游戏玩家，应该有一千个专属游戏方式"------哈姆雷姆。
那就指挥AI出题吧，增加一些不一样！
零、效果演示
Lv0 投喂提示词
仅使用HTML+CSS+JS 做一个游戏式的对话框式样的 答题页面， 每次随机出一道 逻辑运算符测试题目，要求用户输入对应的字符， 并且记录正确答案
代码点评： 最大的缺陷是题目直接使用了硬编码，且表达式只有true和false缺少变化。
继续改进提示词。
LV1 投喂提示词
在代码基础上 quiz.html基础上新建文件 quiz_lv1.html ，题目 可以是组合多种 true或者 false 结果表达式，例如 not(3>5 and 5<7 or 8+9 <23)
代码点评： 这次题目同样是硬编码,但是新增了一个解释字段explanation 。
LV2 Look my eyes，tell my Why
在代码基础上 quiz_lv1.html 上新建文件 quiz_lv2.html 要求题目不固定任何表达式 ，每次的每个题目都不相同
"Look my eyes，tell my Why"。 
代码点评： 这次的结果出人意料变成了运算符和数字版本。。。
操作上手滑选择了新建对话框，故生成结果脱离了上下文。
解决办法是重新组织语言，再次投喂完整的提示词。
LV3 投喂提示词
仅使用HTML+CSS+JS，新建文件 quiz_lv3.html 做一个游戏式的对话框式样的 答题页面， 每次随机出逻辑运算符测试题目，要求用户输入对应的答案， 题目可以是组合多种 true或者 false 结果表达式，例如 not(3>5 and 5<7 or 8+9 <23) 要求题目不固定任何表达式 ，每次刷新尽可能每个题目都不相同
并且能够记录正确答案。
代码点评： 终于题目变成了动态出题，有一点点难度 各位自行体会。 🐮,🐯,🐰,🐱,🐲,🐳,🐴,🐵,🐶,🐷,🐸,🐹,🐺,🐻,🐼,🐽,🐾,🐿️,👀
js
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>逻辑运算符挑战</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.game-container {
background-color: white;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
padding: 30px;
width: 400px;
text-align: center;
}
.dialog {
background-color: #f8f8f8;
border-left: 5px solid #4CAF50;
padding: 15px;
margin-bottom: 20px;
border-radius: 5px;
min-height: 60px;
}
.question {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.answer-input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
.btn {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #45a049;
}
.score {
margin-top: 20px;
font-size: 16px;
}
.feedback {
margin-top: 10px;
font-weight: bold;
}
.correct {
color: #4CAF50;
}
.incorrect {
color: #f44336;
}
</style>
</head>
<body>
<div class="game-container">
<h1>逻辑运算符挑战</h1>
<div class="dialog">
<div class="question" id="question">准备题目中...</div>
</div>
<input type="text" class="answer-input" id="answer" placeholder="输入 true 或 false">
<button class="btn" id="submit">提交答案</button>
<button class="btn" id="next" style="display: none;">下一题</button>
<div class="feedback" id="feedback"></div>
<div class="score" id="score">得分: 0</div>
</div>
<script>
let score = 0;
let currentAnswer = null;
// 生成随机布尔值
function randomBool() {
return Math.random() > 0.5;
}
// 生成随机数字
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 生成随机比较表达式
function randomComparison() {
const a = randomNumber(1, 20);
const b = randomNumber(1, 20);
const operators = ['>', '<', '>=', '<=', '===', '!=='];
const op = operators[randomNumber(0, operators.length - 1)];
return `${a} ${op} ${b}`;
}
// 生成随机逻辑表达式
function generateQuestion() {
const expressions = [];
const numExpressions = randomNumber(2, 4);
for (let i = 0; i < numExpressions; i++) {
if (Math.random() > 0.7) {
// 30% 概率生成 not 表达式
expressions.push(`!(${randomComparison()})`);
} else {
expressions.push(randomComparison());
}
}
// 随机组合表达式
let combined = expressions[0];
for (let i = 1; i < expressions.length; i++) {
const operators = ['&&', '||'];
const op = operators[randomNumber(0, 1)];
combined = `(${combined}) ${op} (${expressions[i]})`;
}
// 50% 概率在最外层加 not
if (Math.random() > 0.5) {
combined = `!(${combined})`;
}
return {
expression: combined,
answer: eval(combined)
};
}
// 显示新题目
function showNewQuestion() {
const question = generateQuestion();
document.getElementById('question').textContent = question.expression;
document.getElementById('answer').value = '';
document.getElementById('feedback').textContent = '';
document.getElementById('submit').style.display = 'inline-block';
document.getElementById('next').style.display = 'none';
currentAnswer = question.answer;
}
// 检查答案
function checkAnswer() {
const userAnswer = document.getElementById('answer').value.trim().toLowerCase();
let isCorrect = false;
if (userAnswer === 'true' || userAnswer === 'false') {
isCorrect = (userAnswer === 'true') === currentAnswer;
} else {
document.getElementById('feedback').textContent = '请输入 true 或 false';
document.getElementById('feedback').className = 'feedback incorrect';
return;
}
if (isCorrect) {
score++;
document.getElementById('feedback').textContent = '正确!';
document.getElementById('feedback').className = 'feedback correct';
} else {
document.getElementById('feedback').textContent = `错误! 正确答案是 ${currentAnswer}`;
document.getElementById('feedback').className = 'feedback incorrect';
}
document.getElementById('score').textContent = `得分: ${score}`;
document.getElementById('submit').style.display = 'none';
document.getElementById('next').style.display = 'inline-block';
}
// 初始化游戏
document.addEventListener('DOMContentLoaded', () => {
showNewQuestion();
document.getElementById('submit').addEventListener('click', checkAnswer);
document.getElementById('next').addEventListener('click', showNewQuestion);
document.getElementById('answer').addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
checkAnswer();
}
});
});
</script>
</body>
</html>最后：头脑风暴
2025年，人人都应该了解一点人工智能。
仅仅一个HTML答题页面，在蹭技术的网红圈必然会让小学数学、语文、英语老师惊叹！ 标题必须《我用DeepSeek做了一个答题系统》
仅仅一个HTML页面，未来：
1.《IT技术面试八股文也可以千变万化》
2.《大学的编程课老师该教什么、扮演什么角色》
3.《各类考试都应该是高端的私人订制------竞技游戏》
如果老师讲课只是在念PPT,那么用将PPT喂给AI，加上数字人语音， 再加上二次元舞蹈动作，我们的大学课堂是否可以百花齐放万家争鸣。