11的整除特征-割尾法原理推导

<!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>11的整除特征 - 完整版</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;
        }
        
        .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: #059669;
        }
        
        .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: #ECFDF5;
            padding: 20px;
            border-radius: 12px;
            margin: 20px 0;
            border-left: 4px solid #059669;
        }
        
        .highlight {
            color: #059669;
            font-weight: bold;
        }
        
        .speak-btn {
            background: linear-gradient(135deg, #059669 0%, #047857 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(5, 150, 105, 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: #059669;
            border-bottom-color: #059669;
        }

.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, #ECFDF5 0%, #D1FAE5 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 #059669;
            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: 13px;
            color: #666;
            margin-top: 8px;
            line-height: 1.5;
            text-align: center;
            padding: 8px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        
        .control-bar {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }
        
        .step-btn {
            background: #059669;
            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(5, 150, 105, 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 #059669;
        }

.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: #059669;
            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: #059669;
            transform: translateX(5px);
        }

.question-item.expanded {
            border-color: #059669;
            background: #ECFDF5;
        }

.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: #059669;
            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: #059669;
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 14px;
        }
        
        .score-display {
            background: #fcd34d;
            padding: 5px 15px;
            border-radius: 20px;
            font-weight: bold;
            color: #78350f;
        }
        
        .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: #059669;
            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: #ECFDF5;
            border-left: 4px solid #059669;
            padding: 15px;
            border-radius: 8px;
            margin: 15px 0;
            font-size: 14px;
            line-height: 1.6;
        }
        
        .next-btn {
            background: linear-gradient(135deg, #059669 0%, #047857 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(5, 150, 105, 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, #059669 0%, #047857 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: #059669;
            margin: 20px 0;
        }
        
        .final-score {
            font-size: 48px;
            font-weight: bold;
            color: #047857;
            margin: 20px 0;
        }
        
        .restart-btn {
            background: linear-gradient(135deg, #059669 0%, #047857 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(5, 150, 105, 0.3);
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="content-area">
            
            <div v-show="currentPage === 1" class="intro-page">
                <div class="intro-emoji">✂️</div>
                <div class="intro-title">11的整除特征</div>
                <div class="intro-story">
                    <strong>🔍 割尾法的秘密</strong><br><br>
                    
                    判断一个数能否被11整除，有个超酷的方法：<span class="highlight">割尾法</span>！<br><br>
                    
                    <strong>核心原理</strong>：<br>
                    为什么"割去末位，减去剩下的"能判断11？<br><br>
                    
                    <strong>关键发现</strong>：<br>
                    • 10 比 11 少 1<br>
                    • 10倍的某个数 = 11倍的这个数 - 1倍的这个数<br><br>
                    
                    <strong>以143为例</strong>：<br>
                    143 = 14 × 10 + 3<br>
                    = 14 × (11-1) + 3<br>
                    = 14 × 11 - 14 + 3<br>
                    = 14 × 11 - (14-3)<br><br>
                    
                    前面的<strong>14×11</strong>肯定能被11整除，<br>
                    只要<span class="highlight">(14-3)</span>能被11整除就行！<br><br>
                    
                    <strong>14</strong>是割去末位剩下的数<br>
                    <strong>3</strong>是末位数字<br><br>
                    
                    这就是<span class="highlight">"剩下 - 末位"</span>的由来！
                </div>
                <button class="speak-btn" @click="speakIntro">🔊 听老师讲解</button>
            </div>
            
            
            <div v-show="currentPage === 2" class="demo-page">
                <div class="tab-nav">
                    <div class="tab-item" :class="{active: demoTab === 'principle'}" @click="switchDemoTab('principle')">
                        原理分析
                    </div>
                    <div class="tab-item" :class="{active: demoTab === 'simple'}" @click="switchDemoTab('simple')">
                        简单示例
                    </div>
                    <div class="tab-item" :class="{active: demoTab === 'complex'}" @click="switchDemoTab('complex')">
                        连续割尾
                    </div>
                </div>

<div class="demo-section" :class="{active: demoTab === 'principle'}">
                    <div class="animation-area">
                        <svg class="svg-container" viewBox="0 0 400 330" preserveAspectRatio="xMidYMid meet">
                            <text id="principle-title" x="200" y="25" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
                                为什么割尾法有效？
                            </text>

<g id="principle-step0" opacity="1">
                                <text x="200" y="90" text-anchor="middle" font-size="50" font-weight="bold" fill="#059669">143</text>
                                <text x="200" y="120" text-anchor="middle" font-size="14" fill="#666">让我们深入分析这个数</text>
                            </g>

<g id="principle-step1" opacity="0">
                                <text x="200" y="55" text-anchor="middle" font-size="14" fill="#059669" font-weight="bold">
                                    步骤1: 按位值拆分
                                </text>
                                
                                <text x="200" y="90" text-anchor="middle" font-size="18" fill="#333">
                                    143 = 
                                </text>
                                
                                <rect x="60" y="105" width="90" height="60" rx="10" fill="#D1FAE5" stroke="#059669" stroke-width="2"/>
                                <text x="105" y="130" text-anchor="middle" font-size="16" font-weight="bold" fill="#047857">14 × 10</text>
                                <text x="105" y="150" text-anchor="middle" font-size="11" fill="#047857">十位和百位</text>

<g id="principle-step2" opacity="0">
                                <text x="200" y="55" text-anchor="middle" font-size="14" fill="#059669" font-weight="bold">
                                    步骤2: 核心魔法 10 = 11 - 1
                                </text>
                                
                                <rect x="50" y="75" width="300" height="60" rx="12" fill="#FEF3C7" stroke="#F59E0B" stroke-width="2"/>
                                <text x="200" y="95" text-anchor="middle" font-size="14" fill="#92400e">
                                    把 10 替换成 (11 - 1)
                                </text>
                                <text x="200" y="115" text-anchor="middle" font-size="16" font-weight="bold" fill="#92400e">
                                    14 × 10 = 14 × (11 - 1)
                                </text>

<g id="principle-step3" opacity="0">
                                <text x="200" y="55" text-anchor="middle" font-size="14" fill="#059669" font-weight="bold">
                                    步骤3: 代回原式
                                </text>
                                
                                <rect x="50" y="75" width="300" height="70" rx="12" fill="#E0E7FF" stroke="#6366F1" stroke-width="2"/>
                                <text x="200" y="95" text-anchor="middle" font-size="14" fill="#4338ca">
                                    原式: 143 = 14×10 + 3
                                </text>
                                <text x="200" y="115" text-anchor="middle" font-size="14" fill="#4338ca">
                                    替换: 143 = (14×11 - 14) + 3
                                </text>
                                <text x="200" y="133" text-anchor="middle" font-size="14" font-weight="bold" fill="#4338ca">
                                    = 14×11 - 14 + 3
                                </text>
                            </g>

<g id="principle-step4" opacity="0">
                                <text x="200" y="55" text-anchor="middle" font-size="14" fill="#059669" font-weight="bold">
                                    步骤4: 整理公式
                                </text>
                                
                                <rect x="50" y="75" width="300" height="55" rx="12" fill="#FCE7F3" stroke="#EC4899" stroke-width="2"/>
                                <text x="200" y="95" text-anchor="middle" font-size="14" fill="#9f1239">
                                    提取负号
                                </text>
                                <text x="200" y="115" text-anchor="middle" font-size="16" font-weight="bold" fill="#9f1239">
                                    143 = 14×11 - (14 - 3)
                                </text>

<g id="principle-step5" opacity="0">
                                <text x="200" y="50" text-anchor="middle" font-size="14" fill="#059669" font-weight="bold">
                                    步骤5: 关键发现！
                                </text>
                                
                                <rect x="40" y="70" width="150" height="80" rx="12" fill="#D1FAE5" stroke="#10b981" stroke-width="3"/>
                                <text x="115" y="90" text-anchor="middle" font-size="12" font-weight="bold" fill="#065f46">
                                    14 × 11
                                </text>
                                <text x="115" y="108" text-anchor="middle" font-size="11" fill="#047857">
                                    这部分一定
                                </text>
                                <text x="115" y="124" text-anchor="middle" font-size="11" fill="#047857">
                                    能被11整除
                                </text>
                                <text x="115" y="140" text-anchor="middle" font-size="16" fill="#10b981">
                                    ✓
                                </text>

<rect x="230" y="70" width="130" height="80" rx="12" fill="#FEF3C7" stroke="#F59E0B" stroke-width="3"/>
                                <text x="295" y="90" text-anchor="middle" font-size="12" font-weight="bold" fill="#92400e">
                                    (14 - 3)
                                </text>
                                <text x="295" y="108" text-anchor="middle" font-size="11" fill="#92400e">
                                    只要这部分
                                </text>
                                <text x="295" y="124" text-anchor="middle" font-size="11" fill="#92400e">
                                    能被11整除
                                </text>
                                <text x="295" y="140" text-anchor="middle" font-size="16" fill="#F59E0B">
                                    ？
                                </text>

<g id="principle-step6" opacity="0">
                                <text x="200" y="50" text-anchor="middle" font-size="16" fill="#059669" font-weight="bold">
                                    割尾法公式
                                </text>
                                
                                <rect x="40" y="70" width="320" height="100" rx="15" fill="white" stroke="#059669" stroke-width="4"/>
                                
                                <text x="200" y="95" text-anchor="middle" font-size="14" fill="#666">
                                    任意数
                                </text>
                                <text x="200" y="115" text-anchor="middle" font-size="20" font-weight="bold" fill="#059669">
                                    ABC...XY
                                </text>
                                
                                <text x="200" y="140" text-anchor="middle" font-size="18" fill="#333">
                                    ↓
                                </text>
                                
                                <text x="200" y="160" text-anchor="middle" font-size="16" font-weight="bold" fill="#047857">
                                    ABC...X - Y
                                </text>

<rect x="50" y="190" width="300" height="55" rx="12" fill="#FEF3C7" stroke="#F59E0B" stroke-width="2"/>
                                <text x="200" y="212" text-anchor="middle" font-size="13" fill="#92400e">
                                    如果这个差能被11整除
                                </text>
                                <text x="200" y="230" text-anchor="middle" font-size="13" font-weight="bold" fill="#92400e">
                                    原数就能被11整除！
                                </text>

<div class="math-area">
                        <div class="math-formula">
                            <div v-if="principleStep === 0">143 = ?</div>
                            <div v-if="principleStep === 1">
                                143 = 14 × 10 + 3<br>
                                <small style="color: #666;">按位值拆分</small>
                            </div>
                            <div v-if="principleStep === 2">
                                14 × 10 = 14 × (11-1)<br>
                                = 14 × 11 - 14<br>
                                <small style="color: #F59E0B;">核心变换!</small>
                            </div>
                            <div v-if="principleStep === 3">
                                143 = 14×11 - 14 + 3<br>
                                <small style="color: #6366F1;">代入原式</small>
                            </div>
                            <div v-if="principleStep === 4">
                                143 = 14×11 - (14-3)<br>
                                <small style="color: #EC4899;">整理公式</small>
                            </div>
                            <div v-if="principleStep === 5">
                                14×11能整除 ✓<br>
                                只看 14-3=11<br>
                                <small style="color: #10b981;">关键发现!</small>
                            </div>
                            <div v-if="principleStep === 6">
                                <strong>割尾法公式</strong><br>
                                剩下 - 末位<br>
                                <small style="color: #059669;">通用规则</small>
                            </div>
                        </div>
                    </div>

<div class="step-explanation" v-if="principleStep === 0">
                        让我们从数字143开始，彻底搞懂割尾法的原理
                    </div>
                    <div class="step-explanation" v-if="principleStep === 1">
                        第一步：按位值拆分。143 = 14×10 + 3，其中14代表十位和百位，3是个位
                    </div>
                    <div class="step-explanation" v-if="principleStep === 2">
                        第二步：核心魔法！把10替换成(11-1)，因为10比11少1。展开后：14×10 = 14×11 - 14
                    </div>
                    <div class="step-explanation" v-if="principleStep === 3">
                        第三步：代回原式。143 = 14×11 - 14 + 3。现在我们看到了11的倍数！
                    </div>
                    <div class="step-explanation" v-if="principleStep === 4">
                        第四步：整理公式。把后面两项合并：143 = 14×11 - (14-3)
                    </div>
                    <div class="step-explanation" v-if="principleStep === 5">
                        第五步：关键发现！14×11肯定能被11整除，所以只要(14-3)能被11整除，原数就能！14-3=11，能整除！
                    </div>
                    <div class="step-explanation" v-if="principleStep === 6">
                        总结：对于任意数，都可以用"剩下的部分 - 末位"来判断！这就是割尾法的数学原理！
                    </div>

<div class="demo-section" :class="{active: demoTab === 'simple'}">
                    <div class="animation-area">
                        <svg class="svg-container" viewBox="0 0 400 330" preserveAspectRatio="xMidYMid meet">
                            <text id="simple-title" x="200" y="25" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
                                判断143能否被11整除
                            </text>

<g id="simple-number-group" opacity="1">
                                <text x="200" y="90" text-anchor="middle" font-size="50" font-weight="bold" fill="#059669">143</text>
                                <text x="200" y="120" text-anchor="middle" font-size="14" fill="#666">用割尾法判断</text>
                            </g>

<div class="math-area">
                        <div class="math-formula">
                            <div v-if="simpleStep === 0">143 ÷ 11 = ?</div>
                            <div v-if="simpleStep === 1">
                                割尾: 14 | 3<br>
                                <small style="color: #666;">剩下14，末位3</small>
                            </div>
                            <div v-if="simpleStep === 2">
                                14 - 3 = 11<br>
                                <small style="color: #F59E0B;">剩下减末位</small>
                            </div>
                            <div v-if="simpleStep === 3">
                                11 ÷ 11 = 1 ✓<br>
                                <small style="color: #10b981;">能整除,所以143也能!</small>
                            </div>
                        </div>
                    </div>

<div class="step-explanation" v-if="simpleStep === 0">
                        使用割尾法判断143
                    </div>
                    <div class="step-explanation" v-if="simpleStep === 1">
                        把143割成两部分: 剩下14，末位3
                    </div>
                    <div class="step-explanation" v-if="simpleStep === 2">
                        用剩下的14减去末位的3，得到11
                    </div>
                    <div class="step-explanation" v-if="simpleStep === 3">
                        11能被11整除，所以原数143也能被11整除!
                    </div>

<div class="demo-section" :class="{active: demoTab === 'complex'}">
                    <div class="animation-area">
                        <svg class="svg-container" viewBox="0 0 400 330" preserveAspectRatio="xMidYMid meet">
                            <text id="complex-title" x="200" y="25" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
                                判断2816能否被11整除
                            </text>

<g id="complex-number-group" opacity="1">
                                <text x="200" y="90" text-anchor="middle" font-size="50" font-weight="bold" fill="#059669">2816</text>
                                <text x="200" y="120" text-anchor="middle" font-size="14" fill="#666">需要连续割尾</text>
                            </g>

<g id="complex-result1-group" opacity="0">
                                <text x="200" y="145" text-anchor="middle" font-size="14" fill="#666">
                                    281 - 6 = 275
                                </text>
                                <text x="200" y="165" text-anchor="middle" font-size="12" fill="#F59E0B">
                                    还是看不出来，继续割!
                                </text>
                            </g>

<div class="step-explanation" v-if="complexStep === 0">
                        大数需要多次割尾
                    </div>
                    <div class="step-explanation" v-if="complexStep === 1">
                        第一刀: 割去末位6，剩下281
                    </div>
                    <div class="step-explanation" v-if="complexStep === 2">
                        281-6=275，数字还是太大，看不出来
                    </div>
                    <div class="step-explanation" v-if="complexStep === 3">
                        第二刀: 对275再割尾，割去5，剩下27
                    </div>
                    <div class="step-explanation" v-if="complexStep === 4">
                        27-5=22，22是11的倍数，所以2816能被11整除!
                    </div>

<div class="explain-section" :class="{active: explainTab === 'principle'}">
                    <div class="method-card">
                        <div class="method-title">
                            <span>💡</span> 为什么割尾法有效?
                        </div>
                        <div class="method-content">
                            <p><strong>核心发现:</strong></p>
                            
                            <div class="example-box">
                                10 比 11 少 1<br>
                                所以: 10倍的某个数 = 11倍的这个数 - 1倍的这个数
                            </div>

<div class="method-card">
                        <div class="method-title">
                            <span>🔢</span> 其他判断方法
                        </div>
                        <div class="method-content">
                            <p><strong>方法二: 奇偶位差法</strong></p>
                            
                            <div class="example-box">
                                一个数能被11整除 ⟺<br>
                                奇数位数字之和 - 偶数位数字之和 = 11的倍数（或0）
                            </div>

<p style="margin-top: 15px;">
                                <strong>优点:</strong> 不需要多次计算<br>
                                <strong>缺点:</strong> 位数多时容易算错<br>
                                <strong>建议:</strong> 割尾法更直观，推荐使用！
                            </p>
                        </div>
                    </div>
                </div>

<div class="explain-section" :class="{active: explainTab === 'method'}">
                    <div class="method-card">
                        <div class="method-title">
                            <span>✂️</span> 割尾法操作步骤
                        </div>
                        <div class="method-content">
                            <p><strong>核心思想:</strong> 把大数字不断变小，直到一眼能看出是不是11的倍数</p>
                            
                            <ul class="steps-list">
                                <li data-step="1">割尾 - 把最后一位划开，单独取出来</li>
                                <li data-step="2">相减 - 用剩下的前半部分减去末位</li>
                                <li data-step="3">判断 - 如果差是11的倍数或0，则原数能整除</li>
                                <li data-step="4">重复 - 如果差还很大，就重复步骤1和2</li>
                            </ul>

<div class="method-card">
                        <div class="method-title">
                            <span>⚡</span> 快速判断技巧
                        </div>
                        <div class="method-content">
                            <p><strong>常见11的倍数:</strong></p>
                            
                            <div class="example-box">
                                0, 11, 22, 33, 44, 55, 66, 77, 88, 99<br>
                                110, 121, 132, 143, 154, 165, 176, 187, 198<br>
                                220, 242, 264, 286, 308, 330...
                            </div>

<p style="margin-top: 15px;"><strong>记忆技巧:</strong></p>
                            
                            <div class="example-box">
                                • 两位相同的数: 11, 22, 33... 都能被11整除<br>
                                • 121 = 11 × 11<br>
                                • 每次加11，就是下一个倍数
                            </div>
                        </div>
                    </div>
                </div>

<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">
                        <div class="question-item" :class="{expanded: expandedQ === 1}" @click="toggleQuestion(1)">
                            <div class="question-header">
                                <span>判断 6182 能否被11整除</span>
                                <span class="expand-icon">▼</span>
                            </div>
                            <div class="question-answer">
                                <strong>📝 割尾法过程:</strong><br><br>
                                
                                <strong>第一刀:</strong><br>
                                割去2，剩下618<br>
                                618 - 2 = 616<br>
                                (数字还比较大，看不出来，继续！)<br><br>
                                
                                <strong>第二刀:</strong><br>
                                割去6，剩下61<br>
                                61 - 6 = 55<br><br>
                                
                                <strong>判断:</strong><br>
                                55 = 11 × 5 ✓<br><br>
                                
                                <strong style="color: #10b981;">✅ 结论: 6182能被11整除</strong><br>
                                验算: 6182 ÷ 11 = 562
                            </div>
                        </div>

<div class="question-item" :class="{expanded: expandedQ === 2}" @click="toggleQuestion(2)">
                            <div class="question-header">
                                <span>四位数 3A72 能被11整除，求A</span>
                                <span class="expand-icon">▼</span>
                            </div>
                            <div class="question-answer">
                                <strong>📝 完整分析:</strong><br><br>
                                
                                <strong>运用割尾法:</strong><br>
                                末位是2，剩下3A7<br>
                                规则: 3A7 - 2 必须是11的倍数<br><br>
                                
                                <strong>计算:</strong><br>
                                3A7 - 2 = 3A5<br>
                                这个三位数的个位是5，且是11的倍数<br><br>
                                
                                <strong>寻找目标:</strong><br>
                                300-400之间11的倍数:<br>
                                330, 341, 352, 363, 374, 385, 396...<br>
                                只有385的个位是5 ✓<br><br>
                                
                                <strong>逆推:</strong><br>
                                3A7 - 2 = 385<br>
                                3A7 = 387<br>
                                A = 8<br><br>
                                
                                <strong style="color: #10b981;">✅ 答案: A = 8</strong>
                            </div>
                        </div>

<div class="question-item" :class="{expanded: expandedQ === 3}" @click="toggleQuestion(3)">
                            <div class="question-header">
                                <span>ABA型三位数能被11整除，有几个?</span>
                                <span class="expand-icon">▼</span>
                            </div>
                            <div class="question-answer">
                                <strong>📝 完整分析:</strong><br><br>
                                
                                <strong>割尾法:</strong><br>
                                AB - A 必须是11的倍数<br><br>
                                
                                <strong>简化:</strong><br>
                                AB = 10A + B<br>
                                10A + B - A = 9A + B<br>
                                所以 9A + B 是11的倍数<br><br>
                                
                                <strong>枚举:</strong><br>
                                A=1: 9+B=11 → B=2 (121) ✓<br>
                                A=2: 18+B=22 → B=4 (242) ✓<br>
                                A=3: 27+B=33 → B=6 (363) ✓<br>
                                A=4: 36+B=44 → B=8 (484) ✓<br>
                                A≥5: 需要的B超过9，无解<br><br>
                                
                                <strong style="color: #10b981;">✅ 答案: 4个 (121, 242, 363, 484)</strong>
                            </div>
                        </div>

<div class="question-item" :class="{expanded: expandedQ === 4}" @click="toggleQuestion(4)">
                            <div class="question-header">
                                <span>能被11整除的最大四位数（各位不同）</span>
                                <span class="expand-icon">▼</span>
                            </div>
                            <div class="question-answer">
                                <strong>📝 贪心策略:</strong><br><br>
                                
                                <strong>构造:</strong><br>
                                最大，首位选9，次位选8<br>
                                数字形如98AB<br><br>
                                
                                <strong>割尾法:</strong><br>
                                98A - B 是11的倍数<br><br>
                                
                                <strong>尝试A=7:</strong><br>
                                987 - B = 11的倍数<br>
                                987 ÷ 11 = 89 ... 8<br>
                                所以B必须是8<br>
                                但8已经用过了，不行！<br><br>
                                
                                <strong>尝试A=6:</strong><br>
                                986 - B = 11的倍数<br>
                                986 ÷ 11 = 89 ... 7<br>
                                所以B必须是7<br>
                                9867，无重复！✓<br><br>
                                
                                <strong style="color: #10b981;">✅ 答案: 9867</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <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>
            
            
            <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>
            
            
            <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">
                        剩下 - 末位
                    </div>
                    <div class="secret-explanation">
                        <strong>操作步骤:</strong><br><br>
                        
                        ① 割尾 - 把最后一位划开<br>
                        ② 相减 - 剩下的部分减去末位<br>
                        ③ 判断 - 结果能被11整除吗?<br>
                        ④ 重复 - 数字还大就继续割<br><br>
                        
                        <strong>例:</strong> 2816<br>
                        281-6=275 → 27-5=22 → 能整除!
                    </div>
                </div>
                
                <div class="secret-card" style="background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);">
                    <div class="secret-emoji">💡</div>
                    <div class="secret-title">核心原理</div>
                    <div class="secret-rule">
                        10 = 11 - 1
                    </div>
                    <div class="secret-explanation">
                        <strong>为什么有效?</strong><br><br>
                        
                        以143为例:<br>
                        143 = 14×10 + 3<br>
                        = 14×(11-1) + 3<br>
                        = 14×11 - 14 + 3<br>
                        = 14×11 - (14-3)<br><br>
                        
                        14×11能整除，<br>
                        所以只看14-3就行!
                    </div>
                </div>
                
                <div class="secret-card" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
                    <div class="secret-emoji">⚡</div>
                    <div class="secret-title">快速识别</div>
                    <div class="secret-rule">
                        常见倍数
                    </div>
                    <div class="secret-explanation">
                        <strong>11的倍数:</strong><br><br>
                        
                        两位相同: 11, 22, 33, 44...<br><br>
                        
                        三位数: 121, 132, 143, 154...<br><br>
                        
                        <strong>技巧:</strong><br>
                        两位相同的数一定能被11整除!<br>
                        如: 55, 66, 77, 88, 99
                    </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>

createApp({
            data() {
                return {
                    currentPage: 1,
                    demoTab: 'principle',
                    explainTab: 'principle',
                    expandedQ: null,
                    principleStep: 0,
                    simpleStep: 0,
                    complexStep: 0,
                    
                    // 课内练习
                    currentQuestion: 0,
                    score: 0,
                    answered: false,
                    isCorrect: false,
                    selectedOption: null,
                    practiceCompleted: false,
                    
                    practiceQuestions: [
                        {
                            text: '判断 165 能否被11整除',
                            options: [
                                { text: '能', correct: true },
                                { text: '不能', correct: false }
                            ],
                            explanation: '割尾: 16-5=11，11能被11整除，所以165也能。'
                        },
                        {
                            text: '判断 627 能否被11整除',
                            options: [
                                { text: '能', correct: true },
                                { text: '不能', correct: false }
                            ],
                            explanation: '割尾: 62-7=55，55=11×5，能整除。'
                        },
                        {
                            text: '判断 846 能否被11整除',
                            options: [
                                { text: '能', correct: false },
                                { text: '不能', correct: true }
                            ],
                            explanation: '割尾: 84-6=78，78不是11的倍数，不能整除。'
                        },
                        {
                            text: '判断 1364 能否被11整除',
                            options: [
                                { text: '能', correct: true },
                                { text: '不能', correct: false }
                            ],
                            explanation: '第一刀: 136-4=132；第二刀: 13-2=11。能整除。'
                        },
                        {
                            text: '判断 8192 能否被11整除',
                            options: [
                                { text: '能', correct: false },
                                { text: '不能', correct: true }
                            ],
                            explanation: '第一刀: 819-2=817；第二刀: 81-7=74。74不是11的倍数。'
                        }
                    ],
                    
                    // 奥数挑战
                    currentOlympiad: 0,
                    olympiadScore: 0,
                    olympiadAnswered: false,
                    isOlympiadCorrect: false,
                    selectedOlympiadOption: null,
                    wrongAttempts: 0,
                    olympiadCompleted: false,
                    
                    olympiadQuestions: [
                        {
                            difficulty: 'bronze',
                            difficultyText: '🥉 青铜',
                            text: '四位数 5A23 能被11整除，求A',
                            options: [
                                { text: 'A = 3', correct: false },
                                { text: 'A = 4', correct: true },
                                { text: 'A = 5', correct: false }
                            ],
                            hint1: '5A2 - 3 必须是11的倍数',
                            hint2: '找一个500多，个位是9的11的倍数',
                            explanation: '5A2-3个位是9。500-600之间个位是9的11的倍数只有539。所以5A2=542，A=4。'
                        },
                        {
                            difficulty: 'bronze',
                            difficultyText: '🥉 青铜',
                            text: '五位数 10X92 能被11整除，求X',
                            options: [
                                { text: 'X = 5', correct: false },
                                { text: 'X = 6', correct: true },
                                { text: 'X = 7', correct: false }
                            ],
                            hint1: '割尾2: 10X9-2=10X7',
                            hint2: '再割尾7: 10X-7必须是11的倍数',
                            explanation: '10X-7是11的倍数。100-7=93(×), 106-7=99(√)。所以X=6。'
                        },
                        {
                            difficulty: 'silver',
                            difficultyText: '🥈 白银',
                            text: 'ABA型三位数能被11整除，有几个?',
                            options: [
                                { text: '3个', correct: false },
                                { text: '4个', correct: true },
                                { text: '5个', correct: false }
                            ],
                            hint1: 'AB-A=9A+B必须是11的倍数',
                            hint2: 'A=1,2,3,4时有解',
                            explanation: 'A=1: 121; A=2: 242; A=3: 363; A=4: 484。共4个。'
                        },
                        {
                            difficulty: 'silver',
                            difficultyText: '🥈 白银',
                            text: '在2025后面补一个数字X，使20 25X能被11整除',
                            options: [
                                { text: 'X = 0', correct: false },
                                { text: 'X = 1', correct: true },
                                { text: 'X = 2', correct: false }
                            ],
                            hint1: '2025-X必须是11的倍数',
                            hint2: '2025÷11=184...1',
                            explanation: '2025余1，所以2025-X余数是0时，X=1。验证: 2025-1=2024, 202-4=198, 19-8=11√'
                        },
                        {
                            difficulty: 'silver',
                            difficultyText: '🥈 白银',
                            text: '777...77（共2023个7）能否被11整除?',
                            options: [
                                { text: '能', correct: false },
                                { text: '不能', correct: true }
                            ],
                            hint1: '试试小规模: 77, 777, 7777',
                            hint2: '偶数个7能整除，奇数个7不能',
                            explanation: '77(能), 777(不能), 7777(能)。规律: 偶数个能整除。2023是奇数，所以不能。'
                        },
                        {
                            difficulty: 'gold',
                            difficultyText: '🥇 黄金',
                            text: '能被11整除的最大四位数（各位不同）',
                            options: [
                                { text: '9856', correct: false },
                                { text: '9867', correct: true },
                                { text: '9878', correct: false }
                            ],
                            hint1: '首位9，次位8，试98AB',
                            hint2: '986-B必须是11的倍数',
                            explanation: '98AB。A=6: 986-B, 986÷11余7，B=7。9867无重复√'
                        },
                        {
                            difficulty: 'gold',
                            difficultyText: '🥇 黄金',
                            text: '六位数 A2024B 能被11整除且A+B=10，求这个数',
                            options: [
                                { text: '420245', correct: false },
                                { text: '520245', correct: true },
                                { text: '620244', correct: false }
                            ],
                            hint1: '2024能被11整除',
                            hint2: 'A0000余A，A-B=11倍数或0',
                            explanation: '2024÷11=184整除。A万余A。A-B=0时A=B=5。答案520245。'
                        },
                        {
                            difficulty: 'gold',
                            difficultyText: '🥇 黄金',
                            text: '三位数减去它的各位数字之和，差是11的倍数，这样的三位数有多少个?',
                            options: [
                                { text: '80个', correct: false },
                                { text: '90个', correct: true },
                                { text: '100个', correct: false }
                            ],
                            hint1: '设数ABC，则100A+10B+C-(A+B+C)',
                            hint2: '化简得99A+9B',
                            explanation: '99A+9B。99A能整除，所以9B也要能整除。B必须是0。共9×10=90个。'
                        }
                    ]
                };
            },
            
            mounted() {
                console.log('11的整除特征完整版已加载!');
            },
            
            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 === 'principle') {
                                this.speakPrincipleStep();
                            } else if (this.demoTab === 'simple') {
                                this.speakSimpleStep();
                            } else {
                                this.speakComplexStep();
                            }
                        }, 300);
                    }
                },

