<!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: #E71D36; /* 警示红 */
--purple: #9D4EDD; /* 魔法紫 */
--blue: #2196F3; /* 科技蓝 */
--dark: #011627; /* 深蓝黑 */
--light: #FDFFFC; /* 奶白 */
--bg: #E0F7FA; /* 背景浅蓝 */
--card-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
body {
font-family: '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: var(--primary);
color: white;
padding: 15px;
text-align: center;
font-size: 1.2rem;
font-weight: bold;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
flex-shrink: 0;
z-index: 10;
}
/* 底部模块切换 */
.tab-bar {
display: flex;
background: white;
padding: 10px 5px;
justify-content: flex-start;
box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
flex-shrink: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 8px;
padding-left: 10px;
padding-right: 10px;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-btn {
background: #f0f0f0;
border: none;
padding: 8px 15px;
border-radius: 20px;
font-weight: bold;
color: #666;
font-size: 0.9rem;
white-space: nowrap;
transition: all 0.2s;
cursor: pointer;
flex-shrink: 0;
}
.tab-btn.active {
background: var(--purple);
color: white;
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(157, 78, 221, 0.4);
}
/* 主内容区域 */
#main-container {
flex: 1;
overflow-y: auto;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 600px;
margin: 0 auto;
}
/* 教学卡片 */
.card {
background: white;
border-radius: 20px;
padding: 25px;
width: 100%;
margin-bottom: 20px;
box-shadow: var(--card-shadow);
animation: slideIn 0.5s ease-out;
border-bottom: 5px solid #e0e0e0;
}
@keyframes slideIn {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
h2 {
margin-top: 0;
color: var(--primary);
font-size: 1.4rem;
text-align: center;
}
.explanation {
font-size: 1.1rem;
line-height: 1.6;
margin: 15px 0;
}
/* 算式容器 */
.math-block {
background: #f9f9f9;
border-radius: 10px;
padding: 15px;
margin: 10px 0;
text-align: center;
font-size: 1.2rem;
border: 2px dashed #ddd;
overflow-x: auto;
}
/* 按钮样式 */
.action-btn {
display: block;
width: 100%;
padding: 15px;
margin-top: 20px;
border: none;
border-radius: 15px;
background: var(--secondary);
color: white;
font-size: 1.2rem;
font-weight: bold;
cursor: pointer;
box-shadow: 0 4px 0 #1B7A71;
transition: transform 0.1s;
}
.action-btn:active { transform: translateY(4px); box-shadow: none; }
/* 短除法样式 */
.short-division {
display: flex;
flex-direction: column;
align-items: center;
font-family: monospace;
font-size: 1.5rem;
margin: 20px 0;
}
.sd-row { display: flex; align-items: stretch; }
.sd-divisor {
padding: 5px 10px;
border-right: 2px solid var(--dark);
border-bottom: 2px solid var(--dark);
color: var(--accent);
font-weight: bold;
display: flex; align-items: center; justify-content: center;
}
.sd-dividend {
padding: 5px 20px;
border-bottom: 2px solid var(--dark);
display: flex; gap: 20px; align-items: center;
}
.sd-last .sd-divisor, .sd-last .sd-dividend { border-bottom: none; }
.sd-last .sd-dividend { color: var(--blue); font-weight: bold; }
/* 平方数网格与动画样式 */
.grid-demo {
display: grid;
gap: 2px;
justify-content: center;
margin: 20px auto;
}
.dot-grid {
display: grid;
gap: 5px;
justify-content: center;
margin: 15px auto;
background: #fff;
padding: 10px;
border-radius: 10px;
border: 2px dashed #ddd;
}
.dot {
width: 12px; height: 12px;
background: var(--primary);
border-radius: 50%;
animation: popIn 0.3s ease-out backwards;
}
.grid-cell {
width: 30px; height: 30px;
border-radius: 4px;
background: #ddd;
display: flex; align-items: center; justify-content: center;
font-size: 10px; color: rgba(0,0,0,0.3);
}
.cell-base { background: var(--blue); opacity: 0.8; }
.cell-empty { background: transparent; }
.cell-right { background: #4CAF50; color: white; animation: slideLeft 0.5s ease; }
.cell-bottom { background: #4CAF50; color: white; animation: slideUp 0.5s ease; }
.cell-corner { background: #E71D36; color: white; animation: popIn 0.5s ease 0.2s backwards; }
/* 区间计数小球演示 */
.interval-container {
display: flex; align-items: center; justify-content: center;
gap: 6px; flex-wrap: wrap; margin: 15px 0;
}
.num-ball {
width: 34px; height: 34px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: bold; font-size: 0.9rem;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.ball-sq {
background: var(--primary); color: white;
width: 48px; height: 48px; font-size: 1.2rem; z-index: 2;
}
.ball-mid {
background: #B2DFDB; color: #004D40;
transform: scale(0.9);
animation: popIn 0.3s backwards;
}
.count-tag {
background: var(--accent); color: white;
padding: 4px 12px; border-radius: 15px;
font-size: 0.9rem; font-weight: bold;
margin-top: 10px; display: inline-block;
animation: slideUp 0.3s ease;
}
@keyframes slideLeft { from { transform: translateX(-10px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideUp { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes popIn { 0% { transform: scale(0); } 80% { transform: scale(1.1); } 100% { transform: scale(1); } }
/* 闯关按钮 */
.quiz-option { display: flex; gap: 10px; margin-top: 15px; }
.quiz-btn {
flex: 1; padding: 15px; border-radius: 12px;
border: 2px solid #eee; background: white;
font-size: 1.2rem; font-weight: bold;
cursor: pointer; transition: all 0.2s;
}
.quiz-btn.correct { background: #D4EDDA; border-color: #28a745; color: #155724; }
.quiz-btn.wrong { background: #F8D7DA; border-color: #dc3545; color: #721c24; }
</style>
</head>
<body>
<header>🧙♂️ 奥数大冒险</header>
<div id="main-container">
<div id="content-area"></div>
</div>
<div class="tab-bar">
<button class="tab-btn" onclick="switchModule('tail')">整除复习</button>
<button class="tab-btn" onclick="switchModule('factors')">因数魔法</button>
<button class="tab-btn" onclick="switchModule('gcd')">短除大神</button>
<button class="tab-btn active" onclick="switchModule('sq_check')">💣 平方排雷</button>
<button class="tab-btn" onclick="switchModule('sq_diff')">📐 几何生长</button>
<button class="tab-btn" onclick="switchModule('quiz')">⚔️ 闯关</button>
</div>
<script>
// --- 数据与状态 ---
let currentModule = 'sq_check';
let currentStep = 0;
let quizScore = 0;
let quizTotal = 0;
let currentQuestion = null;
// --- 教学内容数据 ---
const lessons = {
// --- 模块3: 平方数尾数特征 (生动详细版) ---
'sq_check': [
{
title: "🤔 什么是完全平方数？",
html: `<p class="explanation">在开始排雷前，我们先看清楚“敌人”长什么样。</p>
<p class="explanation">完全平方数，就是可以<strong>摆成正方形</strong>的数字。</p>
<div id="square-demo" style="min-height:120px; display:flex; align-items:center; justify-content:center;"></div>
<p class="explanation" style="text-align:center; color:#666; font-size:0.9rem">点击按钮看变化 👇</p>`,
btnText: "摆成 1x1",
action: () => showSquare(1)
},
{
title: "🔍 寻找尾数指纹",
html: `<p class="explanation">看看前 10 个完全平方数，请盯着它们的<strong>个位 (尾巴)</strong>看：</p>
<div class="math-block" style="display:flex; flex-wrap:wrap; justify-content:center; gap:8px; font-size:1rem">
<span>1²=<b style="color:var(--primary)">1</b></span>
<span>2²=<b style="color:var(--primary)">4</b></span>
<span>3²=<b style="color:var(--primary)">9</b></span>
<span>4²=1<b style="color:var(--primary)">6</b></span>
<span>5²=2<b style="color:var(--primary)">5</b></span>
<span>6²=3<b style="color:var(--primary)">6</b></span>
<span>7²=4<b style="color:var(--primary)">9</b></span>
<span>8²=6<b style="color:var(--primary)">4</b></span>
<span>9²=8<b style="color:var(--primary)">1</b></span>
<span>10²=10<b style="color:var(--primary)">0</b></span>
</div>
<p class="explanation">你发现了吗？有些数字<strong>从来没有出现在个位</strong>！</p>`,
btnText: "谁失踪了？"
},
{
title: "🚫 2378 判死刑 (Level 1)",
html: `<p class="explanation"><strong>2, 3, 7, 8</strong> 就像被诅咒了一样，永远无法成为平方数的尾巴！</p>
<div class="card" style="background:var(--accent); color:white">
<strong>⚡ 第一定律：</strong><br>
看到个位是 2, 3, 7, 8<br>
<strong>直接判死刑！</strong>
</div>`,
btnText: "那 6 结尾的呢？"
},
{
title: "🕵️♂️ 进阶排雷 (Level 2)",
html: `<p class="explanation">如果个位是 <strong>6</strong> (比如 16, 36)，十位必须是<strong>奇数</strong>！</p>
<p class="explanation">如果看到 <strong>26, 46, 86</strong> (偶数+6)，那是假冒的！</p>
<div class="card" style="background:var(--bg)">
<strong>⚡ 第二定律：</strong><br>
6 结尾，十位必奇！
</div>`,
btnText: "5 也有特权吗？"
},
{
title: "👑 5 的专属保镖 (Level 2)",
html: `<p class="explanation">5 结尾的平方数，十位必须是 <strong>2</strong>！(如 25, 225)</p>
<p class="explanation">如果你看到 <strong>15, 35, 45</strong> 这种结尾，直接抓起来！</p>
<div class="card" style="background:var(--bg)">
<strong>🕵️♂️ 排雷总结：</strong>
<ul>
<li>个位 2,3,7,8 → ❌</li>
<li>6 结尾 + 十位偶数 → ❌</li>
<li>5 结尾 + 十位不是2 → ❌</li>
</ul>
</div>`,
btnText: "去学几何生长"
}
],
// --- 模块4: 平方差规律 (生动分步 + 区间动画版) ---
'sq_diff': [
{
title: "🏠 给房间扩建",
html: `<p class="explanation">想象你有一个 <strong>3米 × 3米</strong> 的正方形房间（蓝色地砖）。</p>
<div id="gnomon-demo" class="grid-demo" style="grid-template-columns: repeat(4, 30px); width: 130px;"></div>
<p class="explanation">想把它扩建成 4米 × 4米，需要几块新地砖？我们一块块加上去！</p>`,
btnText: "第一步：加右边",
action: () => renderGnomonStep(0)
},
{
title: "🧱 Step 1: 加一列",
html: `<p class="explanation">因为边长是 3，所以右边先铺 <strong>3块</strong> (绿色)。</p>
<div id="gnomon-demo" class="grid-demo" style="grid-template-columns: repeat(4, 30px); width: 130px;"></div>
<div class="math-block">现在加了：3 块</div>`,
btnText: "第二步：加下边",
action: () => renderGnomonStep(1)
},
{
title: "🧱 Step 2: 加一行",
html: `<p class="explanation">下边也铺 <strong>3块</strong> (绿色)。</p>
<div id="gnomon-demo" class="grid-demo" style="grid-template-columns: repeat(4, 30px); width: 130px;"></div>
<div class="math-block">现在加了：3 + 3 = 6 块</div>
<p class="explanation">咦？右下角是不是缺了一个口？</p>`,
btnText: "第三步：补缺口",
action: () => renderGnomonStep(2)
},
{
title: "✨ Step 3: 完美补角",
html: `<p class="explanation">最后在角落补上关键的 <strong>1块</strong> (红色)！</p>
<div id="gnomon-demo" class="grid-demo" style="grid-template-columns: repeat(4, 30px); width: 130px;"></div>
<div class="math-block">
总共增加 = 3 + 3 + 1 = <strong>7</strong>
</div>
<p class="explanation">差值公式：2n + 1</p>`,
btnText: "中间夹了几个数？",
action: () => renderGnomonStep(3)
},
// --- 区间计数动画部分 ---
{
title: "🔬 小实验：从 4 到 9",
html: `<p class="explanation">直接算大数太晕了，我们先用小数字 2²=4 和 3²=9 来做个实验。</p>
<div id="interval-demo" style="min-height:80px; display:flex; flex-direction:column; align-items:center; justify-content:center;"></div>
<p class="explanation">它们中间夹着几个数？我们一个个点名！</p>`,
btnText: "点名开始！",
action: () => renderInterval(4, 9)
},
{
title: "📏 为什么要减 1 ？",
html: `<p class="explanation">这就好比<strong>在两座楼之间挂灯笼</strong>：</p>
<div class="math-block" style="font-size:1rem; position:relative; overflow:hidden;">
<div style="display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid #333; padding-bottom:5px;">
<div style="background:#555; color:white; padding:5px;">楼(4)</div>
<div style="flex:1; text-align:center; color:#666; font-size:0.8rem;">
距离 = 5 米 (差值)<br>
🏮 🏮 🏮 🏮
</div>
<div style="background:#555; color:white; padding:5px;">楼(9)</div>
</div>
</div>
<ul style="text-align:left; font-size:1rem; line-height:1.6; margin-top:10px;">
<li>楼间距 (差值) = 9 - 4 = <strong>5</strong></li>
<li><strong>两头是墙壁，不能挂！</strong></li>
<li>所以灯笼数 = 距离 - <strong>1</strong> = 4</li>
</ul>
<div class="card" style="background:var(--secondary); color:white; padding:10px;">
<strong>口诀：</strong><br>
算头不算尾，差值就是它；<br>
两头都不算，差值再减 1。
</div>`,
btnText: "挑战大数"
},
{
title: "🚀 秒杀：30² 到 31²",
html: `<p class="explanation">回到难题：30² 和 31² 之间夹着几个数？</p>
<p class="explanation">我们不需要算出 900 和 961！</p>
<div class="math-block">
<p>1. 算楼间距 (2n+1)：<br>30 + 31 = 61</p>
<p>2. 去掉墙壁 (再减 1)：<br>61 - 1 = <strong>60</strong></p>
</div>
<p class="explanation"><strong>绝招：</strong>直接算 2n 即 2 × 30 = 60！</p>`,
btnText: "去闯关！"
}
],
// --- 其他模块 (复习) ---
'tail': [
{
title: "⚡ 复习：整除特征",
html: `<div class="card" style="background:var(--bg)"><p>看尾巴：2, 5<br>看和：3, 9</p></div>`,
btnText: "因数魔法"
}
],
'factors': [
{
title: "🧱 因数魔法复习",
html: `<div class="math-block">公式：指数加一连乘</div>`,
btnText: "短除大神"
}
],
'gcd': [
{
title: "⚔️ 短除大神复习",
html: `<p class="explanation">GCD乘侧边，LCM乘L型。</p>`,
btnText: "去排雷！"
}
]
};
// --- 核心逻辑 ---
function init() {
switchModule('sq_check');
}
function switchModule(moduleName) {
currentModule = moduleName;
currentStep = 0;
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
const map = {'tail':0, 'factors':1, 'gcd':2, 'sq_check':3, 'sq_diff':4, 'quiz':5};
if(document.querySelectorAll('.tab-btn')[map[moduleName]]) {
document.querySelectorAll('.tab-btn')[map[moduleName]].classList.add('active');
document.querySelectorAll('.tab-btn')[map[moduleName]].scrollIntoView({behavior: "smooth", block: "nearest", inline: "center"});
}
if (moduleName === 'quiz') {
startQuiz();
} else {
renderCurrentStep();
}
}
function renderCurrentStep() {
const contentDiv = document.getElementById('content-area');
const data = lessons[currentModule][currentStep];
let html = `
<div class="card">
<h2>${data.title}</h2>
${data.html}
</div>
<button class="action-btn" onclick="nextStep()">${data.btnText} ➡️</button>
`;
if (currentStep === lessons[currentModule].length - 1) {
let nextMod = '';
if(currentModule === 'tail') nextMod = "'factors'";
else if(currentModule === 'factors') nextMod = "'gcd'";
else if(currentModule === 'gcd') nextMod = "'sq_check'";
else if(currentModule === 'sq_check') nextMod = "'sq_diff'";
else if(currentModule === 'sq_diff') nextMod = "'quiz'";
if(nextMod) html = html.replace('nextStep()', `switchModule(${nextMod})`);
}
contentDiv.innerHTML = html;
contentDiv.scrollTop = 0;
if(data.action) setTimeout(data.action, 100);
}
function nextStep() {
if (currentStep < lessons[currentModule].length - 1) {
currentStep++;
renderCurrentStep();
}
}
// --- 动态演示正方形函数 ---
let sqSize = 1;
function showSquare(n) {
if (n) sqSize = n;
else sqSize++;
if(sqSize > 5) sqSize = 1;
const container = document.getElementById('square-demo');
if(!container) return;
let dotsHtml = '';
for(let i=0; i<sqSize*sqSize; i++) {
const delay = Math.random() * 0.3;
dotsHtml += `<div class="dot" style="animation-delay:${delay}s"></div>`;
}
container.innerHTML = `
<div style="text-align:center">
<div class="dot-grid" style="grid-template-columns: repeat(${sqSize}, 12px);">
${dotsHtml}
</div>
<div style="font-weight:bold; color:var(--primary)">${sqSize} × ${sqSize} = ${sqSize*sqSize}</div>
</div>
`;
const btn = document.querySelector('#content-area .action-btn');
if(btn) {
btn.textContent = sqSize < 5 ? `变成 ${sqSize+1}x${sqSize+1}` : "看尾数规律 ➡️";
btn.onclick = sqSize < 5 ? () => showSquare() : nextStep;
}
}
// --- 几何生长分步演示逻辑 ---
function renderGnomonStep(step) {
setTimeout(() => {
const container = document.getElementById('gnomon-demo');
if(!container) return;
const n = 3;
let html = '';
for(let row=0; row<=n; row++) {
for(let col=0; col<=n; col++) {
let className = '';
let content = '';
if (row < n && col < n) {
className = 'cell-base';
} else {
if (step === 0) className = 'cell-empty';
else if (step === 1) {
if (col === n && row < n) className = 'cell-right';
else className = 'cell-empty';
} else if (step === 2) {
if (col === n && row < n) className = 'cell-right';
else if (row === n && col < n) className = 'cell-bottom';
else className = 'cell-empty';
} else {
if (col === n && row < n) className = 'cell-right';
else if (row === n && col < n) className = 'cell-bottom';
else if (row === n && col === n) className = 'cell-corner';
}
}
const style = className === 'cell-empty' ? 'background:transparent' : '';
if(className === 'cell-empty') content = '';
html += `<div class="grid-cell ${className}" style="${style}">${content}</div>`;
}
}
container.innerHTML = html;
}, 50);
}
// --- 新增：区间计数演示动画 ---
function renderInterval(start, end) {
const container = document.getElementById('interval-demo');
if(!container) return;
let html = `<div class="interval-container">
<div class="num-ball ball-sq">${start}</div>`;
for(let i=start+1; i<end; i++) {
html += `<div class="num-ball ball-mid" style="animation-delay:${(i-start)*0.1}s">${i}</div>`;
}
html += `<div class="num-ball ball-sq">${end}</div>
</div>
<div class="count-tag">中间夹着 ${end-start-1} 个数</div>`;
container.innerHTML = html;
}
// --- 智能题库系统 ---
function startQuiz() {
quizScore = 0; quizTotal = 0; generateQuestion();
}
// --- 奥数真题库 ---
const olympiadQuestions = [
{
title: "🕵️♂️ 尾数陷阱题",
text: "数字 <strong>444...46</strong><br><span style='font-size:0.9rem'>(100个4，最后是6)</span><br>可能是完全平方数吗？",
correct: false,
explanation: "<strong>错！</strong>虽然个位是 6 (通过第一关)，<br>但 6 结尾的数，<strong>十位必须是奇数</strong>！<br>这里十位是 4 (偶数)，所以它是冒牌货！"
},
{
title: "🧱 因数反推题",
text: "如果有个数 <strong>n</strong> 只有 <strong>3个</strong> 因数，<br>那 <strong>n</strong> 一定是完全平方数吗？",
correct: true,
explanation: "<strong>对！</strong><br>比如 4 (1,2,4)、9 (1,3,9)、25 (1,5,25)。<br>只有<strong>质数的平方</strong>才正好有 3 个因数！"
},
{
title: "📏 大数区间题",
text: "在 <strong>50²</strong> 和 <strong>51²</strong> 之间，<br>一共有 <strong>100</strong> 个自然数吗？",
correct: true,
explanation: "<strong>对！</strong><br>公式：中间个数 = 2n。<br>2 × 50 = 100 个。完全正确！"
},
{
title: "💣 5 的特权题",
text: "数字 <strong>1234555</strong><br><span style='font-size:0.9rem'>(末尾是555)</span><br>可能是完全平方数吗？",
correct: false,
explanation: "<strong>错！</strong><br>5 结尾的平方数，<strong>十位必须是 2</strong> (25)！<br>这里十位是 5，直接判死刑！"
},
{
title: "⚡ 快速计算题",
text: "算式 <strong>100² - 99²</strong><br>的结果是 <strong>199</strong> 吗？",
correct: true,
explanation: "<strong>对！</strong><br>平方差绝招：<strong>相邻两数之和</strong>。<br>100 + 99 = 199。"
},
{
title: "🧮 复杂因数题",
text: "数 <strong>360</strong> <span style='font-size:0.9rem'>(2³×3²×5)</span><br>一共有 <strong>24</strong> 个因数吗？",
correct: true,
explanation: "<strong>对！</strong><br>指数分别是 3, 2, 1。<br>公式：(3+1)×(2+1)×(1+1)<br>= 4 × 3 × 2 = 24。"
}
];
function generateQuestion() {
const contentDiv = document.getElementById('content-area');
// 随机抽取一道真题
const qIndex = Math.floor(Math.random() * olympiadQuestions.length);
const qData = olympiadQuestions[qIndex];
currentQuestion = qData; // 保存当前题目数据供检查
let html = `
<div class="card">
<h2>🏆 奥数闯关 (第 ${quizTotal + 1} 题)</h2>
<div style="text-align:center; margin: 20px 0;">
<h3 style="color:var(--primary); margin-bottom:10px;">${qData.title}</h3>
<p style="font-size:1.3rem; font-weight:bold; line-height:1.5;">${qData.text}</p>
</div>
<div id="feedback-area" style="text-align:center; min-height: 100px; padding:10px; display:flex; align-items:center; justify-content:center;"></div>
<div class="quiz-option">
<button id="btn-yes" class="quiz-btn" onclick="checkAnswer(true)">✅ 是/对</button>
<button id="btn-no" class="quiz-btn" onclick="checkAnswer(false)">❌ 否/错</button>
</div>
</div>
<button id="next-q-btn" class="action-btn" style="display:none;" onclick="generateQuestion()">下一题 ➡️</button>
`;
contentDiv.innerHTML = html;
}
function checkAnswer(userYes) {
const isCorrect = (userYes === currentQuestion.correct);
const feedbackDiv = document.getElementById('feedback-area');
const nextBtn = document.getElementById('next-q-btn');
document.getElementById('btn-yes').disabled = true;
document.getElementById('btn-no').disabled = true;
if (isCorrect) {
quizScore++;
feedbackDiv.innerHTML = `<div style="animation: popIn 0.3s"><h3 style="color:#28a745; margin:0 0 5px 0">🎉 太棒了！</h3><p class="explanation" style="font-size:1rem; margin:0">${currentQuestion.explanation}</p></div>`;
if(userYes) document.getElementById('btn-yes').classList.add('correct');
else document.getElementById('btn-no').classList.add('correct');
} else {
feedbackDiv.innerHTML = `<div style="animation: popIn 0.3s"><h3 style="color:#dc3545; margin:0 0 5px 0">😅 掉坑里了</h3><p class="explanation" style="font-size:1rem; margin:0">${currentQuestion.explanation}</p></div>`;
if(userYes) document.getElementById('btn-yes').classList.add('wrong');
else document.getElementById('btn-no').classList.add('wrong');
}
quizTotal++;
nextBtn.style.display = 'block';
}
init();
</script>
</body>
</html>💡 这段代码完全由 gemini 生成。
登录后可复制完整代码