<!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>第09讲：奇数与偶数(初步概念与性质)</title>
<style>
/* ================= 基础重置与全局样式 ================= */
:root {
--primary: #a29bfe; /* 薰衣草紫 */
--primary-dark: #6c5ce7;
--accent: #ffeaa7; /* 奶油黄 */
--success: #00b894; /* 薄荷绿 */
--error: #ff7675; /* 珊瑚红 */
--bg-color: #f0f3f5;
--text-main: #2d3436;
--text-sub: #636e72;
--card-shadow: 0 10px 25px rgba(0,0,0,0.05); /* 微投影 */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; }
::-webkit-scrollbar { display: none; }
html, body { margin: 0; padding: 0; background: var(--bg-color); overflow: hidden; height: 100vh; }
/* 动态背景图案 */
body {
background-image: radial-gradient(#dfe6e9 1px, transparent 1px);
background-size: 20px 20px;
}
#app { height: 100vh; max-width: 480px; margin: 0 auto; background: rgba(255,255,255,0.95); display: flex; flex-direction: column; position: relative; box-shadow: 0 0 40px rgba(0,0,0,0.08); }
.content-area { flex: 1; overflow-y: auto; padding-bottom: 90px; scroll-behavior: smooth; padding-top: 10px; }
/* 通用动画类 */
.fade-in { animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.shake { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }
/* ================= 底部导航 (App Bar) ================= */
.bottom-nav {
position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
width: 100%; max-width: 480px; height: 75px;
background: rgba(255, 255, 255, 0.98);
border-top: 1px solid rgba(0,0,0,0.05);
display: flex; justify-content: space-around; align-items: center;
z-index: 9999; box-shadow: 0 -5px 20px rgba(0,0,0,0.03);
backdrop-filter: blur(10px);
padding-bottom: 10px;
}
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; cursor: pointer; padding: 5px; color: #b2bec3; transition: all 0.3s; }
.nav-item.active { color: var(--primary-dark); transform: translateY(-3px); }
.nav-icon { font-size: 24px; margin-bottom: 2px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }
.nav-label { font-size: 11px; font-weight: 600; }
/* ================= 顶部 Tab 导航 ================= */
.tab-nav {
display: flex; background: white; margin: 10px 20px 20px;
border-radius: 16px; padding: 5px; box-shadow: var(--card-shadow);
}
.tab-item {
flex: 1; padding: 10px; text-align: center; cursor: pointer;
font-weight: 600; color: var(--text-sub); border-radius: 12px;
transition: all 0.3s; font-size: 14px;
}
.tab-item.active { background: #e0e7ff; color: var(--primary-dark); }
/* ================= 页面通用 ================= */
.page-title { font-size: 24px; font-weight: 800; color: var(--text-main); margin: 20px 20px 10px; text-align: center; letter-spacing: 1px; }
.page-subtitle { color: var(--primary-dark); font-size: 16px; margin: 25px 20px 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; justify-content: center; }
.page-subtitle::before, .page-subtitle::after { content: ''; display: block; width: 20px; height: 2px; background: var(--primary); opacity: 0.5; }
/* ================= 概念页 ================= */
.intro-page { padding: 20px; }
.intro-card {
background: white; border-radius: 24px; padding: 30px 20px;
box-shadow: var(--card-shadow); text-align: center;
border: 1px solid rgba(0,0,0,0.02); margin-bottom: 20px;
}
.intro-emoji { font-size: 80px; margin-bottom: 20px; animation: float 3s infinite ease-in-out; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.intro-story { font-size: 16px; line-height: 1.8; color: var(--text-sub); margin-bottom: 25px; text-align: justify; }
.concept-explanation { background: #f8f9fa; border-radius: 16px; padding: 20px; text-align: left; font-size: 15px; color: var(--text-main); margin-bottom: 25px; line-height: 1.6; border-left: 5px solid var(--primary); }
.concept-explanation h3 { margin: 0 0 10px 0; color: var(--primary-dark); }
.concept-explanation ul { padding-left: 20px; margin: 0; }
.concept-explanation li { margin-bottom: 8px; }
.teacher-btn {
background: linear-gradient(135deg, var(--primary) 0%, #ff6b6b 100%);
color: white; border: none; padding: 16px 40px; border-radius: 50px;
font-size: 18px; font-weight: bold; cursor: pointer;
box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4);
transition: transform 0.2s; width: 80%; margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: 10px;
}
.teacher-btn:active { transform: scale(0.96); }
/* ================= 动画演示区 ================= */
.demo-page { padding: 0 15px; }
.demo-section { display: none; }
.demo-section.active { display: block; animation: fadeIn 0.5s ease; }
.animation-area {
background: #ffffff; border-radius: 24px; padding: 10px;
min-height: 320px; position: relative; overflow: hidden;
box-shadow: inset 0 0 30px rgba(0,0,0,0.02), var(--card-shadow);
border: 1px solid rgba(0,0,0,0.05); margin-bottom: 20px;
}
.svg-container { width: 100%; height: 100%; min-height: 280px; }
/* SVG 阴影滤镜 */
.svg-shadow { filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.2)); }
.math-area {
background: white; border-left: 5px solid var(--accent);
border-radius: 0 12px 12px 0; padding: 15px; margin: 10px 0 20px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.math-formula { font-size: 24px; font-weight: 800; color: var(--text-main); font-family: monospace; }
.step-explanation {
background: #eef2ff; padding: 15px; border-radius: 12px;
color: var(--primary-dark); font-size: 15px; text-align: center;
margin-bottom: 90px; line-height: 1.6; font-weight: 500;
}
.step-btn-prev, .step-btn-next {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 100;
background: rgba(255,255,255,0.9); backdrop-filter: blur(5px);
color: var(--primary-dark); border: 1px solid rgba(0,0,0,0.1);
padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: bold;
cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.step-btn-prev { left: 10px; }
.step-btn-next { right: 10px; }
.step-btn-prev:disabled, .step-btn-next:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.step-btn-prev:active:not(:disabled), .step-btn-next:active:not(:disabled) { transform: translateY(-50%) scale(0.95); }
/* ================= 讲解页 ================= */
.explain-page { padding: 20px; }
.example-card {
background: white; border-radius: 20px; padding: 20px; margin-bottom: 20px;
box-shadow: var(--card-shadow); transition: transform 0.2s;
border: 1px solid #f1f2f6; overflow: hidden;
}
.example-header {
display: flex; justify-content: space-between; align-items: center;
cursor: pointer; padding-bottom: 10px; border-bottom: 1px dashed #eee;
margin-bottom: 10px;
}
.example-title { font-weight: 800; color: var(--primary-dark); font-size: 16px; }
.example-toggle { font-size: 14px; color: #b2bec3; transition: transform 0.3s; }
.example-toggle.collapsed { transform: rotate(-90deg); }
.example-content { display: block; padding-top: 5px; animation: slideDown 0.3s ease; }
.example-content.hidden { display: none; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.example-answer {
background: #eafff3; padding: 12px; border-radius: 10px;
font-size: 14px; color: var(--text-sub); border-left: 4px solid var(--success); margin-top: 10px;
}
.explain-note { background: #fff8e1; border-radius: 12px; padding: 15px; margin-bottom: 20px; font-size: 14px; color: #d35400; border: 1px solid #ffeaa7; }
/* ================= 练习/奥数 ================= */
.practice-page { padding: 20px; }
.question-card {
background: white; border-radius: 24px; padding: 25px;
box-shadow: var(--card-shadow);
}
.question-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 2px solid #f1f2f6; padding-bottom: 15px; }
.question-number { font-weight: 800; color: var(--primary-dark); font-size: 16px; }
.score-display { background: #ffeaa7; color: #d35400; padding: 4px 12px; border-radius: 12px; font-weight: 900; font-size: 14px; }
.question-text { font-size: 18px; line-height: 1.6; color: var(--text-main); margin-bottom: 25px; font-weight: 600; }
.option-btn {
display: block; width: 100%; padding: 16px; margin-bottom: 12px;
text-align: left; border: 2px solid #f1f2f6; border-radius: 16px;
background: white; font-size: 16px; cursor: pointer; transition: all 0.2s;
color: var(--text-sub); position: relative; overflow: hidden;
}
.option-btn:active:not(:disabled) { transform: scale(0.98); background: #f1f2f6; }
.option-btn.correct { background: #eafff3; border-color: var(--success); color: #009432; font-weight: bold; }
.option-btn.wrong { background: #fff5f5; border-color: var(--error); color: #c0392b; }
.feedback-area {
padding: 15px; border-radius: 12px; margin-bottom: 20px;
font-size: 15px; line-height: 1.6; animation: fadeIn 0.3s;
}
.feedback-correct { background: #eafff3; color: #009432; border: 1px solid #b8e994; }
.feedback-wrong { background: #fff5f5; color: #c0392b; border: 1px solid #ffcccc; }
.next-btn {
background: linear-gradient(135deg, var(--accent) 0%, #fab1a0 100%);
color: #d35400; border: none; padding: 16px; width: 100%; border-radius: 16px;
font-size: 18px; font-weight: 800; cursor: pointer;
box-shadow: 0 8px 20px rgba(253, 203, 110, 0.4);
}
.next-btn:active { transform: scale(0.97); }
.completion-page { text-align: center; padding: 60px 20px; }
.completion-emoji { font-size: 80px; margin-bottom: 20px; animation: float 3s infinite; }
.final-score { font-size: 48px; font-weight: 900; color: var(--primary); margin: 20px 0 40px; text-shadow: 2px 2px 0px rgba(0,0,0,0.1); }
.restart-btn {
background: linear-gradient(135deg, #00b894 0%, #55efc4 100%);
color: white; border: none; padding: 16px 50px; border-radius: 50px;
font-size: 18px; font-weight: bold; cursor: pointer; box-shadow: 0 10px 20px rgba(0, 184, 148, 0.3);
}
.hint-box { background: #fff7e6; border-left: 5px solid var(--accent); padding: 15px; border-radius: 8px; margin: 15px 0; font-size: 14px; color: #d35400; font-weight: 500; }
.difficulty-badge {
display: inline-block; background: #dfe6e9; color: #636e72;
border-radius: 8px; padding: 3px 8px; font-size: 12px; margin-left: 10px; font-weight: bold;
}
/* ================= 秘籍页 ================= */
.secrets-container { padding: 20px; padding-bottom: 40px; }
.secret-card {
width: 100%; min-height: 300px; background: white; border-radius: 24px; padding: 30px 25px;
box-shadow: 0 10px 25px rgba(0,0,0,0.1); display: flex; flex-direction: column;
align-items: center; text-align: center; margin-bottom: 20px; position: relative; overflow: hidden;
}
/* 渐变背景 */
.secret-card:nth-child(1) { background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%); color: white; }
.secret-card:nth-child(2) { background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%); color: white; }
.secret-card:nth-child(3) { background: linear-gradient(135deg, #00b894 0%, #00cec9 100%); color: white; }
.secret-emoji { font-size: 60px; margin-bottom: 20px; background: rgba(255,255,255,0.2); border-radius: 50%; padding: 10px; }
.secret-title { font-size: 22px; font-weight: 800; margin-bottom: 15px; }
.secret-content { font-size: 16px; line-height: 1.6; font-weight: 500; opacity: 0.95; }
</style>
</head>
<body>
<div id="app">
<div class="content-area">
<div v-show="currentPage === 1" class="intro-page fade-in">
<div class="page-title">奇数与偶数</div>
<div class="page-subtitle">数字世界里的“成双成对”与“形单影只”</div>
<div class="intro-card">
<div class="intro-emoji">🧦</div>
<div class="intro-story">
小朋友们，你们的袜子是不是都是一双一双的？如果有一只找不到了，就变成单只了！数字也有这样的性质。能<strong>两两配对</strong>，不多不少，就像一双完整的袜子，这样的数字叫做<strong>偶数</strong>。如果<strong>总会多出一只</strong>，找不到伙伴，就像丢了一只的袜子，这样的数字叫做<strong>奇数</strong>。
</div>
<div class="concept-explanation">
<h3>📚 核心概念</h3>
<ul>
<li><strong>偶数</strong>：能被2整除的数，能平均分成2份，像一对一对的袜子</li>
<li><strong>奇数</strong>：不能被2整除的数，分成2份会多出1个，像多了一只的袜子</li>
<li><strong>奇偶性</strong>：数字的奇数或偶数特性，个位数是1、3、5、7、9是奇数，0、2、4、6、8是偶数</li>
</ul>
</div>
<button class="teacher-btn" @click="speak('小朋友们，让我们一起来认识奇数和偶数吧！记住，看个位就能快速判断哦。')">
<span>🔊</span> 听老师讲解
</button>
</div>
</div>
<div v-show="currentPage === 2" class="demo-page fade-in">
<div class="page-title">🎬 奇偶配对演示</div>
<div class="tab-nav">
<div class="tab-item" :class="{active: demoTab === 'pair'}" @click="switchDemoTab('pair')">🐧 配对演示</div>
<div class="tab-item" :class="{active: demoTab === 'operation'}" @click="switchDemoTab('operation')">➕ 运算规律</div>
</div>
<div class="demo-section" :class="{active: demoTab === 'pair'}">
<div class="animation-area">
<button class="step-btn-prev" @click="prevPairStep" :disabled="pairStep === 0">◀</button>
<button class="step-btn-next" @click="nextPairStep" :disabled="pairStep === 3">▶</button>
<svg class="svg-container" viewBox="0 0 400 330" id="pair-svg">
<circle v-for="n in 10" :key="'penguin'+n" :id="'penguin'+n" :cx="(n-1)*35 + 40" cy="165" r="15" fill="#a29bfe" class="svg-shadow"/>
<text v-for="n in 10" :key="'label'+n" :id="'label'+n" :x="(n-1)*35 + 40" y="125" text-anchor="middle" font-size="14" fill="#666" font-weight="bold">{{n}}</text>
<line v-for="n in [1,3,5,7,9]" :key="'line'+n" :id="'line'+n" :x1="(n-1)*35 + 40" :y1="165" :x2="n*35 + 40" :y2="165" stroke="#00b894" stroke-width="3" stroke-dasharray="5,5" opacity="0"/>
<circle id="penguin11" cx="40" cy="280" r="15" fill="#a29bfe" opacity="0" class="svg-shadow"/>
<text id="label11" x="40" y="240" text-anchor="middle" font-size="14" fill="#666" opacity="0" font-weight="bold">11</text>
<line v-for="n in [1,3,5,7,9]" :key="'line11-'+n" :id="'line11-'+n" :x1="(n-1)*35 + 40" :y1="280" :x2="n*35 + 40" :y2="280" stroke="#00b894" stroke-width="3" stroke-dasharray="5,5" opacity="0"/>
<text id="result-text-10" x="200" y="50" text-anchor="middle" font-size="20" font-weight="bold" fill="#00b894" opacity="0">10是偶数</text>
<text id="result-text-11" x="200" y="50" text-anchor="middle" font-size="20" font-weight="bold" fill="#ff7675" opacity="0">11是奇数，有1只落单</text>
<path id="sad-face" d="M 25,285 Q 40,295 55,285" stroke="#ff7675" stroke-width="3" fill="none" opacity="0"/>
</svg>
</div>
<div class="math-area">
<div class="math-formula">
<span v-if="pairStep === 0">准备开始...</span>
<span v-if="pairStep === 1">10只企鹅 → 2×5对</span>
<span v-if="pairStep === 2">10 ÷ 2 = 5 ... 0</span>
<span v-if="pairStep === 3">11只企鹅 → 5对 + 1只</span>
</div>
</div>
<div class="step-explanation">
<span v-if="pairStep === 0">点击“下一步”，看看10只小企鹅如何配对。</span>
<span v-if="pairStep === 1">看！10只小企鹅刚好两两配对成功，没有落单的。这就是“偶数”的特征。</span>
<span v-if="pairStep === 2">10能被2整除（10÷2=5），没有余数，所以10是偶数。</span>
<span v-if="pairStep === 3">现在又来了1只小企鹅，总共11只。配对后，最后1只小企鹅落单了，很伤心。有余数1，所以11是奇数。</span>
</div>
</div>
<div class="demo-section" :class="{active: demoTab === 'operation'}">
<div class="animation-area">
<button class="step-btn-prev" @click="prevTheoryStep" :disabled="theoryStep === 0">◀</button>
<button class="step-btn-next" @click="nextTheoryStep" :disabled="theoryStep === 3">▶</button>
<svg class="svg-container" viewBox="0 0 400 330" id="operation-svg">
<g id="odd-plus-odd" opacity="0">
<circle cx="100" cy="120" r="20" fill="#ff7675" class="svg-shadow"/>
<text x="100" y="125" text-anchor="middle" font-size="16" fill="white" font-weight="bold">奇</text>
<text x="135" y="130" font-size="24" fill="#666" font-weight="bold">+</text>
<circle cx="170" cy="120" r="20" fill="#ff7675" class="svg-shadow"/>
<text x="170" y="125" text-anchor="middle" font-size="16" fill="white" font-weight="bold">奇</text>
<text x="205" y="130" font-size="24" fill="#666" font-weight="bold">=</text>
<circle cx="240" cy="120" r="20" fill="#00b894" class="svg-shadow"/>
<text x="240" y="125" text-anchor="middle" font-size="16" fill="white" font-weight="bold">偶</text>
<text x="100" y="160" font-size="14" fill="#636e72">例如：3 + 5 = 8</text>
</g>
<g id="even-plus-even" opacity="0">
<circle cx="100" cy="200" r="20" fill="#00b894" class="svg-shadow"/>
<text x="100" y="205" text-anchor="middle" font-size="16" fill="white" font-weight="bold">偶</text>
<text x="135" y="210" font-size="24" fill="#666" font-weight="bold">+</text>
<circle cx="170" cy="200" r="20" fill="#00b894" class="svg-shadow"/>
<text x="170" y="205" text-anchor="middle" font-size="16" fill="white" font-weight="bold">偶</text>
<text x="205" y="210" font-size="24" fill="#666" font-weight="bold">=</text>
<circle cx="240" cy="200" r="20" fill="#00b894" class="svg-shadow"/>
<text x="240" y="205" text-anchor="middle" font-size="16" fill="white" font-weight="bold">偶</text>
<text x="100" y="240" font-size="14" fill="#636e72">例如：2 + 4 = 6</text>
</g>
<g id="odd-plus-even" opacity="0">
<circle cx="100" cy="280" r="20" fill="#ff7675" class="svg-shadow"/>
<text x="100" y="285" text-anchor="middle" font-size="16" fill="white" font-weight="bold">奇</text>
<text x="135" y="290" font-size="24" fill="#666" font-weight="bold">+</text>
<circle cx="170" cy="280" r="20" fill="#00b894" class="svg-shadow"/>
<text x="170" y="285" text-anchor="middle" font-size="16" fill="white" font-weight="bold">偶</text>
<text x="205" y="290" font-size="24" fill="#666" font-weight="bold">=</text>
<circle cx="240" cy="280" r="20" fill="#ff7675" class="svg-shadow"/>
<text x="240" y="285" text-anchor="middle" font-size="16" fill="white" font-weight="bold">奇</text>
<text x="100" y="320" font-size="14" fill="#636e72">例如：3 + 2 = 5</text>
</g>
</svg>
</div>
<div class="math-area">
<div class="math-formula">
<span v-if="theoryStep === 0">奇偶运算三大规律</span>
<span v-if="theoryStep === 1">奇数 + 奇数 = 偶数</span>
<span v-if="theoryStep === 2">偶数 + 偶数 = 偶数</span>
<span v-if="theoryStep === 3">奇数 + 偶数 = 奇数</span>
</div>
</div>
<div class="step-explanation">
<span v-if="theoryStep === 0">点击“下一步”，探索奇数与偶数相加的规律。</span>
<span v-if="theoryStep === 1">两个“落单”的奇数相加，它们的“1”可以凑成一对，所以结果是偶数。</span>
<span v-if="theoryStep === 2">两个都能成对的偶数相加，结果当然还是能成对，所以是偶数。</span>
<span v-if="theoryStep === 3">一个“落单”的奇数加上一个“成对”的偶数，结果还是会多出一个“落单”的，所以是奇数。</span>
</div>
</div>
</div>
<div v-show="currentPage === 3" class="explain-page fade-in">
<div class="page-title">📝 典型例题精讲</div>
<div class="tab-nav">
<div class="tab-item" :class="{active: explainTab === 'direct'}" @click="switchExplainTab('direct')">直接判断</div>
<div class="tab-item" :class="{active: explainTab === 'core'}" @click="switchExplainTab('core')">核心原理</div>
<div class="tab-item" :class="{active: explainTab === 'example'}" @click="switchExplainTab('example')">典型例题</div>
</div>
<div v-if="explainTab === 'direct'">
<div class="explain-note">
<strong>✨ 快速判断秘诀：看个位！</strong><br>
判断一个数是奇数还是偶数，不管它有多大，只看它的个位数字。个位是0、2、4、6、8就是偶数，个位是1、3、5、7、9就是奇数。
</div>
<div class="example-card">
<div class="card-header">举个栗子 🌰</div>
<div class="card-content">
例如：判断 123456 是奇是偶？<br>
→ 只看个位“6”，所以它是<strong>偶数</strong>。
</div>
</div>
</div>
<div v-if="explainTab === 'core'">
<div class="explain-note">
<strong>🔍 原理本质：能否被2整除</strong><br>
偶数能被2整除（没有余数），奇数除以2会余1。“配对法”和“看个位法”都是这个原理的直观体现。
</div>
<div class="example-card">
<div class="card-header">为什么看个位就行？🤔</div>
<div class="card-content">
因为十位、百位……上的数字都是10、100……的倍数，而10、100……都能被2整除，所以奇偶性只由个位决定。
</div>
</div>
</div>
<div v-if="explainTab === 'example'">
<div class="example-card" v-for="(example, index) in typicalExamples" :key="'example'+index">
<div class="example-header" @click="toggleExample(index)">
<div class="example-title">{{example.title}}</div>
<div class="example-toggle" :class="{collapsed: !example.expanded}">▼</div>
</div>
<div class="example-content" :class="{active: example.expanded, hidden: !example.expanded}">
<div class="example-question">{{example.question}}</div>
<div class="example-answer">答案：{{example.answer}}</div>
<div class="example-explanation">{{example.explanation}}</div>
</div>
</div>
</div>
</div>
<div v-show="currentPage === 4" class="practice-page fade-in">
<div v-if="!practiceCompleted">
<div class="question-card">
<div class="question-header">
<span class="question-number">✏️ 练习 {{currentPracticeQuestion + 1}}/{{practiceQuestions.length}}</span>
<span class="score-display">⭐ {{practiceScore}}</span>
</div>
<div class="question-text" v-html="practiceQuestions[currentPracticeQuestion].text"></div>
<div class="options-container">
<button
v-for="(option, index) in practiceQuestions[currentPracticeQuestion].options"
:key="'opt'+index"
class="option-btn"
:class="{
'correct': practiceAnswered && option.correct,
'wrong': practiceAnswered && selectedPracticeOption === index && !option.correct,
'shake': practiceAnswered && selectedPracticeOption === index && !option.correct
}"
@click="selectPracticeOption(index, option.correct)"
:disabled="practiceAnswered"
>
{{option.text}}
</button>
</div>
<div v-if="practiceAnswered" class="feedback-area" :class="isPracticeCorrect ? 'feedback-correct' : 'feedback-wrong'">
<div v-if="isPracticeCorrect">
<strong>🎉 太棒了!</strong><br>
{{practiceQuestions[currentPracticeQuestion].explanation}}
</div>
<div v-else>
<strong>💡 让我们一起分析:</strong><br>
{{practiceQuestions[currentPracticeQuestion].explanation}}
</div>
</div>
<button v-if="practiceAnswered" class="next-btn" @click="nextPracticeQuestion">
{{currentPracticeQuestion < practiceQuestions.length - 1 ? '下一题 →' : '完成练习 ✓'}}
</button>
</div>
</div>
<div v-else class="completion-page fade-in">
<div class="completion-emoji">🎉</div>
<div class="completion-title">课内练习完成!</div>
<div class="final-score">+{{practiceScore}} 分</div>
<button class="restart-btn" @click="switchPage(5)">挑战奥数题 🚀</button>
</div>
</div>
<div v-show="currentPage === 5" class="practice-page fade-in">
<div v-if="!olympiadCompleted">
<div class="question-card" style="border-top: 5px solid #ff9f43;">
<div class="question-header">
<div>
<span class="question-number">🏆 奥数 {{currentOlympiad + 1}}/{{olympiadQuestions.length}}</span>
<span class="difficulty-badge" :class="'difficulty-' + olympiadQuestions[currentOlympiad].difficulty">
{{olympiadQuestions[currentOlympiad].difficultyText}}
</span>
</div>
<div class="score-display">⭐ {{olympiadScore}}</div>
</div>
<div class="question-text" v-html="olympiadQuestions[currentOlympiad].text"></div>
<div class="options-container">
<button
v-for="(option, index) in olympiadQuestions[currentOlympiad].options"
:key="'olopt'+index"
class="option-btn"
:class="{
'correct': olympiadAnswered && option.correct,
'wrong': olympiadAnswered && selectedOlympiadOption === index && !option.correct,
'shake': olympiadAnswered && selectedOlympiadOption === index && !option.correct
}"
@click="selectOlympiadOption(index, option.correct)"
:disabled="olympiadAnswered"
>
{{option.text}}
</button>
</div>
<div v-if="wrongAttempts > 0 && !olympiadAnswered" class="hint-box fade-in">
<strong>💡 提示：</strong>
{{ wrongAttempts === 1 ? olympiadQuestions[currentOlympiad].hint1 :
(wrongAttempts === 2 ? olympiadQuestions[currentOlympiad].hint2 : olympiadQuestions[currentOlympiad].hint3) }}
</div>
<div v-if="olympiadAnswered" class="feedback-area" :class="isOlympiadCorrect ? 'feedback-correct' : 'feedback-wrong'">
<div v-if="isOlympiadCorrect">
<strong>👏 真棒!</strong><br>
{{olympiadQuestions[currentOlympiad].explanation}}
</div>
<div v-else>
<strong>📖 详细解析:</strong><br>
{{olympiadQuestions[currentOlympiad].explanation}}
</div>
</div>
<button v-if="olympiadAnswered || wrongAttempts >= 3" class="next-btn" @click="nextOlympiad">
{{currentOlympiad < olympiadQuestions.length - 1 ? '下一题 →' : '完成挑战 ✓'}}
</button>
</div>
</div>
<div v-else class="completion-page fade-in">
<div class="completion-emoji">👑</div>
<div class="completion-title">挑战结束!</div>
<div class="final-score">+{{olympiadScore}} 分</div>
<button class="restart-btn" @click="switchPage(6)">查看通关秘籍 🎁</button>
</div>
</div>
<div v-show="currentPage === 6" class="secrets-container fade-in">
<div class="secrets-scroll">
<div class="secret-card">
<div class="secret-icon">🔍</div>
<div class="secret-title">秘籍1：看个位法</div>
<div class="secret-content">判断奇偶只看个位，个位是0、2、4、6、8就是偶数，个位是1、3、5、7、9就是奇数。快速准确！</div>
</div>
<div class="secret-card">
<div class="secret-icon">👫</div>
<div class="secret-title">秘籍2：配对法</div>
<div class="secret-content">想象给数字“配对”。能两两配对成功，没有落单的是偶数；总会多出一个，找不到伙伴的是奇数。直观易懂！</div>
</div>
<div class="secret-card">
<div class="secret-icon">⚡</div>
<div class="secret-title">秘籍3：运算规律</div>
<div class="secret-content">奇+奇=偶，偶+偶=偶，奇+偶=奇。记住这三条规律，快速判断运算结果的奇偶性！</div>
</div>
</div>
</div>
</div>
<div class="bottom-nav">
<div class="nav-item" :class="{active: currentPage === 1}" @click="switchPage(1)">
<div class="nav-icon">💡</div>
<div class="nav-label">概念</div>
</div>
<div class="nav-item" :class="{active: currentPage === 2}" @click="switchPage(2)">
<div class="nav-icon">🎬</div>
<div class="nav-label">演示</div>
</div>
<div class="nav-item" :class="{active: currentPage === 3}" @click="switchPage(3)">
<div class="nav-icon">📝</div>
<div class="nav-label">讲解</div>
</div>
<div class="nav-item" :class="{active: currentPage === 4}" @click="switchPage(4)">
<div class="nav-icon">✏️</div>
<div class="nav-label">练习</div>
</div>
<div class="nav-item" :class="{active: currentPage === 5}" @click="switchPage(5)">
<div class="nav-icon">🏆</div>
<div class="nav-label">奥数</div>
</div>
<div class="nav-item" :class="{active: currentPage === 6}" @click="switchPage(6)">
<div class="nav-icon">🎁</div>
<div class="nav-label">秘籍</div>
</div>
</div>
</div>
<script src="https://www.xinghuo.tv/wp-content/themes/xinghuo-tv/assets/js/vue.global.prod.js"></script>
<script src="https://www.xinghuo.tv/wp-content/themes/xinghuo-tv/assets/js/gsap.min.js"></script>
<script src="https://www.xinghuo.tv/wp-content/themes/xinghuo-tv/assets/js/confetti.browser.min.js"></script>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
currentPage: 1,
demoTab: 'pair',
explainTab: 'direct',
pairStep: 0,
theoryStep: 0,
// 典型例题
typicalExamples: [
{
title: '例题1：基础题',
question: '下面哪个是偶数？5、7、8、9',
answer: '8',
explanation: '第1步：看个位数字\n第2步：5的个位是5（奇数）\n第3步：7的个位是7（奇数）\n第4步：8的个位是8（偶数）✓\n第5步：9的个位是9（奇数）',
expanded: false
},
{
title: '例题2：进阶题',
question: '奇数+奇数=？是奇数还是偶数？例如：3+5=8',
answer: '偶数',
explanation: '第1步：试几个例子：1+1=2，3+5=8，7+9=16\n第2步：发现规律：奇数+奇数=偶数\n第3步：为什么？两个单只凑成一双！',
expanded: false
},
{
title: '例题3：易错题',
question: '10是奇数还是偶数？',
answer: '偶数',
explanation: '【易错点】：有的小朋友看到10是两位数，就觉得特殊，不知道怎么判断\n【正确做法】：\n第1步：只看个位数字！\n第2步：10的个位是0\n第3步：0是偶数\n第4步：所以10是偶数',
expanded: false
}
],
// 练习题数据
practiceQuestions: [
{
text: '题目1：下面哪个是奇数？',
options: [
{text: 'A.2', correct: false},
{text: 'B.4', correct: false},
{text: 'C.6', correct: false},
{text: 'D.7', correct: true}
],
explanation: '提示3：7的个位是7，是奇数'
},
{
text: '题目2：下面哪个是偶数？',
options: [
{text: 'A.11', correct: false},
{text: 'B.13', correct: false},
{text: 'C.15', correct: false},
{text: 'D.16', correct: true}
],
explanation: '提示3：16的个位是6，是偶数'
},
{
text: '题目3：8是奇数还是偶数？',
options: [
{text: 'A.奇数', correct: false},
{text: 'B.偶数', correct: true},
{text: 'C.都是', correct: false},
{text: 'D.都不是', correct: false}
],
explanation: '提示3：8是偶数'
},
{
text: '题目4：20个苹果，能平均分给2个小朋友吗？',
options: [
{text: 'A.能', correct: true},
{text: 'B.不能', correct: false},
{text: 'C.不一定', correct: false},
{text: 'D.信息不足', correct: false}
],
explanation: '提示3：偶数能平均分成2份'
},
{
text: '题目5：9个小朋友，能两两配对吗？',
options: [
{text: 'A.能', correct: false},
{text: 'B.不能', correct: false},
{text: 'C.能配4对', correct: true},
{text: 'D.能配5对', correct: false}
],
explanation: '提示3：能配4对，剩1个'
},
{
text: '题目6：偶数+偶数=？',
options: [
{text: 'A.一定是奇数', correct: false},
{text: 'B.一定是偶数', correct: true},
{text: 'C.可能奇数可能偶数', correct: false},
{text: 'D.不确定', correct: false}
],
explanation: '提示3：一定是偶数'
},
{
text: '题目7：奇数+偶数=？',
options: [
{text: 'A.一定是奇数', correct: true},
{text: 'B.一定是偶数', correct: false},
{text: 'C.可能奇数可能偶数', correct: false},
{text: 'D.不确定', correct: false}
],
explanation: '提示3：结果一定是奇数（有一个落单）'
},
{
text: '题目8：从1数到10，有几个奇数？',
options: [
{text: 'A.4个', correct: false},
{text: 'B.5个', correct: true},
{text: 'C.6个', correct: false},
{text: 'D.7个', correct: false}
],
explanation: '提示3：5个奇数'
}
],
currentPracticeQuestion: 0,
practiceAnswered: false,
isPracticeCorrect: false,
selectedPracticeOption: null,
practiceScore: 0,
practiceCompleted: false,
// 奥数题数据
olympiadQuestions: [
{
text: '题目1：小明说：“我有一些弹珠，是偶数个。我又买了3个，现在还是偶数个。”可能吗？',
options: [
{text: 'A.可能', correct: false},
{text: 'B.不可能', correct: true},
{text: 'C.一定可能', correct: false},
{text: 'D.信息不足', correct: false}
],
hint1: '原来偶数，买了3个（奇数）',
hint2: '偶数+奇数=奇数',
hint3: '不可能还是偶数',
explanation: '原来：偶数个\n买了：3个（奇数）\n现在：？\n偶数+奇数=奇数\n所以不可能还是偶数',
difficulty: 1,
difficultyText: '⭐'
},
{
text: '题目2：从1到20，所有奇数加起来是奇数还是偶数？',
options: [
{text: 'A.奇数', correct: false},
{text: 'B.偶数', correct: true},
{text: 'C.可能奇数可能偶数', correct: false},
{text: 'D.不确定', correct: false}
],
hint1: '数一数有几个奇数',
hint2: '1到20有10个奇数',
hint3: '偶数个奇数加起来是偶数',
explanation: '1到20的奇数：1、3、5、7、9、11、13、15、17、19（共10个）\n偶数个奇数相加=偶数\n实际计算：1+3+5+7+9+11+13+15+17+19=100（偶数）✓',
difficulty: 2,
difficultyText: '⭐⭐'
},
{
text: '题目3：小红有15颗糖，小明有12颗糖，他们的糖果总数是奇数还是偶数？',
options: [
{text: 'A.奇数', correct: true},
{text: 'B.偶数', correct: false},
{text: 'C.无法确定', correct: false},
{text: 'D.既是奇数又是偶数', correct: false}
],
hint1: '15是奇数还是偶数？',
hint2: '12是奇数还是偶数？',
hint3: '奇数+偶数=奇数',
explanation: '小红：15颗（奇数）\n小明：12颗（偶数）\n总数：15+12=27\n奇数+偶数=奇数\n27是奇数✓',
difficulty: 1,
difficultyText: '⭐'
},
{
text: '题目4：三个连续的数字相加（比如：5+6+7=18），结果一定是3的倍数吗？一定是奇数还是偶数？',
options: [
{text: 'A.一定是3的倍数，一定是奇数', correct: false},
{text: 'B.一定是3的倍数，一定是偶数', correct: false},
{text: 'C.一定是3的倍数，可能奇数可能偶数', correct: true},
{text: 'D.不一定是3的倍数', correct: false}
],
hint1: '试几个例子',
hint2: '1+2+3=6，2+3+4=9',
hint3: '都是3的倍数，但奇偶不定',
explanation: '三个连续数字：N+(N+1)+(N+2)=3N+3=3(N+1)，一定是3的倍数✓\n奇偶性：\nN=1：1+2+3=6（偶）\nN=2：2+3+4=9（奇）\nN=3：3+4+5=12（偶）\n所以可能奇数可能偶数✓',
difficulty: 3,
difficultyText: '⭐⭐⭐'
},
{
text: '题目5：一个两位数，十位是奇数，个位是偶数，这个数是奇数还是偶数？',
options: [
{text: 'A.奇数', correct: false},
{text: 'B.偶数', correct: true},
{text: 'C.可能奇数可能偶数', correct: false},
{text: 'D.无法判断', correct: false}
],
hint1: '判断奇偶看哪一位？',
hint2: '只看个位数字',
hint3: '个位偶数，整数就是偶数',
explanation: '判断奇偶只看个位！\n个位是偶数→整个数是偶数\n例如：12（十位1是奇数，个位2是偶数）→12是偶数',
difficulty: 1,
difficultyText: '⭐'
},
{
text: '题目6：5个小朋友，每人手里都拿着偶数个气球，他们的气球总数是奇数还是偶数？',
options: [
{text: 'A.一定是奇数', correct: false},
{text: 'B.一定是偶数', correct: true},
{text: 'C.可能奇数可能偶数', correct: false},
{text: 'D.无法确定', correct: false}
],
hint1: '偶数相加结果是什么？',
hint2: '偶数+偶数=偶数',
hint3: '5个偶数加起来还是偶数',
explanation: '偶数+偶数+偶数+偶数+偶数=偶数\n无论每个人拿多少个（只要是偶数），加起来一定是偶数',
difficulty: 2,
difficultyText: '⭐⭐'
},
{
text: '题目7：10个奇数相乘，结果是奇数还是偶数？',
options: [
{text: 'A.奇数', correct: true},
{text: 'B.偶数', correct: false},
{text: 'C.可能奇数可能偶数', correct: false},
{text: 'D.无法确定', correct: false}
],
hint1: '试试：3×5=？',
hint2: '奇数×奇数=奇数',
hint3: '10个奇数乘起来还是奇数',
explanation: '奇数×奇数=奇数\n无论多少个奇数相乘，结果都是奇数\n例如：3×5=15，3×5×7=105',
difficulty: 2,
difficultyText: '⭐⭐'
},
{
text: '题目8：一个数加上3后是偶数，原来的数是奇数还是偶数？',
options: [
{text: 'A.奇数', correct: true},
{text: 'B.偶数', correct: false},
{text: 'C.可能奇数可能偶数', correct: false},
{text: 'D.无法确定', correct: false}
],
hint1: '3是奇数还是偶数？',
hint2: '什么数+奇数=偶数？',
hint3: '奇数+奇数=偶数，所以原数是奇数',
explanation: '设原来的数是X\nX+3=偶数\n如果X是偶数：偶数+奇数（3）=奇数✗\n如果X是奇数：奇数+奇数（3）=偶数✓\n所以X一定是奇数',
difficulty: 3,
difficultyText: '⭐⭐⭐'
}
],
currentOlympiad: 0,
olympiadAnswered: false,
selectedOlympiadOption: null,
isOlympiadCorrect: false,
wrongAttempts: 0,
olympiadScore: 0,
olympiadCompleted: false
};
},
methods: {
switchPage(page) {
this.stopSpeak();
this.currentPage = page;
window.scrollTo(0,0);
if (page === 2) {
this.pairStep = 0;
this.theoryStep = 0;
this.$nextTick(() => {
this.runPairAnimation();
this.runTheoryAnimation();
});
}
if (page === 4 && this.practiceCompleted) {
this.practiceCompleted = false;
this.currentPracticeQuestion = 0;
this.practiceScore = 0;
}
if (page === 5 && this.olympiadCompleted) {
this.olympiadCompleted = false;
this.currentOlympiad = 0;
this.olympiadScore = 0;
}
},
stopSpeak() {
const isWeChat = /MicroMessenger/i.test(navigator.userAgent);
if (isWeChat) {
const audio = document.getElementById('tts-audio');
if (audio) {
audio.pause();
audio.currentTime = 0;
}
} else {
if (window.speechSynthesis) {
window.speechSynthesis.cancel();
}
}
},
switchDemoTab(tab) {
this.stopSpeak();
this.demoTab = tab;
if (tab === 'pair') {
this.pairStep = 0;
this.$nextTick(() => {
this.runPairAnimation();
});
} else {
this.theoryStep = 0;
this.$nextTick(() => {
this.runTheoryAnimation();
});
}
},
switchExplainTab(tab) {
this.stopSpeak();
this.explainTab = tab;
},
toggleExample(index) {
this.typicalExamples[index].expanded = !this.typicalExamples[index].expanded;
},
speak(text) {
const isWeChat = /MicroMessenger/i.test(navigator.userAgent);
if (isWeChat) {
let audio = document.getElementById('tts-audio');
if (!audio) {
audio = document.createElement('audio');
audio.id = 'tts-audio';
audio.style.display = 'none';
document.body.appendChild(audio);
}
const url = `https://www.xinghuo.tv/wp-content/themes/xinghuo-tv/tts.php?text=${encodeURIComponent(text)}&t=${Date.now()}`;
audio.src = url;
audio.play().catch(err => { console.log('语音播放失败:', err); });
} else {
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'zh-CN';
utterance.rate = 0.9;
window.speechSynthesis.speak(utterance);
}
},
// GSAP 动画逻辑 - 配对演示
runPairAnimation() {
if (typeof gsap === 'undefined') return;
const tl = gsap.timeline();
// Reset
gsap.set(['#result-text-10', '#result-text-11', '#sad-face', '#penguin11', '#label11'], {opacity: 0});
gsap.set(['[id^=line]'], {opacity: 0}); // Reset all lines
gsap.set(['#penguin1', '#penguin2', '#penguin3', '#penguin4', '#penguin5', '#penguin6', '#penguin7', '#penguin8', '#penguin9', '#penguin10'], {y: 0});
gsap.set(['#label1', '#label2', '#label3', '#label4', '#label5', '#label6', '#label7', '#label8', '#label9', '#label10'], {y: 0});
if (this.pairStep === 1) {
// 显示配对线
tl.to(['#line1', '#line3', '#line5', '#line7', '#line9'], {opacity: 1, duration: 0.5, stagger: 0.1});
tl.to('#result-text-10', {opacity: 1, duration: 0.5, scale: 1.2, ease: "elastic.out(1, 0.3)"});
} else if (this.pairStep === 2) {
// 保持状态, 只是文字变化
tl.set(['#line1', '#line3', '#line5', '#line7', '#line9'], {opacity: 1});
tl.set('#result-text-10', {opacity: 1});
} else if (this.pairStep === 3) {
// 企鹅移动到下方，显示第11只
tl.to(['#penguin1', '#penguin2', '#penguin3', '#penguin4', '#penguin5', '#penguin6', '#penguin7', '#penguin8', '#penguin9', '#penguin10'],
{y: 115, duration: 0.5, ease: "back.out(1.7)"});
tl.to(['#label1', '#label2', '#label3', '#label4', '#label5', '#label6', '#label7', '#label8', '#label9', '#label10'],
{y: 115, duration: 0.5, ease: "back.out(1.7)"}, "<");
tl.to('#penguin11', {opacity: 1, duration: 0.5, ease: "bounce.out"});
tl.to('#label11', {opacity: 1, duration: 0.5}, "<");
// 显示新的配对线
tl.to(['#line11-1', '#line11-3', '#line11-5', '#line11-7', '#line11-9'], {opacity: 1, duration: 0.5, stagger: 0.1});
tl.to('#sad-face', {opacity: 1, duration: 0.5, scale: 1.2, repeat: 1, yoyo: true});
tl.to('#result-text-10', {opacity: 0, duration: 0.2}, 0);
tl.to('#result-text-11', {opacity: 1, duration: 0.5, scale: 1.2, ease: "elastic.out(1, 0.3)"});
}
},
// GSAP 动画逻辑 - 运算规律
runTheoryAnimation() {
if (typeof gsap === 'undefined') return;
const tl = gsap.timeline();
tl.set(['#odd-plus-odd', '#even-plus-even', '#odd-plus-even'], {opacity: 0});
if (this.theoryStep === 1) {
tl.to('#odd-plus-odd', {opacity: 1, duration: 0.5, y: 10, ease: "back.out(1.7)"});
} else if (this.theoryStep === 2) {
tl.set('#odd-plus-odd', {opacity: 1, y: 10});
tl.to('#even-plus-even', {opacity: 1, duration: 0.5, y: 10, ease: "back.out(1.7)"});
} else if (this.theoryStep === 3) {
tl.set(['#odd-plus-odd', '#even-plus-even'], {opacity: 1, y: 10});
tl.to('#odd-plus-even', {opacity: 1, duration: 0.5, y: 10, ease: "back.out(1.7)"});
}
},
// 步骤导航
nextPairStep() {
if (this.pairStep < 3) {
this.pairStep++;
this.runPairAnimation();
}
},
prevPairStep() {
if (this.pairStep > 0) {
this.pairStep--;
this.runPairAnimation();
}
},
nextTheoryStep() {
if (this.theoryStep < 3) {
this.theoryStep++;
this.runTheoryAnimation();
}
},
prevTheoryStep() {
if (this.theoryStep > 0) {
this.theoryStep--;
this.runTheoryAnimation();
}
},
// 练习题逻辑
selectPracticeOption(index, correct) {
if (this.practiceAnswered) return;
if (!correct) {
// 震动
this.selectedPracticeOption = index;
// CSS animation handles the shake via class binding
}
this.practiceAnswered = true;
this.isPracticeCorrect = correct;
this.selectedPracticeOption = index;
if (correct) {
this.practiceScore += 20;
if (typeof confetti !== 'undefined') {
confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } });
}
}
},
nextPracticeQuestion() {
if (this.currentPracticeQuestion < this.practiceQuestions.length - 1) {
this.currentPracticeQuestion++;
this.practiceAnswered = false;
this.selectedPracticeOption = null;
} else {
this.practiceCompleted = true;
}
},
// 奥数题逻辑
selectOlympiadOption(index, correct) {
if (this.olympiadAnswered) return;
if (correct) {
this.olympiadAnswered = true;
this.selectedOlympiadOption = index;
this.isOlympiadCorrect = true;
this.olympiadScore += 20;
this.wrongAttempts = 0;
if (typeof confetti !== 'undefined') {
confetti({ particleCount: 150, spread: 80, origin: { y: 0.6 } });
}
} else {
// 震动逻辑同练习题
this.selectedOlympiadOption = index;
this.wrongAttempts++;
if (this.wrongAttempts >= 3) {
this.olympiadAnswered = true;
this.selectedOlympiadOption = index;
this.isOlympiadCorrect = false;
} else {
// 允许重试（UI上虽然禁用了按钮，但实际上逻辑是允许看提示后继续选？
// 按照原逻辑是 disable 整个题，但为了震动效果后能重选，这里微调：
// 如果没到3次，不设置 olympiadAnswered 为 true，只记录错误次数
// 但原模板是点击一次就锁定，显示提示。为了震动反馈，我们可以在震动后重置 selectedOption 让用户重选？
// 或者保持原逻辑：错一次显示提示，不能重选当前选项？
// 为了符合“允许试错”的理念，这里我们不立即锁定：
setTimeout(() => {
// 震动结束后，如果还有机会，允许重选
// 但原模板逻辑是: 只有答对或者3次错才算本题结束。
// 所以这里保持状态，直到正确或3次错误。
this.selectedOlympiadOption = null; // 清除选中状态以便重选
}, 500);
}
}
},
nextOlympiad() {
if (this.currentOlympiad < this.olympiadQuestions.length - 1) {
this.currentOlympiad++;
this.olympiadAnswered = false;
this.selectedOlympiadOption = null;
this.wrongAttempts = 0;
} else {
this.olympiadCompleted = true;
}
},
resetOlympiad() {
this.currentOlympiad = 0;
this.olympiadAnswered = false;
this.selectedOlympiadOption = null;
this.isOlympiadCorrect = false;
this.olympiadScore = 0;
this.olympiadCompleted = false;
this.wrongAttempts = 0;
},
resetPractice() {
this.currentPracticeQuestion = 0;
this.practiceAnswered = false;
this.selectedPracticeOption = null;
this.isPracticeCorrect = false;
this.practiceScore = 0;
this.practiceCompleted = false;
}
}
}).mount('#app');
</script>
</body>
</html>💡 这段代码完全由 AI 生成。
登录后可复制完整代码