switchDemoTab(tab) {
                    this.demoTab = tab;
                    if (tab === 'principle') {
                        this.principleStep = 0;
                        this.$nextTick(() => {
                            this.initPrincipleAnimation();
                            this.speakPrincipleStep();
                        });
                    } else if (tab === 'simple') {
                        this.simpleStep = 0;
                        this.$nextTick(() => {
                            this.initSimpleAnimation();
                            this.speakSimpleStep();
                        });
                    } else {
                        this.complexStep = 0;
                        this.$nextTick(() => {
                            this.initComplexAnimation();
                            this.speakComplexStep();
                        });
                    }
                },

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);
                        }

// ========== 原理分析动画 ==========
                initPrincipleAnimation() {
                    if (typeof gsap === 'undefined') return;
                    
                    gsap.set("#principle-step0", {opacity: 1});
                    gsap.set("#principle-step1", {opacity: 0});
                    gsap.set("#principle-step2", {opacity: 0});
                    gsap.set("#principle-step3", {opacity: 0});
                    gsap.set("#principle-step4", {opacity: 0});
                    gsap.set("#principle-step5", {opacity: 0});
                    gsap.set("#principle-step6", {opacity: 0});
                },

nextPrincipleStep() {
                    if (this.principleStep < 6) {
                        this.principleStep++;
                        this.$nextTick(() => {
                            this.runPrincipleAnimation();
                            this.speakPrincipleStep();
                        });
                    }
                },

