// Modül Detay + Ders Görünümü + Quiz + Canlı Prompt Denemesi // Module page + Lesson view + Quiz + Live prompt try function ModulePage({ moduleId, activeLesson, setActiveLesson, setPage, setModule, onComplete }) { const data = window.APP_DATA; const mod = data.modules[moduleId]; const lessonSet = data.lessonContent[moduleId] || data.lessonContent[0]; const t = window.t; const colorMap = { moss: '#4F9D52', sun: '#F2A63B', coral: '#E86A4F', lavender: '#8A7AD1', sky: '#5CA5C7', rose: '#D6739A', }; const mainColor = colorMap[mod.color]; if (activeLesson !== null) { const lesson = lessonSet.lessons[activeLesson]; return ( setActiveLesson(null)} onNext={() => { if (activeLesson < lessonSet.lessons.length - 1) setActiveLesson(activeLesson + 1); else setActiveLesson(null); }} onComplete={onComplete} /> ); } return (
{/* Back nav */} {/* Header banner */}
{t('common.module')} {String(mod.id + 1).padStart(2, '0')} {mod.level} {mod.duration}

{mod.title}

{mod.desc}

{mod.emoji}
{/* Two-column: lessons + sidebar */}
{/* Lesson list */}
{t('module.lessons_count_kicker')} {lessonSet.lessons.length} {t('module.lessons_count_kicker_suffix')}

{t('module.what_you_learn')}

{lessonSet.lessons.map((les, i) => { const moduleDone = (data.user && data.user.completed || []).includes(moduleId); const isDone = moduleDone; const typeLabel = { read: t('module.lesson_type_read'), practice: t('module.lesson_type_practice'), quiz: t('module.lesson_type_quiz'), activity: t('module.lesson_type_activity') }[les.type]; const typeColor = { read: 'sky', practice: 'sun', quiz: 'coral', activity: 'lavender' }[les.type]; const typeIcon = { read: 'book', practice: 'sparkle', quiz: 'check', activity: 'zap' }[les.type]; return ( ); })}
{/* Sidebar */}
); } // Ders içi görünüm (okuma + canlı prompt + quiz bir arada) function LessonView({ mod, lesson, lessonIndex, totalLessons, onBack, onNext, onComplete }) { const colorMap = { moss: '#4F9D52', sun: '#F2A63B', coral: '#E86A4F', lavender: '#8A7AD1', sky: '#5CA5C7', rose: '#D6739A', }; const mainColor = colorMap[mod.color]; const pct = ((lessonIndex + 1) / totalLessons) * 100; const t = window.t; return (
{/* Top bar */}
{t('lesson.lesson_x_of_y')} {lessonIndex + 1}/{totalLessons}
{/* Lesson header */}
{mod.title.toUpperCase()}

{lesson.title}

