{p.value}
);
})}
© ${year} All rights reserved to TheSo Smart Learning
`; if (format === 'pdf') { const printWindow = window.open('', '', 'height=600,width=800'); printWindow.document.write(`${content}
${footerHtml}`+footer; const source = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(sourceHTML); const fileDownload = document.createElement("a"); document.body.appendChild(fileDownload); fileDownload.href = source; fileDownload.download = `${filename}.doc`; fileDownload.click(); document.body.removeChild(fileDownload); } else if (format === 'ppt') { alert("PowerPoint export will download a slide outline text file."); const element = document.createElement("a"); const file = new Blob([`SLIDE 1: ${title}\n\nCONTENT:\n${content}${footerText}`], {type: 'text/plain'}); element.href = URL.createObjectURL(file); element.download = `${filename}_slides.txt`; document.body.appendChild(element); element.click(); } setShowExportModal(false); }; const handleSummarize = async () => { if (!summarizerInput.trim()) return; setGameState('loading'); const prompt = ` You are an expert study assistant. Summarize the following text for a student in ${LANGUAGE_NAMES[language]}. Text: "${summarizerInput}" Output format: 1. A brief overview paragraph (2-3 sentences). 2. Key Takeaways (bullet points). Use plain text formatting. No markdown. `; try { const result = await callGeminiAPI(prompt, 3, false); setSummarizerResult(result); setGameState('summarizer'); } catch (err) { setErrorMsg("Failed to summarize."); setGameState('error'); } }; const handleFileUpload = (e) => { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = (event) => { setSummarizerInput(event.target.result); }; reader.readAsText(file); }; const handleGenerateMnemonic = async () => { if (!mnemonicInput.trim()) return; setGameState('loading'); const prompt = ` Create a mnemonic device to help memorize the following list of items or facts: "${mnemonicInput}" Respond in ${LANGUAGE_NAMES[language]}. Provide: 1. An Acronym (if applicable). 2. A Rhyme or Catchy Phrase. 3. A short visualization/story. Use plain text formatting. No markdown. `; try { const result = await callGeminiAPI(prompt, 3, false); setMnemonicResult(result); setGameState('mnemonic'); } catch (err) { setErrorMsg("Failed to create mnemonic."); setGameState('error'); } }; const handleImageUpload = (e) => { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = () => { setSelectedImage(reader.result); }; reader.readAsDataURL(file); } }; const handleSmartSolve = async () => { if (!selectedImage && !contentInput.trim()) return; setGameState('loading'); let base64Data = null; if (selectedImage) { base64Data = selectedImage.split(',')[1]; } const prompt = ` You are an expert tutor. Analyze the provided ${selectedImage ? 'image' : 'text'} problem. ${contentInput ? `Additional User Context/Question: "${contentInput}"` : ''} Task: 1. Identify the problem or question. 2. Solve it step-by-step. 3. Explain the underlying concept clearly. Respond in ${LANGUAGE_NAMES[language]}. Use plain text formatting. Do not use Markdown symbols (like # or **). Do not use LaTeX math delimiters like '$'. Use plain text or Unicode for math. `; try { const result = await callGeminiAPI(prompt, 3, false, base64Data); setExplanationResult(result); setGameState('smartSolver'); } catch (err) { setErrorMsg("Failed to analyze content."); setGameState('error'); } }; const handleGenerateQuizFromContent = async () => { if (!contentInput.trim() && !selectedImage) return; setGameState('loading'); let base64Data = null; if (selectedImage) { base64Data = selectedImage.split(',')[1]; } const prompt = ` Analyze the provided content (text or image) and generate a practice quiz in ${LANGUAGE_NAMES[language]}. Content/Context: "${contentInput}" Generate 5 multiple-choice questions based specifically on this content. Try to generate different questions if you have seen this content before. Return ONLY a valid RAW JSON Array of objects. Each object must have: "id" (number), "question" (string), "options" (array of 4 strings), "answer" (string), "explanation" (string). Do not use LaTeX math delimiters like '$'. Use plain text or Unicode for math. `; try { const qs = await callGeminiAPI(prompt, 3, true, base64Data); setQuestions(qs); setScore(0); setUserAnswers({}); setCurrentQuestionIndex(0); setTopic(contentInput.substring(0, 30) + "..."); setGameState('quiz'); } catch (err) { setErrorMsg("Failed to generate quiz from content."); setGameState('error'); } }; const handleGenerateQuizFromTopic = async () => { if (!customQuizTopic.trim()) return; setGameState('loading'); const prompt = ` Generate a practice quiz with ${customQuizCount} multiple-choice questions about "${customQuizTopic}". Respond in ${LANGUAGE_NAMES[language]}. Return ONLY a valid RAW JSON Array of objects. Each object must have: "id" (number), "question" (string), "options" (array of 4 strings), "answer" (string), "explanation" (string). Do not use LaTeX math delimiters like '$'. Use plain text or Unicode for math. `; try { const qs = await callGeminiAPI(prompt); setQuestions(qs); setScore(0); setUserAnswers({}); setCurrentQuestionIndex(0); setTopic(customQuizTopic); setGameState('quiz'); } catch (err) { setErrorMsg("Failed to generate custom quiz."); setGameState('error'); } }; const handleExportQuiz = () => { const formattedQuestions = questions.map((q, i) => { return `${i+1}. ${q.question}\n a) ${q.options[0]}\n b) ${q.options[1]}\n c) ${q.options[2]}\n d) ${q.options[3]}\n`; }).join('\n'); const formattedAnswers = questions.map((q, i) => `${i+1}. ${q.answer}`).join('\n'); const fullContent = `QUIZ: ${topic || 'Custom Quiz'}\n\n${formattedQuestions}\n\n${'-'.repeat(20)}\nANSWER KEY\n\n${formattedAnswers}`; openExportModal(`Quiz - ${topic || 'Custom'}`, fullContent); }; const handleQuickExplain = async () => { if (!topic.trim()) return; setGameState('loading'); const prompt = ` Provide a ${explanationLevel} explanation for the following topic or problem: "${topic}" Respond in ${LANGUAGE_NAMES[language]}. If it is a math problem, solve it step-by-step. If it is a concept, explain it clearly using analogies if appropriate for the level. Use plain text formatting. Do not use Markdown symbols (like # or **). Do not use LaTeX math delimiters like '$'. Use plain text or Unicode for math. `; try { const result = await callGeminiAPI(prompt, 3, false); setExplanationResult(result); setGameState('quickExplain'); } catch (err) { setErrorMsg("Failed to get explanation."); setGameState('error'); } }; const handleGenerateFlashcards = async () => { if (!topic.trim()) return; setGameState('loading'); const prompt = ` Generate 8-10 educational flashcards for the topic: "${topic}". Respond in ${LANGUAGE_NAMES[language]}. Return ONLY a valid RAW JSON Array of objects. Each object must have: "front" (string - term or question), "back" (string - definition or answer). Do not use LaTeX math delimiters like '$'. Use plain text or Unicode for math. `; try { const cards = await callGeminiAPI(prompt); if (!Array.isArray(cards)) throw new Error("Invalid format"); setFlashcards(cards); setCurrentCardIndex(0); setIsCardFlipped(false); setGameState('flashcards'); } catch (err) { setErrorMsg("Failed to generate flashcards."); setGameState('error'); } }; const handleExplainCard = async () => { const currentCard = flashcards[currentCardIndex]; if (!currentCard) return; setGameState('loading'); const prompt = ` Provide a clear, detailed explanation for the concept: "${currentCard.front}" in the context of the subject: "${topic}". Respond in ${LANGUAGE_NAMES[language]}. Use plain text formatting. Do not use Markdown symbols (like # or **). Do not use LaTeX math delimiters like '$'. Use plain text or Unicode for math. `; try { const result = await callGeminiAPI(prompt, 3, false); setExplanationResult(result); setGameState('flashcardExplain'); } catch (err) { setErrorMsg("Failed to get explanation."); setGameState('flashcards'); } }; const handleGradeEssay = async () => { if (!essayText.trim() || !topic.trim()) return; setGameState('loading'); const prompt = ` Act as a strict academic examiner. Grade the following essay on the topic: "${topic}". Respond in ${LANGUAGE_NAMES[language]}. Essay Content: "${essayText}" Return ONLY a valid RAW JSON object with these fields: - "score": number (0 to 100) - "feedback": string (A concise summary of strengths and weaknesses, max 3 sentences. Do not use LaTeX ($) or Markdown (*, #).) - "improvements": array of strings (3 specific bullet points on how to improve. Do not use LaTeX ($) or Markdown (*, #).) `; try { const result = await callGeminiAPI(prompt); setEssayResult(result); setGameState('essayGrader'); } catch (err) { setErrorMsg("Failed to grade essay."); setGameState('error'); } }; const handleCreatePath = async () => { if (!topic.trim()) return; // Free plan limit: 1 new subject per day (All-Access = unlimited) const todayKey = new Date().toISOString().slice(0, 10); if (!isSubscriber) { if (user && !user.isAnonymous) { const daily = userProfile?.dailyLearning || { date: "", count: 0 }; const countToday = daily.date === todayKey ? (daily.count || 0) : 0; if (countToday >= 1) { setErrorMsg("Daily limit reached: free accounts can start 1 new subject per day. Upgrade to All-Access for unlimited subjects."); setPostSubscribeState('pathSelect'); setShowSubscribeModal(true); return; } } else { // Anonymous users: enforce the same limit using localStorage try { const raw = localStorage.getItem('dailyLearningAnon'); const daily = raw ? JSON.parse(raw) : { date: "", count: 0 }; const countToday = daily?.date === todayKey ? (daily?.count || 0) : 0; if (countToday >= 1) { setErrorMsg("Daily limit reached: free access can start 1 new subject per day. Create an account or upgrade to All-Access for unlimited subjects."); setShowAuthModal(true); return; } } catch (_) {} } } setGameState('loading'); const prompt = ` Create a comprehensive learning path syllabus for the subject: "${topic}". Break it down into 5-8 sequential modules/topics that go from beginner to advanced. Respond in ${LANGUAGE_NAMES[language]}. Return ONLY a valid RAW JSON Array of objects. Each object must have: "title" (string), "description" (string). Do not nest the array in an object. `; try { const modulesData = await callGeminiAPI(prompt); if (!Array.isArray(modulesData)) throw new Error("Invalid format"); const newPath = { subject: topic, type: 'general', createdAt: new Date().toISOString(), modules: modulesData.map((m) => ({ ...m, status: 'unlocked', score: null })) }; if (user && !user.isAnonymous) { await setDoc(doc(getLearningPathsCollectionRef(user.uid)), newPath); } else { const localPath = { ...newPath, id: Date.now().toString() }; setLearningPaths(prev => [...prev, localPath]); setCurrentPath(localPath); } // Update daily subject counter for free users if (!isSubscriber) { const todayKey2 = new Date().toISOString().slice(0, 10); if (user && !user.isAnonymous) { const profileRef2 = doc(db, 'artifacts', appId, 'users', user.uid, 'settings', 'profile'); const daily2 = userProfile?.dailyLearning || { date: "", count: 0 }; const countToday2 = daily2.date === todayKey2 ? (daily2.count || 0) : 0; const nextDaily2 = { date: todayKey2, count: countToday2 + 1 }; try { await updateDoc(profileRef2, { dailyLearning: nextDaily2 }); } catch (_) {} setUserProfile(prev => ({ ...(prev || {}), dailyLearning: nextDaily2 })); } else { try { const raw2 = localStorage.getItem('dailyLearningAnon'); const dailyAnon2 = raw2 ? JSON.parse(raw2) : { date: "", count: 0 }; const countTodayAnon2 = dailyAnon2?.date === todayKey2 ? (dailyAnon2?.count || 0) : 0; localStorage.setItem('dailyLearningAnon', JSON.stringify({ date: todayKey2, count: countTodayAnon2 + 1 })); } catch (_) {} } } setTopic(''); setGameState('pathSelect'); } catch (err) { setErrorMsg("Failed to generate path."); setGameState('error'); } }; const handleSelectPath = (path) => { setCurrentPath(path); setGameState('pathDashboard'); }; const handleViewLesson = async (index) => { if (!currentPath || !currentPath.modules) return; setCurrentModuleIndex(index); setGameState('loading'); const module = currentPath.modules[index]; const isExam = currentPath.type === 'exam'; let prompt; if (isExam) { prompt = ` You are an expert tutor preparing a student for the "${currentPath.examName}" exam. Write a detailed study lesson for the topic "${module.title}" in the subject "${currentPath.subject}". Respond in ${LANGUAGE_NAMES[language]}. Structure the lesson as follows: 1. Concept Explanation: Clear, concise explanation of the topic. 2. Key Formulas/Rules: (If applicable) Important rules to memorize. 3. Worked Examples: Provide 2 step-by-step examples similar to what appears on the ${currentPath.examName}. 4. Exam Tips: Common pitfalls and strategies for this topic. Use plain text formatting. Do not use Markdown symbols (like # or **). Do not use LaTeX math delimiters like '$'. Use plain text or Unicode for math. Use natural spacing to separate sections. `; } else { prompt = ` Write a comprehensive educational lesson about "${module.title}" specifically for the subject "${currentPath.subject}". The lesson should be detailed, clear, and explain concepts topic by topic. Respond in ${LANGUAGE_NAMES[language]}. Use plain text formatting. Do not use Markdown symbols (like # or **). Do not use LaTeX math delimiters like '$'. Use plain text or Unicode for math. Use natural spacing and numbering to structure the text. Return plain text. `; } try { const content = await callGeminiAPI(prompt, 3, false); setCurrentLessonContent(content); setGameState('lessonView'); } catch (err) { setErrorMsg("Failed to load lesson."); setGameState('error'); } }; const handleAddTopicToPath = async () => { if (!newTopicInput.trim() || !currentPath) return; const newModule = { title: newTopicInput, description: "User added topic", status: 'unlocked', score: null }; if (user && !user.isAnonymous) { const pathRef = getLearningPathDocRef(user.uid, currentPath.id); const updatedModules = [...currentPath.modules, newModule]; await updateDoc(pathRef, { modules: updatedModules }); } else { const updatedPath = { ...currentPath, modules: [...currentPath.modules, newModule] }; setCurrentPath(updatedPath); setLearningPaths(prev => prev.map(p => p.id === updatedPath.id ? updatedPath : p)); } setNewTopicInput(''); }; const handleStartPathQuiz = async (isRetake = false) => { if (!currentPath || !currentPath.modules) return; setGameState('loading'); const module = currentPath.modules[currentModuleIndex]; const isExam = currentPath.type === 'exam'; const variationInstruction = isRetake ? "Generate a completely NEW set of questions different from a standard set. " : ""; let prompt; if (isExam) { prompt = ` ${variationInstruction} Generate a practice quiz with 10 multiple-choice questions about "${module.title}" for the "${currentPath.examName}" exam in "${currentPath.subject}". The difficulty and style must match the ${currentPath.examName}. Respond in ${LANGUAGE_NAMES[language]}. Return ONLY a valid RAW JSON Array of objects. Each object must have: "id" (number), "question" (string), "options" (array of 4 strings), "answer" (string), "explanation" (string). Do not use LaTeX math delimiters like '$'. Use plain text or Unicode for math. Do not use Markdown symbols like '**' or '##'. `; } else { prompt = ` ${variationInstruction} Generate a quiz with 10 multiple-choice questions about "${module.title}" in the context of "${currentPath.subject}". Respond in ${LANGUAGE_NAMES[language]}. Return ONLY a valid RAW JSON Array of objects. Each object must have: "id" (number), "question" (string), "options" (array of 4 strings), "answer" (string), "explanation" (string). Do not use LaTeX math delimiters like '$'. Use plain text or Unicode for math. Do not use Markdown symbols like '**' or '##'. `; } try { const qs = await callGeminiAPI(prompt); setQuestions(qs); setScore(0); setUserAnswers({}); setCurrentQuestionIndex(0); setGameState('quiz'); } catch (err) { setErrorMsg("Failed to generate quiz."); setGameState('error'); } }; const handleGenerateExamPath = async (subject) => { setGameState('loading'); const examName = EXAM_DATA[selectedExamId].name; const prompt = ` Create a comprehensive Exam Preparation Syllabus for "${subject}" specifically for the "${examName}" exam. Break it down into 6-8 sequential topics (modules) that a student must master. Respond in ${LANGUAGE_NAMES[language]}. Return ONLY a valid RAW JSON Array of objects. Each object must have: "title" (string), "description" (string - brief summary of what this topic covers). Do not nest the array in an object. `; try { const modulesData = await callGeminiAPI(prompt); if (!Array.isArray(modulesData)) throw new Error("Invalid format"); const newPath = { subject: `${examName}: ${subject}`, examName: examName, type: 'exam', createdAt: new Date().toISOString(), modules: modulesData.map((m) => ({ ...m, status: 'unlocked', score: null })) }; if (user && !user.isAnonymous) { const pathRef = doc(getLearningPathsCollectionRef(user.uid)); setCurrentPath({ ...newPath, id: pathRef.id }); await setDoc(pathRef, newPath); } else { const localPath = { ...newPath, id: Date.now().toString() }; setLearningPaths(prev => [...prev, localPath]); setCurrentPath(localPath); } setGameState('pathDashboard'); } catch (err) { setErrorMsg("Failed to generate exam plan. Please try again."); setGameState('error'); } }; const handleAnswer = (option) => { const currentQ = questions[currentQuestionIndex]; if (userAnswers[currentQ.id]) return; const isCorrect = option === currentQ.answer; setUserAnswers(prev => ({ ...prev, [currentQ.id]: { selected: option, isCorrect } })); if (isCorrect) setScore(prev => prev + 1); }; const nextQuestion = () => { if (currentQuestionIndex < questions.length - 1) { setCurrentQuestionIndex(prev => prev + 1); } else { if (currentPath) { finishPathModule(); } else { setGameState('results'); } } }; const finishPathModule = async () => { const percentage = (score / questions.length) * 100; const passed = percentage >= 80; if (passed) { const updatedModules = [...currentPath.modules]; updatedModules[currentModuleIndex].status = 'completed'; updatedModules[currentModuleIndex].score = percentage; if (user && !user.isAnonymous) { const pathRef = getLearningPathDocRef(user.uid, currentPath.id); await updateDoc(pathRef, { modules: updatedModules }); } else { const updatedPath = { ...currentPath, modules: updatedModules }; setCurrentPath(updatedPath); setLearningPaths(prev => prev.map(p => p.id === updatedPath.id ? updatedPath : p)); } } setGameState('results'); }; const handleAskAI = (questionText) => { setIsChatOpen(true); const contextMsg = `I need help understanding this question: "${questionText}". Can you explain how to solve it? Respond in ${LANGUAGE_NAMES[language]}.`; handleChatSubmit(contextMsg, true); }; const handleChatSubmit = async (text, isAuto = false) => { if (!text.trim()) return; if (!isAuto) { setChatMessages(prev => [...prev, { role: 'user', text }]); setChatInput(''); } else { setChatMessages(prev => [...prev, { role: 'user', text }]); } setIsChatLoading(true); const systemPrompt = ` You are an expert AI Tutor. Respond in ${LANGUAGE_NAMES[language]}. Provide clear, helpful explanations broken down into short, readable paragraphs. Do NOT use Markdown headers (like ###). Do NOT use bolding (**). Do NOT use LaTeX math delimiters (like $). Use standard plain text and Unicode symbols for math. `; try { const response = await callGeminiAPI(systemPrompt + "\n\nUser: " + text, 3, false); setChatMessages(prev => [...prev, { role: 'assistant', text: response }]); if (isReading) { const u = new SpeechSynthesisUtterance(response); window.speechSynthesis.speak(u); } } catch (e) { setChatMessages(prev => [...prev, { role: 'assistant', text: "Error connecting to AI." }]); } finally { setIsChatLoading(false); } }; // --- Components --- const AuthModal = () => { const [mode, setMode] = useState('login'); const [formData, setFormData] = useState({ name: '', email: '', phone: '', password: '' }); const [gdprChecked, setGdprChecked] = useState(false); const [subscribeAllAccess, setSubscribeAllAccess] = useState(true); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); if (!showAuthModal) return null; const handleSubmit = async () => { setError(''); if (mode === 'register') { if (!gdprChecked) { setError("You must agree to the privacy policy to register."); return; } if (!formData.name || !formData.email || !formData.password || !formData.phone) { setError("All fields are required."); return; } } else { if (!formData.email || !formData.password) { setError("Email and password are required."); return; } } setLoading(true); try { if (mode === 'register') { const userCredential = await createUserWithEmailAndPassword(auth, formData.email, formData.password); await updateProfile(userCredential.user, { displayName: formData.name }); await setDoc(doc(db, 'artifacts', appId, 'users', userCredential.user.uid, 'settings', 'profile'), { name: formData.name, email: formData.email, phone: formData.phone, gdprConsent: true, gdprDate: new Date().toISOString(), role: 'student', dailyLearning: { date: '', count: 0 }, subscription: subscribeAllAccess ? { plan: 'all_access', status: 'active', startDate: new Date().toISOString() } : { plan: 'free', status: 'inactive' }, }); } else { await signInWithEmailAndPassword(auth, formData.email, formData.password); } setShowAuthModal(false); setGameState('menu'); } catch (e) { console.error(e); setError(String(e?.message || e)); } finally { setLoading(false); } }; return ({mode === 'login' ? 'Sign in to access your progress.' : 'Join to save your learning journey.'}
{error &&Note: This is a subscription flag in the app. To charge payments, connect Stripe/PayPal later.
{canUseProfiles ? 'Premium: create up to 5 profiles (family).' : 'Free: only your main profile.'}
Multiple profiles are available only with the All-Access subscription.
Tip: each profile has its own courses, grades, and certificates.
This action is permanent and cannot be undone. All your learning progress, notes, and profile data will be permanently deleted in compliance with GDPR.
{error &&Unlock every feature on TheSo Smart Learning.
This activation is a placeholder flag for your MVP. Connect Stripe/PayPal later to charge real subscriptions.
This admin panel uses your backend (Cloud Functions or Express) to create Stripe promo codes and grant temporary access. Configure BACKEND_BASE_URL and (for checkout) STRIPE_ALL_ACCESS_PRICE_ID at the top of this file.
{adminMsg && (Backend endpoints expected
{t('chatWelcome')}
{errorMsg || "We couldn't generate the content. Please try again."}
{isGuest ? "Session-only Mode" : "Student Dashboard"}
{isGuest && ({learningPaths.length}
{completedModules} / {totalModules}
{avgScore}%
You haven't completed any topics in this course yet.
You haven't started any learning paths yet.