prevPrincipleStep() {
                    if (this.principleStep > 0) {
                        this.principleStep--;
                        this.$nextTick(() => {
                            this.runPrincipleAnimation();
                            this.speakPrincipleStep();
                        });
                    }
                },

speakPrincipleStep() {
                    const texts = [
                        '让我们从143这个数开始，彻底搞懂割尾法为什么有效',
                        '第一步，按位值拆分。143等于14乘以10加3。其中14代表十位和百位的总和，3是个位数字',
                        '第二步，核心魔法来了！因为10比11少1，所以我们把10替换成11减1。展开后：14乘以10等于14乘以11减14',
                        '第三步，代回原式。143等于14乘以11减14加3。现在我们就看到了11的倍数！',
                        '第四步，整理公式。把后面两项合并起来：143等于14乘以11减去括号14减3',
                        '第五步，关键发现！14乘以11肯定能被11整除对不对？所以原数能不能被11整除，就只看括号里的14减3就行了！14减3等于11，能整除！',
                        '总结：对于任意数，我们都可以用剩下的部分减去末位来判断。这就是割尾法的数学原理！'
                    ];
                    this.speak(texts[this.principleStep]);
                },

runPrincipleAnimation() {
                    if (typeof gsap === 'undefined') return;
                    
                    const tl = gsap.timeline();

// 隐藏所有步骤
                    tl.to("#principle-step0, #principle-step1, #principle-step2, #principle-step3, #principle-step4, #principle-step5, #principle-step6", {
                        opacity: 0,
                        duration: 0.2
                    });

// 显示当前步骤
                    if (this.principleStep === 0) {
                        tl.to("#principle-step0", {opacity: 1, duration: 0.4});
                    } else if (this.principleStep === 1) {
                        tl.to("#principle-step1", {opacity: 1, duration: 0.5})
                          .from("#principle-step1 rect", {
                              scale: 0,
                              stagger: 0.2,
                              ease: "back.out(1.7)",
                              duration: 0.7
                          }, "<0.2");
                    } else if (this.principleStep === 2) {
                        tl.to("#principle-step2", {opacity: 1, duration: 0.5})
                          .from("#principle-step2 rect", {
                              scale: 0,
                              y: 30,
                              stagger: 0.2,
                              ease: "back.out(1.5)",
                              duration: 0.7
                          }, "<0.2");
                    } else if (this.principleStep === 3) {
                        tl.to("#principle-step3", {opacity: 1, duration: 0.5})
                          .from("#principle-step3 rect", {
                              scale: 0,
                              ease: "back.out(1.7)",
                              duration: 0.7
                          }, "<0.2");
                    } else if (this.principleStep === 4) {
                        tl.to("#principle-step4", {opacity: 1, duration: 0.5})
                          .from("#principle-step4 rect", {
                              scale: 0,
                              y: 20,
                              stagger: 0.15,
                              ease: "back.out(1.5)",
                              duration: 0.7
                          }, "<0.2");
                    } else if (this.principleStep === 5) {
                        tl.to("#principle-step5", {opacity: 1, duration: 0.5})
                          .from("#principle-step5 rect", {
                              scale: 0,
                              x: function(index) { return index === 0 ? -30 : 30; },
                              stagger: 0.2,
                              ease: "back.out(1.7)",
                              duration: 0.8
                          }, "<0.2");
                    } else if (this.principleStep === 6) {
                        tl.to("#principle-step6", {opacity: 1, duration: 0.5})
                          .from("#principle-step6 rect", {
                              scale: 0,
                              ease: "elastic.out(1, 0.5)",
                              duration: 1
                          }, "<0.2")
                          .from("#principle-step6 g", {
                              scale: 0,
                              rotation: 360,
                              ease: "back.out(2)",
                              duration: 0.8
                          }, "-=0.5");
                        
                        if (typeof confetti !== 'undefined') {
                            setTimeout(() => {
                                confetti({
                                    particleCount: 150,
                                    spread: 100,
                                    origin: { y: 0.6 },
                                    colors: ['#059669', '#047857', '#065f46', '#10b981']
                                });
                            }, 600);
                        }
                    }
                },