{lesson.duration}
{/* Content by type */} {lesson.type === 'read' && } {lesson.type === 'practice' && } {lesson.type === 'quiz' && } {lesson.type === 'activity' && } {/* Nav footer */} {lesson.type !== 'quiz' && (
)}
); } function ReadingContent({ mod, lesson, color }) { const readings = (window.APP_DATA && window.APP_DATA.readings) || {}; const t = window.t; const isEn = window.LANG === 'en'; const content = readings[lesson.title] || { intro: t('lesson.placeholder_intro'), sections: isEn ? [ { h: "Main idea", p: "Each module has 3-7 lessons. Lessons build on one another and end with a practice or short quiz to consolidate." }, { h: "Tip", list: ["Follow the lesson order", "Don't skip live tries — that's where you learn most", "You can take notes from the side panel"] }, ] : [ { h: "Ana fikir", p: "Her modülde 3-7 ders bulunur. Dersler birbiri üzerine inşa edilir, sonunda bir uygulama veya kısa test ile pekişir." }, { h: "İpucu", list: ["Ders sırasını takip edin", "Canlı denemeleri atlamayın — en çok orada öğrenirsiniz", "Notlarınızı sağdaki panelden alabilirsiniz"] }, ], quote: t('lesson.placeholder_quote'), }; return (

{content.intro}

{content.sections.map((s, i) => { if (s.activity) { const activities = (window.APP_DATA && window.APP_DATA.activities) || {}; const a = activities[s.activity]; if (!a) return null; return ; } if (s.simulator) { const scenarios = (window.APP_DATA && window.APP_DATA.simulatorScenarios) || {}; const sc = scenarios[s.simulator]; if (!sc) return null; return (
{s.h &&

{s.h}

} {s.p &&

{s.p}

}
); } return (
{s.h &&

{s.h}

} {s.p &&

{s.p}

} {s.list && (
    {s.list.map((item, j) => (
  • ● {item}
    • ))}
)} {s.prompt && } {s.mermaid && }
); })} {/* Pull-quote */}
"{content.quote}"
); } // Canlı prompt denemesi — modüle göre şablon alır function PracticeContent({ mod, color }) { const templates = (window.APP_DATA && window.APP_DATA.practiceTemplates) || {}; const template = templates[mod.id] || templates[2]; const t = window.t; const initialValues = {}; (template.fields || []).forEach(f => { initialValues[f.key] = f.default || ""; }); const [values, setValues] = useState(initialValues); const [generating, setGenerating] = useState(false); const [result, setResult] = useState(null); const promptText = template.buildPrompt(values); const handleGenerate = async () => { setGenerating(true); setResult(null); try { const response = await window.claude.complete(promptText); setResult(response); } catch (e) { setResult(template.fallback(values)); } setGenerating(false); }; const setField = (key, val) => setValues(prev => ({ ...prev, [key]: val })); return (
{template.title || t('practice.title_default')}

{template.intro || t('practice.intro_default')}

{/* Input form */}

{t('practice.step1_title')}

