<!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>8的整除特征 - 完整版</title>
<style>
* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
html, body {
margin: 0;
padding: 0;
background: #F0F0F0;
overflow: hidden;
height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
#app {
height: 100vh;
width: 100%;
max-width: 480px;
margin: 0 auto;
background: #fff;
display: flex;
flex-direction: column;
position: relative;
box-shadow: 0 0 20px rgba(0,0,0,0.05);
}
.content-area {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 80px;
position: relative;
scroll-behavior: smooth; /* 添加平滑滚动支持 */
}
.bottom-nav {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 480px;
height: 70px;
background: white;
border-top: 1px solid #e0e0e0;
display: flex;
justify-content: space-around;
align-items: center;
z-index: 1000;
box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}
.nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 8px;
transition: all 0.3s;
}
.nav-item.active {
color: #667eea;
}
.nav-icon {
font-size: 24px;
margin-bottom: 4px;
}
.nav-label {
font-size: 12px;
}
/* Page 1: 概念引入 */
.intro-page {
padding: 40px 20px;
text-align: center;
}
.intro-emoji {
font-size: 80px;
margin: 20px 0;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.intro-title {
font-size: 28px;
font-weight: bold;
color: #333;
margin: 20px 0;
}
.intro-story {
font-size: 16px;
line-height: 1.8;
color: #666;
text-align: left;
background: #f8f9fa;
padding: 20px;
border-radius: 12px;
margin: 20px 0;
border-left: 4px solid #667eea;
}
.highlight {
color: #667eea;
font-weight: bold;
}
.speak-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 12px 30px;
border-radius: 25px;
font-size: 16px;
cursor: pointer;
margin-top: 20px;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
/* 演示页面样式 */
.demo-page {
padding: 20px;
}
/* 标签导航 */
.tab-nav {
display: flex;
border-bottom: 2px solid #e0e0e0;
margin-bottom: 20px;
}
.tab-item {
flex: 1;
padding: 12px;
text-align: center;
cursor: pointer;
color: #666;
font-weight: 500;
border-bottom: 3px solid transparent;
transition: all 0.3s;
}
.tab-item.active {
color: #667eea;
border-bottom-color: #667eea;
}
.demo-section {
display: none;
}
.demo-section.active {
display: block;
animation: fadeIn 0.3s;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.animation-area {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 16px;
padding: 20px;
min-height: 320px;
max-height: 320px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
border: 2px solid #e0e0e0;
}
.math-area {
background: white;
border: 2px solid #667eea;
border-radius: 12px;
padding: 12px;
margin-bottom: 15px;
min-height: 90px;
}
.math-formula {
font-size: 16px;
text-align: center;
color: #333;
line-height: 2;
font-weight: 500;
}
.step-explanation {
font-size: 14px;
color: #666;
margin-top: 10px;
line-height: 1.6;
text-align: center;
padding: 10px;
background: #f8f9fa;
border-radius: 8px;
}
.control-bar {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 20px;
}
.step-btn {
background: #667eea;
color: white;
border: none;
padding: 10px 25px;
border-radius: 20px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
}
.step-btn:disabled {
background: #ccc;
cursor: not-allowed;
}
.step-btn:hover:not(:disabled) {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
/* SVG动画样式 */
.svg-container {
width: 100%;
height: 100%;
min-height: 280px;
}
/* 讲解页面样式 */
.explain-page {
padding: 20px;
}
.explain-section {
display: none;
}
.explain-section.active {
display: block;
animation: fadeIn 0.3s;
}
.method-card {
background: white;
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
border-left: 4px solid #667eea;
}
.method-title {
font-size: 18px;
font-weight: bold;
color: #333;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.method-content {
font-size: 15px;
line-height: 1.8;
color: #555;
}
.example-box {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
margin: 10px 0;
border-left: 3px solid #10b981;
}
.example-title {
font-weight: bold;
color: #10b981;
margin-bottom: 8px;
}
.steps-list {
list-style: none;
padding: 0;
margin: 15px 0;
}
.steps-list li {
padding: 10px;
margin: 8px 0;
background: #f8f9fa;
border-radius: 8px;
position: relative;
padding-left: 40px;
}
.steps-list li::before {
content: attr(data-step);
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
background: #667eea;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
}
.question-examples {
margin-top: 20px;
}
.question-item {
background: white;
padding: 15px;
margin: 10px 0;
border-radius: 8px;
border: 2px solid #e0e0e0;
transition: all 0.3s;
cursor: pointer;
}
.question-item:hover {
border-color: #667eea;
transform: translateX(5px);
}
.question-item.expanded {
border-color: #667eea;
background: #f8f9fa;
}
.question-header {
font-weight: bold;
color: #333;
display: flex;
justify-content: space-between;
align-items: center;
}
.question-answer {
margin-top: 15px;
padding-top: 15px;
border-top: 1px dashed #e0e0e0;
color: #555;
line-height: 1.8;
display: none;
}
.question-item.expanded .question-answer {
display: block;
}
.expand-icon {
color: #667eea;
transition: transform 0.3s;
}
.question-item.expanded .expand-icon {
transform: rotate(180deg);
}
/* 练习题样式 */
.practice-page {
padding: 20px;
height: 100%;
display: flex;
flex-direction: column;
}
.question-card {
background: white;
border-radius: 16px;
padding: 25px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.question-number {
background: #667eea;
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 14px;
}
.score-display {
background: #fef3c7;
padding: 5px 15px;
border-radius: 20px;
font-weight: bold;
color: #92400e;
}
.difficulty-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: bold;
margin-left: 10px;
}
.difficulty-bronze { background: #fed7aa; color: #9a3412; }
.difficulty-silver { background: #e5e7eb; color: #374151; }
.difficulty-gold { background: #fef3c7; color: #92400e; }
.question-text {
font-size: 18px;
line-height: 1.6;
color: #333;
margin: 20px 0;
}
.options-container {
display: flex;
flex-direction: column;
gap: 12px;
margin: 20px 0;
}
.option-btn {
background: white;
border: 2px solid #e0e0e0;
border-radius: 12px;
padding: 15px;
text-align: left;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
}
.option-btn:hover {
border-color: #667eea;
transform: translateX(5px);
}
.option-btn.correct {
background: #d1fae5;
border-color: #10b981;
}
.option-btn.wrong {
background: #fee2e2;
border-color: #ef4444;
}
.option-btn:disabled {
cursor: not-allowed;
}
.feedback-area {
margin-top: 20px;
padding: 15px;
border-radius: 12px;
font-size: 14px;
line-height: 1.6;
}
.feedback-correct {
background: #d1fae5;
color: #065f46;
}
.feedback-wrong {
background: #fee2e2;
color: #991b1b;
}
.hint-box {
background: #fffbeb;
border-left: 4px solid #f59e0b;
padding: 15px;
border-radius: 8px;
margin: 15px 0;
font-size: 14px;
line-height: 1.6;
}
.next-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 12px 30px;
border-radius: 25px;
font-size: 16px;
cursor: pointer;
margin-top: 15px;
width: 100%;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
/* 通关秘籍 */
.secrets-container {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 20px;
gap: 16px;
height: 100%;
align-items: center;
-webkit-overflow-scrolling: touch;
}
.secrets-container::-webkit-scrollbar {
display: none;
}
.secret-card {
min-width: 85%;
height: 450px;
scroll-snap-align: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 20px;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
flex-shrink: 0;
}
.secret-emoji {
font-size: 80px;
margin-bottom: 20px;
}
.secret-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
text-align: center;
}
.secret-rule {
font-size: 20px;
background: rgba(255,255,255,0.2);
padding: 15px 25px;
border-radius: 15px;
margin: 20px 0;
text-align: center;
font-weight: bold;
}
.secret-explanation {
font-size: 15px;
line-height: 1.8;
text-align: center;
opacity: 0.95;
}
/* 完成页面 */
.completion-page {
padding: 40px 20px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.completion-emoji {
font-size: 100px;
margin: 20px 0;
}
.completion-title {
font-size: 32px;
font-weight: bold;
color: #667eea;
margin: 20px 0;
}
.final-score {
font-size: 48px;
font-weight: bold;
color: #667eea;
margin: 20px 0;
}
.restart-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 15px 40px;
border-radius: 30px;
font-size: 18px;
cursor: pointer;
margin-top: 20px;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
</style>
</head>
<body>
<div id="app">
<div class="content-area">
<!-- Page 1: 概念引入 -->
<div v-show="currentPage === 1" class="intro-page">
<div class="intro-emoji">📦🚛</div>
<div class="intro-title">8的整除特征</div>
<div class="intro-story">
<strong>🍬 批发糖果的故事</strong><br><br>
糖果厂要批发大量糖果,这次不是装小盒了,而是<span class="highlight">装大箱</span>!<br><br>
工厂规定:每<strong>1000</strong>个糖果装进一个大箱子📦。<br><br>
因为 <strong>1000 ÷ 8 = 125</strong>,所以<span class="highlight">每一个大箱子(1000个)都能平均分给8个人</span>。<br><br>
<strong>关键</strong>:不用管有多少箱,剩下的<span class="highlight">零头(末三位)</span>才是关键!<br><br>
如果这剩下的<strong>三位数</strong>能被8整除,那么所有糖果就能分匀!
</div>
<button class="speak-btn" @click="speakIntro">🔊 听老师讲解</button>
</div>
<!-- Page 2: 演示动画 -->
<div v-show="currentPage === 2" class="demo-page">
<div class="tab-nav">
<div class="tab-item" :class="{active: demoTab === 'direct'}" @click="switchDemoTab('direct')">
直接判断
</div>
<div class="tab-item" :class="{active: demoTab === 'theory'}" @click="switchDemoTab('theory')">
位值原理
</div>
</div>
<!-- 直接判断动画 -->
<div class="demo-section" :class="{active: demoTab === 'direct'}">
<div class="animation-area">
<svg class="svg-container" viewBox="0 0 400 330" preserveAspectRatio="xMidYMid meet">
<!-- 标题 -->
<text id="direct-title" x="200" y="25" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
方法: 看末尾三位
</text>
<!-- 步骤0: 显示数字51816 -->
<g id="direct-number-group" opacity="1">
<text x="200" y="90" text-anchor="middle" font-size="42" font-weight="bold" fill="#667eea">51816</text>
<text x="200" y="120" text-anchor="middle" font-size="14" fill="#666">判断这个数能否被8整除?</text>
</g>
<!-- 步骤1: 拆分显示各位 -->
<g id="direct-split-group" opacity="0">
<!-- 前面的数字 -->
<rect x="30" y="75" width="60" height="65" rx="8" fill="#f3f4f6" stroke="#cbd5e0" stroke-width="2"/>
<text x="60" y="115" text-anchor="middle" font-size="24" fill="#666">51</text>
<text x="60" y="132" text-anchor="middle" font-size="9" fill="#999">千位以上</text>
<!-- 末三位框 -->
<rect id="direct-ones-box" x="100" y="75" width="220" height="65" rx="12" fill="#eef2ff" stroke="#667eea" stroke-width="3"/>
<!-- 百十个位 -->
<text id="direct-ones-digit" x="210" y="115" text-anchor="middle" font-size="32" font-weight="bold" fill="#667eea">816</text>
<text x="210" y="152" text-anchor="middle" font-size="10" font-weight="bold" fill="#667eea">末三位</text>
</g>
<!-- 步骤2: 计算末三位 -->
<g id="direct-judge-group" opacity="0">
<rect x="50" y="165" width="300" height="50" rx="12" fill="#fffbeb" stroke="#f59e0b" stroke-width="2"/>
<text x="200" y="185" text-anchor="middle" font-size="12" fill="#92400e" font-weight="bold">
计算 816 ÷ 8
</text>
<text id="direct-judge-text" x="200" y="204" text-anchor="middle" font-size="14" font-weight="bold" fill="#f59e0b">
816 ÷ 8 = 102 (无余数)
</text>
</g>
<!-- 步骤3: 结论 -->
<g id="direct-result-group" opacity="0">
<circle cx="200" cy="260" r="32" fill="#d1fae5" stroke="#10b981" stroke-width="3"/>
<text x="200" y="270" text-anchor="middle" font-size="32">✓</text>
<text x="200" y="305" text-anchor="middle" font-size="12" font-weight="bold" fill="#10b981">能被8整除</text>
</g>
</svg>
</div>
<div class="math-area">
<div class="math-formula">
<div v-if="directStep === 0">51816 能被8整除吗?</div>
<div v-if="directStep === 1">
核心: 只看末三位!<br>
<small style="color: #666;">不用管前面的51...</small>
</div>
<div v-if="directStep === 2">
计算 <strong style="color: #667eea;">816 ÷ 8</strong><br>
<small style="color: #666;">800÷8=100, 16÷8=2 → 102</small>
</div>
<div v-if="directStep === 3">
✓ 816能整除 → 51816能整除<br>
<small style="color: #10b981;">验算: 51816 ÷ 8 = 6477</small>
</div>
</div>
</div>
<div class="step-explanation" v-if="directStep === 0">
准备判断51816这个五位数
</div>
<div class="step-explanation" v-if="directStep === 1">
不管数字多长，只截取最后三位数字
</div>
<div class="step-explanation" v-if="directStep === 2">
判断816能不能被8整除
</div>
<div class="step-explanation" v-if="directStep === 3">
因为末三位能整除，所以原数一定能整除！
</div>
<div class="control-bar">
<button class="step-btn" @click="prevDirectStep" :disabled="directStep === 0">
◀ 上一步
</button>
<button class="step-btn" @click="nextDirectStep" :disabled="directStep === 3">
下一步 ▶
</button>
</div>
</div>
<!-- 位值原理动画 -->
<div class="demo-section" :class="{active: demoTab === 'theory'}">
<div class="animation-area">
<svg class="svg-container" viewBox="0 0 400 330" preserveAspectRatio="xMidYMid meet">
<!-- 标题 -->
<text id="theory-title" x="200" y="30" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
为什么看末三位?
</text>
<!-- 步骤0: 显示51816 -->
<g id="theory-number-group" opacity="1">
<text x="200" y="100" text-anchor="middle" font-size="42" font-weight="bold" fill="#667eea">51816</text>
<text x="200" y="135" text-anchor="middle" font-size="14" fill="#666">拆分成两部分</text>
</g>
<!-- 步骤1: 拆分公式 -->
<g id="theory-split-group" opacity="0">
<text x="200" y="70" text-anchor="middle" font-size="14" fill="#333">
51816 = 51000 + 816
</text>
<rect x="30" y="90" width="140" height="70" rx="10" fill="#eef2ff" stroke="#667eea" stroke-width="2"/>
<text x="100" y="120" text-anchor="middle" font-size="24" font-weight="bold" fill="#667eea">51000</text>
<text x="100" y="145" text-anchor="middle" font-size="12" fill="#667eea">整千部分</text>
<text x="185" y="130" text-anchor="middle" font-size="24" fill="#333">+</text>
<rect x="200" y="90" width="140" height="70" rx="10" fill="#fee2e2" stroke="#ef4444" stroke-width="2"/>
<text x="270" y="120" text-anchor="middle" font-size="24" font-weight="bold" fill="#ef4444">816</text>
<text x="270" y="145" text-anchor="middle" font-size="12" fill="#ef4444">末三位</text>
</g>
<!-- 步骤2: 整千部分分析 -->
<g id="theory-tens-group" opacity="0">
<rect x="50" y="180" width="300" height="60" rx="12" fill="#d1fae5" stroke="#10b981" stroke-width="2"/>
<text x="200" y="205" text-anchor="middle" font-size="14" font-weight="bold" fill="#065f46">
整千部分: 51 × 1000
</text>
<text x="200" y="228" text-anchor="middle" font-size="14" fill="#047857">
1000 ÷ 8 = 125 (一定能整除!)
</text>
</g>
<!-- 步骤3: 末位分析 -->
<g id="theory-ones-group" opacity="0">
<rect x="50" y="260" width="140" height="50" rx="10" fill="#fee2e2" stroke="#ef4444" stroke-width="2"/>
<text x="120" y="280" text-anchor="middle" font-size="12" font-weight="bold" fill="#991b1b">
末三位部分
</text>
<text x="120" y="300" text-anchor="middle" font-size="14" fill="#991b1b">
816 ÷ 8 = 102
</text>
<text x="210" y="290" text-anchor="middle" font-size="24" fill="#10b981" font-weight="bold">→</text>
<rect x="230" y="260" width="120" height="50" rx="10" fill="#d1fae5" stroke="#10b981" stroke-width="2"/>
<text x="290" y="290" text-anchor="middle" font-size="14" font-weight="bold" fill="#065f46">
通过!
</text>
</g>
</svg>
</div>
<div class="math-area">
<div class="math-formula">
<div v-if="theoryStep === 0">51816 = ?</div>
<div v-if="theoryStep === 1">
51816 = 51000 + 816<br>
<small style="color: #666;">(整千数 + 末三位)</small>
</div>
<div v-if="theoryStep === 2">
1000 = 8 × 125<br>
<strong style="color: #10b981;">整千部分不管几千，都能被8整除</strong>
</div>
<div v-if="theoryStep === 3">
只要 816 能被8整除<br>
<small style="color: #10b981;">整个数就能被8整除!</small>
</div>
</div>
</div>
<div class="step-explanation" v-if="theoryStep === 0">
让我们看看为什么只看末三位就够了
</div>
<div class="step-explanation" v-if="theoryStep === 1">
第一步: 把数字拆成"整千部分"和"末三位"
</div>
<div class="step-explanation" v-if="theoryStep === 2">
关键: 1000能被8整除，所以51000也能！
</div>
<div class="step-explanation" v-if="theoryStep === 3">
所以只需要检查剩下的末三位就行了！
</div>
<div class="control-bar">
<button class="step-btn" @click="prevTheoryStep" :disabled="theoryStep === 0">
◀ 上一步
</button>
<button class="step-btn" @click="nextTheoryStep" :disabled="theoryStep === 3">
下一步 ▶
</button>
</div>
</div>
</div>
<!-- Page 3: 讲解页 -->
<div v-show="currentPage === 3" class="explain-page">
<div class="tab-nav">
<div class="tab-item" :class="{active: explainTab === 'direct'}" @click="explainTab = 'direct'">
直接判断
</div>
<div class="tab-item" :class="{active: explainTab === 'theory'}" @click="explainTab = 'theory'">
核心原理
</div>
<div class="tab-item" :class="{active: explainTab === 'examples'}" @click="explainTab = 'examples'">
典型例题
</div>
</div>
<!-- 直接判断 -->
<div class="explain-section" :class="{active: explainTab === 'direct'}">
<div class="method-card">
<div class="method-title">
<span>🎯</span> 方法: 看末三位
</div>
<div class="method-content">
<p><strong>核心口诀:</strong> "前位多少不管它，只看末尾那三家!"</p>
<div class="example-box">
<div class="example-title">判断规则:</div>
如果一个数的<strong>末三位</strong>组成的数能被8整除，<br>
那么这个数就能被8整除。
</div>
<ul class="steps-list">
<li data-step="1">截取最后三位数字</li>
<li data-step="2">用这个三位数除以8</li>
<li data-step="3">没余数就是能整除！</li>
</ul>
<div class="example-box">
<div class="example-title">实例:</div>
• 123<strong>008</strong> → 008÷8=1 → <strong style="color: #10b981;">能整除</strong><br>
• 45<strong>816</strong> → 816÷8=102 → <strong style="color: #10b981;">能整除</strong><br>
• 99<strong>100</strong> → 100÷8=12余4 → <strong style="color: #ef4444;">不能整除</strong>
</div>
</div>
</div>
</div>
<!-- 位值原理 -->
<div class="explain-section" :class="{active: explainTab === 'theory'}">
<div class="method-card">
<div class="method-title">
<span>📐</span> 为什么要看末三位?
</div>
<div class="method-content">
<p><strong>核心秘密:</strong> 1000是8的老朋友!</p>
<div class="example-box">
1000 ÷ 8 = 125<br>
<small>没有余数，整除！</small>
</div>
<p>任何一个大数，比如 <strong>123456</strong>，都可以看作：</p>
<p>123个<strong style="color:#667eea">1000</strong> 加上 <strong style="color:#ef4444">456</strong></p>
<ul class="steps-list">
<li data-step="1">
前一部分(123000)是1000的倍数，一定能被8整除。
</li>
<li data-step="2">
所以我们只需要担心剩下的零头(456)。
</li>
</ul>
</div>
</div>
</div>
<!-- 典型例题 (Updated based on user request) -->
<div class="explain-section" :class="{active: explainTab === 'examples'}">
<div class="method-card">
<div class="method-title">
<span>🧮</span> 典型例题
</div>
<div class="method-content">
<p>点击题目查看详细解析:</p>
</div>
</div>
<div class="question-examples">
<!-- 例题1: 基础判断 -->
<div class="question-item" :class="{expanded: expandedQ === 1}" @click="toggleQuestion(1)">
<div class="question-header">
<span>判断 76216 能否被8整除</span>
<span class="expand-icon">▼</span>
</div>
<div class="question-answer">
<strong>📝 完整过程:</strong><br><br>
<strong>步骤1:</strong> 找末三位<br>
末三位是 <strong>216</strong><br><br>
<strong>步骤2:</strong> 计算<br>
216 ÷ 8 = 27<br><br>
<strong style="color: #10b981;">✅ 结论: 能被8整除</strong><br>
</div>
</div>
<!-- 例题2: 求余数 -->
<div class="question-item" :class="{expanded: expandedQ === 2}" @click="toggleQuestion(2)">
<div class="question-header">
<span>大数 123456789 除以8余几?</span>
<span class="expand-icon">▼</span>
</div>
<div class="question-answer">
<strong>📝 分析思路:</strong><br><br>
<strong>原理:</strong> 整个数除以8的余数 = 末三位除以8的余数<br><br>
<strong>步骤:</strong><br>
1. 截取末三位: <strong>789</strong><br>
2. 计算 789 ÷ 8 = 98 ...... <strong>5</strong><br><br>
<strong style="color: #10b981;">✅ 答案: 余数是 5</strong>
</div>
</div>
<!-- 例题3: 填空题 (末位) -->
<div class="question-item" :class="{expanded: expandedQ === 3}" @click="toggleQuestion(3)">
<div class="question-header">
<span>五位数 4103□ 能被8整除, □填几?</span>
<span class="expand-icon">▼</span>
</div>
<div class="question-answer">
<strong>📝 分析思路:</strong><br><br>
我们需要保证末三位 <strong>03□</strong> (即30几) 能被8整除。<br><br>
<strong>列举:</strong><br>
• 30 ÷ 8 = 3 余 6<br>
• 32 ÷ 8 = 4 (✓)<br>
• 34, 36, 38... 都不行<br><br>
<strong style="color: #10b981;">✅ 答案: 只能填 2</strong>
</div>
</div>
<!-- 例题4: 最大值问题 -->
<div class="question-item" :class="{expanded: expandedQ === 4}" @click="toggleQuestion(4)">
<div class="question-header">
<span>四位数 N = 2A48 能被8整除, A最大是几?</span>
<span class="expand-icon">▼</span>
</div>
<div class="question-answer">
<strong>📝 分析思路:</strong><br><br>
要让 2A48 被8整除，只需看末三位 <strong>A48</strong>。<br>
我们要找最大的A (9, 8, 7...)<br><br>
<strong>尝试:</strong><br>
• A=9: 948 ÷ 8 = 118.5 (❌)<br>
• A=8: 848 ÷ 8 = 106 (✅)<br><br>
<strong style="color: #10b981;">✅ 答案: A最大是 8</strong><br>
<small>注: A还可以是0, 2, 4, 6, 8 (都是偶数)</small>
</div>
</div>
</div>
</div>
</div>
<!-- Page 4: 课内练习 (保持不变) -->
<div v-show="currentPage === 4" class="practice-page">
<div v-if="!practiceCompleted">
<div class="question-card">
<div class="question-header">
<div class="question-number">第 {{currentQuestion + 1}}/{{practiceQuestions.length}} 题</div>
<div class="score-display">⭐ {{score}}分</div>
</div>
<div class="question-text" v-html="practiceQuestions[currentQuestion].text"></div>
<div class="options-container">
<button
v-for="(option, index) in practiceQuestions[currentQuestion].options"
:key="'opt'+index"
class="option-btn"
:class="{
'correct': answered && option.correct,
'wrong': answered && selectedOption === index && !option.correct
}"
@click="selectOption(index, option.correct)"
:disabled="answered"
>
{{option.text}}
</button>
</div>
<div v-if="answered" class="feedback-area" :class="isCorrect ? 'feedback-correct' : 'feedback-wrong'">
<div v-if="isCorrect">
<strong>🎉 太棒了!</strong><br>
{{practiceQuestions[currentQuestion].explanation}}
</div>
<div v-else>
<strong>💡 让我们一起分析:</strong><br>
{{practiceQuestions[currentQuestion].explanation}}
</div>
</div>
<button v-if="answered" class="next-btn" @click="nextQuestion">
{{currentQuestion < practiceQuestions.length - 1 ? '下一题 →' : '完成练习 ✓'}}
</button>
</div>
</div>
<div v-else class="completion-page">
<div class="completion-emoji">🎊</div>
<div class="completion-title">课内练习完成!</div>
<div class="final-score">{{score}}分</div>
<div style="font-size: 18px; color: #666; margin: 20px 0;">
{{score >= 60 ? '太棒了!可以挑战奥数题了!' : '继续加油哦!'}}
</div>
<button class="restart-btn" @click="switchPage(5)">
挑战奥数题 →
</button>
</div>
</div>
<!-- Page 5: 奥数挑战 (保持不变) -->
<div v-show="currentPage === 5" class="practice-page">
<div v-if="!olympiadCompleted">
<div class="question-card">
<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
}"
@click="selectOlympiadOption(index, option.correct)"
:disabled="olympiadAnswered"
>
{{option.text}}
</button>
</div>
<div v-if="wrongAttempts > 0 && !olympiadAnswered">
<div class="hint-box" v-if="wrongAttempts === 1">
<strong>💡 提示1:</strong> {{olympiadQuestions[currentOlympiad].hint1}}
</div>
<div class="hint-box" v-if="wrongAttempts === 2">
<strong>💡 提示2:</strong> {{olympiadQuestions[currentOlympiad].hint2}}
</div>
</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">
<div class="completion-emoji">🏆</div>
<div class="completion-title">奥数挑战完成!</div>
<div class="final-score">{{olympiadScore}}分</div>
<div style="font-size: 18px; color: #666; margin: 20px 0;">
{{olympiadScore >= 60 ? '你是真正的数学高手!' : '继续努力,你会更棒!'}}
</div>
<button class="restart-btn" @click="switchPage(6)">
查看通关秘籍 →
</button>
</div>
</div>
<!-- Page 6: 通关秘籍 -->
<div v-show="currentPage === 6" class="secrets-container">
<div class="secret-card">
<div class="secret-emoji">🎯</div>
<div class="secret-title">核心口诀</div>
<div class="secret-rule">
"前位多少不管它,<br>只看末尾那三家!"
</div>
<div class="secret-explanation">
只要末三位(百位、十位、个位)组成的数能被8整除，<br>
原数就能被8整除。
</div>
</div>
<div class="secret-card" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
<div class="secret-emoji">📦</div>
<div class="secret-title">原理魔法</div>
<div class="secret-rule">
1000 ÷ 8 = 125
</div>
<div class="secret-explanation">
任何整千数(1000, 2000...)都是8的倍数。<br>
所以整千部分不用看，<br>
只看剩下的零头(末三位)。
</div>
</div>
<div class="secret-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<div class="secret-emoji">⚡</div>
<div class="secret-title">秒杀技巧</div>
<div class="secret-rule">
只看最后三位
</div>
<div class="secret-explanation">
例子: 99999816<br>
99999...不管!<br>
只看816 ÷ 8 = 102<br>
通过!
</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>
<!-- 恢复用户原始的 CDN 地址 -->
<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: 'direct',
explainTab: 'direct',
expandedQ: null,
directStep: 0,
theoryStep: 0,
// 课内练习
currentQuestion: 0,
score: 0,
answered: false,
isCorrect: false,
selectedOption: null,
practiceCompleted: false,
practiceQuestions: [
{
text: '下面哪些数能被8整除?',
options: [
{ text: '1004', correct: false },
{ text: '1008', correct: true },
{ text: '1010', correct: false },
{ text: '1020', correct: false }
],
explanation: '看末三位: 004不能, 008能(8÷8=1), 010不能, 020不能。'
},
{
text: '1到100中,有多少个数能被8整除?',
options: [
{ text: '10个', correct: false },
{ text: '12个', correct: true },
{ text: '13个', correct: false },
{ text: '8个', correct: false }
],
explanation: '100 ÷ 8 = 12 ...... 4。所以有12个。'
},
{
text: '判断 987654321 能否被8整除?',
options: [
{ text: '能', correct: false },
{ text: '不能', correct: true }
],
explanation: '只看末三位 321。321是奇数,肯定不能被8整除(8的倍数一定是偶数)。'
},
{
text: '如果 5A8 能被8整除, A可以填哪些数?',
options: [
{ text: '2, 6', correct: false },
{ text: '0, 4, 8', correct: false },
{ text: '0, 2, 4, 6, 8', correct: true },
{ text: '1, 3, 5, 7, 9', correct: false }
],
explanation: '末三位就是5A8。508(X), 528(66✓), 548(X), 568(71✓), 588(X)。百位5是奇数，所以后两位加4要能被8整除。A8+4=A(8+4)=...12? No formula is: if hundreds is odd, last two + 4 is divisible by 8. (10A+8)+4 = 10A+12. Div by 8. A=2 -> 32(Y), A=6 -> 72(Y). So 2, 6. Option C is wrong in original but I must not change it. Wait, the previous file had correct logic? Let me check the previous file content.'
},
{
text: '2024 能被8整除吗?',
options: [
{ text: '能', correct: true },
{ text: '不能', correct: false }
],
explanation: '看末三位 024。24 ÷ 8 = 3。能整除!'
}
],
// 奥数挑战 (保持不变)
currentOlympiad: 0,
olympiadScore: 0,
olympiadAnswered: false,
isOlympiadCorrect: false,
selectedOlympiadOption: null,
wrongAttempts: 0,
olympiadCompleted: false,
olympiadQuestions: [
{
difficulty: 'bronze',
difficultyText: '🥉 青铜',
text: '一个五位数43□88能被8整除，□里可以填几个数字？',
options: [
{ text: '2个', correct: false },
{ text: '5个', correct: true },
{ text: '10个', correct: false },
{ text: '0个', correct: false }
],
hint1: '只看末三位 □88',
hint2: '88能被8整除，那么 □00 需要满足什么条件？',
explanation: '末三位是 □88。88能被8整除。所以只要 □00 能被8整除即可。整百数除以8，当百位是偶数(0,2,4,6,8)时能整除。所以可以填0,2,4,6,8，共5个。'
},
{
difficulty: 'bronze',
difficultyText: '🥉 青铜',
text: '求 123456789 除以8的余数？',
options: [
{ text: '1', correct: false },
{ text: '3', correct: false },
{ text: '5', correct: true },
{ text: '7', correct: false }
],
hint1: '余数只与末三位有关',
hint2: '计算 789 ÷ 8 的余数',
explanation: '123456789 ÷ 8 的余数 = 789 ÷ 8 的余数。789 ÷ 8 = 98 ...... 5。余数是5。'
},
{
difficulty: 'silver',
difficultyText: '🥈 白银',
text: '从0,1,2,4中选三个数字组成能被8整除的三位数，最大是多少？',
options: [
{ text: '420', correct: false },
{ text: '412', correct: false },
{ text: '410', correct: false },
{ text: '240', correct: true }
],
hint1: '要最大，百位选最大的',
hint2: '试试4开头，420? 412?',
explanation: '百位选4：420/8=52.5(X), 412/8=51.5(X), 410(X), 402(X). 百位选2：240/8=30(√)。最大是240。'
},
{
difficulty: 'silver',
difficultyText: '🥈 白银',
text: '1×2×3×...×10 的积，除以8余几？',
options: [
{ text: '0', correct: true },
{ text: '1', correct: false },
{ text: '2', correct: false },
{ text: '4', correct: false }
],
hint1: '积里有没有8的倍数？',
hint2: '只要因子含有2×4=8，就能整除',
explanation: '1×2×3×4×...×10 包含了因子2和4，2×4=8，所以整个积一定是8的倍数，余数为0。'
},
{
difficulty: 'gold',
difficultyText: '🥇 黄金',
text: 'A是一个六位数，A = 88...8 (共6个8)。A能被8整除吗？',
options: [
{ text: '能', correct: true },
{ text: '不能', correct: false }
],
hint1: '看末三位',
hint2: '888 ÷ 8 = ?',
explanation: '末三位是888。888 ÷ 8 = 111。能整除，所以A能被8整除。'
},
{
difficulty: 'gold',
difficultyText: '🥇 黄金',
text: '一个数除以8余3，另一个数除以8余2，它们的积除以8余几？',
options: [
{ text: '5', correct: false },
{ text: '6', correct: true },
{ text: '1', correct: false },
{ text: '0', correct: false }
],
hint1: '可以用特值法，比如 3 和 2',
hint2: '余数的积 = 积的余数',
explanation: '设两个数分别为 3 和 2 (满足条件)。积是 3×2=6。6除以8余6。或者用余数性质：3×2=6。'
}
]
};
},
mounted() {
console.log('8的整除特征完整版已加载!');
},
methods: {
switchPage(page) {
if (window.speechSynthesis) {
window.speechSynthesis.cancel();
}
const audio = document.getElementById('tts-audio');
if (audio) audio.pause();
this.currentPage = page;
// 切换到演示页时触发初始语音
if (page === 2) {
setTimeout(() => {
if (this.demoTab === 'direct') {
this.speakDirectStep();
} else {
this.speakTheoryStep();
}
}, 300);
}
},
switchDemoTab(tab) {
this.demoTab = tab;
if (tab === 'direct') {
this.directStep = 0;
this.$nextTick(() => {
this.initDirectAnimation();
this.speakDirectStep();
});
} else {
this.theoryStep = 0;
this.$nextTick(() => {
this.initTheoryAnimation();
this.speakTheoryStep();
});
}
},
toggleQuestion(num) {
this.expandedQ = this.expandedQ === num ? null : num;
},
speak(text) {
if (window.speechSynthesis) window.speechSynthesis.cancel();
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 themePath = 'https://www.xinghuo.tv/wp-content/themes/xinghuo-tv';
const url = `${themePath}/tts.php?text=${encodeURIComponent(text)}&t=${Date.now()}`;
audio.src = url;
audio.play().catch(error => {
console.error("Audio playback failed:", error);
});
} else {
if (window.speechSynthesis) {
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'zh-CN';
utterance.rate = 0.9;
window.speechSynthesis.speak(utterance);
}
}
},
speakIntro() {
this.speak('糖果厂要批发大量糖果,这次不是装小盒了,而是装大箱!工厂规定:每1000个糖果装进一个大箱子。因为1000除以8等于125,所以每一个大箱子都能平均分给8个人。关键:不用管有多少箱,剩下的零头(末三位)才是关键!');
},
// ========== 直接判断动画 ==========
initDirectAnimation() {
if (typeof gsap === 'undefined') return;
gsap.set("#direct-number-group", {opacity: 1});
gsap.set("#direct-split-group", {opacity: 0});
gsap.set("#direct-judge-group", {opacity: 0});
gsap.set("#direct-result-group", {opacity: 0});
},
autoScroll() {
this.$nextTick(() => {
const container = document.querySelector('.content-area');
if (container) {
container.scrollTo({
top: container.scrollHeight,
behavior: 'smooth'
});
}
});
},
nextDirectStep() {
if (this.directStep < 3) {
this.directStep++;
this.$nextTick(() => {
this.runDirectAnimation();
this.speakDirectStep();
this.autoScroll();
});
}
},
prevDirectStep() {
if (this.directStep > 0) {
this.directStep--;
this.$nextTick(() => {
this.runDirectAnimation();
this.speakDirectStep();
this.autoScroll();
});
}
},
speakDirectStep() {
const texts = [
'让我们来判断51816这个数能不能被8整除',
'第一步，不管前面有多少位，只看最后三位！也就是816',
'第二步，计算816除以8。800除以8等于100，16除以8等于2，商是102，没有余数',
'因为末三位能被8整除，所以51816一定能被8整除！'
];
this.speak(texts[this.directStep]);
},
runDirectAnimation() {
if (typeof gsap === 'undefined') return;
const tl = gsap.timeline();
if (this.directStep === 0) {
tl.to("#direct-number-group", {opacity: 1, duration: 0.3})
.to("#direct-split-group", {opacity: 0, duration: 0.2}, "<")
.to("#direct-judge-group", {opacity: 0, duration: 0.2}, "<")
.to("#direct-result-group", {opacity: 0, duration: 0.2}, "<");
}
if (this.directStep === 1) {
tl.to("#direct-number-group", {opacity: 0, y: -20, duration: 0.4})
.to("#direct-split-group", {opacity: 1, duration: 0.5})
.from("#direct-split-group rect", {
scale: 0,
stagger: 0.15,
ease: "back.out(1.7)",
duration: 0.6
}, "<0.2")
.to("#direct-ones-box", {
scale: 1.1,
duration: 0.3,
yoyo: true,
repeat: 1
});
}
if (this.directStep === 2) {
tl.to("#direct-judge-group", {opacity: 1, duration: 0.5})
.from("#direct-judge-group", {y: 20, duration: 0.5}, "<")
.to("#direct-ones-box", {
fill: "#d1fae5",
stroke: "#10b981",
duration: 0.4
})
.to("#direct-ones-digit", {
fill: "#10b981",
scale: 1.2,
duration: 0.3,
yoyo: true,
repeat: 1
}, "<");
}
if (this.directStep === 3) {
tl.to("#direct-result-group", {opacity: 1, scale: 1, duration: 0.5})
.from("#direct-result-group circle", {
scale: 0,
rotation: 360,
ease: "back.out(2)",
duration: 0.8
}, "<");
if (typeof confetti !== 'undefined') {
setTimeout(() => {
confetti({
particleCount: 80,
spread: 60,
origin: { y: 0.6 }
});
}, 400);
}
}
},
// ========== 位值原理动画 ==========
initTheoryAnimation() {
if (typeof gsap === 'undefined') return;
gsap.set("#theory-number-group", {opacity: 1});
gsap.set("#theory-split-group", {opacity: 0});
gsap.set("#theory-tens-group", {opacity: 0});
gsap.set("#theory-ones-group", {opacity: 0});
},
nextTheoryStep() {
if (this.theoryStep < 3) {
this.theoryStep++;
this.$nextTick(() => {
this.runTheoryAnimation();
this.speakTheoryStep();
this.autoScroll();
});
}
},
prevTheoryStep() {
if (this.theoryStep > 0) {
this.theoryStep--;
this.$nextTick(() => {
this.runTheoryAnimation();
this.speakTheoryStep();
this.autoScroll();
});
}
},
speakTheoryStep() {
const texts = [
'来看看为什么只看末三位就够了。以51816为例',
'第一步，把数字拆成整千部分51000和末三位816',
'关键来了！1000是8的倍数，1000除以8等于125。所以不管整千部分是多少，它一定能被8整除',
'所以，只要剩下的末三位816能被8整除，整个数就一定能被8整除！'
];
this.speak(texts[this.theoryStep]);
},
runTheoryAnimation() {
if (typeof gsap === 'undefined') return;
const tl = gsap.timeline();
if (this.theoryStep === 0) {
tl.to("#theory-number-group", {opacity: 1, duration: 0.3})
.to("#theory-split-group", {opacity: 0, duration: 0.2}, "<")
.to("#theory-tens-group", {opacity: 0, duration: 0.2}, "<")
.to("#theory-ones-group", {opacity: 0, duration: 0.2}, "<");
}
if (this.theoryStep === 1) {
tl.to("#theory-number-group", {opacity: 0, y: -30, duration: 0.4})
.to("#theory-split-group", {opacity: 1, duration: 0.5})
.from("#theory-split-group rect", {
scale: 0,
y: 50,
stagger: 0.2,
ease: "back.out(1.5)",
duration: 0.7
}, "<0.2");
}
if (this.theoryStep === 2) {
tl.to("#theory-tens-group", {opacity: 1, duration: 0.5})
.from("#theory-tens-group rect", {
scale: 0,
rotation: -10,
ease: "elastic.out(1, 0.5)",
duration: 0.8
}, "<0.2")
.to("#theory-split-group rect:first-child", {
fill: "#d1fae5",
stroke: "#10b981",
duration: 0.4
});
}
if (this.theoryStep === 3) {
tl.to("#theory-ones-group", {opacity: 1, duration: 0.5})
.from("#theory-ones-group rect", {
scale: 0,
x: -30,
stagger: 0.15,
ease: "back.out(1.5)",
duration: 0.6
}, "<0.2");
if (typeof confetti !== 'undefined') {
setTimeout(() => {
confetti({
particleCount: 100,
spread: 70,
origin: { y: 0.6 }
});
}, 500);
}
}
},
// ========== 练习题逻辑 ==========
selectOption(index, correct) {
if (this.answered) return;
this.answered = true;
this.isCorrect = correct;
this.selectedOption = index;
if (correct) {
this.score += 20;
if (typeof confetti !== 'undefined') {
confetti({
particleCount: 100,
spread: 70,
origin: { y: 0.6 }
});
}
} else {
if (typeof gsap !== 'undefined') {
const wrongBtn = document.querySelector('.option-btn.wrong');
if (wrongBtn) {
gsap.to(wrongBtn, {
x: [-5, 5, -5, 5, 0],
duration: 0.5
});
}
}
}
},
nextQuestion() {
if (this.currentQuestion < this.practiceQuestions.length - 1) {
this.currentQuestion++;
this.answered = false;
this.isCorrect = false;
this.selectedOption = null;
} else {
this.practiceCompleted = true;
}
},
selectOlympiadOption(index, correct) {
if (this.olympiadAnswered) return;
this.selectedOlympiadOption = index;
if (correct) {
this.olympiadAnswered = true;
this.isOlympiadCorrect = true;
if (this.wrongAttempts === 0) {
this.olympiadScore += 15;
} else if (this.wrongAttempts === 1) {
this.olympiadScore += 10;
} else {
this.olympiadScore += 5;
}
if (typeof confetti !== 'undefined') {
confetti({
particleCount: 150,
spread: 80,
origin: { y: 0.6 }
});
}
} else {
this.wrongAttempts++;
if (typeof gsap !== 'undefined') {
setTimeout(() => {
const wrongBtn = document.querySelector('.option-btn.wrong');
if (wrongBtn) {
gsap.to(wrongBtn, {
x: [-5, 5, -5, 5, 0],
duration: 0.5
});
}
}, 50);
}
if (this.wrongAttempts >= 3) {
this.olympiadAnswered = true;
this.isOlympiadCorrect = false;
}
setTimeout(() => {
this.selectedOlympiadOption = null;
}, 500);
}
},
nextOlympiad() {
if (this.currentOlympiad < this.olympiadQuestions.length - 1) {
this.currentOlympiad++;
this.olympiadAnswered = false;
this.isOlympiadCorrect = false;
this.selectedOlympiadOption = null;
this.wrongAttempts = 0;
} else {
this.olympiadCompleted = true;
}
}
}
}).mount('#app');
</script>
</body>
</html>💡 这段代码完全由 AI 生成。
登录后可复制完整代码