// ========== 简单示例动画 ==========
                initSimpleAnimation() {
                    if (typeof gsap === 'undefined') return;
                    
                    gsap.set("#simple-number-group", {opacity: 1});
                    gsap.set("#simple-cut-group", {opacity: 0});
                    gsap.set("#simple-calc-group", {opacity: 0});
                    gsap.set("#simple-result-group", {opacity: 0});
                },

nextSimpleStep() {
                    if (this.simpleStep < 3) {
                        this.simpleStep++;
                        this.$nextTick(() => {
                            this.runSimpleAnimation();
                            this.speakSimpleStep();
                        });
                    }
                },

prevSimpleStep() {
                    if (this.simpleStep > 0) {
                        this.simpleStep--;
                        this.$nextTick(() => {
                            this.runSimpleAnimation();
                            this.speakSimpleStep();
                        });
                    }
                },

speakSimpleStep() {
                    const texts = [
                        '让我们用割尾法判断143能否被11整除',
                        '第一步，割尾。把143分成两部分：剩下14，末位3',
                        '第二步，做减法。用剩下的14减去末位的3，得到11',
                        '11能被11整除，所以原数143也能被11整除！'
                    ];
                    this.speak(texts[this.simpleStep]);
                },

runSimpleAnimation() {
                    if (typeof gsap === 'undefined') return;
                    
                    const tl = gsap.timeline();

if (this.simpleStep === 0) {
                        tl.to("#simple-number-group", {opacity: 1, duration: 0.3})
                          .to("#simple-cut-group", {opacity: 0, duration: 0.2}, "<")
                          .to("#simple-calc-group", {opacity: 0, duration: 0.2}, "<")
                          .to("#simple-result-group", {opacity: 0, duration: 0.2}, "<");
                    }

if (this.simpleStep === 1) {
                        tl.to("#simple-number-group", {opacity: 0, y: -20, duration: 0.4})
                          .to("#simple-cut-group", {opacity: 1, duration: 0.5})
                          .from("#simple-cut-group rect", {
                              scale: 0,
                              stagger: 0.2,
                              ease: "back.out(1.5)",
                              duration: 0.7
                          }, "<0.2");
                    }

if (this.simpleStep === 2) {
                        tl.to("#simple-calc-group", {opacity: 1, duration: 0.5})
                          .from("#simple-calc-group rect", {
                              scale: 0,
                              ease: "back.out(1.7)",
                              duration: 0.6
                          }, "<0.2");
                    }

if (this.simpleStep === 3) {
                        tl.to("#simple-result-group", {opacity: 1, scale: 1, ease: "back.out(2)", duration: 0.5});
                        
                        if (typeof confetti !== 'undefined') {
                            setTimeout(() => {
                                confetti({
                                    particleCount: 100,
                                    spread: 70,
                                    origin: { y: 0.6 },
                                    colors: ['#059669', '#047857', '#065f46']
                                });
                            }, 500);
                        }
                    }
                },

// ========== 连续割尾动画 ==========
                initComplexAnimation() {
                    if (typeof gsap === 'undefined') return;
                    
                    gsap.set("#complex-number-group", {opacity: 1});
                    gsap.set("#complex-cut1-group", {opacity: 0});
                    gsap.set("#complex-result1-group", {opacity: 0});
                    gsap.set("#complex-cut2-group", {opacity: 0});
                    gsap.set("#complex-result2-group", {opacity: 0});
                },

nextComplexStep() {
                    if (this.complexStep < 4) {
                        this.complexStep++;
                        this.$nextTick(() => {
                            this.runComplexAnimation();
                            this.speakComplexStep();
                        });
                    }
                },

prevComplexStep() {
                    if (this.complexStep > 0) {
                        this.complexStep--;
                        this.$nextTick(() => {
                            this.runComplexAnimation();
                            this.speakComplexStep();
                        });
                    }
                },

speakComplexStep() {
                    const texts = [
                        '让我们判断2816能否被11整除，这次需要连续割尾',
                        '第一刀：割去末位6，剩下281。用281减去6，得到275',
                        '275还是很大，看不出来是不是11的倍数，我们继续割',
                        '第二刀：对275再割尾，割去5，剩下27。用27减去5，得到22',
                        '22等于11乘以2，是11的倍数！所以2816能被11整除'
                    ];
                    this.speak(texts[this.complexStep]);
                },

runComplexAnimation() {
                    if (typeof gsap === 'undefined') return;
                    
                    const tl = gsap.timeline();

if (this.complexStep === 0) {
                        tl.to("#complex-number-group", {opacity: 1, duration: 0.3})
                          .to("#complex-cut1-group", {opacity: 0, duration: 0.2}, "<")
                          .to("#complex-result1-group", {opacity: 0, duration: 0.2}, "<")
                          .to("#complex-cut2-group", {opacity: 0, duration: 0.2}, "<")
                          .to("#complex-result2-group", {opacity: 0, duration: 0.2}, "<");
                    }

if (this.complexStep === 1) {
                        tl.to("#complex-number-group", {opacity: 0, y: -20, duration: 0.4})
                          .to("#complex-cut1-group", {opacity: 1, duration: 0.5})
                          .from("#complex-cut1-group rect", {
                              scale: 0,
                              x: -20,
                              stagger: 0.2,
                              ease: "back.out(1.5)",
                              duration: 0.6
                          }, "<0.2");
                    }

if (this.complexStep === 2) {
                        tl.to("#complex-result1-group", {opacity: 1, duration: 0.5});
                    }

if (this.complexStep === 3) {
                        tl.to("#complex-cut2-group", {opacity: 1, duration: 0.5})
                          .from("#complex-cut2-group rect", {
                              scale: 0,
                              x: -20,
                              stagger: 0.2,
                              ease: "back.out(1.5)",
                              duration: 0.6
                          }, "<0.2");
                    }

if (this.complexStep === 4) {
                        tl.to("#complex-result2-group", {opacity: 1, duration: 0.5})
                          .from("#complex-result2-group rect", {
                              scale: 0,
                              ease: "back.out(1.7)",
                              duration: 0.6
                          }, "<0.2");
                        
                        if (typeof confetti !== 'undefined') {
                            setTimeout(() => {
                                confetti({
                                    particleCount: 100,
                                    spread: 70,
                                    origin: { y: 0.6 },
                                    colors: ['#059669', '#047857', '#065f46']
                                });
                            }, 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 },
                                colors: ['#059669', '#047857', '#065f46']
                            });
                        }
                    } 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 },
                                colors: ['#059669', '#047857', '#065f46']
                            });
                        }
                    } 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>

完整代码

