ESOL Math Study Guide & Mastery Portfolio

Student: ___________________________ · Date: _________________

📚 Math Modules

🏆 Mastery Achievements

Progress: 0 / 10 Mastered
Bilingual Visual Concept Workspace
Loading lesson explanations...
✏️ Canvas Pencil:
Multilingual Vocabulary Studio
Check Understanding Quiz

Q1: Question content

ESOL Pronunciation Center
Click vocabulary cards or audio read-aloud buttons to hear math sentences pronounced slow and clear!
¡Haga clic en las tarjetas de vocabulario o en los botones de audio para escuchar las oraciones pronunciadas de manera lenta y clara!
Bilingual Study Notebook & Reflections
✨ Saved automatically
Diagnostics
`); reportWindow.document.close(); } else { window.print(); } } // ========================================== // 7. RENDER ENGINE (Bilingual layout builder) // ========================================== function renderUI() { validateConfig(); renderStaticLabels(); renderTopicsNav(); renderMainWorkspace(); renderVocabStudio(); renderQuizCard(); updateESOLHub(); renderMasteryHub(); } function renderStaticLabels() { const t = TRANSLATIONS[STATE.language]; document.getElementById('lbl-guides-list').innerText = t['quest-log']; document.getElementById('lbl-concept-title').innerText = t['card-workbench']; document.getElementById('lbl-vocab-studio').innerText = t['vocab-studio']; document.getElementById('lbl-check-understanding').innerText = t['check-understanding']; document.getElementById('lbl-esol-title').innerText = t['esol-title']; } function renderTopicsNav() { const container = document.getElementById('math-guide-list'); container.innerHTML = ''; for (let id in STUDY_GUIDE_DB) { const item = STUDY_GUIDE_DB[id]; const isActive = STATE.currentTopicId === id; const isDone = STATE.completedTopics.includes(id); const title = STATE.language === 'en' ? item.title : item.titleEs; container.innerHTML += `
${title} ${item.standard}
${isDone?'🎓':'🧭'}
`; } } let lastRenderedTopicId = null; function renderMainWorkspace() { const currentTopic = STUDY_GUIDE_DB[STATE.currentTopicId]; const explanation = STATE.language === 'en' ? currentTopic.explanation : currentTopic.explanationEs; // Clear sketchpad only if topic actually changed if (lastRenderedTopicId !== STATE.currentTopicId) { clearSketchpad(); lastRenderedTopicId = STATE.currentTopicId; } // Sync notepad textarea value const textarea = document.getElementById('notes-textarea'); if (textarea) { textarea.value = (STATE.notes && STATE.notes[STATE.currentTopicId]) || ''; } // Sync notepad autosave status message const statusEl = document.getElementById('notes-status-msg'); if (statusEl) { statusEl.innerText = STATE.language === 'en' ? '✨ Saved automatically' : '✨ Guardado automáticamente'; } // Render text with dynamic audio trigger button document.getElementById('explanation-container').innerHTML = `

${explanation}

