<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>整除魔法学院</title>
<style>
:root {
--primary: #FF9F1C; /* 活力橙 */
--secondary: #2EC4B6; /* 清新绿 */
--accent: #FFBF69; /* 浅橙 */
--dark: #2B2D42; /* 深蓝黑 */
--light: #FDFFFC; /* 纯白 */
--wrong: #EF476F; /* 错误红 */
--success: #06D6A0; /* 成功绿 */
--bg: #E0F7FA; /* 背景色 */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
font-family: "Nunito", "PingFang SC", "Microsoft YaHei", sans-serif;
background-color: var(--bg);
margin: 0;
padding: 0;
color: var(--dark);
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* --- 导航栏 --- */
header {
background: white;
padding: 15px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10;
}
.logo { font-size: 1.2rem; font-weight: 900; color: var(--secondary); display: flex; align-items: center; gap: 5px; }
.progress-bar-container { width: 50%; height: 10px; background: #eee; border-radius: 5px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--secondary); width: 0%; transition: width 0.3s ease; }
/* --- 主内容区 --- */
#app-container {
flex: 1;
padding: 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
/* --- 卡片与教学容器 --- */
.card {
background: white;
border-radius: 20px;
padding: 25px;
width: 100%;
max-width: 500px;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
margin-bottom: 20px;
animation: slideUp 0.5s ease-out;
position: relative;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
h1, h2 { margin-top: 0; color: var(--secondary); }
h1 { font-size: 1.8rem; }
p { font-size: 1.1rem; line-height: 1.6; color: #555; }
.highlight { color: var(--primary); font-weight: bold; font-size: 1.2rem; }
.math-box {
background: #f0f4f8;
padding: 15px;
border-radius: 12px;
font-family: monospace;
font-size: 1.1rem;
text-align: center;
margin: 15px 0;
border: 2px dashed var(--secondary);
line-height: 1.8;
}
.math-row { margin-bottom: 10px; display: block; }
.math-highlight { color: var(--primary); font-weight: bold; }
.math-sub { color: #888; font-size: 0.9em; }
/* --- 按钮样式 --- */
.btn {
background: var(--primary);
color: white;
border: none;
padding: 15px 30px;
border-radius: 50px;
font-size: 1.2rem;
font-weight: bold;
cursor: pointer;
box-shadow: 0 4px 0 #E08900; /* 3D effect */
transition: transform 0.1s;
width: 100%;
margin-top: 10px;
}
.btn:active { transform: translateY(4px); box-shadow: none; }
.btn-secondary { background: white; color: var(--primary); border: 2px solid var(--primary); box-shadow: none; }
.btn-option {
background: white; color: var(--dark); border: 2px solid #ddd; margin-bottom: 10px; box-shadow: 0 4px 0 #ddd;
text-align: left;
}
.btn-option.selected { border-color: var(--secondary); background: #E0F2F1; }
.btn-option.correct { background: var(--success); color: white; border-color: var(--success); box-shadow: 0 4px 0 #04a77d; }
.btn-option.wrong { background: var(--wrong); color: white; border-color: var(--wrong); box-shadow: 0 4px 0 #c43256; }
/* --- 首页菜单 --- */
.menu-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
width: 100%;
max-width: 500px;
}
.menu-item {
background: white;
padding: 20px;
border-radius: 15px;
text-align: center;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
cursor: pointer;
border: 2px solid transparent;
transition: all 0.2s;
}
.menu-item:active { transform: scale(0.95); }
.menu-item-icon { font-size: 3rem; margin-bottom: 10px; display: block; }
.menu-item-title { font-weight: bold; font-size: 1.1rem; }
/* --- 视觉化演示组件 --- */
.visual-split { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 20px 0; }
.number-block {
background: var(--dark); color: white; padding: 10px 15px; border-radius: 8px; font-weight: bold; font-size: 1.5rem;
transition: all 0.5s ease;
}
.number-block.faded { opacity: 0.2; transform: scale(0.8); }
.number-block.highlighted { background: var(--wrong); transform: scale(1.2); box-shadow: 0 0 15px var(--wrong); }
/* 3的整除动画容器 */
.division-packages { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 15px 0; }
.package {
border: 2px solid #ddd; padding: 10px; border-radius: 10px; text-align: center; position: relative; width: 45%;
transition: all 0.5s;
}
.package.trash { border-color: #ccc; background: #eee; color: #aaa; }
.package.keep { border-color: var(--primary); background: #FFF3E0; border-width: 3px; }
/* 分数拆分动画 */
.fraction-box {
display: flex; align-items: center; justify-content: center; gap: 10px; margin: 20px 0; font-size: 1.2rem;
}
.fraction { text-align: center; display: inline-block; vertical-align: middle; }
.fraction-top { border-bottom: 2px solid var(--dark); padding: 0 5px; }
.fraction-bottom { padding-top: 2px; }
.plus-sign { font-size: 1.5rem; color: var(--secondary); font-weight: bold; }
/* --- 反馈弹窗 --- */
#feedback-modal {
position: fixed; bottom: 0; left: 0; right: 0;
background: white;
padding: 25px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
transform: translateY(110%);
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 100;
text-align: center;
}
#feedback-modal.show { transform: translateY(0); }
#feedback-modal.correct h3 { color: var(--success); }
#feedback-modal.wrong h3 { color: var(--wrong); }
/* 底部导航 */
.bottom-nav {
position: absolute; bottom: 20px; width: 100%; max-width: 500px; display: flex; justify-content: space-between; padding: 0 20px;
}
.nav-btn { background: rgba(255,255,255,0.8); border: none; padding: 10px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
</style>
</head>
<body>
<header>
<div class="logo">🦉 整除魔法学院</div>
<div class="progress-bar-container">
<div class="progress-bar" id="progress-bar"></div>
</div>
</header>
<main id="app-container">
<!-- 内容动态注入 -->
</main>
<!-- 反馈弹窗 -->
<div id="feedback-modal">
<h3 id="feedback-title"></h3>
<p id="feedback-text"></p>
<button class="btn" id="feedback-btn" onclick="nextStep()">继续</button>
</div>
<script>
/* ================= 数据层 ================= */
// 课程数据：Step-by-step 教学逻辑
const courses = {
'tail-family': {
title: '看尾巴家族',
steps: [
{
type: 'intro',
content: '欢迎来到<b>“看尾巴家族”</b>！<br>在这个家族里，我们只要盯着数字的<b>屁股（末尾）</b>看，就能判断能不能整除！<br><br>家族成员：2, 5, 4, 8, 25, 125',
btnText: '开始魔法'
},
{
type: 'teach',
title: '2 和 5 的秘密',
content: '我们先看最简单的 <b>2</b> 和 <b>5</b>。<br>核心口诀：<b>只看最后一位！</b>',
visual: 'split-1', // 触发 1234 拆分动画
visualData: { num: '1234', tail: 1 },
explanation: '原理：<br>1234 可以拆成 1230 + 4。<br>1230 是 10 的倍数，肯定能被 2 和 5 整除（因为10=2×5）。<br>所以，前面的不管，<b>只看最后一位 4</b>！'
},
{
type: 'interact',
title: '小试牛刀',
content: '判断 <b>357924</b> 能否被 2 整除？',
options: [
{ text: '能！因为末尾是4', correct: true, feedback: '太棒了！4是偶数，所以全家都是偶数！' },
{ text: '不能，前面有奇数', correct: false, feedback: '别被前面的数字迷惑了，只看最后一位！' }
]
},
{
type: 'teach',
title: '升级版：4 和 25',
content: '如果是 <b>4</b> 和 <b>25</b>，我们要看<b>末两位</b>！<br>比如：123456',
visual: 'split-2',
visualData: { num: '123456', tail: 2 },
explanation: '原理：<br>100 = 4 × 25。<br>前面的 123400 是 100 的倍数，绝对安全。<br>所以只看最后两位 <b>56</b>！<br>56 ÷ 4 = 14，能整除！'
},
{
type: 'teach',
title: '终极版：8 和 125',
content: '如果是 <b>8</b> 和 <b>125</b>，我们要看<b>末三位</b>！',
visual: 'split-3',
visualData: { num: '7654320', tail: 3 },
explanation: '原理：<br>1000 = 8 × 125。<br>所以只看 <b>320</b>。<br>320 ÷ 8 = 40，能整除！'
},
{
type: 'summary',
content: '🎉 恭喜你掌握了“看尾巴家族”！<br><br>🌟 看1位：2, 5<br>🌟 看2位：4, 25<br>🌟 看3位：8, 125',
btnText: '去学下一招'
}
]
},
'sum-family': {
title: '求和大家族',
steps: [
{
type: 'intro',
content: '现在进入<b>“求和大家族”</b>！<br>这里的规矩完全不一样，成员是 <b>3</b> 和 <b>9</b>。<br>我们需要把所有数字<b>加起来</b>！',
btnText: '为什么？'
},
{
type: 'teach',
title: '第一步：手术刀拆解',
content: '我们用 <b>1234</b> 来做一次“数字手术”。<br>把每个数字按它的位置拆开：',
visual: 'math-expansion',
visualData: ['1234 = ', '1×1000', '+ 2×100', '+ 3×10', '+ 4'],
explanation: '1在千位，就是1000。<br>2在百位，就是200。<br>3在十位，就是30。<br>4在个位，就是4。'
},
{
type: 'teach',
title: '第二步：寻找 9',
content: '关键魔法！我们要把 10, 100, 1000 全部变成 <b>“9的倍数 + 1”</b>。',
explanation: '10 = 9 + 1<br>100 = 99 + 1<br>1000 = 999 + 1<br><br>这就像每个大数字里都藏着一个“9的倍数”，还多出来一个“1”。'
},
{
type: 'teach',
title: '第三步：代入变形',
content: '我们把刚才找到的 999, 99, 9 代进去：',
visual: 'math-replace',
explanation: '原来的：<br>1×<b>1000</b> + 2×<b>100</b> + 3×<b>10</b> + 4<br>⬇️ 变身 ⬇️<br>1×(<b>999+1</b>) + 2×(<b>99+1</b>) + 3×(<b>9+1</b>) + 4'
},
{
type: 'teach',
title: '第四步：展开与重组（最关键！）',
content: '现在我们把括号拆开，把它们分成“两队”：',
visual: 'math-regroup',
explanation: '我们把所有带 9 的放在一起，剩下的放在一起：<br><br>第一队（9之队）：<br><b>1×999 + 2×99 + 3×9</b><br><br>第二队（剩下的小数）：<br><b>1 + 2 + 3 + 4</b>'
},
{
type: 'teach',
title: '第五步：核心原理',
content: '为什么只要看 1+2+3+4？<br>这用到了<b>除法的性质</b>：',
visual: 'division-logic',
explanation: '我们要判断总数能不能被3整除，就相当于判断：<br><b>(9之队 + 剩下的数) ÷ 3</b><br>这可以拆成两个除法算式：<br><b>(9之队)÷3</b> 加上 <b>(剩下的数)÷3</b>'
},
{
type: 'teach',
title: '第六步：真相大白',
content: '看看这两个算式：',
visual: 'final-check',
explanation: '1. <b>(9之队) ÷ 3</b>：因为999, 99, 9 都是3的倍数，所以这部分<b>一定能除尽</b>，结果是整数。<br><br>2. <b>(剩下的数) ÷ 3</b>：就是 <b>(1+2+3+4) ÷ 3</b>。<br><br>既然前面已经是整数了，那整个式子是不是整数，<b>全看后面这部分能不能除尽！</b>'
},
{
type: 'interact',
title: '大结局',
content: '现在只需要算：<b>1+2+3+4 = 10</b>。<br>10 ÷ 3 能除尽吗？',
options: [
{ text: '能除尽', correct: false, feedback: '10 ÷ 3 = 3...1，有余数哦！' },
{ text: '不能除尽', correct: true, feedback: '对了！因为 10 不能被 3 整除，所以 1234 也不能！' }
]
},
{
type: 'summary',
content: '🎉 “求和家族”通关！<br><br>🔑 秘诀：<br>因为“9之队”永远能被整除，<br>所以只要看“数字和”就行了！',
btnText: '去闯关'
}
]
}
};
// 题库数据：10道奥数真题
const quizQuestions = [
{
q: '下面哪个数能被 2 整除？',
options: ['12345', '67890', '13579', '22221'],
answer: 1,
note: '看末尾！0是偶数，能被2整除。'
},
{
q: '下面哪个数能被 5 整除？',
options: ['5051', '1005', '5552', '5553'],
answer: 1,
note: '看末尾！末尾是0或5才能被5整除。'
},
{
q: '12□4 能被 3 整除，□里最小填几？',
options: ['0', '1', '2', '3'],
answer: 2,
note: '求和：1+2+4=7。7+□要能被3整除。最近的是9，所以7+2=9，填2。'
},
{
q: '判断：4500 能否同时被 4 和 25 整除？',
options: ['能', '不能'],
answer: 0,
note: '看末两位！00既能被4整除(0)，也能被25整除(0)。'
},
{
q: '一个六位数 12345□ 能被 9 整除，□是几？',
options: ['1', '2', '3', '9'],
answer: 2,
note: '求和：1+2+3+4+5=15。15+□要能被9整除。最近的是18，所以填3。'
},
{
q: '下列哪个数能被 8 整除？',
options: ['1004', '1108', '1120', '1012'],
answer: 2,
note: '看末三位！120÷8=15，能整除。'
},
{
q: '327□5 能被 25 整除，□里可以填哪些数？',
options: ['0, 2, 5, 7', '1, 3, 5, 7', '0, 2, 5, 8', '2, 7'],
answer: 3,
note: '看末两位！必须是 00, 25, 50, 75。因为最后一位是5，所以只能凑成 25 或 75。'
},
{
q: '从 1 到 50，有多少个数能被 3 整除？',
options: ['15', '16', '17', '18'],
answer: 1,
note: '50÷3 = 16...2，所以有16个。'
},
{
q: '一个五位数 4□2□0，同时是 3 和 5 的倍数，也是 4 的倍数，这个数最小是多少？',
options: ['40200', '41220', '40260', '43200'],
answer: 0,
note: '要是4和5的倍数，末尾必须是0，且末两位能被4整除(00, 20, 40...)。要是3的倍数，数字和要是3的倍数。40200和=6(OK)，最小。'
},
{
q: '125 × 32 × 25 的积的末尾有几个零？',
options: ['3', '4', '5', '6'],
answer: 2,
note: '不需要算出结果！125需要8，25需要4。32=8×4。125×8=1000(3个0)，25×4=100(2个0)。共5个0。'
}
];
/* ================= 逻辑控制层 ================= */
let currentState = 'menu'; // menu, learning, quiz
let currentCourseId = '';
let currentStepIndex = 0;
let currentQuizIndex = 0;
let score = 0;
const app = document.getElementById('app-container');
const progressBar = document.getElementById('progress-bar');
const modal = document.getElementById('feedback-modal');
const modalTitle = document.getElementById('feedback-title');
const modalText = document.getElementById('feedback-text');
const modalBtn = document.getElementById('feedback-btn');
// 初始化
function init() {
renderMenu();
}
// 渲染主菜单
function renderMenu() {
currentState = 'menu';
progressBar.style.width = '0%';
app.innerHTML = `
<div class="card" style="text-align:center;">
<h1>🎓 课程选择</h1>
<p>选择一个魔法技能开始学习吧！</p>
</div>
<div class="menu-grid">
<div class="menu-item" onclick="startCourse('tail-family')" style="border-bottom: 4px solid var(--secondary);">
<span class="menu-item-icon">🐯</span>
<div class="menu-item-title">看尾巴家族<br><small>(2, 5, 4, 8...)</small></div>
</div>
<div class="menu-item" onclick="startCourse('sum-family')" style="border-bottom: 4px solid var(--primary);">
<span class="menu-item-icon">🦁</span>
<div class="menu-item-title">求和大家族<br><small>(3, 9)</small></div>
</div>
<div class="menu-item" onclick="startQuiz()" style="grid-column: span 2; background: linear-gradient(135deg, #fff 0%, #FFF3E0 100%); border: 2px solid var(--primary);">
<span class="menu-item-icon">⚔️</span>
<div class="menu-item-title">终极闯关挑战<br><small>(10道奥数真题)</small></div>
</div>
</div>
`;
}
// 开始课程
function startCourse(id) {
currentState = 'learning';
currentCourseId = id;
currentStepIndex = 0;
renderStep();
}
// 渲染课程步骤
function renderStep() {
const course = courses[currentCourseId];
const step = course.steps[currentStepIndex];
// 更新进度条
const progress = ((currentStepIndex + 1) / course.steps.length) * 100;
progressBar.style.width = `${progress}%`;
let html = `<div class="card">`;
// 标题
if (step.title) html += `<h2>${step.title}</h2>`;
else if (step.type === 'intro') html += `<h2>👋 嗨！同学们</h2>`;
else if (step.type === 'summary') html += `<h2>🏆 恭喜通关！</h2>`;
// 内容
html += `<p>${step.content}</p>`;
// 视觉演示
if (step.visual) {
html += generateVisual(step.visual, step.visualData || step.text);
}
// 讲解框
if (step.explanation) {
html += `<div class="math-box" style="font-size: 1rem; text-align: left; background: #E3F2FD; border-color: #90CAF9;">${step.explanation}</div>`;
}
// 交互区
if (step.type === 'interact') {
html += `<div style="margin-top:20px;">`;
step.options.forEach((opt, idx) => {
html += `<button class="btn btn-option" onclick="checkStepAnswer(${idx})">${opt.text}</button>`;
});
html += `</div>`;
} else {
// 普通下一步按钮
const btnText = step.btnText || (currentStepIndex === course.steps.length - 1 ? '完成' : '下一步');
const action = currentStepIndex === course.steps.length - 1 ? 'init()' : 'nextStep()';
html += `<button class="btn" onclick="${action}">${btnText}</button>`;
}
// 底部导航（返回）
html += `</div>`;
if(currentStepIndex > 0) {
html += `<div style="width:100%; max-width:500px; text-align:left;"><button style="background:none; border:none; color:#666; text-decoration:underline;" onclick="prevStep()">⬅️ 上一步</button></div>`;
} else {
html += `<div style="width:100%; max-width:500px; text-align:left;"><button style="background:none; border:none; color:#666; text-decoration:underline;" onclick="init()">⬅️ 返回主页</button></div>`;
}
app.innerHTML = html;
// 触发动画
if (step.visual === 'split-1' || step.visual === 'split-2' || step.visual === 'split-3') {
setTimeout(() => {
document.getElementById('part-head').classList.add('faded');
document.getElementById('part-tail').classList.add('highlighted');
}, 800);
}
}
// 生成视觉组件
function generateVisual(type, data) {
if (type.startsWith('split-')) {
const numStr = data.num;
const tailLen = data.tail;
const head = numStr.substring(0, numStr.length - tailLen);
const tail = numStr.substring(numStr.length - tailLen);
return `
<div class="visual-split">
<div id="part-head" class="number-block" style="background: #90A4AE;">${head}</div>
<div id="part-tail" class="number-block" style="background: var(--secondary);">${tail}</div>
</div>
<p style="text-align:center; font-size:0.9rem; color:#888;">👆 盯着有颜色的部分看！</p>
`;
}
if (type === 'math-expansion') {
return `<div class="math-box">${data.join(' ')}</div>`;
}
if (type === 'math-replace') {
return `
<div class="math-box" style="font-size:1rem;">
<span style="color:#888">1×(999+1) + 2×(99+1) + 3×(9+1) + 4</span>
</div>
`;
}
if (type === 'math-regroup') {
return `
<div class="math-box" style="text-align:center;">
<div style="background:#E0F2F1; padding:5px; border-radius:5px; margin-bottom:5px;">
<span style="color:var(--secondary)">[ 1×999 + 2×99 + 3×9 ]</span>
</div>
<div style="font-size:1.5rem; font-weight:bold;">+</div>
<div style="background:#FFF3E0; padding:5px; border-radius:5px; margin-top:5px;">
<span style="color:var(--primary)">[ 1 + 2 + 3 + 4 ]</span>
</div>
</div>
`;
}
if (type === 'division-logic') {
return `
<div class="fraction-box">
<div class="fraction">
<div class="fraction-top" style="color:var(--secondary)">9之队</div>
<div class="fraction-bottom">3</div>
</div>
<div class="plus-sign">+</div>
<div class="fraction">
<div class="fraction-top" style="color:var(--primary)">剩下的数</div>
<div class="fraction-bottom">3</div>
</div>
</div>
`;
}
if (type === 'final-check') {
return `
<div class="fraction-box">
<div class="fraction">
<div class="fraction-top" style="color:var(--secondary)">整数</div>
<div class="fraction-bottom" style="font-size:0.8rem; color:#888">(一定能除尽)</div>
</div>
<div class="plus-sign">+</div>
<div class="fraction">
<div class="fraction-top" style="color:var(--primary)">?</div>
<div class="fraction-bottom" style="font-size:0.8rem; color:#888">(看它能不能除尽)</div>
</div>
</div>
`;
}
if (type === 'text-highlight') {
return `<div class="math-box" style="letter-spacing: 5px; font-weight: bold; color: var(--primary);">${data.split('').join('+')} = ?</div>`;
}
return '';
}
// 检查课程中的互动题
function checkStepAnswer(idx) {
const step = courses[currentCourseId].steps[currentStepIndex];
const option = step.options[idx];
const btns = document.querySelectorAll('.btn-option');
// 锁定按钮
btns.forEach(b => b.disabled = true);
if (option.correct) {
btns[idx].classList.add('correct');
showModal('🎉 回答正确！', option.feedback, true);
} else {
btns[idx].classList.add('wrong');
showModal('😅 哎呀，不对哦', option.feedback, false);
}
}
// 课程导航
function nextStep() {
hideModal();
const course = courses[currentCourseId];
if (currentStepIndex < course.steps.length - 1) {
currentStepIndex++;
renderStep();
} else {
init(); // 课程结束回主页
}
}
function prevStep() {
if (currentStepIndex > 0) {
currentStepIndex--;
renderStep();
}
}
/* ================= 闯关模式逻辑 ================= */
function startQuiz() {
currentState = 'quiz';
currentQuizIndex = 0;
score = 0;
renderQuizQuestion();
}
function renderQuizQuestion() {
if (currentQuizIndex >= quizQuestions.length) {
renderQuizResult();
return;
}
const q = quizQuestions[currentQuizIndex];
const progress = ((currentQuizIndex) / quizQuestions.length) * 100;
progressBar.style.width = `${progress}%`;
let html = `
<div class="card">
<div style="display:flex; justify-content:space-between; margin-bottom:10px;">
<span style="font-weight:bold; color:var(--secondary)">第 ${currentQuizIndex + 1}/${quizQuestions.length} 关</span>
<span style="font-weight:bold; color:var(--primary)">得分: ${score}0</span>
</div>
<h3>${q.q}</h3>
<div style="margin-top:20px;">
`;
q.options.forEach((opt, idx) => {
html += `<button class="btn btn-option" onclick="checkQuizAnswer(${idx})">${opt}</button>`;
});
html += `
</div>
</div>
<div style="width:100%; max-width:500px; text-align:left;"><button style="background:none; border:none; color:#666; text-decoration:underline;" onclick="init()">退出闯关</button></div>
`;
app.innerHTML = html;
}
function checkQuizAnswer(idx) {
const q = quizQuestions[currentQuizIndex];
const btns = document.querySelectorAll('.btn-option');
btns.forEach(b => b.disabled = true);
const isCorrect = idx === q.answer;
if (isCorrect) {
btns[idx].classList.add('correct');
score++;
showModal('✅ 答对了！', q.note, true, true);
} else {
btns[idx].classList.add('wrong');
btns[q.answer].classList.add('correct'); // 显示正确答案
showModal('❌ 答错了', `正确答案是：${q.options[q.answer]}<br><br>${q.note}`, false, true);
}
}
function nextQuiz() {
hideModal();
currentQuizIndex++;
renderQuizQuestion();
}
function renderQuizResult() {
progressBar.style.width = '100%';
let title = '';
let msg = '';
if (score === 10) { title = '🏆 奥数王者！'; msg = '全对！你简直是数学天才！'; }
else if (score >= 8) { title = '🥈 黄金学霸'; msg = '非常棒！只差一点点就满分了。'; }
else if (score >= 6) { title = '🥉 青铜骑士'; msg = '及格啦！还要继续加油哦。'; }
else { title = '🌱 潜力新星'; msg = '别灰心，回去复习一下“看尾巴”口诀吧！'; }
app.innerHTML = `
<div class="card" style="text-align:center; padding: 40px 20px;">
<div style="font-size: 4rem; margin-bottom: 20px;">${score >= 6 ? '🎉' : '💪'}</div>
<h1 style="color:var(--primary)">${title}</h1>
<h2>得分：${score * 10} 分</h2>
<p>${msg}</p>
<button class="btn" onclick="init()">返回主页</button>
<button class="btn btn-secondary" onclick="startQuiz()">再试一次</button>
</div>
`;
}
/* ================= 弹窗控制 ================= */
function showModal(title, text, isSuccess, isQuiz = false) {
modal.className = isSuccess ? 'correct' : 'wrong';
modalTitle.innerText = title;
modalText.innerHTML = text;
// 如果是Quiz模式，按钮功能改为下一题
if (isQuiz) {
modalBtn.onclick = nextQuiz;
} else {
// 学习模式下，如果答错了，只关闭弹窗不跳转；答对了跳转
if (isSuccess) {
modalBtn.onclick = nextStep;
} else {
modalBtn.onclick = hideModal;
}
}
modal.classList.add('show');
}
function hideModal() {
modal.classList.remove('show');
}
// 启动应用
init();
</script>
</body>
</html>💡 这段代码完全由 gemini 生成。
登录后可复制完整代码