<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>三角形的高 - 进阶版</title>
<style>
/* --- 基础重置与全局变量 --- */
:root {
--primary-color: #667eea;
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
--card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
--inner-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
--radius-xl: 24px;
--radius-md: 16px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; }
* { -ms-overflow-style: none; scrollbar-width: none; }
html, body {
margin: 0; padding: 0;
background: #f0f2f5;
overflow: hidden;
height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* --- 主容器 --- */
#app {
height: 100vh;
max-width: 480px;
margin: 0 auto;
background: #ffffff;
display: flex;
flex-direction: column;
position: relative;
box-shadow: 0 0 40px rgba(0,0,0,0.05);
}
.content-area {
flex: 1;
overflow-y: auto;
padding-bottom: 90px; /* 为底部导航留空间 */
scroll-behavior: smooth;
background: linear-gradient(to bottom, #ffffff, #f8f9fa);
}
/* --- 底部导航 (玻璃拟态) --- */
.bottom-nav {
position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
width: 90%; max-width: 440px; height: 65px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 35px;
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
display: flex; justify-content: space-around; align-items: center;
z-index: 9999;
border: 1px solid rgba(255,255,255,0.5);
}
.nav-item {
flex: 1; display: flex; flex-direction: column; align-items: center;
cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0.6; transform: scale(0.9);
}
.nav-item.active {
opacity: 1; transform: scale(1.1); color: var(--primary-color);
}
.nav-icon { font-size: 22px; margin-bottom: 2px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }
.nav-label { font-size: 10px; font-weight: bold; }
/* --- 通用组件样式 --- */
.tab-nav {
display: flex;
background: #f1f3f5;
border-radius: 12px;
padding: 4px;
margin: 20px 20px 10px;
}
.tab-item {
flex: 1; padding: 10px; text-align: center; cursor: pointer;
border-radius: 10px; font-weight: bold; font-size: 14px;
color: #666; transition: all 0.3s;
}
.tab-item.active {
background: white; color: var(--primary-color);
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
/* --- 页面特定样式 --- */
/* 1. 概念页 */
.intro-page { padding: 30px 25px; text-align: center; }
.intro-emoji { font-size: 70px; margin-bottom: 10px; animation: float 3s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.intro-title {
font-size: 28px; color: #2d3436; margin-bottom: 25px; font-weight: 800;
background: linear-gradient(120deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.story-card {
background: white; border-radius: var(--radius-xl); padding: 25px;
box-shadow: var(--card-shadow); margin-bottom: 25px; text-align: left;
line-height: 1.8; color: #555; position: relative; overflow: hidden;
}
.story-card::before {
content: ""; position: absolute; top: 0; left: 0; width: 6px; height: 100%;
background: var(--primary-gradient);
}
.speak-btn {
background: var(--primary-gradient); color: white; border: none;
padding: 14px 40px; border-radius: 50px; font-size: 16px; font-weight: bold;
cursor: pointer; margin-top: 15px; box-shadow: 0 10px 20px rgba(118, 75, 162, 0.3);
transition: transform 0.2s;
}
.speak-btn:active { transform: scale(0.95); }
/* 2. 演示页 */
.animation-area {
background: white; border-radius: var(--radius-xl); padding: 10px;
min-height: 320px; max-height: 320px;
box-shadow: var(--inner-shadow); border: 1px solid #eee;
position: relative; overflow: hidden;
}
.math-area {
background: white; border-radius: var(--radius-md); padding: 15px; margin: 20px 0;
box-shadow: var(--card-shadow); text-align: center; border: 1px solid rgba(102, 126, 234, 0.2);
}
.step-explanation {
background: #f8f9fa; padding: 15px; border-radius: var(--radius-md);
color: #555; font-size: 15px; text-align: center; line-height: 1.6;
}
.control-bar {
position: fixed; bottom: 95px; left: 50%; transform: translateX(-50%);
width: 85%; max-width: 400px; z-index: 10000;
display: flex; justify-content: space-between;
}
.step-btn {
background: #2d3436; color: white; border: none; padding: 12px 25px;
border-radius: 20px; font-size: 14px; cursor: pointer;
box-shadow: 0 5px 15px rgba(0,0,0,0.2); transition: all 0.2s;
}
.step-btn:disabled { background: #dfe6e9; color: #b2bec3; box-shadow: none; }
/* SVG 样式优化 */
.svg-container { width: 100%; height: 100%; }
.triangle { fill: rgba(161, 196, 253, 0.2); stroke: #667eea; stroke-width: 2.5; stroke-linejoin: round; }
.height-line { stroke: #ff7675; stroke-width: 2.5; stroke-dasharray: 6,4; stroke-linecap: round; }
.base-line { stroke: #2d3436; stroke-width: 2.5; stroke-linecap: round; }
.vertex-label { font-size: 16px; font-weight: bold; fill: #2d3436; font-family: sans-serif; }
.right-angle { fill: none; stroke: #ff7675; stroke-width: 1.5; }
.highlight-glow { filter: drop-shadow(0 0 5px rgba(102, 126, 234, 0.6)); }
/* 3. 练习与奥数页 (含自动配图样式) */
.question-card {
background: white; border-radius: var(--radius-xl); padding: 25px;
box-shadow: var(--card-shadow); margin: 20px; position: relative;
}
.question-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px dashed #eee;
}
.question-svg-container {
width: 100%; background: #fafafa; border-radius: 12px; padding: 15px;
margin-bottom: 15px; text-align: center; border: 1px solid #f0f0f0;
}
.question-text { font-size: 17px; line-height: 1.7; color: #2d3436; margin-bottom: 20px; }
.option-btn {
background: #f8f9fa; border: 2px solid transparent; border-radius: 16px;
padding: 16px; text-align: left; font-size: 16px; color: #555;
cursor: pointer; transition: all 0.2s; width: 100%; margin-bottom: 12px;
position: relative; overflow: hidden;
}
.option-btn.correct { background: #d4edda; border-color: #28a745; color: #155724; }
.option-btn.wrong { background: #fff5f5; border-color: #ff7675; color: #d63031; }
/* 4. 通关秘籍 (全屏滑动) */
.secrets-container {
height: 100%; padding: 20px 0; display: flex; flex-direction: column;
justify-content: center;
}
.secrets-scroll {
display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
gap: 20px; padding: 0 30px; -webkit-overflow-scrolling: touch;
align-items: center; height: 600px;
}
.secret-card {
min-width: 100%;
height: 520px;
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
border-radius: 24px;
padding: 30px;
box-shadow: 0 15px 35px rgba(0,0,0,0.15), inset 0 0 0 1px rgba(255,255,255,0.4);
scroll-snap-align: center;
display: flex; flex-direction: column; justify-content: center; align-items: center;
position: relative;
}
.secret-emoji { font-size: 80px; margin-bottom: 20px; filter: drop-shadow(0 5px 15px rgba(0,0,0,0.1)); }
.secret-title { font-size: 26px; font-weight: 800; color: #2d3436; margin-bottom: 20px; letter-spacing: 1px; }
.secret-content {
font-size: 17px; line-height: 1.8; color: #444; text-align: center;
background: rgba(255,255,255,0.6); padding: 20px; border-radius: 16px;
backdrop-filter: blur(5px); width: 100%;
}
.secret-highlight {
color: #d63031; font-weight: bold; background: rgba(255, 118, 117, 0.1);
padding: 2px 5px; border-radius: 4px;
}
/* 滑动指示器 */
.scroll-indicator {
text-align: center; color: #999; margin-top: 10px; font-size: 12px;
display: flex; justify-content: center; gap: 8px;
}
.dot { width: 8px; height: 8px; background: #ddd; border-radius: 50%; transition: all 0.3s; }
.dot.active { background: var(--primary-color); width: 20px; border-radius: 4px; }
</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">探索三角形的高</div>
<div class="story-card">
<p>小明和爸爸去露营，看着三角形的帐篷，爸爸问：“小明，你知道帐篷有多高吗？”</p>
<p>小明指着中间的柱子：“是从顶点到地面的垂直距离吗？”</p>
<p>爸爸点赞道：“没错！在数学王国里，这叫做<strong>三角形的高</strong>。它是从顶点‘跳水’到对边的垂直距离！”</p>
</div>
<div class="question-svg-container">
<svg viewBox="0 0 300 150" style="width:100%; height:auto;">
<path d="M50,130 L250,130 L150,30 Z" fill="rgba(102, 126, 234, 0.1)" stroke="#667eea" stroke-width="2"/>
<line x1="150" y1="30" x2="150" y2="130" stroke="#ff7675" stroke-width="2" stroke-dasharray="5,5"/>
<path d="M150,120 L160,120 L160,130" fill="none" stroke="#ff7675"/>
<circle cx="150" cy="30" r="4" fill="#333"/>
<text x="160" y="80" fill="#ff7675" font-size="14">高 h</text>
<text x="150" y="145" fill="#333" font-size="14" text-anchor="middle">底边</text>
</svg>
</div>
<button class="speak-btn" @click="speak('三角形的高，是从一个顶点向它的对边作一条垂直线段，顶点和垂足之间的线段叫做三角形的高。')">
🔊 听老师讲解定义
</button>
</div>
<div v-show="currentPage === 2" class="demo-page" style="padding: 10px;">
<div class="tab-nav">
<div class="tab-item" :class="{active: demoTab === 'direct'}" @click="switchDemoTab('direct')">✍️ 画高步骤</div>
<div class="tab-item" :class="{active: demoTab === 'theory'}" @click="switchDemoTab('theory')">📍 高的位置</div>
</div>
<div v-show="demoTab === 'direct'">
<div class="animation-area">
<svg class="svg-container" viewBox="0 0 400 320" id="direct-svg">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
<path d="M0,0 L10,5 L0,10 Z" fill="#ff7675" />
</marker>
</defs>
<polygon id="direct-triangle" class="triangle" points="100,250 300,250 200,80" />
<line id="direct-base" class="base-line highlight-glow" x1="100" y1="250" x2="300" y2="250" style="opacity:0"/>
<circle id="vertex-c" cx="200" cy="80" r="6" fill="#2d3436" style="opacity:0"/>
<text id="label-c" class="vertex-label" x="195" y="65" style="opacity:0">C</text>
<text id="label-ab" class="vertex-label" x="200" y="275" text-anchor="middle" style="opacity:0">底边 AB</text>
<line id="height-line" class="height-line" x1="200" y1="80" x2="200" y2="250" style="opacity:0" marker-end="url(#arrow)"/>
<path id="right-angle" class="right-angle" d="M190,240 L190,250 L200,250" style="opacity:0"/>
<circle id="moving-dot" cx="200" cy="80" r="8" fill="#ff7675" style="opacity:0"/>
<text id="height-label" x="210" y="170" fill="#ff7675" font-size="16" font-weight="bold" style="opacity:0">高 h</text>
</svg>
</div>
<div class="math-area">
<div style="font-size: 18px; font-weight: bold; color: #2d3436;">
<span v-if="directStep === 0">准备开始...</span>
<span v-if="directStep === 1">第一步: 找顶点</span>
<span v-if="directStep === 2">第二步: 画垂线</span>
<span v-if="directStep === 3">第三步: 标垂足</span>
</div>
</div>
<div class="step-explanation">
<span v-if="directStep === 0">点击“下一步”学习如何画高。</span>
<span v-if="directStep === 1">找到底边AB对应的顶点C（就像山顶）。</span>
<span v-if="directStep === 2">从山顶C向下“扔石头”，石头垂直落下的轨迹就是垂线。</span>
<span v-if="directStep === 3">石头落地的点叫“垂足”。<br>顶点到垂足的距离就是<strong>高</strong>！</span>
</div>
<div class="control-bar">
<button class="step-btn" @click="prevDirectStep" :disabled="directStep === 0">◀ 上一步</button>
<button class="step-btn" @click="nextDirectStep" :disabled="directStep === 3">下一步 ▶</button>
</div>
</div>
<div v-show="demoTab === 'theory'">
<div class="animation-area">
<svg class="svg-container" viewBox="0 0 400 320">
<g transform="translate(0, 20)">
<polygon points="60,200 140,200 100,120" class="triangle"/>
<line x1="100" y1="120" x2="100" y2="200" class="height-line"/>
<text x="100" y="230" text-anchor="middle" font-size="12" fill="#555">锐角: 内部</text>
</g>
<g transform="translate(130, 20)">
<polygon points="60,200 140,200 60,120" class="triangle"/>
<line x1="60" y1="120" x2="60" y2="200" class="height-line" stroke-width="4"/>
<text x="100" y="230" text-anchor="middle" font-size="12" fill="#555">直角: 直角边</text>
</g>
<g transform="translate(260, 20)">
<polygon points="60,200 20,120 100,200" class="triangle"/>
<line x1="20" y1="120" x2="60" y2="120" stroke="#ccc" stroke-dasharray="3,3"/> <line x1="60" y1="120" x2="60" y2="200" class="height-line"/>
<text x="60" y="230" text-anchor="middle" font-size="12" fill="#555">钝角: 外部</text>
</g>
</svg>
</div>
<div class="step-explanation" style="margin-top:20px;">
<strong>高在哪儿？</strong><br>
• 锐角三角形：三条高都在肚子里（内部）<br>
• 直角三角形：两条高就是直角边<br>
• 钝角三角形：有两条高跑到外面去了
</div>
</div>
</div>
<div v-show="currentPage === 3" class="explain-page" style="padding: 20px;">
<div class="tab-nav">
<div class="tab-item" :class="{active: explainTab === 'direct'}" @click="explainTab='direct'">核心原理</div>
<div class="tab-item" :class="{active: explainTab === 'example'}" @click="explainTab='example'">经典例题</div>
</div>
<div v-if="explainTab === 'direct'">
<div class="story-card">
<h3>🔑 面积公式的秘密</h3>
<p>因为 <strong>面积 = 底 × 高 ÷ 2</strong></p>
<p>所以我们可以反过来求高：</p>
<p style="text-align:center; font-size: 20px; font-weight:bold; color:var(--primary-color); background:#f0f7ff; padding:10px; border-radius:10px;">高 = 面积 × 2 ÷ 底</p>
</div>
</div>
<div v-if="explainTab === 'example'">
<div class="question-card" v-for="(ex, idx) in examples" :key="idx" @click="toggleExample(idx)">
<div class="question-header" style="border:none; margin:0; padding:0;">
<div style="font-weight:bold;">例题 {{idx+1}}：{{ex.title}}</div>
<div>{{expandedExample===idx?'➖':'➕'}}</div>
</div>
<div v-show="expandedExample === idx" style="margin-top:15px; border-top:1px dashed #eee; padding-top:10px;">
<div>{{ex.question}}</div>
<div style="background:#e8f5e9; padding:10px; border-radius:8px; margin-top:10px; color:#2e7d32;">
<strong>解析：</strong>{{ex.solution}}
</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">
<span class="difficulty-badge" style="background:#667eea; color:white; padding:4px 12px; border-radius:20px; font-size:12px;">课内练习</span>
<span style="color:#f39c12; font-weight:bold;">得分: {{score}}</span>
</div>
<div v-if="practiceQuestions[currentQuestion].svgCode" class="question-svg-container" v-html="practiceQuestions[currentQuestion].svgCode"></div>
<div class="question-text" v-html="practiceQuestions[currentQuestion].text"></div>
<div class="options-container">
<button v-for="(opt, idx) in practiceQuestions[currentQuestion].options" :key="idx"
class="option-btn"
:class="{
'correct': answered && opt.correct,
'wrong': answered && selectedOption === idx && !opt.correct
}"
@click="selectOption(idx, opt.correct)"
:disabled="answered">
{{String.fromCharCode(65+idx)}}. {{opt.text}}
</button>
</div>
<div v-if="answered" class="step-explanation" :style="{background: isCorrect ? '#d4edda' : '#fff3cd', color: isCorrect ? '#155724' : '#856404'}">
<strong>{{isCorrect ? '🎉 回答正确！' : '💡 解析：'}}</strong><br>
<span v-html="practiceQuestions[currentQuestion].explanation"></span>
</div>
<button v-if="answered" class="speak-btn" style="width:100%; margin-top:20px;" @click="nextQuestion">
{{currentQuestion < practiceQuestions.length - 1 ? '下一题 →' : '完成练习'}}
</button>
</div>
</div>
<div v-else class="intro-page">
<div class="intro-emoji">🎉</div>
<h2>练习完成！</h2>
<p style="font-size:40px; font-weight:bold; color:#f39c12;">{{score}}分</p>
<button class="speak-btn" @click="switchPage(5)">挑战奥数题 →</button>
</div>
</div>
<div v-show="currentPage === 5" class="practice-page">
<div v-if="!olympiadCompleted">
<div class="question-card" style="border-top: 5px solid #ff7675;">
<div class="question-header">
<span style="background:#ff7675; color:white; padding:4px 12px; border-radius:20px; font-size:12px;">奥数挑战 {{currentOlympiad+1}}/{{olympiadQuestions.length}}</span>
<span style="color:#f39c12; font-weight:bold;">⭐ {{olympiadScore}}</span>
</div>
<div v-if="olympiadQuestions[currentOlympiad].svgCode" class="question-svg-container" v-html="olympiadQuestions[currentOlympiad].svgCode"></div>
<div class="question-text" v-html="olympiadQuestions[currentOlympiad].text"></div>
<div class="options-container">
<button v-for="(opt, idx) in olympiadQuestions[currentOlympiad].options" :key="idx"
class="option-btn"
:class="{
'correct': olympiadAnswered && opt.correct,
'wrong': olympiadAnswered && selectedOlympiadOption === idx && !opt.correct
}"
@click="selectOlympiadOption(idx, opt.correct)"
:disabled="olympiadAnswered">
{{opt.text}}
</button>
</div>
<div v-if="olympiadAnswered" class="step-explanation" style="background:#e3f2fd; color:#0d47a1;">
<strong>🏆 深度解析：</strong><br>
<span v-html="olympiadQuestions[currentOlympiad].explanation"></span>
</div>
<button v-if="olympiadAnswered" class="speak-btn" style="width:100%; margin-top:20px;" @click="nextOlympiad">
{{currentOlympiad < olympiadQuestions.length - 1 ? '下一关 →' : '查看成绩'}}
</button>
</div>
</div>
<div v-else class="intro-page">
<div class="intro-emoji">🏆</div>
<h2>奥数通关！</h2>
<p style="font-size:40px; font-weight:bold; color:#f39c12;">{{olympiadScore}}分</p>
<button class="speak-btn" @click="switchPage(6)">获取通关秘籍 →</button>
</div>
</div>
<div v-show="currentPage === 6" class="secrets-container">
<div class="secrets-scroll" id="secretsScroll">
<div class="secret-card">
<div class="secret-emoji">🗣️</div>
<div class="secret-title">画高口诀</div>
<div class="secret-content">
<p><strong>一找</strong> 顶点对底边</p>
<p><strong>二画</strong> 垂直用尺板</p>
<p><strong>三标</strong> 垂足和高h</p>
<div style="margin-top:15px; color:#d63031; font-weight:bold;">“一对、二垂、三标记”</div>
</div>
</div>
<div class="secret-card" style="background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);">
<div class="secret-emoji">🧙</div>
<div class="secret-title">位置魔法</div>
<div class="secret-content">
<p>🔴 锐角：三条高都在<strong>内部</strong></p>
<p>🔵 直角：两条高是<strong>直角边</strong></p>
<p>🟣 钝角：两条高跑到<strong>外部</strong></p>
</div>
</div>
<div class="secret-card" style="background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);">
<div class="secret-emoji">⚡</div>
<div class="secret-title">秒杀技巧</div>
<div class="secret-content">
<p><strong>等积变形：</strong><br>平行线间，底相等，则面积相等！</p>
<hr style="border:0; border-top:1px dashed #999; margin:10px 0;">
<p><strong>知面求高：</strong><br>高 = 面积 × 2 ÷ 底</p>
</div>
</div>
</div>
<div class="scroll-indicator">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div style="text-align:center; color:#999; margin-top:10px;">← 左右滑动查看秘籍 →</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: 'direct',
explainTab: 'direct',
directStep: 0,
expandedExample: null,
// --- 🟢 课内练习 (完整5题，全配图) ---
practiceQuestions: [
{
text: "下面关于‘三角形的高’的说法，正确的是？",
// 配图：展示定义概念
svgCode: `<svg viewBox="0 0 300 100" style="width:100%; height:auto;">
<text x="150" y="40" text-anchor="middle" font-size="14" fill="#666">❓ 核心定义</text>
<line x1="50" y1="80" x2="250" y2="80" stroke="#ddd" stroke-width="2"/>
<path d="M150,20 L150,80" stroke="#ff7675" stroke-width="2" stroke-dasharray="4,4"/>
<text x="160" y="60" fill="#ff7675" font-size="12">垂直?</text>
</svg>`,
options: [
{text: "A. 高是从顶点向对边画的任意一条线段", correct: false},
{text: "B. 高必须垂直于底边", correct: true},
{text: "C. 一个三角形只有一条高", correct: false},
{text: "D. 钝角三角形的高都在图形内部", correct: false}
],
explanation: "高有严格的定义：从顶点向对边作的一条<strong>垂直线段</strong>。关键条件是<strong>垂直</strong>。"
},
{
text: "右图中，以BC为底，对应的高是哪条线段？<br><small>（提示：顶点A对底边BC）</small>",
// 配图：题目指定图形
svgCode: `<svg viewBox="0 0 200 150" style="width:100%;max-width:300px;margin:auto;display:block;">
<polygon points="100,20 40,130 160,130" fill="none" stroke="#333" stroke-width="2"/>
<text x="95" y="15" font-size="14" fill="#666">A</text>
<text x="30" y="135" font-size="14" fill="#666">B</text>
<text x="165" y="135" font-size="14" fill="#666">C</text>
<line x1="100" y1="20" x2="100" y2="130" stroke="#ff7675" stroke-width="2" stroke-dasharray="4,4"/>
<text x="105" y="100" font-size="12" fill="#ff7675">D</text>
<path d="M100,120 L110,120 L110,130" fill="none" stroke="#ff7675"/>
<line x1="40" y1="130" x2="160" y2="130" stroke="#667eea" stroke-width="3"/>
</svg>`,
options: [
{text: "A. 线段AB", correct: false},
{text: "B. 线段AC", correct: false},
{text: "C. 从A点向BC作的垂直线段AD", correct: true},
{text: "D. 线段BC本身", correct: false}
],
explanation: "以BC为底，它对的顶点是A。高就是从A向BC画的垂线段AD。"
},
{
text: "一个三角形的面积是24平方厘米，底边长是8厘米。它的高是多少厘米？",
// 配图：计算可视化
svgCode: `<svg viewBox="0 0 200 100" style="width:100%;max-width:300px;margin:auto;display:block;">
<polygon points="80,20 30,90 170,90" fill="#e3f2fd" stroke="#667eea" stroke-width="2"/>
<text x="100" y="60" font-size="14" fill="#666" text-anchor="middle">面积=24</text>
<text x="100" y="105" font-size="14" fill="#333" text-anchor="middle">底=8</text>
<line x1="80" y1="20" x2="80" y2="90" stroke="#ff7675" stroke-dasharray="3,3"/>
<text x="85" y="40" font-size="12" fill="#ff7675">h=?</text>
</svg>`,
options: [
{text: "A. 3厘米", correct: false},
{text: "B. 6厘米", correct: true},
{text: "C. 12厘米", correct: false},
{text: "D. 192厘米", correct: false}
],
explanation: "高 = 面积 × 2 ÷ 底 = 24 × 2 ÷ 8 = 6（厘米）。"
},
{
text: "下面哪种三角形，它的三条高都在三角形的内部？",
// 配图：锐角三角形示意
svgCode: `<svg viewBox="0 0 200 100" style="width:100%;max-width:300px;margin:auto;display:block;">
<polygon points="100,10 40,90 160,90" fill="#fff" stroke="#667eea" stroke-width="2"/>
<line x1="100" y1="10" x2="100" y2="90" stroke="#ff7675" stroke-dasharray="2,2"/>
<line x1="40" y1="90" x2="130" y2="35" stroke="#ff7675" stroke-dasharray="2,2"/>
<line x1="160" y1="90" x2="70" y2="35" stroke="#ff7675" stroke-dasharray="2,2"/>
<text x="100" y="50" font-size="10" fill="#666" text-anchor="middle">都在内部</text>
</svg>`,
options: [
{text: "A. 锐角三角形", correct: true},
{text: "B. 直角三角形", correct: false},
{text: "C. 钝角三角形", correct: false},
{text: "D. 等腰三角形", correct: false}
],
explanation: "只有<strong>锐角三角形</strong>的三条高都在内部。直角三角形有两条是边，钝角三角形有两条在外部。"
},
{
text: "画三角形的高时，我们使用的关键绘图工具是？",
// 配图：三角板图标
svgCode: `<svg viewBox="0 0 100 100" style="width:80px; height:80px; margin:auto; display:block;">
<path d="M20,80 L80,80 L20,20 Z" fill="#fff" stroke="#333" stroke-width="3"/>
<circle cx="40" cy="60" r="5" fill="#eee"/>
<path d="M20,70 L30,70 L30,80" fill="none" stroke="#333"/>
</svg>`,
options: [
{text: "A. 直尺", correct: false},
{text: "B. 量角器", correct: false},
{text: "C. 三角板（或直尺+三角板组合）", correct: true},
{text: "D. 圆规", correct: false}
],
explanation: "画高的关键是画出<strong>垂直</strong>线，三角板自带直角，是最方便的工具。"
}
],
currentQuestion: 0,
score: 0,
answered: false,
selectedOption: null,
isCorrect: false,
practiceCompleted: false,
// --- 🏆 奥数挑战 (完整6题，全配图) ---
olympiadQuestions: [
{
text: "如图，在直角三角形ABC中，∠C=90°，AC=6cm，BC=8cm。斜边AB上的高CD的长度是多少cm？",
// 配图：直角三角形旋转视图
svgCode: `<svg viewBox="0 0 200 130" style="width:100%;max-width:300px;margin:auto;display:block;">
<defs><marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto"><path d="M0,0 L0,6 L9,3 z" fill="#666" /></marker></defs>
<path d="M50,110 L150,110 L50,30 Z" fill="none" stroke="#333" stroke-width="2"/>
<text x="40" y="115" font-size="14" fill="#666">C</text>
<text x="155" y="115" font-size="14" fill="#666">B</text>
<text x="40" y="25" font-size="14" fill="#666">A</text>
<path d="M50,100 L60,100 L60,110" fill="none" stroke="#333"/>
<text x="100" y="125" font-size="12" fill="#e74c3c" text-anchor="middle">8</text>
<text x="30" y="70" font-size="12" fill="#e74c3c" text-anchor="middle">6</text>
<line x1="50" y1="110" x2="110" y2="62" stroke="#ff7675" stroke-dasharray="3,3" stroke-width="2"/>
<text x="85" y="90" font-size="12" fill="#ff7675">h?</text>
</svg>`,
options: [
{text: "A. 4.8cm", correct: true},
{text: "B. 5cm", correct: false},
{text: "C. 4.5cm", correct: false},
{text: "D. 5.2cm", correct: false}
],
explanation: "AB=√(6²+8²)=10。面积=6×8÷2=24。高=24×2÷10=4.8cm。",
hint1: "先算出三角形的面积。",
hint2: "再算出斜边AB的长度（勾股定理）。",
difficulty: "medium",
difficultyText: "中等"
},
{
text: "一个等腰三角形的周长是36厘米，底边长10厘米。这个三角形底边上的高是8厘米。它的面积是多少平方厘米？",
// 配图：陷阱示意图
svgCode: `<svg viewBox="0 0 200 120" style="width:100%;max-width:300px;margin:auto;display:block;">
<polygon points="100,10 50,110 150,110" fill="none" stroke="#333" stroke-width="2"/>
<line x1="100" y1="10" x2="100" y2="110" stroke="#ff7675" stroke-dasharray="4,4"/>
<text x="110" y="60" fill="#ff7675">高=8</text>
<text x="100" y="125" fill="#333" text-anchor="middle">底=10</text>
<text x="160" y="40" fill="#999" font-size="10">周长36(没用!)</text>
</svg>`,
options: [
{text: "A. 40平方厘米", correct: true},
{text: "B. 48平方厘米", correct: false},
{text: "C. 80平方厘米", correct: false},
{text: "D. 144平方厘米", correct: false}
],
explanation: "<strong>陷阱！</strong>求面积只需要底和高。面积=10×8÷2=40。周长是干扰条件。",
hint1: "求面积需要用到周长吗？",
difficulty: "easy",
difficultyText: "基础"
},
{
text: "平行四边形ABCD的面积为48平方厘米，E是BC边上一点。三角形ABE的面积是12平方厘米。三角形DEC的面积是多少平方厘米？",
// 配图：平行四边形分割
svgCode: `<svg viewBox="0 0 200 100" style="width:100%;max-width:300px;margin:auto;display:block;">
<path d="M20,80 L140,80 L180,20 L60,20 Z" fill="#f9f9f9" stroke="#333" stroke-width="2"/>
<circle cx="80" cy="80" r="3" fill="#333"/>
<text x="80" y="95" font-size="12">E</text>
<line x1="60" y1="20" x2="80" y2="80" stroke="#667eea"/>
<line x1="180" y1="20" x2="80" y2="80" stroke="#ff7675"/>
<text x="60" y="60" font-size="10" fill="#667eea">12</text>
<text x="120" y="60" font-size="10" fill="#ff7675">?</text>
<text x="10" y="80" font-size="12">B</text> <text x="150" y="80" font-size="12">C</text>
<text x="50" y="20" font-size="12">A</text> <text x="190" y="20" font-size="12">D</text>
</svg>`,
options: [
{text: "A. 12平方厘米", correct: true},
{text: "B. 18平方厘米", correct: false},
{text: "C. 24平方厘米", correct: false},
{text: "D. 36平方厘米", correct: false}
],
explanation: "平行四边形被对角线分成两个面积相等的三角形（各24）。利用等底等高或互补关系，可得DEC面积也是12。",
hint1: "连接AC，看看有什么发现？",
difficulty: "hard",
difficultyText: "较难"
},
{
text: "一个直角三角形，斜边上的高把斜边分成的两条线段长度分别是3cm和12cm。这条高的长度是多少cm？",
// 配图：射影定理模型
svgCode: `<svg viewBox="0 0 200 120" style="width:100%;max-width:300px;margin:auto;display:block;">
<polygon points="100,20 20,100 180,100" fill="none" stroke="#333" stroke-width="2"/>
<line x1="100" y1="20" x2="100" y2="100" stroke="#ff7675" stroke-width="2"/>
<rect x="95" y="95" width="5" height="5" fill="#333"/> <text x="60" y="115" font-size="12" fill="#666" text-anchor="middle">3</text>
<text x="140" y="115" font-size="12" fill="#666" text-anchor="middle">12</text>
<text x="105" y="60" font-size="12" fill="#ff7675">h</text>
</svg>`,
options: [
{text: "A. 4cm", correct: false},
{text: "B. 5cm", correct: false},
{text: "C. 6cm", correct: true},
{text: "D. 7cm", correct: false}
],
explanation: "根据射影定理（或相似三角形），h² = 3 × 12 = 36，所以 h = 6。",
hint1: "斜边上的高是两条分线段的比例中项。",
difficulty: "medium",
difficultyText: "中等"
},
{
text: "如图，直线L1平行于L2。三角形ABC和三角形DBC的面积有什么关系？",
// 配图：同底等高
svgCode: `<svg viewBox="0 0 200 120" style="width:100%;max-width:300px;margin:auto;display:block;">
<line x1="10" y1="20" x2="190" y2="20" stroke="#333" stroke-width="1"/>
<text x="180" y="15" font-size="10">L1</text>
<line x1="10" y1="100" x2="190" y2="100" stroke="#333" stroke-width="1"/>
<text x="180" y="115" font-size="10">L2</text>
<polygon points="50,20 60,100 140,100" fill="rgba(102,126,234,0.3)" stroke="#667eea"/>
<text x="50" y="15" font-size="12" fill="#667eea">A</text>
<polygon points="120,20 60,100 140,100" fill="rgba(255,118,117,0.3)" stroke="#ff7675"/>
<text x="120" y="15" font-size="12" fill="#ff7675">D</text>
<text x="60" y="115" font-size="12">B</text> <text x="140" y="115" font-size="12">C</text>
</svg>`,
options: [
{text: "A. 面积相等，因为等底等高", correct: true},
{text: "B. 三角形ABC面积更大", correct: false},
{text: "C. 三角形DBC面积更大", correct: false},
{text: "D. 无法比较", correct: false}
],
explanation: "平行线间的距离（高）处处相等，且它们共用底边BC。底同高同，面积必等。",
difficulty: "easy",
difficultyText: "基础"
},
{
text: "一个三角形的三条边长分别是5cm, 12cm, 13cm。这个三角形最长边上的高是多少cm？",
// 配图：5-12-13直角三角形
svgCode: `<svg viewBox="0 0 200 120" style="width:100%;max-width:300px;margin:auto;display:block;">
<polygon points="20,100 180,100 80,40" fill="none" stroke="#333" stroke-width="2"/>
<line x1="80" y1="40" x2="80" y2="100" stroke="#ff7675" stroke-dasharray="3,3"/>
<text x="40" y="80" font-size="12" fill="#666">5</text>
<text x="140" y="80" font-size="12" fill="#666">12</text>
<text x="100" y="115" font-size="12" fill="#333">13</text>
<text x="85" y="70" font-size="12" fill="#ff7675">h</text>
</svg>`,
options: [
{text: "A. 60/13 cm", correct: true},
{text: "B. 5cm", correct: false},
{text: "C. 12cm", correct: false},
{text: "D. 30/13 cm", correct: false}
],
explanation: "5²+12²=13²，这是直角三角形。面积=5×12÷2=30。斜边高=30×2÷13=60/13。",
difficulty: "medium",
difficultyText: "中等"
}
],
currentOlympiad: 0,
olympiadScore: 0,
olympiadAnswered: false,
selectedOlympiadOption: null,
olympiadCompleted: false,
wrongAttempts: 0,
// 讲解页例题 (保持不变)
examples: [
{title: "画钝角三角形的高", question: "画出钝角边BC上的高", solution: "记得要延长BC！因为钝角的高落在外面。"},
{title: "根据面积求高", question: "面积42，底12，求高", solution: "高 = 42×2÷12 = 7。"}
]
};
},
methods: {
switchPage(page) {
this.stopSpeak();
this.currentPage = page;
if (page === 2) {
this.directStep = 0;
this.$nextTick(() => this.runDirectAnimation());
}
if (page === 6) {
// 监听滚动以更新指示器
this.$nextTick(() => {
const scroll = document.getElementById('secretsScroll');
if(scroll) {
scroll.addEventListener('scroll', this.updateScrollIndicator);
}
});
}
},
updateScrollIndicator() {
const scroll = document.getElementById('secretsScroll');
const width = scroll.offsetWidth;
const index = Math.round(scroll.scrollLeft / width);
const dots = document.querySelectorAll('.dot');
dots.forEach((dot, i) => {
dot.classList.toggle('active', i === index);
});
},
stopSpeak() {
const isWeChat = /MicroMessenger/i.test(navigator.userAgent);
if (isWeChat) {
const audio = document.getElementById('tts-audio');
if (audio) { audio.pause(); audio.currentTime = 0; }
} else {
window.speechSynthesis && window.speechSynthesis.cancel();
}
},
switchDemoTab(tab) { this.demoTab = tab; },
speak(text) {
const isWeChat = /MicroMessenger/i.test(navigator.userAgent);
if (isWeChat) {
let audio = document.getElementById('tts-audio');
if (!audio) {
audio = document.createElement('audio');
audio.id = 'tts-audio';
audio.style.display = 'none';
document.body.appendChild(audio);
}
audio.src = `https://www.xinghuo.tv/wp-content/themes/xinghuo-tv/tts.php?text=${encodeURIComponent(text)}&t=${Date.now()}`;
audio.play();
} else {
const u = new SpeechSynthesisUtterance(text);
u.lang = 'zh-CN'; u.rate = 0.9;
window.speechSynthesis.speak(u);
}
},
runDirectAnimation() {
if (typeof gsap === 'undefined') return;
const tl = gsap.timeline();
gsap.set(["#direct-base", "#vertex-c", "#label-c", "#height-line", "#right-angle", "#moving-dot", "#height-label"], { opacity: 0 });
if (this.directStep >= 1) {
tl.to("#vertex-c", {opacity: 1, duration: 0.5})
.to("#label-c", {opacity: 1}, "<");
}
if (this.directStep >= 2) {
tl.to("#direct-base", {opacity: 1, duration: 0.5})
.to("#label-ab", {opacity: 1}, "<")
.to("#moving-dot", {opacity: 1, duration: 0.2})
.to("#moving-dot", {attr:{cy:250}, duration:1, ease:"bounce.out"})
.to("#height-line", {opacity: 1}, "<0.1");
}
if (this.directStep === 3) {
tl.to("#right-angle", {opacity: 1})
.to("#height-label", {opacity: 1, scale: 1.2, transformOrigin:"center", ease:"back.out"});
}
},
nextDirectStep() {
if (this.directStep < 3) { this.directStep++; this.runDirectAnimation(); }
},
prevDirectStep() {
if (this.directStep > 0) { this.directStep--; this.runDirectAnimation(); }
},
toggleExample(idx) { this.expandedExample = this.expandedExample === idx ? null : idx; },
selectOption(idx, correct) {
if (this.answered) return;
this.answered = true; this.selectedOption = idx; this.isCorrect = correct;
if (correct) { this.score += 20; if(typeof confetti!=='undefined') confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); }
},
nextQuestion() {
if (this.currentQuestion < this.practiceQuestions.length - 1) {
this.currentQuestion++; this.answered = false; this.selectedOption = null;
} else { this.practiceCompleted = true; }
},
selectOlympiadOption(idx, correct) {
if (this.olympiadAnswered) return;
this.olympiadAnswered = true; this.selectedOlympiadOption = idx;
if (correct) { this.olympiadScore += 20; if(typeof confetti!=='undefined') confetti(); }
},
nextOlympiad() {
if (this.currentOlympiad < this.olympiadQuestions.length - 1) {
this.currentOlympiad++; this.olympiadAnswered = false; this.selectedOlympiadOption = null;
} else { this.olympiadCompleted = true; }
}
},
mounted() {
this.$nextTick(() => this.runDirectAnimation());
}
}).mount('#app');
</script>
</body>
</html>💡 这段代码完全由 AI 生成。
登录后可复制完整代码