// ============================================================ // 应用状态 // ============================================================ let currentView = 'home'; let currentChapter = null; let currentSectionTab = 'lesson'; let quizAnswers = {}; // ============================================================ // 渲染：首页 // ============================================================ function renderHome() { const book1Chapters = COURSE_DATA.book1.chapters; const book2Chapters = COURSE_DATA.book2.chapters; const totalSections = [...book1Chapters, ...book2Chapters].reduce((sum, ch) => sum + ch.sections.length, 0); const totalExperiments = [...book1Chapters, ...book2Chapters].length; const totalQuizzes = totalExperiments; const html = `

⚛️ 八年级物理趣味课堂

${COURSE_DATA.meta.subtitle} · ${COURSE_DATA.meta.version}

有趣 · 好懂 · 全面覆盖每个章节、实验和测试

12 章

${totalSections} 节课

${totalExperiments} 个实验

${totalQuizzes} 套测试

${COURSE_DATA.book1.icon} ${COURSE_DATA.book1.name}

${book1Chapters.map(ch => renderChapterCard(ch, COURSE_DATA.book1.color)).join('')}

${COURSE_DATA.book2.icon} ${COURSE_DATA.book2.name}

${book2Chapters.map(ch => renderChapterCard(ch, COURSE_DATA.book2.color)).join('')}

`; document.getElementById('app').innerHTML = html; } function renderChapterCard(ch, color) { return `

${ch.sections.length}节

${ch.icon}

${ch.title}

${ch.summary}

`; } // ============================================================ // 渲染：章节详情 // ============================================================ function openChapter(chId) { const allChapters = [...COURSE_DATA.book1.chapters, ...COURSE_DATA.book2.chapters]; currentChapter = allChapters.find(ch => ch.id === chId); currentSectionTab = 'lesson'; currentView = 'chapter'; renderChapter(); window.scrollTo(0, 0); } function renderChapter() { const ch = currentChapter; if (!ch) return; const book = COURSE_DATA.book1.chapters.includes(ch) ? COURSE_DATA.book1 : COURSE_DATA.book2; const progress = getChapterProgress(ch.id); const html = `

← 返回首页

${ch.icon}

${ch.title}

${ch.summary}

📌 本章重点

${p}

学习进度：${progress.done}/${progress.total} 节（${progress.percent}%）

📖 课程讲解

🔬 实验

📝 章节测试

`; document.getElementById('app').innerHTML = html; renderSectionContent(); } function switchSectionTab(tab) { currentSectionTab = tab; document.querySelectorAll('.section-tab').forEach(t => t.classList.remove('active')); event.target.classList.add('active'); renderSectionContent(); window.scrollTo({ top: document.querySelector('.section-tabs').offsetTop - 80, behavior: 'smooth' }); } function renderSectionContent() { const ch = currentChapter; let html = ''; if (currentSectionTab === 'lesson') { html = ch.sections.map((sec, idx) => `

${sec.title}

${sec.fun}

${sec.content.map(block => renderContentBlock(block)).join('')}

`).join(''); } else if (currentSectionTab === 'experiment') { const exp = ch.experiment; html = `

🔬 ${exp.title}

🎯 实验目的

${exp.objective}

📦 实验器材

${exp.materials.map(m => `${m}`).join('')}

📋 实验步骤

${s}

${exp.conclusion}

${exp.caution}

`; } else if (currentSectionTab === 'quiz') { const quiz = ch.quiz; html = `

${quiz.title}

${quiz.questions.map((q, qi) => `

Q${qi+1}.${q.q}

${q.options.map((opt, oi) => `

${String.fromCharCode(65+oi)} ${opt}

`).join('')}

${q.explain}

`).join('')}

你的得分

`; quizAnswers[ch.id] = {}; } document.getElementById('section-content').innerHTML = html; } function renderContentBlock(block) { switch(block.type) { case 'h3': return `

${block.text}

`; case 'p': return `

${block.text}

`; case 'formula': return `

${block.text}

`; case 'tip': return `

${block.text}

`; case 'warning': return `

${block.text}

`; default: return `

${block.text}