`; // Draw SVG const svg = document.getElementById('svg-concept-canvas'); svg.innerHTML = ''; currentTopic.renderSvg(svg); } function renderVocabStudio() { const container = document.getElementById('vocab-bank-grid'); container.innerHTML = ''; const currentTopic = STUDY_GUIDE_DB[STATE.currentTopicId]; currentTopic.vocab.forEach(v => { const term = STATE.language === 'en' ? v.en : v.es; const subTerm = STATE.language === 'en' ? v.es : v.en; container.innerHTML += `
${term} ${subTerm}
`; }); } function renderQuizCard() { const currentTopic = STUDY_GUIDE_DB[STATE.currentTopicId]; const activeQuiz = currentTopic.quiz[0]; document.getElementById('quiz-q-title').innerText = activeQuiz.q; const list = document.getElementById('quiz-options-list'); list.innerHTML = ''; activeQuiz.options.forEach((opt, idx) => { let statusClass = ''; if (STATE.selectedAnswerIdx !== null) { if (idx === activeQuiz.correct) statusClass = 'correct'; else if (idx === STATE.selectedAnswerIdx) statusClass = 'wrong'; } list.innerHTML += `
${opt}
`; }); } function updateESOLHub() { const starter = document.getElementById('esol-starter'); const trans = document.getElementById('esol-starter-trans'); const lang = STATE.language; const t = TRANSLATIONS[lang]; const currentTopicKey = STATE.currentTopicId; starter.innerText = t[`${currentTopicKey}-starter`] || t['starter-default']; trans.innerText = t[`${currentTopicKey}-trans`] || t['starter-default-trans']; } function renderMasteryHub() { const total = Object.keys(STUDY_GUIDE_DB).length; const completedCount = STATE.completedTopics.length; const pct = total > 0 ? Math.round((completedCount / total) * 100) : 0; const ratioEl = document.getElementById('mastery-ratio'); if (ratioEl) { ratioEl.innerText = STATE.language === 'en' ? `${completedCount} / ${total} Mastered` : `${completedCount} / ${total} Dominado`; } const barEl = document.getElementById('mastery-progress-bar'); if (barEl) { barEl.style.width = `${pct}%`; } const grid = document.getElementById('badge-collection-grid'); if (grid) { grid.innerHTML = ''; for (let id in STUDY_GUIDE_DB) { const item = STUDY_GUIDE_DB[id]; const isDone = STATE.completedTopics.includes(id); const title = STATE.language === 'en' ? item.title : item.titleEs; const badgeSvg = getBadgeSvg(id, isDone); grid.innerHTML += `
${badgeSvg}
`; } } } function getBadgeSvg(topicId, isDone) { const strokeColor = isDone ? 'var(--primary)' : 'var(--outline)'; const fillColor = isDone ? 'rgba(20, 184, 166, 0.2)' : 'rgba(255, 255, 255, 0.05)'; switch (topicId) { case 'factors_multiples': return ` `; case 'fraction_division': return ` `; case 'ratio_tables': return ` `; case 'solving_equations': return ` `; case 'coordinate_plane': return ` `; case 'exponents_prime': return ` `; case 'volume_nets': return ` `; case 'absolute_value': return ` `; case 'ratios_percents': return ` `; case 'data_stats': return ` `; default: return ''; } } // ========================================== // 8. SELF-TEST SUITE & DIAGNOSTICS // ========================================== function logDiag(msg) { const el = document.getElementById('diag-log'); if (el) { el.innerHTML += `
[${new Date().toLocaleTimeString()}] ${msg}
`; el.scrollTop = el.scrollHeight; } } function triggerSelfTest() { document.getElementById('diag-panel').style.display = 'block'; document.getElementById('diag-log').innerHTML = ''; logDiag("Initiating ESOL Study Guide Player Self-Test..."); try { // Assert 1: Config is valid validateConfig(); logDiag("✓ Config validation successful."); // Assert 2: Database structure check const dbSize = Object.keys(STUDY_GUIDE_DB).length; logDiag(`✓ Validated Database topics count: ${dbSize} modules loaded.`); if (dbSize !== 10) { throw new Error(`Assertion failed: Expected 10 math modules, found ${dbSize}.`); } // Assert 3: Verification of all 10 expected standards const expectedModules = [ 'factors_multiples', 'fraction_division', 'ratio_tables', 'solving_equations', 'coordinate_plane', 'exponents_prime', 'volume_nets', 'absolute_value', 'ratios_percents', 'data_stats' ]; expectedModules.forEach(modId => { if (!STUDY_GUIDE_DB[modId]) { throw new Error(`Assertion failed: Module ${modId} missing from STUDY_GUIDE_DB.`); } if (!STUDY_GUIDE_DB[modId].quiz || STUDY_GUIDE_DB[modId].quiz.length === 0) { throw new Error(`Assertion failed: Quiz data missing for module ${modId}.`); } }); logDiag("✓ All 10 Grade 6 math standards exist and contain quizzes."); // Assert 4: LocalStorage Availability Check let storageCheck = false; try { localStorage.setItem('__test__', '1'); localStorage.removeItem('__test__'); storageCheck = true; } catch (e) {} logDiag(`✓ Checking browser localStorage persistence: ${storageCheck?'AVAILABLE':'UNAVAILABLE'}`); // Assert 5: Sketchpad Canvas Overlay existence const canvasEl = document.getElementById('sketchpad'); if (!canvasEl) { throw new Error("Assertion failed: Canvas element #sketchpad not found in DOM."); } const testCtx = canvasEl.getContext('2d'); if (!testCtx) { throw new Error("Assertion failed: Failed to get 2D rendering context for sketchpad."); } logDiag("✓ Sketchpad canvas element and 2D context verified successfully."); // Assert 6: Speech Utterance interface verify const isSpeechSupported = 'speechSynthesis' in window; logDiag(`✓ Checking browser Speech Synthesis API support: ${isSpeechSupported?'ACTIVE':'INACTIVE'}`); // Assert 7: Interactive Quiz validations const activeQuiz = STUDY_GUIDE_DB['factors_multiples'].quiz[0]; logDiag(`✓ Checking Quiz math correct option index: expected 2 (which is 6). Result: ${activeQuiz.correct}`); if (activeQuiz.correct !== 2) { throw new Error("Assertion failed: Quiz database answer index error."); } // Reset back to original transitionState({ currentTopicId: 'factors_multiples', selectedAnswerIdx: null }); logDiag("✓ Reset state variables back to defaults."); logDiag("🎉 ALL WORKBOOK CHECKS PASSED SUCCESSFULLY!"); } catch (err) { logDiag(`❌ SYSTEM CHECKS FAIL: ${err.message}`); console.error(err); } } // Initialize application on load window.addEventListener('DOMContentLoaded', () => { loadPersistedState(); initSketchpad(); renderUI(); });