{template.fields.map((f, i) => ( ))}
{/* Prompt preview + result */}
{t('practice.prompt_caps')} 
{promptText}
{t('practice.output_caps')}
{generating ? ( ● {t('practice.generating_msg')} ) : result || {t('practice.placeholder_press')}}
); } function QuizContent({ onFinish, color, moduleId }) { const banks = (window.APP_DATA && window.APP_DATA.moduleQuizzes) || {}; const qs = banks[moduleId] || window.APP_DATA.quizQuestions; const [idx, setIdx] = useState(0); const [picked, setPicked] = useState(null); const [revealed, setRevealed] = useState(false); const [score, setScore] = useState(0); const [done, setDone] = useState(false); const t = window.t; const isEn = window.LANG === 'en'; const q = qs[idx]; const pick = (i) => { if (revealed) return; setPicked(i); setRevealed(true); if (i === q.correct) setScore(s => s + 1); }; const next = () => { if (idx < qs.length - 1) { setIdx(idx + 1); setPicked(null); setRevealed(false); } else { setDone(true); } }; if (done) { const pct = Math.round((score / qs.length) * 100); const passed = pct >= 67; return (
{passed ? '🎉' : '🌱'}

{passed ? t('quiz.great_job') : t('quiz.try_again_title')}

{isEn ? ( <>{t('quiz.score_intro_1')} {score} {t('quiz.score_intro_2')} {qs.length}. ({pct}%) ) : ( <>{qs.length} {t('quiz.score_intro_1')} {score}{t('quiz.score_intro_2')} (%{pct}) )}

); } return (
{t('quiz.question')} {idx + 1}/{qs.length} {t('quiz.correct_count')}: {score}

{q.q}

{q.options.map((opt, i) => { const isCorrect = i === q.correct; const isPicked = i === picked; let bg = 'var(--bg)', bd = 'var(--line)', fg = 'var(--ink)'; if (revealed) { if (isCorrect) { bg = 'var(--moss-soft)'; bd = 'var(--moss)'; fg = 'var(--moss-deep)'; } else if (isPicked) { bg = 'var(--coral-soft)'; bd = 'var(--coral)'; fg = '#9B3520'; } } return ( ); })}
{revealed && (
{t('quiz.explanation')} {q.explain}
)} {revealed && (
)}
); } function PromptBlock({ text, label, color }) { const [copied, setCopied] = useState(false); const tt = window.t; const handleCopy = async () => { try { await navigator.clipboard.writeText(text); setCopied(true); setTimeout(() => setCopied(false), 1800); } catch (e) { const ta = document.createElement('textarea'); ta.value = text; document.body.appendChild(ta); ta.select(); try { document.execCommand('copy'); setCopied(true); setTimeout(() => setCopied(false), 1800); } catch(_){} document.body.removeChild(ta); } }; return (
{(label || 'PROMPT').toUpperCase()} 
{text}
); } function MermaidBlock({ code }) { const ref = useRef(null); const idRef = useRef('mmd-' + Math.random().toString(36).slice(2, 9)); useEffect(() => { let cancelled = false; const render = async () => { if (!window.mermaid) { // Kütüphane yüklenmediyse 50ms aralıklarla bekle (max 3sn) for (let i = 0; i < 60; i++) { await new Promise(r => setTimeout(r, 50)); if (window.mermaid) break; } } if (cancelled || !ref.current || !window.mermaid) return; try { const { svg } = await window.mermaid.render(idRef.current, code); if (!cancelled && ref.current) ref.current.innerHTML = svg; } catch (err) { if (ref.current) ref.current.innerHTML = `
${window.t('diagram.failed')}
`; } }; render(); return () => { cancelled = true; }; }, [code]); return (
{window.t('diagram.loading')}
); } function InlineActivity({ a, sectionTitle, color }) { const t = window.t; const typeLabel = { compare: t('activity.compare_label'), predict: t('activity.predict_label'), sort: t('activity.sort_label') }[a.type] || t('activity.activity_label'); return (
{t('activity.now_you')} · {typeLabel}
{sectionTitle &&
{sectionTitle}
}

{a.intro}

{a.type === 'compare' && } {a.type === 'predict' && } {a.type === 'sort' && } {a.type === 'simulator' && }
); } function ActivityContent({ lesson, color }) { const activities = (window.APP_DATA && window.APP_DATA.activities) || {}; const a = activities[lesson.title]; const t = window.t; if (!a) { return (
{t('activity.preparing')}
); } return (
{t('activity.activity_label')} · {({ compare: t('activity.compare_label'), predict: t('activity.predict_label'), sort: t('activity.sort_label') })[a.type] || ''}

{a.intro}

{a.type === 'compare' && } {a.type === 'predict' && } {a.type === 'sort' && } {a.type === 'simulator' && }
); } function CompareCard({ a, color }) { const [picked, setPicked] = useState(null); const t = window.t; return (
{a.options.map((opt, i) => { const isPicked = picked === i; const isCorrect = opt.isCorrect; const showState = picked !== null; const borderColor = !showState ? 'var(--line)' : isPicked && isCorrect ? '#4F9D52' : isPicked && !isCorrect ? '#E86A4F' : !isPicked && isCorrect ? '#4F9D52' : 'var(--line)'; const bg = !showState ? 'var(--bg-elevated)' : isPicked && isCorrect ? 'rgba(79,157,82,0.06)' : isPicked && !isCorrect ? 'rgba(232,106,79,0.06)' : !isPicked && isCorrect ? 'rgba(79,157,82,0.06)' : 'var(--bg-elevated)'; return ( ); })}
{picked !== null && (
{a.options[picked].isCorrect ? t('activity.correct_kicker') : t('activity.wrong_kicker')}

{a.options[picked].isCorrect ? a.explanationCorrect : a.explanationWrong}

{!a.options[picked].isCorrect && ( )}
)}
); } function PredictCard({ a, color }) { const [guess, setGuess] = useState(''); const [revealed, setRevealed] = useState(false); const t = window.t; return (
{t('activity.given_prompt')}
{t('activity.your_guess')}