`; } } // ============================================================ // 测试逻辑 // ============================================================ function selectAnswer(chId, qi, oi) { // 如果已经提交了，不允许再选 const result = document.getElementById(`result-${chId}`); if (result && result.classList.contains('show')) return; quizAnswers[chId] = quizAnswers[chId] || {}; quizAnswers[chId][qi] = oi; // 更新UI const question = document.getElementById(`q-${chId}-${qi}`); question.querySelectorAll('.quiz-option').forEach(opt => opt.classList.remove('selected')); question.querySelector(`[data-q="${qi}"][data-o="${oi}"]`).classList.add('selected'); } function submitQuiz(chId) { const ch = [...COURSE_DATA.book1.chapters, ...COURSE_DATA.book2.chapters].find(c => c.id === chId); const questions = ch.quiz.questions; let correct = 0; const answers = quizAnswers[chId] || {}; questions.forEach((q, qi) => { const userAns = answers[qi]; const questionEl = document.getElementById(`q-${chId}-${qi}`); questionEl.querySelectorAll('.quiz-option').forEach(opt => { opt.classList.remove('selected', 'correct', 'wrong'); const oi = parseInt(opt.dataset.o); if (oi === q.answer) opt.classList.add('correct'); else if (oi === userAns) opt.classList.add('wrong'); }); if (userAns === q.answer) correct++; document.getElementById(`explain-${chId}-${qi}`).classList.add('show'); }); const score = Math.round(correct / questions.length * 100); const result = document.getElementById(`result-${chId}`); const scoreEl = document.getElementById(`score-${chId}`); const msgEl = document.getElementById(`score-msg-${chId}`); scoreEl.textContent = score; result.classList.add('show'); let msg = ''; if (score === 100) msg = '🎉 满分！太棒了！'; else if (score >= 80) msg = '👍 不错！再接再厉！'; else if (score >= 60) msg = '💪 及格了，还有提升空间！'; else msg = '📚 别灰心，复习一下再试试！'; msgEl.textContent = msg; // 标记测试完成 if (score >= 60) { markQuizDone(chId); } result.scrollIntoView({ behavior: 'smooth', block: 'center' }); } function resetQuiz(chId) { quizAnswers[chId] = {}; const ch = [...COURSE_DATA.book1.chapters, ...COURSE_DATA.book2.chapters].find(c => c.id === chId); ch.quiz.questions.forEach((q, qi) => { const questionEl = document.getElementById(`q-${chId}-${qi}`); if (questionEl) { questionEl.querySelectorAll('.quiz-option').forEach(opt => { opt.classList.remove('selected', 'correct', 'wrong'); }); document.getElementById(`explain-${chId}-${qi}`).classList.remove('show'); } }); const result = document.getElementById(`result-${chId}`); if (result) result.classList.remove('show'); } // ============================================================ // 学习进度管理 // ============================================================ function getProgress() { try { return JSON.parse(localStorage.getItem('physics_progress') || '{}'); } catch(e) { return {}; } } function saveProgress(data) { try { localStorage.setItem('physics_progress', JSON.stringify(data)); } catch(e) {} } function isSectionDone(chId, secId) { const p = getProgress(); return p.sections && p.sections.includes(`${chId}_${secId}`); } function markSectionDone(chId, secId, idx) { const p = getProgress(); if (!p.sections) p.sections = []; const key = `${chId}_${secId}`; if (!p.sections.includes(key)) { p.sections.push(key); saveProgress(p); } const btn = document.getElementById(`done-btn-${secId}`); if (btn) btn.textContent = '✅ 已学完'; // 更新进度条 if (currentView === 'chapter' && currentChapter) { const progress = getChapterProgress(currentChapter.id); const fill = document.querySelector('.progress-fill'); const text = document.querySelector('.progress-text'); if (fill) fill.style.width = progress.percent + '%'; if (text) text.textContent = `学习进度：${progress.done}/${progress.total} 节（${progress.percent}%）`; } } function markQuizDone(chId) { const p = getProgress(); if (!p.quizzes) p.quizzes = []; if (!p.quizzes.includes(chId)) { p.quizzes.push(chId); saveProgress(p); } } function getChapterProgress(chId) { const ch = [...COURSE_DATA.book1.chapters, ...COURSE_DATA.book2.chapters].find(c => c.id === chId); const p = getProgress(); const total = ch.sections.length; let done = 0; ch.sections.forEach(sec => { if (p.sections && p.sections.includes(`${chId}_${sec.id}`)) done++; }); return { done, total, percent: Math.round(done/total*100) }; } // ============================================================ // 渲染：重点总结 // ============================================================ function renderHighlights() { const hl = COURSE_DATA.highlights; const html = `

${hl.icon} ${hl.title}

${hl.subtitle}

${hl.sections.map(sec => `

${sec.icon} ${sec.title}
        ${sec.items.map(item => `
          
            ${item.name}
            ${item.points.map(p => `${p}
`).join('')}
          

        `).join('')}
      

`).join('')} `; document.getElementById('app').innerHTML = html; } // ============================================================ // 导航 // ============================================================ function switchTab(tab) { document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active')); document.querySelector(`[data-tab="${tab}"]`).classList.add('active'); if (tab === 'home') goHome(); else if (tab === 'highlights') { currentView = 'highlights'; renderHighlights(); window.scrollTo(0, 0); } } function goHome() { currentView = 'home'; currentChapter = null; document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active')); document.querySelector('[data-tab="home"]').classList.add('active'); renderHome(); window.scrollTo(0, 0); } // ============================================================ // 启动 // ============================================================ renderHome();