<!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>11的整除特征 - 完整版</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;
        }
        
        .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: #059669;
        }
        
        .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: #ECFDF5;
            padding: 20px;
            border-radius: 12px;
            margin: 20px 0;
            border-left: 4px solid #059669;
        }
        
        .highlight {
            color: #059669;
            font-weight: bold;
        }
        
        .speak-btn {
            background: linear-gradient(135deg, #059669 0%, #047857 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(5, 150, 105, 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: #059669;
            border-bottom-color: #059669;
        }

        .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, #ECFDF5 0%, #D1FAE5 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 #059669;
            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: 13px;
            color: #666;
            margin-top: 8px;
            line-height: 1.5;
            text-align: center;
            padding: 8px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        
        .control-bar {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }
        
        .step-btn {
            background: #059669;
            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(5, 150, 105, 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 #059669;
        }

        .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: #059669;
            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: #059669;
            transform: translateX(5px);
        }

        .question-item.expanded {
            border-color: #059669;
            background: #ECFDF5;
        }

        .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: #059669;
            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: #059669;
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 14px;
        }
        
        .score-display {
            background: #fcd34d;
            padding: 5px 15px;
            border-radius: 20px;
            font-weight: bold;
            color: #78350f;
        }
        
        .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: #059669;
            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: #ECFDF5;
            border-left: 4px solid #059669;
            padding: 15px;
            border-radius: 8px;
            margin: 15px 0;
            font-size: 14px;
            line-height: 1.6;
        }
        
        .next-btn {
            background: linear-gradient(135deg, #059669 0%, #047857 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(5, 150, 105, 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, #059669 0%, #047857 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: #059669;
            margin: 20px 0;
        }
        
        .final-score {
            font-size: 48px;
            font-weight: bold;
            color: #047857;
            margin: 20px 0;
        }
        
        .restart-btn {
            background: linear-gradient(135deg, #059669 0%, #047857 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(5, 150, 105, 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">11的整除特征</div>
                <div class="intro-story">
                    <strong>🔍 割尾法的秘密</strong><br><br>
                    
                    判断一个数能否被11整除，有个超酷的方法：<span class="highlight">割尾法</span>！<br><br>
                    
                    <strong>核心原理</strong>：<br>
                    为什么"割去末位，减去剩下的"能判断11？<br><br>
                    
                    <strong>关键发现</strong>：<br>
                    • 10 比 11 少 1<br>
                    • 10倍的某个数 = 11倍的这个数 - 1倍的这个数<br><br>
                    
                    <strong>以143为例</strong>：<br>
                    143 = 14 × 10 + 3<br>
                    = 14 × (11-1) + 3<br>
                    = 14 × 11 - 14 + 3<br>
                    = 14 × 11 - (14-3)<br><br>
                    
                    前面的<strong>14×11</strong>肯定能被11整除，<br>
                    只要<span class="highlight">(14-3)</span>能被11整除就行！<br><br>
                    
                    <strong>14</strong>是割去末位剩下的数<br>
                    <strong>3</strong>是末位数字<br><br>
                    
                    这就是<span class="highlight">"剩下 - 末位"</span>的由来！
                </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 === 'principle'}" @click="switchDemoTab('principle')">
                        原理分析
                    </div>
                    <div class="tab-item" :class="{active: demoTab === 'simple'}" @click="switchDemoTab('simple')">
                        简单示例
                    </div>
                    <div class="tab-item" :class="{active: demoTab === 'complex'}" @click="switchDemoTab('complex')">
                        连续割尾
                    </div>
                </div>

                <!-- 原理分析动画 -->
                <div class="demo-section" :class="{active: demoTab === 'principle'}">
                    <div class="animation-area">
                        <svg class="svg-container" viewBox="0 0 400 330" preserveAspectRatio="xMidYMid meet">
                            <text id="principle-title" x="200" y="25" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
                                为什么割尾法有效？
                            </text>

                            <!-- 步骤0: 显示143 -->
                            <g id="principle-step0" opacity="1">
                                <text x="200" y="90" text-anchor="middle" font-size="50" font-weight="bold" fill="#059669">143</text>
                                <text x="200" y="120" text-anchor="middle" font-size="14" fill="#666">让我们深入分析这个数</text>
                            </g>

                            <!-- 步骤1: 位值拆分 -->
                            <g id="principle-step1" opacity="0">
                                <text x="200" y="55" text-anchor="middle" font-size="14" fill="#059669" font-weight="bold">
                                    步骤1: 按位值拆分
                                </text>
                                
                                <text x="200" y="90" text-anchor="middle" font-size="18" fill="#333">
                                    143 = 
                                </text>
                                
                                <rect x="60" y="105" width="90" height="60" rx="10" fill="#D1FAE5" stroke="#059669" stroke-width="2"/>
                                <text x="105" y="130" text-anchor="middle" font-size="16" font-weight="bold" fill="#047857">14 × 10</text>
                                <text x="105" y="150" text-anchor="middle" font-size="11" fill="#047857">十位和百位</text>

                                <text x="170" y="135" text-anchor="middle" font-size="20" fill="#333">+</text>

                                <rect x="190" y="105" width="60" height="60" rx="10" fill="#FEE2E2" stroke="#EF4444" stroke-width="2"/>
                                <text x="220" y="135" text-anchor="middle" font-size="20" font-weight="bold" fill="#991b1b">3</text>
                                <text x="220" y="150" text-anchor="middle" font-size="11" fill="#991b1b">个位</text>
                            </g>

                            <!-- 步骤2: 核心变换 10 = 11-1 -->
                            <g id="principle-step2" opacity="0">
                                <text x="200" y="55" text-anchor="middle" font-size="14" fill="#059669" font-weight="bold">
                                    步骤2: 核心魔法 10 = 11 - 1
                                </text>
                                
                                <rect x="50" y="75" width="300" height="60" rx="12" fill="#FEF3C7" stroke="#F59E0B" stroke-width="2"/>
                                <text x="200" y="95" text-anchor="middle" font-size="14" fill="#92400e">
                                    把 10 替换成 (11 - 1)
                                </text>
                                <text x="200" y="115" text-anchor="middle" font-size="16" font-weight="bold" fill="#92400e">
                                    14 × 10 = 14 × (11 - 1)
                                </text>

                                <rect x="50" y="150" width="300" height="55" rx="12" fill="#DBEAFE" stroke="#3B82F6" stroke-width="2"/>
                                <text x="200" y="170" text-anchor="middle" font-size="14" fill="#1e40af">
                                    展开括号
                                </text>
                                <text x="200" y="190" text-anchor="middle" font-size="16" font-weight="bold" fill="#1e40af">
                                    = 14 × 11 - 14 × 1
                                </text>
                            </g>

                            <!-- 步骤3: 代入原式 -->
                            <g id="principle-step3" opacity="0">
                                <text x="200" y="55" text-anchor="middle" font-size="14" fill="#059669" font-weight="bold">
                                    步骤3: 代回原式
                                </text>
                                
                                <rect x="50" y="75" width="300" height="70" rx="12" fill="#E0E7FF" stroke="#6366F1" stroke-width="2"/>
                                <text x="200" y="95" text-anchor="middle" font-size="14" fill="#4338ca">
                                    原式: 143 = 14×10 + 3
                                </text>
                                <text x="200" y="115" text-anchor="middle" font-size="14" fill="#4338ca">
                                    替换: 143 = (14×11 - 14) + 3
                                </text>
                                <text x="200" y="133" text-anchor="middle" font-size="14" font-weight="bold" fill="#4338ca">
                                    = 14×11 - 14 + 3
                                </text>
                            </g>

                            <!-- 步骤4: 重新整理 -->
                            <g id="principle-step4" opacity="0">
                                <text x="200" y="55" text-anchor="middle" font-size="14" fill="#059669" font-weight="bold">
                                    步骤4: 整理公式
                                </text>
                                
                                <rect x="50" y="75" width="300" height="55" rx="12" fill="#FCE7F3" stroke="#EC4899" stroke-width="2"/>
                                <text x="200" y="95" text-anchor="middle" font-size="14" fill="#9f1239">
                                    提取负号
                                </text>
                                <text x="200" y="115" text-anchor="middle" font-size="16" font-weight="bold" fill="#9f1239">
                                    143 = 14×11 - (14 - 3)
                                </text>

                                <text x="200" y="155" text-anchor="middle" font-size="13" fill="#666">
                                    ↓
                                </text>

                                <rect x="50" y="165" width="300" height="50" rx="12" fill="#D1FAE5" stroke="#10b981" stroke-width="2"/>
                                <text x="200" y="188" text-anchor="middle" font-size="15" font-weight="bold" fill="#065f46">
                                    14×11 - (14 - 3)
                                </text>
                            </g>

                            <!-- 步骤5: 关键发现 -->
                            <g id="principle-step5" opacity="0">
                                <text x="200" y="50" text-anchor="middle" font-size="14" fill="#059669" font-weight="bold">
                                    步骤5: 关键发现！
                                </text>
                                
                                <rect x="40" y="70" width="150" height="80" rx="12" fill="#D1FAE5" stroke="#10b981" stroke-width="3"/>
                                <text x="115" y="90" text-anchor="middle" font-size="12" font-weight="bold" fill="#065f46">
                                    14 × 11
                                </text>
                                <text x="115" y="108" text-anchor="middle" font-size="11" fill="#047857">
                                    这部分一定
                                </text>
                                <text x="115" y="124" text-anchor="middle" font-size="11" fill="#047857">
                                    能被11整除
                                </text>
                                <text x="115" y="140" text-anchor="middle" font-size="16" fill="#10b981">
                                    ✓
                                </text>

                                <text x="210" y="115" text-anchor="middle" font-size="24" fill="#333">-</text>

                                <rect x="230" y="70" width="130" height="80" rx="12" fill="#FEF3C7" stroke="#F59E0B" stroke-width="3"/>
                                <text x="295" y="90" text-anchor="middle" font-size="12" font-weight="bold" fill="#92400e">
                                    (14 - 3)
                                </text>
                                <text x="295" y="108" text-anchor="middle" font-size="11" fill="#92400e">
                                    只要这部分
                                </text>
                                <text x="295" y="124" text-anchor="middle" font-size="11" fill="#92400e">
                                    能被11整除
                                </text>
                                <text x="295" y="140" text-anchor="middle" font-size="16" fill="#F59E0B">
                                    ？
                                </text>

                                <rect x="60" y="170" width="280" height="65" rx="12" fill="#DBEAFE" stroke="#3B82F6" stroke-width="2"/>
                                <text x="200" y="190" text-anchor="middle" font-size="13" font-weight="bold" fill="#1e40af">
                                    结论
                                </text>
                                <text x="200" y="210" text-anchor="middle" font-size="14" fill="#1e40af">
                                    14 - 3 = 11 ✓
                                </text>
                                <text x="200" y="226" text-anchor="middle" font-size="12" fill="#1e40af">
                                    所以 143 能被 11 整除！
                                </text>
                            </g>

                            <!-- 步骤6: 总结公式 -->
                            <g id="principle-step6" opacity="0">
                                <text x="200" y="50" text-anchor="middle" font-size="16" fill="#059669" font-weight="bold">
                                    割尾法公式
                                </text>
                                
                                <rect x="40" y="70" width="320" height="100" rx="15" fill="white" stroke="#059669" stroke-width="4"/>
                                
                                <text x="200" y="95" text-anchor="middle" font-size="14" fill="#666">
                                    任意数
                                </text>
                                <text x="200" y="115" text-anchor="middle" font-size="20" font-weight="bold" fill="#059669">
                                    ABC...XY
                                </text>
                                
                                <text x="200" y="140" text-anchor="middle" font-size="18" fill="#333">
                                    ↓
                                </text>
                                
                                <text x="200" y="160" text-anchor="middle" font-size="16" font-weight="bold" fill="#047857">
                                    ABC...X - Y
                                </text>

                                <rect x="50" y="190" width="300" height="55" rx="12" fill="#FEF3C7" stroke="#F59E0B" stroke-width="2"/>
                                <text x="200" y="212" text-anchor="middle" font-size="13" fill="#92400e">
                                    如果这个差能被11整除
                                </text>
                                <text x="200" y="230" text-anchor="middle" font-size="13" font-weight="bold" fill="#92400e">
                                    原数就能被11整除！
                                </text>

                                <g transform="translate(320, 260)">
                                    <circle r="25" fill="#D1FAE5" stroke="#10b981" stroke-width="3"/>
                                    <text y="8" text-anchor="middle" font-size="28" fill="#10b981">✓</text>
                                </g>
                            </g>
                        </svg>
                    </div>

                    <div class="math-area">
                        <div class="math-formula">
                            <div v-if="principleStep === 0">143 = ?</div>
                            <div v-if="principleStep === 1">
                                143 = 14 × 10 + 3<br>
                                <small style="color: #666;">按位值拆分</small>
                            </div>
                            <div v-if="principleStep === 2">
                                14 × 10 = 14 × (11-1)<br>
                                = 14 × 11 - 14<br>
                                <small style="color: #F59E0B;">核心变换!</small>
                            </div>
                            <div v-if="principleStep === 3">
                                143 = 14×11 - 14 + 3<br>
                                <small style="color: #6366F1;">代入原式</small>
                            </div>
                            <div v-if="principleStep === 4">
                                143 = 14×11 - (14-3)<br>
                                <small style="color: #EC4899;">整理公式</small>
                            </div>
                            <div v-if="principleStep === 5">
                                14×11能整除 ✓<br>
                                只看 14-3=11<br>
                                <small style="color: #10b981;">关键发现!</small>
                            </div>
                            <div v-if="principleStep === 6">
                                <strong>割尾法公式</strong><br>
                                剩下 - 末位<br>
                                <small style="color: #059669;">通用规则</small>
                            </div>
                        </div>
                    </div>

                    <div class="step-explanation" v-if="principleStep === 0">
                        让我们从数字143开始，彻底搞懂割尾法的原理
                    </div>
                    <div class="step-explanation" v-if="principleStep === 1">
                        第一步：按位值拆分。143 = 14×10 + 3，其中14代表十位和百位，3是个位
                    </div>
                    <div class="step-explanation" v-if="principleStep === 2">
                        第二步：核心魔法！把10替换成(11-1)，因为10比11少1。展开后：14×10 = 14×11 - 14
                    </div>
                    <div class="step-explanation" v-if="principleStep === 3">
                        第三步：代回原式。143 = 14×11 - 14 + 3。现在我们看到了11的倍数！
                    </div>
                    <div class="step-explanation" v-if="principleStep === 4">
                        第四步：整理公式。把后面两项合并：143 = 14×11 - (14-3)
                    </div>
                    <div class="step-explanation" v-if="principleStep === 5">
                        第五步：关键发现！14×11肯定能被11整除，所以只要(14-3)能被11整除，原数就能！14-3=11，能整除！
                    </div>
                    <div class="step-explanation" v-if="principleStep === 6">
                        总结：对于任意数，都可以用"剩下的部分 - 末位"来判断！这就是割尾法的数学原理！
                    </div>

                    <div class="control-bar">
                        <button class="step-btn" @click="prevPrincipleStep" :disabled="principleStep === 0">
                            ◀ 上一步
                        </button>
                        <button class="step-btn" @click="nextPrincipleStep" :disabled="principleStep === 6">
                            下一步 ▶
                        </button>
                    </div>
                </div>

                <!-- 简单示例动画 -->
                <div class="demo-section" :class="{active: demoTab === 'simple'}">
                    <div class="animation-area">
                        <svg class="svg-container" viewBox="0 0 400 330" preserveAspectRatio="xMidYMid meet">
                            <text id="simple-title" x="200" y="25" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
                                判断143能否被11整除
                            </text>

                            <g id="simple-number-group" opacity="1">
                                <text x="200" y="90" text-anchor="middle" font-size="50" font-weight="bold" fill="#059669">143</text>
                                <text x="200" y="120" text-anchor="middle" font-size="14" fill="#666">用割尾法判断</text>
                            </g>

                            <g id="simple-cut-group" opacity="0">
                                <text x="200" y="55" text-anchor="middle" font-size="13" fill="#666" font-weight="500">
                                    第一步: 割去末位
                                </text>
                                
                                <rect x="80" y="75" width="140" height="70" rx="10" fill="#D1FAE5" stroke="#059669" stroke-width="2"/>
                                <text x="150" y="105" text-anchor="middle" font-size="36" font-weight="bold" fill="#047857">14</text>
                                <text x="150" y="130" text-anchor="middle" font-size="12" fill="#047857">剩下部分</text>

                                <line x1="225" y1="85" x2="225" y2="135" stroke="#EF4444" stroke-width="3" stroke-dasharray="5,5"/>
                                <text x="235" y="90" text-anchor="start" font-size="24" fill="#EF4444">✂️</text>

                                <rect x="240" y="75" width="80" height="70" rx="10" fill="#FEE2E2" stroke="#EF4444" stroke-width="2"/>
                                <text x="280" y="110" text-anchor="middle" font-size="36" font-weight="bold" fill="#991b1b">3</text>
                                <text x="280" y="130" text-anchor="middle" font-size="12" fill="#991b1b">末位</text>
                            </g>

                            <g id="simple-calc-group" opacity="0">
                                <rect x="70" y="165" width="260" height="55" rx="12" fill="#FEF3C7" stroke="#F59E0B" stroke-width="2"/>
                                <text x="200" y="185" text-anchor="middle" font-size="12" font-weight="bold" fill="#92400e">
                                    第二步: 做减法
                                </text>
                                <text x="200" y="208" text-anchor="middle" font-size="18" fill="#92400e">
                                    14 - 3 = 11
                                </text>
                            </g>

                            <g id="simple-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">11能被11整除,所以143也能!</text>
                            </g>
                        </svg>
                    </div>

                    <div class="math-area">
                        <div class="math-formula">
                            <div v-if="simpleStep === 0">143 ÷ 11 = ?</div>
                            <div v-if="simpleStep === 1">
                                割尾: 14 | 3<br>
                                <small style="color: #666;">剩下14，末位3</small>
                            </div>
                            <div v-if="simpleStep === 2">
                                14 - 3 = 11<br>
                                <small style="color: #F59E0B;">剩下减末位</small>
                            </div>
                            <div v-if="simpleStep === 3">
                                11 ÷ 11 = 1 ✓<br>
                                <small style="color: #10b981;">能整除,所以143也能!</small>
                            </div>
                        </div>
                    </div>

                    <div class="step-explanation" v-if="simpleStep === 0">
                        使用割尾法判断143
                    </div>
                    <div class="step-explanation" v-if="simpleStep === 1">
                        把143割成两部分: 剩下14，末位3
                    </div>
                    <div class="step-explanation" v-if="simpleStep === 2">
                        用剩下的14减去末位的3，得到11
                    </div>
                    <div class="step-explanation" v-if="simpleStep === 3">
                        11能被11整除，所以原数143也能被11整除!
                    </div>

                    <div class="control-bar">
                        <button class="step-btn" @click="prevSimpleStep" :disabled="simpleStep === 0">
                            ◀ 上一步
                        </button>
                        <button class="step-btn" @click="nextSimpleStep" :disabled="simpleStep === 3">
                            下一步 ▶
                        </button>
                    </div>
                </div>

                <!-- 连续割尾动画 -->
                <div class="demo-section" :class="{active: demoTab === 'complex'}">
                    <div class="animation-area">
                        <svg class="svg-container" viewBox="0 0 400 330" preserveAspectRatio="xMidYMid meet">
                            <text id="complex-title" x="200" y="25" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">
                                判断2816能否被11整除
                            </text>

                            <g id="complex-number-group" opacity="1">
                                <text x="200" y="90" text-anchor="middle" font-size="50" font-weight="bold" fill="#059669">2816</text>
                                <text x="200" y="120" text-anchor="middle" font-size="14" fill="#666">需要连续割尾</text>
                            </g>

                            <g id="complex-cut1-group" opacity="0">
                                <text x="200" y="55" text-anchor="middle" font-size="12" fill="#666" font-weight="500">
                                    第一刀: 割去6
                                </text>
                                
                                <rect x="100" y="75" width="120" height="50" rx="10" fill="#D1FAE5" stroke="#059669" stroke-width="2"/>
                                <text x="160" y="105" text-anchor="middle" font-size="24" font-weight="bold" fill="#047857">281</text>

                                <text x="240" y="105" text-anchor="middle" font-size="20" fill="#333">-</text>

                                <rect x="260" y="75" width="60" height="50" rx="10" fill="#FEE2E2" stroke="#EF4444" stroke-width="2"/>
                                <text x="290" y="105" text-anchor="middle" font-size="24" font-weight="bold" fill="#991b1b">6</text>
                            </g>

                            <g id="complex-result1-group" opacity="0">
                                <text x="200" y="145" text-anchor="middle" font-size="14" fill="#666">
                                    281 - 6 = 275
                                </text>
                                <text x="200" y="165" text-anchor="middle" font-size="12" fill="#F59E0B">
                                    还是看不出来，继续割!
                                </text>
                            </g>

                            <g id="complex-cut2-group" opacity="0">
                                <text x="200" y="185" text-anchor="middle" font-size="12" fill="#666" font-weight="500">
                                    第二刀: 割去5
                                </text>
                                
                                <rect x="120" y="200" width="90" height="45" rx="10" fill="#D1FAE5" stroke="#059669" stroke-width="2"/>
                                <text x="165" y="228" text-anchor="middle" font-size="20" font-weight="bold" fill="#047857">27</text>

                                <text x="225" y="228" text-anchor="middle" font-size="18" fill="#333">-</text>

                                <rect x="245" y="200" width="55" height="45" rx="10" fill="#FEE2E2" stroke="#EF4444" stroke-width="2"/>
                                <text x="272" y="228" text-anchor="middle" font-size="20" font-weight="bold" fill="#991b1b">5</text>
                            </g>

                            <g id="complex-result2-group" opacity="0">
                                <rect x="80" y="260" width="240" height="45" rx="10" fill="#d1fae5" stroke="#10b981" stroke-width="2"/>
                                <text x="200" y="278" text-anchor="middle" font-size="12" font-weight="bold" fill="#065f46">
                                    27 - 5 = 22
                                </text>
                                <text x="200" y="295" text-anchor="middle" font-size="13" fill="#065f46">
                                    22 = 11 × 2, 能整除! ✓
                                </text>
                            </g>
                        </svg>
                    </div>

                    <div class="math-area">
                        <div class="math-formula">
                            <div v-if="complexStep === 0">2816 ÷ 11 = ?</div>
                            <div v-if="complexStep === 1">
                                第一刀: 281 - 6<br>
                                <small style="color: #666;">割去末位6</small>
                            </div>
                            <div v-if="complexStep === 2">
                                281 - 6 = 275<br>
                                <small style="color: #F59E0B;">还是很大，继续!</small>
                            </div>
                            <div v-if="complexStep === 3">
                                第二刀: 27 - 5<br>
                                <small style="color: #666;">对275再割尾</small>
                            </div>
                            <div v-if="complexStep === 4">
                                27 - 5 = 22 = 11 × 2<br>
                                <small style="color: #10b981;">能整除!</small>
                            </div>
                        </div>
                    </div>

                    <div class="step-explanation" v-if="complexStep === 0">
                        大数需要多次割尾
                    </div>
                    <div class="step-explanation" v-if="complexStep === 1">
                        第一刀: 割去末位6，剩下281
                    </div>
                    <div class="step-explanation" v-if="complexStep === 2">
                        281-6=275，数字还是太大，看不出来
                    </div>
                    <div class="step-explanation" v-if="complexStep === 3">
                        第二刀: 对275再割尾，割去5，剩下27
                    </div>
                    <div class="step-explanation" v-if="complexStep === 4">
                        27-5=22，22是11的倍数，所以2816能被11整除!
                    </div>

                    <div class="control-bar">
                        <button class="step-btn" @click="prevComplexStep" :disabled="complexStep === 0">
                            ◀ 上一步
                        </button>
                        <button class="step-btn" @click="nextComplexStep" :disabled="complexStep === 4">
                            下一步 ▶
                        </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 === 'principle'}" @click="explainTab = 'principle'">
                        核心原理
                    </div>
                    <div class="tab-item" :class="{active: explainTab === 'method'}" @click="explainTab = 'method'">
                        割尾法
                    </div>
                    <div class="tab-item" :class="{active: explainTab === 'examples'}" @click="explainTab = 'examples'">
                        典型例题
                    </div>
                </div>

                <!-- 核心原理 -->
                <div class="explain-section" :class="{active: explainTab === 'principle'}">
                    <div class="method-card">
                        <div class="method-title">
                            <span>💡</span> 为什么割尾法有效?
                        </div>
                        <div class="method-content">
                            <p><strong>核心发现:</strong></p>
                            
                            <div class="example-box">
                                10 比 11 少 1<br>
                                所以: 10倍的某个数 = 11倍的这个数 - 1倍的这个数
                            </div>

                            <p style="margin-top: 15px;"><strong>推导过程（以143为例）:</strong></p>
                            
                            <div class="example-box">
                                <div class="example-title">步骤1: 拆分数字</div>
                                143 = 14 × 10 + 3
                            </div>

                            <div class="example-box">
                                <div class="example-title">步骤2: 借力变形</div>
                                把10换成(11-1):<br>
                                14 × 10 = 14 × (11-1)<br>
                                = 14 × 11 - 14
                            </div>

                            <div class="example-box">
                                <div class="example-title">步骤3: 代回原式</div>
                                143 = 14 × 11 - 14 + 3<br>
                                = 14 × 11 - (14-3)
                            </div>

                            <p style="margin-top: 15px;">
                                前面的<strong>14×11</strong>肯定能被11整除，<br>
                                只要<strong>(14-3)</strong>能被11整除就行！<br><br>
                                
                                这就是<span style="color: #059669; font-weight: bold;">"剩下-末位"</span>的由来！
                            </p>
                        </div>
                    </div>

                    <div class="method-card">
                        <div class="method-title">
                            <span>🔢</span> 其他判断方法
                        </div>
                        <div class="method-content">
                            <p><strong>方法二: 奇偶位差法</strong></p>
                            
                            <div class="example-box">
                                一个数能被11整除 ⟺<br>
                                奇数位数字之和 - 偶数位数字之和 = 11的倍数（或0）
                            </div>

                            <div class="example-box">
                                <div class="example-title">实例: 6182</div>
                                奇数位: 6 + 8 = 14<br>
                                偶数位: 1 + 2 = 3<br>
                                差: 14 - 3 = 11 ✓
                            </div>

                            <p style="margin-top: 15px;">
                                <strong>优点:</strong> 不需要多次计算<br>
                                <strong>缺点:</strong> 位数多时容易算错<br>
                                <strong>建议:</strong> 割尾法更直观，推荐使用！
                            </p>
                        </div>
                    </div>
                </div>

                <!-- 割尾法 -->
                <div class="explain-section" :class="{active: explainTab === 'method'}">
                    <div class="method-card">
                        <div class="method-title">
                            <span>✂️</span> 割尾法操作步骤
                        </div>
                        <div class="method-content">
                            <p><strong>核心思想:</strong> 把大数字不断变小，直到一眼能看出是不是11的倍数</p>
                            
                            <ul class="steps-list">
                                <li data-step="1">割尾 - 把最后一位划开，单独取出来</li>
                                <li data-step="2">相减 - 用剩下的前半部分减去末位</li>
                                <li data-step="3">判断 - 如果差是11的倍数或0，则原数能整除</li>
                                <li data-step="4">重复 - 如果差还很大，就重复步骤1和2</li>
                            </ul>

                            <div class="example-box">
                                <div class="example-title">实例: 判断2816</div>
                                <strong>第一刀:</strong><br>
                                割下6，剩下281<br>
                                281 - 6 = 275<br><br>
                                
                                <strong>第二刀:</strong><br>
                                割下5，剩下27<br>
                                27 - 5 = 22<br><br>
                                
                                <strong>结论:</strong><br>
                                22是11的倍数 → 2816能被11整除 ✓
                            </div>
                        </div>
                    </div>

                    <div class="method-card">
                        <div class="method-title">
                            <span>⚡</span> 快速判断技巧
                        </div>
                        <div class="method-content">
                            <p><strong>常见11的倍数:</strong></p>
                            
                            <div class="example-box">
                                0, 11, 22, 33, 44, 55, 66, 77, 88, 99<br>
                                110, 121, 132, 143, 154, 165, 176, 187, 198<br>
                                220, 242, 264, 286, 308, 330...
                            </div>

                            <p style="margin-top: 15px;"><strong>记忆技巧:</strong></p>
                            
                            <div class="example-box">
                                • 两位相同的数: 11, 22, 33... 都能被11整除<br>
                                • 121 = 11 × 11<br>
                                • 每次加11，就是下一个倍数
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 典型例题 -->
                <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">
                        <div class="question-item" :class="{expanded: expandedQ === 1}" @click="toggleQuestion(1)">
                            <div class="question-header">
                                <span>判断 6182 能否被11整除</span>
                                <span class="expand-icon">▼</span>
                            </div>
                            <div class="question-answer">
                                <strong>📝 割尾法过程:</strong><br><br>
                                
                                <strong>第一刀:</strong><br>
                                割去2，剩下618<br>
                                618 - 2 = 616<br>
                                (数字还比较大，看不出来，继续！)<br><br>
                                
                                <strong>第二刀:</strong><br>
                                割去6，剩下61<br>
                                61 - 6 = 55<br><br>
                                
                                <strong>判断:</strong><br>
                                55 = 11 × 5 ✓<br><br>
                                
                                <strong style="color: #10b981;">✅ 结论: 6182能被11整除</strong><br>
                                验算: 6182 ÷ 11 = 562
                            </div>
                        </div>

                        <div class="question-item" :class="{expanded: expandedQ === 2}" @click="toggleQuestion(2)">
                            <div class="question-header">
                                <span>四位数 3A72 能被11整除，求A</span>
                                <span class="expand-icon">▼</span>
                            </div>
                            <div class="question-answer">
                                <strong>📝 完整分析:</strong><br><br>
                                
                                <strong>运用割尾法:</strong><br>
                                末位是2，剩下3A7<br>
                                规则: 3A7 - 2 必须是11的倍数<br><br>
                                
                                <strong>计算:</strong><br>
                                3A7 - 2 = 3A5<br>
                                这个三位数的个位是5，且是11的倍数<br><br>
                                
                                <strong>寻找目标:</strong><br>
                                300-400之间11的倍数:<br>
                                330, 341, 352, 363, 374, 385, 396...<br>
                                只有385的个位是5 ✓<br><br>
                                
                                <strong>逆推:</strong><br>
                                3A7 - 2 = 385<br>
                                3A7 = 387<br>
                                A = 8<br><br>
                                
                                <strong style="color: #10b981;">✅ 答案: A = 8</strong>
                            </div>
                        </div>

                        <div class="question-item" :class="{expanded: expandedQ === 3}" @click="toggleQuestion(3)">
                            <div class="question-header">
                                <span>ABA型三位数能被11整除，有几个?</span>
                                <span class="expand-icon">▼</span>
                            </div>
                            <div class="question-answer">
                                <strong>📝 完整分析:</strong><br><br>
                                
                                <strong>割尾法:</strong><br>
                                AB - A 必须是11的倍数<br><br>
                                
                                <strong>简化:</strong><br>
                                AB = 10A + B<br>
                                10A + B - A = 9A + B<br>
                                所以 9A + B 是11的倍数<br><br>
                                
                                <strong>枚举:</strong><br>
                                A=1: 9+B=11 → B=2 (121) ✓<br>
                                A=2: 18+B=22 → B=4 (242) ✓<br>
                                A=3: 27+B=33 → B=6 (363) ✓<br>
                                A=4: 36+B=44 → B=8 (484) ✓<br>
                                A≥5: 需要的B超过9，无解<br><br>
                                
                                <strong style="color: #10b981;">✅ 答案: 4个 (121, 242, 363, 484)</strong>
                            </div>
                        </div>

                        <div class="question-item" :class="{expanded: expandedQ === 4}" @click="toggleQuestion(4)">
                            <div class="question-header">
                                <span>能被11整除的最大四位数（各位不同）</span>
                                <span class="expand-icon">▼</span>
                            </div>
                            <div class="question-answer">
                                <strong>📝 贪心策略:</strong><br><br>
                                
                                <strong>构造:</strong><br>
                                最大，首位选9，次位选8<br>
                                数字形如98AB<br><br>
                                
                                <strong>割尾法:</strong><br>
                                98A - B 是11的倍数<br><br>
                                
                                <strong>尝试A=7:</strong><br>
                                987 - B = 11的倍数<br>
                                987 ÷ 11 = 89 ... 8<br>
                                所以B必须是8<br>
                                但8已经用过了，不行！<br><br>
                                
                                <strong>尝试A=6:</strong><br>
                                986 - B = 11的倍数<br>
                                986 ÷ 11 = 89 ... 7<br>
                                所以B必须是7<br>
                                9867，无重复！✓<br><br>
                                
                                <strong style="color: #10b981;">✅ 答案: 9867</strong>
                            </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">
                        剩下 - 末位
                    </div>
                    <div class="secret-explanation">
                        <strong>操作步骤:</strong><br><br>
                        
                        ① 割尾 - 把最后一位划开<br>
                        ② 相减 - 剩下的部分减去末位<br>
                        ③ 判断 - 结果能被11整除吗?<br>
                        ④ 重复 - 数字还大就继续割<br><br>
                        
                        <strong>例:</strong> 2816<br>
                        281-6=275 → 27-5=22 → 能整除!
                    </div>
                </div>
                
                <div class="secret-card" style="background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);">
                    <div class="secret-emoji">💡</div>
                    <div class="secret-title">核心原理</div>
                    <div class="secret-rule">
                        10 = 11 - 1
                    </div>
                    <div class="secret-explanation">
                        <strong>为什么有效?</strong><br><br>
                        
                        以143为例:<br>
                        143 = 14×10 + 3<br>
                        = 14×(11-1) + 3<br>
                        = 14×11 - 14 + 3<br>
                        = 14×11 - (14-3)<br><br>
                        
                        14×11能整除，<br>
                        所以只看14-3就行!
                    </div>
                </div>
                
                <div class="secret-card" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
                    <div class="secret-emoji">⚡</div>
                    <div class="secret-title">快速识别</div>
                    <div class="secret-rule">
                        常见倍数
                    </div>
                    <div class="secret-explanation">
                        <strong>11的倍数:</strong><br><br>
                        
                        两位相同: 11, 22, 33, 44...<br><br>
                        
                        三位数: 121, 132, 143, 154...<br><br>
                        
                        <strong>技巧:</strong><br>
                        两位相同的数一定能被11整除!<br>
                        如: 55, 66, 77, 88, 99
                    </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: 'principle',
                    explainTab: 'principle',
                    expandedQ: null,
                    principleStep: 0,
                    simpleStep: 0,
                    complexStep: 0,
                    
                    // 课内练习
                    currentQuestion: 0,
                    score: 0,
                    answered: false,
                    isCorrect: false,
                    selectedOption: null,
                    practiceCompleted: false,
                    
                    practiceQuestions: [
                        {
                            text: '判断 165 能否被11整除',
                            options: [
                                { text: '能', correct: true },
                                { text: '不能', correct: false }
                            ],
                            explanation: '割尾: 16-5=11，11能被11整除，所以165也能。'
                        },
                        {
                            text: '判断 627 能否被11整除',
                            options: [
                                { text: '能', correct: true },
                                { text: '不能', correct: false }
                            ],
                            explanation: '割尾: 62-7=55，55=11×5，能整除。'
                        },
                        {
                            text: '判断 846 能否被11整除',
                            options: [
                                { text: '能', correct: false },
                                { text: '不能', correct: true }
                            ],
                            explanation: '割尾: 84-6=78，78不是11的倍数，不能整除。'
                        },
                        {
                            text: '判断 1364 能否被11整除',
                            options: [
                                { text: '能', correct: true },
                                { text: '不能', correct: false }
                            ],
                            explanation: '第一刀: 136-4=132；第二刀: 13-2=11。能整除。'
                        },
                        {
                            text: '判断 8192 能否被11整除',
                            options: [
                                { text: '能', correct: false },
                                { text: '不能', correct: true }
                            ],
                            explanation: '第一刀: 819-2=817；第二刀: 81-7=74。74不是11的倍数。'
                        }
                    ],
                    
                    // 奥数挑战
                    currentOlympiad: 0,
                    olympiadScore: 0,
                    olympiadAnswered: false,
                    isOlympiadCorrect: false,
                    selectedOlympiadOption: null,
                    wrongAttempts: 0,
                    olympiadCompleted: false,
                    
                    olympiadQuestions: [
                        {
                            difficulty: 'bronze',
                            difficultyText: '🥉 青铜',
                            text: '四位数 5A23 能被11整除，求A',
                            options: [
                                { text: 'A = 3', correct: false },
                                { text: 'A = 4', correct: true },
                                { text: 'A = 5', correct: false }
                            ],
                            hint1: '5A2 - 3 必须是11的倍数',
                            hint2: '找一个500多，个位是9的11的倍数',
                            explanation: '5A2-3个位是9。500-600之间个位是9的11的倍数只有539。所以5A2=542，A=4。'
                        },
                        {
                            difficulty: 'bronze',
                            difficultyText: '🥉 青铜',
                            text: '五位数 10X92 能被11整除，求X',
                            options: [
                                { text: 'X = 5', correct: false },
                                { text: 'X = 6', correct: true },
                                { text: 'X = 7', correct: false }
                            ],
                            hint1: '割尾2: 10X9-2=10X7',
                            hint2: '再割尾7: 10X-7必须是11的倍数',
                            explanation: '10X-7是11的倍数。100-7=93(×), 106-7=99(√)。所以X=6。'
                        },
                        {
                            difficulty: 'silver',
                            difficultyText: '🥈 白银',
                            text: 'ABA型三位数能被11整除，有几个?',
                            options: [
                                { text: '3个', correct: false },
                                { text: '4个', correct: true },
                                { text: '5个', correct: false }
                            ],
                            hint1: 'AB-A=9A+B必须是11的倍数',
                            hint2: 'A=1,2,3,4时有解',
                            explanation: 'A=1: 121; A=2: 242; A=3: 363; A=4: 484。共4个。'
                        },
                        {
                            difficulty: 'silver',
                            difficultyText: '🥈 白银',
                            text: '在2025后面补一个数字X，使20 25X能被11整除',
                            options: [
                                { text: 'X = 0', correct: false },
                                { text: 'X = 1', correct: true },
                                { text: 'X = 2', correct: false }
                            ],
                            hint1: '2025-X必须是11的倍数',
                            hint2: '2025÷11=184...1',
                            explanation: '2025余1，所以2025-X余数是0时，X=1。验证: 2025-1=2024, 202-4=198, 19-8=11√'
                        },
                        {
                            difficulty: 'silver',
                            difficultyText: '🥈 白银',
                            text: '777...77（共2023个7）能否被11整除?',
                            options: [
                                { text: '能', correct: false },
                                { text: '不能', correct: true }
                            ],
                            hint1: '试试小规模: 77, 777, 7777',
                            hint2: '偶数个7能整除，奇数个7不能',
                            explanation: '77(能), 777(不能), 7777(能)。规律: 偶数个能整除。2023是奇数，所以不能。'
                        },
                        {
                            difficulty: 'gold',
                            difficultyText: '🥇 黄金',
                            text: '能被11整除的最大四位数（各位不同）',
                            options: [
                                { text: '9856', correct: false },
                                { text: '9867', correct: true },
                                { text: '9878', correct: false }
                            ],
                            hint1: '首位9，次位8，试98AB',
                            hint2: '986-B必须是11的倍数',
                            explanation: '98AB。A=6: 986-B, 986÷11余7，B=7。9867无重复√'
                        },
                        {
                            difficulty: 'gold',
                            difficultyText: '🥇 黄金',
                            text: '六位数 A2024B 能被11整除且A+B=10，求这个数',
                            options: [
                                { text: '420245', correct: false },
                                { text: '520245', correct: true },
                                { text: '620244', correct: false }
                            ],
                            hint1: '2024能被11整除',
                            hint2: 'A0000余A，A-B=11倍数或0',
                            explanation: '2024÷11=184整除。A万余A。A-B=0时A=B=5。答案520245。'
                        },
                        {
                            difficulty: 'gold',
                            difficultyText: '🥇 黄金',
                            text: '三位数减去它的各位数字之和，差是11的倍数，这样的三位数有多少个?',
                            options: [
                                { text: '80个', correct: false },
                                { text: '90个', correct: true },
                                { text: '100个', correct: false }
                            ],
                            hint1: '设数ABC，则100A+10B+C-(A+B+C)',
                            hint2: '化简得99A+9B',
                            explanation: '99A+9B。99A能整除，所以9B也要能整除。B必须是0。共9×10=90个。'
                        }
                    ]
                };
            },
            
            mounted() {
                console.log('11的整除特征完整版已加载!');
            },
            
            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 === 'principle') {
                                this.speakPrincipleStep();
                            } else if (this.demoTab === 'simple') {
                                this.speakSimpleStep();
                            } else {
                                this.speakComplexStep();
                            }
                        }, 300);
                    }
                },

                switchDemoTab(tab) {
                    this.demoTab = tab;
                    if (tab === 'principle') {
                        this.principleStep = 0;
                        this.$nextTick(() => {
                            this.initPrincipleAnimation();
                            this.speakPrincipleStep();
                        });
                    } else if (tab === 'simple') {
                        this.simpleStep = 0;
                        this.$nextTick(() => {
                            this.initSimpleAnimation();
                            this.speakSimpleStep();
                        });
                    } else {
                        this.complexStep = 0;
                        this.$nextTick(() => {
                            this.initComplexAnimation();
                            this.speakComplexStep();
                        });
                    }
                },

                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('判断一个数能否被11整除，有个超酷的方法叫割尾法！核心原理是：10比11少1，所以10倍的某个数等于11倍的这个数减去1倍的这个数。以143为例，143等于14乘以10加3，也就是14乘以括号11减1加3，展开后是14乘以11减括号14减3。前面的14乘以11肯定能被11整除，只要14减3能被11整除就行！这就是剩下减末位的由来！');
                },

                // ========== 原理分析动画 ==========
                initPrincipleAnimation() {
                    if (typeof gsap === 'undefined') return;
                    
                    gsap.set("#principle-step0", {opacity: 1});
                    gsap.set("#principle-step1", {opacity: 0});
                    gsap.set("#principle-step2", {opacity: 0});
                    gsap.set("#principle-step3", {opacity: 0});
                    gsap.set("#principle-step4", {opacity: 0});
                    gsap.set("#principle-step5", {opacity: 0});
                    gsap.set("#principle-step6", {opacity: 0});
                },

                nextPrincipleStep() {
                    if (this.principleStep < 6) {
                        this.principleStep++;
                        this.$nextTick(() => {
                            this.runPrincipleAnimation();
                            this.speakPrincipleStep();
                        });
                    }
                },

                prevPrincipleStep() {
                    if (this.principleStep > 0) {
                        this.principleStep--;
                        this.$nextTick(() => {
                            this.runPrincipleAnimation();
                            this.speakPrincipleStep();
                        });
                    }
                },

                speakPrincipleStep() {
                    const texts = [
                        '让我们从143这个数开始，彻底搞懂割尾法为什么有效',
                        '第一步，按位值拆分。143等于14乘以10加3。其中14代表十位和百位的总和，3是个位数字',
                        '第二步，核心魔法来了！因为10比11少1，所以我们把10替换成11减1。展开后：14乘以10等于14乘以11减14',
                        '第三步，代回原式。143等于14乘以11减14加3。现在我们就看到了11的倍数！',
                        '第四步，整理公式。把后面两项合并起来：143等于14乘以11减去括号14减3',
                        '第五步，关键发现！14乘以11肯定能被11整除对不对？所以原数能不能被11整除，就只看括号里的14减3就行了！14减3等于11，能整除！',
                        '总结：对于任意数，我们都可以用剩下的部分减去末位来判断。这就是割尾法的数学原理！'
                    ];
                    this.speak(texts[this.principleStep]);
                },

                runPrincipleAnimation() {
                    if (typeof gsap === 'undefined') return;
                    
                    const tl = gsap.timeline();

                    // 隐藏所有步骤
                    tl.to("#principle-step0, #principle-step1, #principle-step2, #principle-step3, #principle-step4, #principle-step5, #principle-step6", {
                        opacity: 0,
                        duration: 0.2
                    });

                    // 显示当前步骤
                    if (this.principleStep === 0) {
                        tl.to("#principle-step0", {opacity: 1, duration: 0.4});
                    } else if (this.principleStep === 1) {
                        tl.to("#principle-step1", {opacity: 1, duration: 0.5})
                          .from("#principle-step1 rect", {
                              scale: 0,
                              stagger: 0.2,
                              ease: "back.out(1.7)",
                              duration: 0.7
                          }, "<0.2");
                    } else if (this.principleStep === 2) {
                        tl.to("#principle-step2", {opacity: 1, duration: 0.5})
                          .from("#principle-step2 rect", {
                              scale: 0,
                              y: 30,
                              stagger: 0.2,
                              ease: "back.out(1.5)",
                              duration: 0.7
                          }, "<0.2");
                    } else if (this.principleStep === 3) {
                        tl.to("#principle-step3", {opacity: 1, duration: 0.5})
                          .from("#principle-step3 rect", {
                              scale: 0,
                              ease: "back.out(1.7)",
                              duration: 0.7
                          }, "<0.2");
                    } else if (this.principleStep === 4) {
                        tl.to("#principle-step4", {opacity: 1, duration: 0.5})
                          .from("#principle-step4 rect", {
                              scale: 0,
                              y: 20,
                              stagger: 0.15,
                              ease: "back.out(1.5)",
                              duration: 0.7
                          }, "<0.2");
                    } else if (this.principleStep === 5) {
                        tl.to("#principle-step5", {opacity: 1, duration: 0.5})
                          .from("#principle-step5 rect", {
                              scale: 0,
                              x: function(index) { return index === 0 ? -30 : 30; },
                              stagger: 0.2,
                              ease: "back.out(1.7)",
                              duration: 0.8
                          }, "<0.2");
                    } else if (this.principleStep === 6) {
                        tl.to("#principle-step6", {opacity: 1, duration: 0.5})
                          .from("#principle-step6 rect", {
                              scale: 0,
                              ease: "elastic.out(1, 0.5)",
                              duration: 1
                          }, "<0.2")
                          .from("#principle-step6 g", {
                              scale: 0,
                              rotation: 360,
                              ease: "back.out(2)",
                              duration: 0.8
                          }, "-=0.5");
                        
                        if (typeof confetti !== 'undefined') {
                            setTimeout(() => {
                                confetti({
                                    particleCount: 150,
                                    spread: 100,
                                    origin: { y: 0.6 },
                                    colors: ['#059669', '#047857', '#065f46', '#10b981']
                                });
                            }, 600);
                        }
                    }
                },

                // ========== 简单示例动画 ==========
                initSimpleAnimation() {
                    if (typeof gsap === 'undefined') return;
                    
                    gsap.set("#simple-number-group", {opacity: 1});
                    gsap.set("#simple-cut-group", {opacity: 0});
                    gsap.set("#simple-calc-group", {opacity: 0});
                    gsap.set("#simple-result-group", {opacity: 0});
                },

                nextSimpleStep() {
                    if (this.simpleStep < 3) {
                        this.simpleStep++;
                        this.$nextTick(() => {
                            this.runSimpleAnimation();
                            this.speakSimpleStep();
                        });
                    }
                },

                prevSimpleStep() {
                    if (this.simpleStep > 0) {
                        this.simpleStep--;
                        this.$nextTick(() => {
                            this.runSimpleAnimation();
                            this.speakSimpleStep();
                        });
                    }
                },

                speakSimpleStep() {
                    const texts = [
                        '让我们用割尾法判断143能否被11整除',
                        '第一步，割尾。把143分成两部分：剩下14，末位3',
                        '第二步，做减法。用剩下的14减去末位的3，得到11',
                        '11能被11整除，所以原数143也能被11整除！'
                    ];
                    this.speak(texts[this.simpleStep]);
                },

                runSimpleAnimation() {
                    if (typeof gsap === 'undefined') return;
                    
                    const tl = gsap.timeline();

                    if (this.simpleStep === 0) {
                        tl.to("#simple-number-group", {opacity: 1, duration: 0.3})
                          .to("#simple-cut-group", {opacity: 0, duration: 0.2}, "<")
                          .to("#simple-calc-group", {opacity: 0, duration: 0.2}, "<")
                          .to("#simple-result-group", {opacity: 0, duration: 0.2}, "<");
                    }

                    if (this.simpleStep === 1) {
                        tl.to("#simple-number-group", {opacity: 0, y: -20, duration: 0.4})
                          .to("#simple-cut-group", {opacity: 1, duration: 0.5})
                          .from("#simple-cut-group rect", {
                              scale: 0,
                              stagger: 0.2,
                              ease: "back.out(1.5)",
                              duration: 0.7
                          }, "<0.2");
                    }

                    if (this.simpleStep === 2) {
                        tl.to("#simple-calc-group", {opacity: 1, duration: 0.5})
                          .from("#simple-calc-group rect", {
                              scale: 0,
                              ease: "back.out(1.7)",
                              duration: 0.6
                          }, "<0.2");
                    }

                    if (this.simpleStep === 3) {
                        tl.to("#simple-result-group", {opacity: 1, scale: 1, ease: "back.out(2)", duration: 0.5});
                        
                        if (typeof confetti !== 'undefined') {
                            setTimeout(() => {
                                confetti({
                                    particleCount: 100,
                                    spread: 70,
                                    origin: { y: 0.6 },
                                    colors: ['#059669', '#047857', '#065f46']
                                });
                            }, 500);
                        }
                    }
                },

                // ========== 连续割尾动画 ==========
                initComplexAnimation() {
                    if (typeof gsap === 'undefined') return;
                    
                    gsap.set("#complex-number-group", {opacity: 1});
                    gsap.set("#complex-cut1-group", {opacity: 0});
                    gsap.set("#complex-result1-group", {opacity: 0});
                    gsap.set("#complex-cut2-group", {opacity: 0});
                    gsap.set("#complex-result2-group", {opacity: 0});
                },

                nextComplexStep() {
                    if (this.complexStep < 4) {
                        this.complexStep++;
                        this.$nextTick(() => {
                            this.runComplexAnimation();
                            this.speakComplexStep();
                        });
                    }
                },

                prevComplexStep() {
                    if (this.complexStep > 0) {
                        this.complexStep--;
                        this.$nextTick(() => {
                            this.runComplexAnimation();
                            this.speakComplexStep();
                        });
                    }
                },

                speakComplexStep() {
                    const texts = [
                        '让我们判断2816能否被11整除，这次需要连续割尾',
                        '第一刀：割去末位6，剩下281。用281减去6，得到275',
                        '275还是很大，看不出来是不是11的倍数，我们继续割',
                        '第二刀：对275再割尾，割去5，剩下27。用27减去5，得到22',
                        '22等于11乘以2，是11的倍数！所以2816能被11整除'
                    ];
                    this.speak(texts[this.complexStep]);
                },

                runComplexAnimation() {
                    if (typeof gsap === 'undefined') return;
                    
                    const tl = gsap.timeline();

                    if (this.complexStep === 0) {
                        tl.to("#complex-number-group", {opacity: 1, duration: 0.3})
                          .to("#complex-cut1-group", {opacity: 0, duration: 0.2}, "<")
                          .to("#complex-result1-group", {opacity: 0, duration: 0.2}, "<")
                          .to("#complex-cut2-group", {opacity: 0, duration: 0.2}, "<")
                          .to("#complex-result2-group", {opacity: 0, duration: 0.2}, "<");
                    }

                    if (this.complexStep === 1) {
                        tl.to("#complex-number-group", {opacity: 0, y: -20, duration: 0.4})
                          .to("#complex-cut1-group", {opacity: 1, duration: 0.5})
                          .from("#complex-cut1-group rect", {
                              scale: 0,
                              x: -20,
                              stagger: 0.2,
                              ease: "back.out(1.5)",
                              duration: 0.6
                          }, "<0.2");
                    }

                    if (this.complexStep === 2) {
                        tl.to("#complex-result1-group", {opacity: 1, duration: 0.5});
                    }

                    if (this.complexStep === 3) {
                        tl.to("#complex-cut2-group", {opacity: 1, duration: 0.5})
                          .from("#complex-cut2-group rect", {
                              scale: 0,
                              x: -20,
                              stagger: 0.2,
                              ease: "back.out(1.5)",
                              duration: 0.6
                          }, "<0.2");
                    }

                    if (this.complexStep === 4) {
                        tl.to("#complex-result2-group", {opacity: 1, duration: 0.5})
                          .from("#complex-result2-group rect", {
                              scale: 0,
                              ease: "back.out(1.7)",
                              duration: 0.6
                          }, "<0.2");
                        
                        if (typeof confetti !== 'undefined') {
                            setTimeout(() => {
                                confetti({
                                    particleCount: 100,
                                    spread: 70,
                                    origin: { y: 0.6 },
                                    colors: ['#059669', '#047857', '#065f46']
                                });
                            }, 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 },
                                colors: ['#059669', '#047857', '#065f46']
                            });
                        }
                    } 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 },
                                colors: ['#059669', '#047857', '#065f46']
                            });
                        }
                    } 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>

🔒

完整代码仅限会员查看

立即登录 / 注册

💡 这段代码完全由 gemini 生成。

登录后可复制完整代码