\u0645\u0633\u0627\u0628\u0642\u0647 \u0646\u0627\u0646\u0648\u0630\u0631\u0627\u062a \u0641\u0631\u0632\u0627\u0646\u06af\u0627\u0646<\/title><\/p>\n<p> \n <link rel=\"manifest\" href=\"manifest.json\" \/>\n <link rel=\"icon\" type=\"image\/svg+xml\" href=\"icon.svg\" \/>\n <link rel=\"apple-touch-icon\" href=\"icon.svg\" \/>\n<p> <br \/>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><\/p>\n<p> \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Vazirmatn:wght@300;400;700;900&display=swap\" rel=\"stylesheet\">\n<p> <br \/>\n <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script><br \/>\n <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script><br \/>\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script><\/p>\n<style>\n body {\n font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;\n overscroll-behavior-y: none;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n }\n \/* Custom Animations *\/\n @keyframes blob {\n 0% { transform: translate(0px, 0px) scale(1); }\n 33% { transform: translate(30px, -50px) scale(1.1); }\n 66% { transform: translate(-20px, 20px) scale(0.9); }\n 100% { transform: translate(0px, 0px) scale(1); }\n }\n .animate-blob { animation: blob 7s infinite; }\n .animation-delay-2000 { animation-delay: 2s; }\n .animation-delay-4000 { animation-delay: 4s; }\n @keyframes slide-up {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .animate-slide-up { animation: slide-up 0.5s ease-out; }\n @keyframes fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n .animate-fade-in { animation: fade-in 0.8s ease-out; }\n @keyframes scale-in {\n from { opacity: 0; transform: scale(0.9); }\n to { opacity: 1; transform: scale(1); }\n }\n .animate-scale-in { animation: scale-in 0.4s ease-out; }\n <\/style>\n<p> <br \/>\n <script type=\"importmap\">\n{\n \"imports\": {\n \"@google\/genai\": \"https:\/\/esm.sh\/@google\/genai@0.1.1\",\n \"react\": \"https:\/\/esm.sh\/react@^19.2.3\",\n \"react-dom\/\": \"https:\/\/esm.sh\/react-dom@^19.2.3\/\",\n \"react\/\": \"https:\/\/esm.sh\/react@^19.2.3\/\"\n }\n}\n<\/script><br \/>\n<\/head><br \/>\n <body class=\"bg-gray-50\"><\/p>\n<div id=\"root\"><\/div>\n<p> <br \/>\n <script type=\"text\/babel\" data-type=\"module\">\n import { GoogleGenAI, Type, Schema } from \"@google\/genai\";<\/p>\n<p> \/\/ --- Types & Constants ---\n const GameScreen = {\n WELCOME: 'WELCOME',\n LOADING: 'LOADING',\n QUIZ: 'QUIZ',\n RESULT: 'RESULT',\n };<\/p>\n<p> const STATIC_QUIZ_DATA = [\n {\n question: \"\u0646\u0627\u0646\u0648\u0630\u0631\u0627\u062a \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0686\u0647 \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u0627\u06cc \u062f\u0627\u0631\u0646\u062f\u061f\",\n options: [\"\u06f1 \u062a\u0627 \u06f1\u06f0\u06f0 \u0645\u06cc\u0644\u06cc\u200c\u0645\u062a\u0631\", \"\u06f1 \u062a\u0627 \u06f1\u06f0\u06f0 \u0645\u06cc\u06a9\u0631\u0648\u0645\u062a\u0631\", \"\u06f1 \u062a\u0627 \u06f1\u06f0\u06f0 \u0646\u0627\u0646\u0648\u0645\u062a\u0631\", \"\u06f1 \u062a\u0627 \u06f1\u06f0\u06f0 \u067e\u06cc\u06a9\u0648\u0645\u062a\u0631\"],\n correctAnswer: 2\n },\n {\n question: \"\u0639\u0644\u0645\u06cc \u06a9\u0647 \u0628\u0647 \u0645\u0637\u0627\u0644\u0639\u0647 \u0646\u0627\u0646\u0648\u0630\u0631\u0627\u062a \u0645\u06cc\u200c\u067e\u0631\u062f\u0627\u0632\u062f \u0686\u06cc\u0633\u062a\u061f\",\n options: [\"\u0645\u06cc\u06a9\u0631\u0648\u0628\u200c\u0634\u0646\u0627\u0633\u06cc\", \"\u0646\u0627\u0646\u0648\u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc\", \"\u0645\u06a9\u0627\u0646\u06cc\u06a9 \u06a9\u0648\u0627\u0646\u062a\u0648\u0645\u06cc\", \"\u0632\u06cc\u0633\u062a\u200c\u0641\u0646\u0627\u0648\u0631\u06cc\"],\n correctAnswer: 1\n },\n {\n question: \"\u06a9\u062f\u0627\u0645 \u06cc\u06a9 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0645\u0648\u0627\u062f \u062f\u0631 \u0645\u0642\u06cc\u0627\u0633 \u0646\u0627\u0646\u0648 \u062a\u063a\u06cc\u06cc\u0631 \u0686\u0634\u0645\u06af\u06cc\u0631\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f\u061f\",\n options: [\"\u0631\u0646\u06af \u0648 \u0648\u0627\u06a9\u0646\u0634\u200c\u067e\u0630\u06cc\u0631\u06cc\", \"\u062c\u0631\u0645 \u0645\u0648\u0644\u06cc\", \"\u0639\u062f\u062f \u0627\u062a\u0645\u06cc\", \"\u062a\u0639\u062f\u0627\u062f \u067e\u0631\u0648\u062a\u0648\u0646\u200c\u0647\u0627\"],\n correctAnswer: 0\n },\n {\n question: \"\u06a9\u062f\u0627\u0645 \u0646\u0627\u0646\u0648\u0630\u0631\u0647 \u062e\u0627\u0635\u06cc\u062a \u0636\u062f\u0628\u0627\u06a9\u062a\u0631\u06cc\u0627\u06cc\u06cc \u0642\u0648\u06cc \u062f\u0627\u0631\u062f\u061f\",\n options: [\"\u0646\u0627\u0646\u0648\u0630\u0631\u0627\u062a \u0637\u0644\u0627\", \"\u0646\u0627\u0646\u0648\u0630\u0631\u0627\u062a \u0646\u0642\u0631\u0647\", \"\u0646\u0627\u0646\u0648\u0630\u0631\u0627\u062a \u06a9\u0631\u0628\u0646\", \"\u0646\u0627\u0646\u0648\u0630\u0631\u0627\u062a \u0633\u06cc\u0644\u06cc\u0633\"],\n correctAnswer: 1\n },\n {\n question: \"\u0646\u06cc\u0631\u0648\u06cc \u063a\u0627\u0644\u0628 \u062f\u0631 \u0645\u0642\u06cc\u0627\u0633 \u0646\u0627\u0646\u0648 \u06a9\u062f\u0627\u0645 \u0627\u0633\u062a\u061f\",\n options: [\"\u0646\u06cc\u0631\u0648\u06cc \u06af\u0631\u0627\u0646\u0634\", \"\u0646\u06cc\u0631\u0648\u06cc \u0645\u063a\u0646\u0627\u0637\u06cc\u0633\u06cc \u0632\u0645\u06cc\u0646\", \"\u0646\u06cc\u0631\u0648\u06cc \u0648\u0627\u0646\u062f\u0631\u0648\u0627\u0644\u0633 \u0648 \u0633\u0637\u062d\", \"\u0646\u06cc\u0631\u0648\u06cc \u0627\u0635\u0637\u06a9\u0627\u06a9\"],\n correctAnswer: 2\n }\n ];<\/p>\n<p> const QUESTION_TIMER_SECONDS = 15;\n const CORRECT_ANSWER_POINTS = 10;<\/p>\n<p> \/\/ --- Gemini Service ---\n \/\/ Note: In a static HTML deployment, process.env is undefined. \n \/\/ This part will only work if an API key is manually provided or injected.\n \/\/ We default to an empty string to prevent crashes, and the app falls back to static data if API fails.\n const API_KEY = typeof process !== 'undefined' && process.env ? process.env.API_KEY : '';<\/p>\n<p> const fetchAIQuestions = async (count = 5) => {\n if (!API_KEY) throw new Error(\"API Key missing\");<\/p>\n<p> const ai = new GoogleGenAI({ apiKey: API_KEY });\n const responseSchema = {\n type: \"ARRAY\",\n items: {\n type: \"OBJECT\",\n properties: {\n question: { type: \"STRING\" },\n options: { type: \"ARRAY\", items: { type: \"STRING\" } },\n correctAnswer: { type: \"INTEGER\", description: \"Zero-based index (0-3)\" },\n },\n required: [\"question\", \"options\", \"correctAnswer\"],\n }\n };<\/p>\n<p> try {\n const response = await ai.models.generateContent({\n model: \"gemini-2.5-flash\",\n contents: `Generate ${count} multiple-choice questions about Nanotechnology and Nanoparticles in Persian language suitable for middle school students.`,\n config: {\n responseMimeType: \"application\/json\",\n responseSchema: responseSchema,\n },\n });<\/p>\n<p> if (response.text) {\n return JSON.parse(response.text);\n }\n throw new Error(\"No data\");\n } catch (error) {\n throw error;\n }\n };<\/p>\n<p> \/\/ --- Components ---<\/p>\n<p> const WelcomeScreen = ({ onStart }) => {\n const [name, setName] = React.useState('');\n const [deferredPrompt, setDeferredPrompt] = React.useState(null);<\/p>\n<p> React.useEffect(() => {\n const handler = (e) => {\n e.preventDefault();\n setDeferredPrompt(e);\n };\n window.addEventListener('beforeinstallprompt', handler);\n return () => window.removeEventListener('beforeinstallprompt', handler);\n }, []);<\/p>\n<p> const handleInstallClick = async () => {\n if (!deferredPrompt) return;\n deferredPrompt.prompt();\n const { outcome } = await deferredPrompt.userChoice;\n setDeferredPrompt(null);\n };<\/p>\n<p> const handleStart = (useAI) => {\n if (name.trim().length < 2) {\n alert(\"\u0644\u0637\u0641\u0627\u064b \u0646\u0627\u0645 \u062e\u0648\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f\");\n return;\n }\n onStart(name.trim(), useAI);\n };\n\n const currentDate = new Date().toLocaleDateString('fa-IR', { year: 'numeric', month: 'long', day: 'numeric' });\n\n return (\n \n\n<div className=\"flex flex-col items-center justify-center w-full min-h-[60vh] text-center space-y-8 animate-fade-in\">\n<div className=\"space-y-2\">\n<h1 className=\"text-4xl font-black text-pink-700 drop-shadow-sm\">\u0645\u0633\u0627\u0628\u0642\u0647 \u0639\u0644\u0645\u06cc \u0646\u0627\u0646\u0648\u0630\u0631\u0627\u062a<\/h1>\n<p className=\"text-pink-500 font-medium text-lg\">{currentDate}<\/p>\n<\/p><\/div>\n<div className=\"w-full max-w-xs space-y-6\">\n <input type=\"text\" value={name} onChange={(e) => setName(e.target.value)} placeholder=\"\u0646\u0627\u0645 \u062e\u0648\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f\" className=\"w-full p-4 text-center text-xl bg-white border-2 border-pink-300 rounded-2xl focus:border-pink-500 outline-none\" \/><\/p>\n<div className=\"space-y-3\">\n <button onClick={() => handleStart(false)} className=\"w-full py-4 bg-gradient-to-l from-pink-600 to-rose-500 text-white rounded-xl text-lg font-bold shadow-lg hover:-translate-y-1 transition-all\">\u0634\u0631\u0648\u0639 \u0645\u0633\u0627\u0628\u0642\u0647 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f<\/button>\n {\/* AI Button hidden if no API key is likely to work in static mode, or we can keep it for demo *\/}\n <button onClick={() => handleStart(true)} className=\"w-full py-4 bg-white border-2 border-indigo-200 text-indigo-600 rounded-xl text-lg font-bold hover:bg-indigo-50\">\u2728 \u0633\u0648\u0627\u0644\u0627\u062a \u0647\u0648\u0634\u0645\u0646\u062f (AI)<\/button>\n {deferredPrompt && (\n <button onClick={handleInstallClick} className=\"w-full py-3 bg-gray-900 text-white rounded-xl text-md font-bold shadow-md hover:bg-gray-800 flex items-center justify-center gap-2 mt-4\">\n <span>\ud83d\udcf1<\/span><span>\u0646\u0635\u0628 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646<\/span>\n <\/button>\n )}\n <\/div>\n<\/p><\/div>\n<div className=\"pt-8 text-gray-500 text-sm\">\n<p className=\"font-bold text-gray-600\">\u062f\u0628\u06cc\u0631\u0633\u062a\u0627\u0646 \u0641\u0631\u0632\u0627\u0646\u06af\u0627\u0646<\/p>\n<p>\u0647\u0627\u0646\u06cc\u0647 \u0639\u06cc\u0633\u0648\u0646\u062f \u062d\u0627\u062a\u0645\u06cc<\/p>\n<\/div><\/div>\n<p> );\n };<\/p>\n<p> const QuizScreen = ({ questions, onComplete }) => {\n const [idx, setIdx] = React.useState(0);\n const [score, setScore] = React.useState(0);\n const [time, setTime] = React.useState(QUESTION_TIMER_SECONDS);\n const [sel, setSel] = React.useState(null);\n const [ans, setAns] = React.useState(false);<\/p>\n<p> const currentQ = questions[idx];<\/p>\n<p> const next = React.useCallback(() => {\n if (idx < questions.length - 1) {\n setIdx(p => p + 1); setSel(null); setAns(false); setTime(QUESTION_TIMER_SECONDS);\n } else {\n onComplete(score);\n }\n }, [idx, questions.length, onComplete, score]);<\/p>\n<p> React.useEffect(() => {\n if (ans) return;\n if (time === 0) { setAns(true); setTimeout(next, 2000); return; }\n const t = setInterval(() => setTime(p => p - 1), 1000);\n return () => clearInterval(t);\n }, [time, ans, next]);<\/p>\n<p> const click = (i) => {\n if (ans) return;\n setSel(i); setAns(true);\n if (i === currentQ.correctAnswer) setScore(p => p + CORRECT_ANSWER_POINTS);\n setTimeout(next, 2000);\n };<\/p>\n<p> const getClass = (i) => {\n let c = \"w-full p-4 text-right bg-white border-2 rounded-xl text-lg font-medium transition-all \";\n if (!ans) return c + \"border-gray-200 hover:border-pink-400 text-gray-700\";\n if (i === currentQ.correctAnswer) return c + \"border-green-500 bg-green-100 text-green-800\";\n if (i === sel) return c + \"border-red-500 bg-red-100 text-red-800\";\n return c + \"border-gray-200 opacity-60\";\n };<\/p>\n<p> return (<\/p>\n<div className=\"w-full max-w-2xl mx-auto space-y-6\">\n<div className=\"flex justify-between items-center bg-white p-4 rounded-xl shadow-sm border border-pink-100\">\n<div className=\"flex items-center gap-2\"><span className=\"text-pink-600 font-bold text-xl\">{time}<\/span><span className=\"text-xs text-gray-400\">\u062b\u0627\u0646\u06cc\u0647<\/span><\/div>\n<div className=\"text-gray-600 font-medium\">\u0633\u0648\u0627\u0644 <span className=\"text-pink-600 font-bold\">{idx + 1}<\/span> \u0627\u0632 {questions.length}<\/div>\n<\/p><\/div>\n<div className=\"w-full bg-gray-200 rounded-full h-2.5\">\n<div className=\"bg-pink-600 h-2.5 rounded-full transition-all duration-500\" style={{ width: `${((idx + 1) \/ questions.length) * 100}%` }}><\/div>\n<\/div>\n<div className=\"bg-white rounded-2xl p-6 shadow-lg border border-pink-100 space-y-6 animate-slide-up\">\n<h2 className=\"text-2xl font-bold text-gray-800 text-right\">{currentQ.question}<\/h2>\n<div className=\"space-y-3\">\n {currentQ.options.map((o, i) => (\n <button key={i} onClick={() => click(i)} disabled={ans} className={getClass(i)}><\/p>\n<div className=\"flex items-center gap-3\"><span className=\"w-8 h-8 flex items-center justify-center rounded-full text-sm font-bold border bg-gray-100 border-gray-200\">{i + 1}<\/span><span>{o}<\/span><\/div>\n<p> <\/button>\n ))}\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> );\n };<\/p>\n<p> const ResultScreen = ({ result, onRestart, onHome }) => {\n const max = result.totalQuestions * CORRECT_ANSWER_POINTS;\n const pct = Math.round((result.score \/ max) * 100);\n const pass = pct >= 60;\n return (<\/p>\n<div className=\"flex flex-col items-center w-full max-w-lg mx-auto bg-white p-8 rounded-3xl shadow-2xl border-4 border-pink-100 space-y-8 animate-scale-in\">\n<div className={`w-32 h-32 rounded-full flex items-center justify-center text-4xl shadow-inner ${pass ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'}`}>{pass ? '\ud83c\udf89' : '\ud83d\udcaa'}<\/div>\n<div className=\"text-center space-y-2\">\n<h2 className=\"text-3xl font-black text-gray-800\">{pass ? '\u062a\u0628\u0631\u06cc\u06a9!' : '\u062a\u0644\u0627\u0634 \u062e\u0648\u0628!'}<\/h2>\n<h3 className=\"text-xl text-pink-600 font-bold\">{result.playerName}<\/h3>\n<\/div>\n<div className=\"w-full bg-gray-50 p-6 rounded-xl space-y-4 border border-gray-100\">\n<div className=\"flex justify-between\"><span>\u0627\u0645\u062a\u06cc\u0627\u0632 \u0634\u0645\u0627<\/span><span className=\"font-bold\">{result.score}<\/span><\/div>\n<div className=\"pt-4 border-t text-center font-medium\">{pass ? '\u0642\u0628\u0648\u0644 \u0634\u062f\u06cc\u062f!' : '\u0646\u0645\u0631\u0647 \u0642\u0628\u0648\u0644\u06cc \u06a9\u0633\u0628 \u0646\u06a9\u0631\u062f\u06cc\u062f.'}<\/div>\n<\/p><\/div>\n<div className=\"flex flex-col w-full gap-3\">\n <button onClick={onRestart} className=\"w-full py-3 bg-blue-600 text-white rounded-xl font-bold shadow-lg\">\u062a\u0644\u0627\u0634 \u0645\u062c\u062f\u062f<\/button>\n <button onClick={onHome} className=\"w-full py-3 bg-white border-2 border-gray-200 text-gray-600 rounded-xl font-bold\">\u0628\u0627\u0632\u06af\u0634\u062a<\/button>\n <\/div>\n<\/p><\/div>\n<p> );\n };<\/p>\n<p> \/\/ --- Main App ---\n const App = () => {\n const [screen, setScreen] = React.useState(GameScreen.WELCOME);\n const [name, setName] = React.useState('');\n const [data, setData] = React.useState(STATIC_QUIZ_DATA);\n const [lastScore, setLastScore] = React.useState(0);<\/p>\n<p> const start = async (n, ai) => {\n setName(n);\n if (ai) {\n setScreen(GameScreen.LOADING);\n try {\n const q = await fetchAIQuestions(5);\n setData(q); setScreen(GameScreen.QUIZ);\n } catch (e) {\n console.error(e);\n alert(\"\u062e\u0637\u0627 \u062f\u0631 \u0627\u062a\u0635\u0627\u0644 \u0628\u0647 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc (\u0627\u062d\u062a\u0645\u0627\u0644\u0627 \u06a9\u0644\u06cc\u062f API \u0645\u0648\u062c\u0648\u062f \u0646\u06cc\u0633\u062a). \u0627\u0632 \u0633\u0648\u0627\u0644\u0627\u062a \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.\");\n setData(STATIC_QUIZ_DATA); setScreen(GameScreen.QUIZ);\n }\n } else {\n setData(STATIC_QUIZ_DATA); setScreen(GameScreen.QUIZ);\n }\n };<\/p>\n<p> return (<\/p>\n<div className=\"min-h-screen bg-gradient-to-br from-pink-100 via-rose-100 to-pink-200 text-gray-800 font-sans p-4 md:p-6 flex flex-col items-center\">\n<div className=\"w-full max-w-4xl mx-auto flex-grow flex flex-col justify-center\">\n {screen === GameScreen.WELCOME && <WelcomeScreen onStart={start} \/>}\n {screen === GameScreen.LOADING && (<\/p>\n<div className=\"flex flex-col items-center justify-center space-y-6 animate-pulse\">\n<div className=\"w-16 h-16 border-4 border-pink-500 border-t-transparent rounded-full animate-spin\"><\/div>\n<p className=\"text-xl font-bold text-pink-700\">\u062f\u0631\u062d\u0627\u0644 \u0637\u0631\u0627\u062d\u06cc \u0633\u0648\u0627\u0644\u0627\u062a...<\/p>\n<\/p><\/div>\n<p> )}\n {screen === GameScreen.QUIZ && <QuizScreen questions={data} onComplete={(s) => { setLastScore(s); setScreen(GameScreen.RESULT); }} \/>}\n {screen === GameScreen.RESULT && <ResultScreen result={{ score: lastScore, totalQuestions: data.length, playerName: name }} onRestart={() => setScreen(GameScreen.QUIZ)} onHome={() => { setName(''); setScreen(GameScreen.WELCOME); }} \/>}\n <\/div>\n<div className=\"fixed top-0 left-0 w-64 h-64 bg-pink-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 -z-10 animate-blob\"><\/div>\n<div className=\"fixed top-0 right-0 w-64 h-64 bg-yellow-200 rounded-full mix-blend-multiply filter blur-3xl opacity-20 -z-10 animate-blob animation-delay-2000\"><\/div>\n<\/p><\/div>\n<p> );\n };<\/p>\n<p> const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(<App \/>);\n <\/script><\/p>\n<p> <script>\n \/\/ Service Worker Registration\n if ('serviceWorker' in navigator) {\n window.addEventListener('load', () => {\n navigator.serviceWorker.register('sw.js')\n .then(reg => console.log('SW Registered'))\n .catch(err => console.log('SW Error', err));\n });\n }\n <\/script><br \/>\n <\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u0633\u0627\u0628\u0642\u0647 \u0646\u0627\u0646\u0648\u0630\u0631\u0627\u062a \u0641\u0631\u0632\u0627\u0646\u06af\u0627\u0646<\/p>\n","protected":false},"author":26,"featured_media":865,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-864","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/khdez.ir\/index.php?rest_route=\/wp\/v2\/posts\/864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/khdez.ir\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/khdez.ir\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/khdez.ir\/index.php?rest_route=\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"https:\/\/khdez.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=864"}],"version-history":[{"count":2,"href":"https:\/\/khdez.ir\/index.php?rest_route=\/wp\/v2\/posts\/864\/revisions"}],"predecessor-version":[{"id":867,"href":"https:\/\/khdez.ir\/index.php?rest_route=\/wp\/v2\/posts\/864\/revisions\/867"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/khdez.ir\/index.php?rest_route=\/wp\/v2\/media\/865"}],"wp:attachment":[{"href":"https:\/\/khdez.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/khdez.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/khdez.ir\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":864,"date":"2025-12-13T04:52:58","date_gmt":"2025-12-13T01:22:58","guid":{"rendered":"https:\/\/khdez.ir\/?p=864"},"modified":"2025-12-13T10:05:46","modified_gmt":"2025-12-13T06:35:46","slug":"%d9%85%d8%b3%d8%a7%d8%a8%d9%82%d9%87-%d9%86%d8%a7%d9%86%d9%88%d8%b0%d8%b1%d8%a7%d8%aa-%d9%81%d8%b1%d8%b2%d8%a7%d9%86%da%af%d8%a7%d9%86","status":"publish","type":"post","link":"https:\/\/khdez.ir\/?p=864","title":{"rendered":"\u0645\u0633\u0627\u0628\u0642\u0647 \u0646\u0627\u0646\u0648\u0630\u0631\u0627\u062a \u0641\u0631\u0632\u0627\u0646\u06af\u0627\u0646"},"content":{"rendered":"

\n
\n
\n
\n
\n
\n
\n \u0645\u0633\u0627\u0628\u0642\u0647 \u0646\u0627\u0646\u0648\u0630\u0631\u0627\u062a \u0641\u0631\u0632\u0627\u0646\u06af\u0627\u0646<\/title><\/p>\n<p> \n <link rel=\"manifest\" href=\"manifest.json\" \/>\n <link rel=\"icon\" type=\"image\/svg+xml\" href=\"icon.svg\" \/>\n <link rel=\"apple-touch-icon\" href=\"icon.svg\" \/>\n<p> <br \/>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><\/p>\n<p> \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Vazirmatn:wght@300;400;700;900&display=swap\" rel=\"stylesheet\">\n<p> <br \/>\n <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script><br \/>\n <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script><br \/>\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script><\/p>\n<style>\n body {\n font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;\n overscroll-behavior-y: none;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n }\n \/* Custom Animations *\/\n @keyframes blob {\n 0% { transform: translate(0px, 0px) scale(1); }\n 33% { transform: translate(30px, -50px) scale(1.1); }\n 66% { transform: translate(-20px, 20px) scale(0.9); }\n 100% { transform: translate(0px, 0px) scale(1); }\n }\n .animate-blob { animation: blob 7s infinite; }\n .animation-delay-2000 { animation-delay: 2s; }\n .animation-delay-4000 { animation-delay: 4s; }\n @keyframes slide-up {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .animate-slide-up { animation: slide-up 0.5s ease-out; }\n @keyframes fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n .animate-fade-in { animation: fade-in 0.8s ease-out; }\n @keyframes scale-in {\n from { opacity: 0; transform: scale(0.9); }\n to { opacity: 1; transform: scale(1); }\n }\n .animate-scale-in { animation: scale-in 0.4s ease-out; }\n <\/style>\n<p> <br \/>\n <script type=\"importmap\">\n{\n \"imports\": {\n \"@google\/genai\": \"https:\/\/esm.sh\/@google\/genai@0.1.1\",\n \"react\": \"https:\/\/esm.sh\/react@^19.2.3\",\n \"react-dom\/\": \"https:\/\/esm.sh\/react-dom@^19.2.3\/\",\n \"react\/\": \"https:\/\/esm.sh\/react@^19.2.3\/\"\n }\n}\n<\/script><br \/>\n<\/head><br \/>\n <body class=\"bg-gray-50\"><\/p>\n<div id=\"root\"><\/div>\n<p> <br \/>\n <script type=\"text\/babel\" data-type=\"module\">\n import { GoogleGenAI, Type, Schema } from \"@google\/genai\";<\/p>\n<p> \/\/ --- Types & Constants ---\n const GameScreen = {\n WELCOME: 'WELCOME',\n LOADING: 'LOADING',\n QUIZ: 'QUIZ',\n RESULT: 'RESULT',\n };<\/p>\n<p> const STATIC_QUIZ_DATA = [\n {\n question: \"\u0646\u0627\u0646\u0648\u0630\u0631\u0627\u062a \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0686\u0647 \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u0627\u06cc \u062f\u0627\u0631\u0646\u062f\u061f\",\n options: [\"\u06f1 \u062a\u0627 \u06f1\u06f0\u06f0 \u0645\u06cc\u0644\u06cc\u200c\u0645\u062a\u0631\", \"\u06f1 \u062a\u0627 \u06f1\u06f0\u06f0 \u0645\u06cc\u06a9\u0631\u0648\u0645\u062a\u0631\", \"\u06f1 \u062a\u0627 \u06f1\u06f0\u06f0 \u0646\u0627\u0646\u0648\u0645\u062a\u0631\", \"\u06f1 \u062a\u0627 \u06f1\u06f0\u06f0 \u067e\u06cc\u06a9\u0648\u0645\u062a\u0631\"],\n correctAnswer: 2\n },\n {\n question: \"\u0639\u0644\u0645\u06cc \u06a9\u0647 \u0628\u0647 \u0645\u0637\u0627\u0644\u0639\u0647 \u0646\u0627\u0646\u0648\u0630\u0631\u0627\u062a \u0645\u06cc\u200c\u067e\u0631\u062f\u0627\u0632\u062f \u0686\u06cc\u0633\u062a\u061f\",\n options: [\"\u0645\u06cc\u06a9\u0631\u0648\u0628\u200c\u0634\u0646\u0627\u0633\u06cc\", \"\u0646\u0627\u0646\u0648\u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc\", \"\u0645\u06a9\u0627\u0646\u06cc\u06a9 \u06a9\u0648\u0627\u0646\u062a\u0648\u0645\u06cc\", \"\u0632\u06cc\u0633\u062a\u200c\u0641\u0646\u0627\u0648\u0631\u06cc\"],\n correctAnswer: 1\n },\n {\n question: \"\u06a9\u062f\u0627\u0645 \u06cc\u06a9 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0645\u0648\u0627\u062f \u062f\u0631 \u0645\u0642\u06cc\u0627\u0633 \u0646\u0627\u0646\u0648 \u062a\u063a\u06cc\u06cc\u0631 \u0686\u0634\u0645\u06af\u06cc\u0631\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f\u061f\",\n options: [\"\u0631\u0646\u06af \u0648 \u0648\u0627\u06a9\u0646\u0634\u200c\u067e\u0630\u06cc\u0631\u06cc\", \"\u062c\u0631\u0645 \u0645\u0648\u0644\u06cc\", \"\u0639\u062f\u062f \u0627\u062a\u0645\u06cc\", \"\u062a\u0639\u062f\u0627\u062f \u067e\u0631\u0648\u062a\u0648\u0646\u200c\u0647\u0627\"],\n correctAnswer: 0\n },\n {\n question: \"\u06a9\u062f\u0627\u0645 \u0646\u0627\u0646\u0648\u0630\u0631\u0647 \u062e\u0627\u0635\u06cc\u062a \u0636\u062f\u0628\u0627\u06a9\u062a\u0631\u06cc\u0627\u06cc\u06cc \u0642\u0648\u06cc \u062f\u0627\u0631\u062f\u061f\",\n options: [\"\u0646\u0627\u0646\u0648\u0630\u0631\u0627\u062a \u0637\u0644\u0627\", \"\u0646\u0627\u0646\u0648\u0630\u0631\u0627\u062a \u0646\u0642\u0631\u0647\", \"\u0646\u0627\u0646\u0648\u0630\u0631\u0627\u062a \u06a9\u0631\u0628\u0646\", \"\u0646\u0627\u0646\u0648\u0630\u0631\u0627\u062a \u0633\u06cc\u0644\u06cc\u0633\"],\n correctAnswer: 1\n },\n {\n question: \"\u0646\u06cc\u0631\u0648\u06cc \u063a\u0627\u0644\u0628 \u062f\u0631 \u0645\u0642\u06cc\u0627\u0633 \u0646\u0627\u0646\u0648 \u06a9\u062f\u0627\u0645 \u0627\u0633\u062a\u061f\",\n options: [\"\u0646\u06cc\u0631\u0648\u06cc \u06af\u0631\u0627\u0646\u0634\", \"\u0646\u06cc\u0631\u0648\u06cc \u0645\u063a\u0646\u0627\u0637\u06cc\u0633\u06cc \u0632\u0645\u06cc\u0646\", \"\u0646\u06cc\u0631\u0648\u06cc \u0648\u0627\u0646\u062f\u0631\u0648\u0627\u0644\u0633 \u0648 \u0633\u0637\u062d\", \"\u0646\u06cc\u0631\u0648\u06cc \u0627\u0635\u0637\u06a9\u0627\u06a9\"],\n correctAnswer: 2\n }\n ];<\/p>\n<p> const QUESTION_TIMER_SECONDS = 15;\n const CORRECT_ANSWER_POINTS = 10;<\/p>\n<p> \/\/ --- Gemini Service ---\n \/\/ Note: In a static HTML deployment, process.env is undefined. \n \/\/ This part will only work if an API key is manually provided or injected.\n \/\/ We default to an empty string to prevent crashes, and the app falls back to static data if API fails.\n const API_KEY = typeof process !== 'undefined' && process.env ? process.env.API_KEY : '';<\/p>\n<p> const fetchAIQuestions = async (count = 5) => {\n if (!API_KEY) throw new Error(\"API Key missing\");<\/p>\n<p> const ai = new GoogleGenAI({ apiKey: API_KEY });\n const responseSchema = {\n type: \"ARRAY\",\n items: {\n type: \"OBJECT\",\n properties: {\n question: { type: \"STRING\" },\n options: { type: \"ARRAY\", items: { type: \"STRING\" } },\n correctAnswer: { type: \"INTEGER\", description: \"Zero-based index (0-3)\" },\n },\n required: [\"question\", \"options\", \"correctAnswer\"],\n }\n };<\/p>\n<p> try {\n const response = await ai.models.generateContent({\n model: \"gemini-2.5-flash\",\n contents: `Generate ${count} multiple-choice questions about Nanotechnology and Nanoparticles in Persian language suitable for middle school students.`,\n config: {\n responseMimeType: \"application\/json\",\n responseSchema: responseSchema,\n },\n });<\/p>\n<p> if (response.text) {\n return JSON.parse(response.text);\n }\n throw new Error(\"No data\");\n } catch (error) {\n throw error;\n }\n };<\/p>\n<p> \/\/ --- Components ---<\/p>\n<p> const WelcomeScreen = ({ onStart }) => {\n const [name, setName] = React.useState('');\n const [deferredPrompt, setDeferredPrompt] = React.useState(null);<\/p>\n<p> React.useEffect(() => {\n const handler = (e) => {\n e.preventDefault();\n setDeferredPrompt(e);\n };\n window.addEventListener('beforeinstallprompt', handler);\n return () => window.removeEventListener('beforeinstallprompt', handler);\n }, []);<\/p>\n<p> const handleInstallClick = async () => {\n if (!deferredPrompt) return;\n deferredPrompt.prompt();\n const { outcome } = await deferredPrompt.userChoice;\n setDeferredPrompt(null);\n };<\/p>\n<p> const handleStart = (useAI) => {\n if (name.trim().length < 2) {\n alert(\"\u0644\u0637\u0641\u0627\u064b \u0646\u0627\u0645 \u062e\u0648\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f\");\n return;\n }\n onStart(name.trim(), useAI);\n };\n\n const currentDate = new Date().toLocaleDateString('fa-IR', { year: 'numeric', month: 'long', day: 'numeric' });\n\n return (\n \n\n<div className=\"flex flex-col items-center justify-center w-full min-h-[60vh] text-center space-y-8 animate-fade-in\">\n<div className=\"space-y-2\">\n<h1 className=\"text-4xl font-black text-pink-700 drop-shadow-sm\">\u0645\u0633\u0627\u0628\u0642\u0647 \u0639\u0644\u0645\u06cc \u0646\u0627\u0646\u0648\u0630\u0631\u0627\u062a<\/h1>\n<p className=\"text-pink-500 font-medium text-lg\">{currentDate}<\/p>\n<\/p><\/div>\n<div className=\"w-full max-w-xs space-y-6\">\n <input type=\"text\" value={name} onChange={(e) => setName(e.target.value)} placeholder=\"\u0646\u0627\u0645 \u062e\u0648\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f\" className=\"w-full p-4 text-center text-xl bg-white border-2 border-pink-300 rounded-2xl focus:border-pink-500 outline-none\" \/><\/p>\n<div className=\"space-y-3\">\n <button onClick={() => handleStart(false)} className=\"w-full py-4 bg-gradient-to-l from-pink-600 to-rose-500 text-white rounded-xl text-lg font-bold shadow-lg hover:-translate-y-1 transition-all\">\u0634\u0631\u0648\u0639 \u0645\u0633\u0627\u0628\u0642\u0647 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f<\/button>\n {\/* AI Button hidden if no API key is likely to work in static mode, or we can keep it for demo *\/}\n <button onClick={() => handleStart(true)} className=\"w-full py-4 bg-white border-2 border-indigo-200 text-indigo-600 rounded-xl text-lg font-bold hover:bg-indigo-50\">\u2728 \u0633\u0648\u0627\u0644\u0627\u062a \u0647\u0648\u0634\u0645\u0646\u062f (AI)<\/button>\n {deferredPrompt && (\n <button onClick={handleInstallClick} className=\"w-full py-3 bg-gray-900 text-white rounded-xl text-md font-bold shadow-md hover:bg-gray-800 flex items-center justify-center gap-2 mt-4\">\n <span>\ud83d\udcf1<\/span><span>\u0646\u0635\u0628 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646<\/span>\n <\/button>\n )}\n <\/div>\n<\/p><\/div>\n<div className=\"pt-8 text-gray-500 text-sm\">\n<p className=\"font-bold text-gray-600\">\u062f\u0628\u06cc\u0631\u0633\u062a\u0627\u0646 \u0641\u0631\u0632\u0627\u0646\u06af\u0627\u0646<\/p>\n<p>\u0647\u0627\u0646\u06cc\u0647 \u0639\u06cc\u0633\u0648\u0646\u062f \u062d\u0627\u062a\u0645\u06cc<\/p>\n<\/div><\/div>\n<p> );\n };<\/p>\n<p> const QuizScreen = ({ questions, onComplete }) => {\n const [idx, setIdx] = React.useState(0);\n const [score, setScore] = React.useState(0);\n const [time, setTime] = React.useState(QUESTION_TIMER_SECONDS);\n const [sel, setSel] = React.useState(null);\n const [ans, setAns] = React.useState(false);<\/p>\n<p> const currentQ = questions[idx];<\/p>\n<p> const next = React.useCallback(() => {\n if (idx < questions.length - 1) {\n setIdx(p => p + 1); setSel(null); setAns(false); setTime(QUESTION_TIMER_SECONDS);\n } else {\n onComplete(score);\n }\n }, [idx, questions.length, onComplete, score]);<\/p>\n<p> React.useEffect(() => {\n if (ans) return;\n if (time === 0) { setAns(true); setTimeout(next, 2000); return; }\n const t = setInterval(() => setTime(p => p - 1), 1000);\n return () => clearInterval(t);\n }, [time, ans, next]);<\/p>\n<p> const click = (i) => {\n if (ans) return;\n setSel(i); setAns(true);\n if (i === currentQ.correctAnswer) setScore(p => p + CORRECT_ANSWER_POINTS);\n setTimeout(next, 2000);\n };<\/p>\n<p> const getClass = (i) => {\n let c = \"w-full p-4 text-right bg-white border-2 rounded-xl text-lg font-medium transition-all \";\n if (!ans) return c + \"border-gray-200 hover:border-pink-400 text-gray-700\";\n if (i === currentQ.correctAnswer) return c + \"border-green-500 bg-green-100 text-green-800\";\n if (i === sel) return c + \"border-red-500 bg-red-100 text-red-800\";\n return c + \"border-gray-200 opacity-60\";\n };<\/p>\n<p> return (<\/p>\n<div className=\"w-full max-w-2xl mx-auto space-y-6\">\n<div className=\"flex justify-between items-center bg-white p-4 rounded-xl shadow-sm border border-pink-100\">\n<div className=\"flex items-center gap-2\"><span className=\"text-pink-600 font-bold text-xl\">{time}<\/span><span className=\"text-xs text-gray-400\">\u062b\u0627\u0646\u06cc\u0647<\/span><\/div>\n<div className=\"text-gray-600 font-medium\">\u0633\u0648\u0627\u0644 <span className=\"text-pink-600 font-bold\">{idx + 1}<\/span> \u0627\u0632 {questions.length}<\/div>\n<\/p><\/div>\n<div className=\"w-full bg-gray-200 rounded-full h-2.5\">\n<div className=\"bg-pink-600 h-2.5 rounded-full transition-all duration-500\" style={{ width: `${((idx + 1) \/ questions.length) * 100}%` }}><\/div>\n<\/div>\n<div className=\"bg-white rounded-2xl p-6 shadow-lg border border-pink-100 space-y-6 animate-slide-up\">\n<h2 className=\"text-2xl font-bold text-gray-800 text-right\">{currentQ.question}<\/h2>\n<div className=\"space-y-3\">\n {currentQ.options.map((o, i) => (\n <button key={i} onClick={() => click(i)} disabled={ans} className={getClass(i)}><\/p>\n<div className=\"flex items-center gap-3\"><span className=\"w-8 h-8 flex items-center justify-center rounded-full text-sm font-bold border bg-gray-100 border-gray-200\">{i + 1}<\/span><span>{o}<\/span><\/div>\n<p> <\/button>\n ))}\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> );\n };<\/p>\n<p> const ResultScreen = ({ result, onRestart, onHome }) => {\n const max = result.totalQuestions * CORRECT_ANSWER_POINTS;\n const pct = Math.round((result.score \/ max) * 100);\n const pass = pct >= 60;\n return (<\/p>\n<div className=\"flex flex-col items-center w-full max-w-lg mx-auto bg-white p-8 rounded-3xl shadow-2xl border-4 border-pink-100 space-y-8 animate-scale-in\">\n<div className={`w-32 h-32 rounded-full flex items-center justify-center text-4xl shadow-inner ${pass ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'}`}>{pass ? '\ud83c\udf89' : '\ud83d\udcaa'}<\/div>\n<div className=\"text-center space-y-2\">\n<h2 className=\"text-3xl font-black text-gray-800\">{pass ? '\u062a\u0628\u0631\u06cc\u06a9!' : '\u062a\u0644\u0627\u0634 \u062e\u0648\u0628!'}<\/h2>\n<h3 className=\"text-xl text-pink-600 font-bold\">{result.playerName}<\/h3>\n<\/div>\n<div className=\"w-full bg-gray-50 p-6 rounded-xl space-y-4 border border-gray-100\">\n<div className=\"flex justify-between\"><span>\u0627\u0645\u062a\u06cc\u0627\u0632 \u0634\u0645\u0627<\/span><span className=\"font-bold\">{result.score}<\/span><\/div>\n<div className=\"pt-4 border-t text-center font-medium\">{pass ? '\u0642\u0628\u0648\u0644 \u0634\u062f\u06cc\u062f!' : '\u0646\u0645\u0631\u0647 \u0642\u0628\u0648\u0644\u06cc \u06a9\u0633\u0628 \u0646\u06a9\u0631\u062f\u06cc\u062f.'}<\/div>\n<\/p><\/div>\n<div className=\"flex flex-col w-full gap-3\">\n <button onClick={onRestart} className=\"w-full py-3 bg-blue-600 text-white rounded-xl font-bold shadow-lg\">\u062a\u0644\u0627\u0634 \u0645\u062c\u062f\u062f<\/button>\n <button onClick={onHome} className=\"w-full py-3 bg-white border-2 border-gray-200 text-gray-600 rounded-xl font-bold\">\u0628\u0627\u0632\u06af\u0634\u062a<\/button>\n <\/div>\n<\/p><\/div>\n<p> );\n };<\/p>\n<p> \/\/ --- Main App ---\n const App = () => {\n const [screen, setScreen] = React.useState(GameScreen.WELCOME);\n const [name, setName] = React.useState('');\n const [data, setData] = React.useState(STATIC_QUIZ_DATA);\n const [lastScore, setLastScore] = React.useState(0);<\/p>\n<p> const start = async (n, ai) => {\n setName(n);\n if (ai) {\n setScreen(GameScreen.LOADING);\n try {\n const q = await fetchAIQuestions(5);\n setData(q); setScreen(GameScreen.QUIZ);\n } catch (e) {\n console.error(e);\n alert(\"\u062e\u0637\u0627 \u062f\u0631 \u0627\u062a\u0635\u0627\u0644 \u0628\u0647 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc (\u0627\u062d\u062a\u0645\u0627\u0644\u0627 \u06a9\u0644\u06cc\u062f API \u0645\u0648\u062c\u0648\u062f \u0646\u06cc\u0633\u062a). \u0627\u0632 \u0633\u0648\u0627\u0644\u0627\u062a \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.\");\n setData(STATIC_QUIZ_DATA); setScreen(GameScreen.QUIZ);\n }\n } else {\n setData(STATIC_QUIZ_DATA); setScreen(GameScreen.QUIZ);\n }\n };<\/p>\n<p> return (<\/p>\n<div className=\"min-h-screen bg-gradient-to-br from-pink-100 via-rose-100 to-pink-200 text-gray-800 font-sans p-4 md:p-6 flex flex-col items-center\">\n<div className=\"w-full max-w-4xl mx-auto flex-grow flex flex-col justify-center\">\n {screen === GameScreen.WELCOME && <WelcomeScreen onStart={start} \/>}\n {screen === GameScreen.LOADING && (<\/p>\n<div className=\"flex flex-col items-center justify-center space-y-6 animate-pulse\">\n<div className=\"w-16 h-16 border-4 border-pink-500 border-t-transparent rounded-full animate-spin\"><\/div>\n<p className=\"text-xl font-bold text-pink-700\">\u062f\u0631\u062d\u0627\u0644 \u0637\u0631\u0627\u062d\u06cc \u0633\u0648\u0627\u0644\u0627\u062a...<\/p>\n<\/p><\/div>\n<p> )}\n {screen === GameScreen.QUIZ && <QuizScreen questions={data} onComplete={(s) => { setLastScore(s); setScreen(GameScreen.RESULT); }} \/>}\n {screen === GameScreen.RESULT && <ResultScreen result={{ score: lastScore, totalQuestions: data.length, playerName: name }} onRestart={() => setScreen(GameScreen.QUIZ)} onHome={() => { setName(''); setScreen(GameScreen.WELCOME); }} \/>}\n <\/div>\n<div className=\"fixed top-0 left-0 w-64 h-64 bg-pink-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 -z-10 animate-blob\"><\/div>\n<div className=\"fixed top-0 right-0 w-64 h-64 bg-yellow-200 rounded-full mix-blend-multiply filter blur-3xl opacity-20 -z-10 animate-blob animation-delay-2000\"><\/div>\n<\/p><\/div>\n<p> );\n };<\/p>\n<p> const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(<App \/>);\n <\/script><\/p>\n<p> <script>\n \/\/ Service Worker Registration\n if ('serviceWorker' in navigator) {\n window.addEventListener('load', () => {\n navigator.serviceWorker.register('sw.js')\n .then(reg => console.log('SW Registered'))\n .catch(err => console.log('SW Error', err));\n });\n }\n <\/script><br \/>\n <\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u0633\u0627\u0628\u0642\u0647 \u0646\u0627\u0646\u0648\u0630\u0631\u0627\u062a \u0641\u0631\u0632\u0627\u0646\u06af\u0627\u0646<\/p>\n","protected":false},"author":26,"featured_media":865,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-864","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/khdez.ir\/index.php?rest_route=\/wp\/v2\/posts\/864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/khdez.ir\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/khdez.ir\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/khdez.ir\/index.php?rest_route=\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"https:\/\/khdez.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=864"}],"version-history":[{"count":2,"href":"https:\/\/khdez.ir\/index.php?rest_route=\/wp\/v2\/posts\/864\/revisions"}],"predecessor-version":[{"id":867,"href":"https:\/\/khdez.ir\/index.php?rest_route=\/wp\/v2\/posts\/864\/revisions\/867"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/khdez.ir\/index.php?rest_route=\/wp\/v2\/media\/865"}],"wp:attachment":[{"href":"https:\/\/khdez.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/khdez.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/khdez.ir\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}