{"id":22,"date":"2026-09-13T12:33:27","date_gmt":"2026-09-13T09:03:27","guid":{"rendered":"https:\/\/alootasisat.website\/?page_id=22"},"modified":"2026-09-13T12:48:01","modified_gmt":"2026-09-13T09:18:01","slug":"elementor-22","status":"publish","type":"page","link":"https:\/\/alootasisat.website\/?page_id=22","title":{"rendered":"Elementor #22"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \u0622\u0632\u0645\u0648\u0646 \u0622\u0646\u0644\u0627\u06cc\u0646 \u0632\u0628\u0627\u0646 \u0627\u0646\u06af\u0644\u06cc\u0633\u06cc \u0645\u0628\u062a\u062f\u06cc<\/title>\r\n <!-- \u0641\u0648\u0646\u062a \u0648\u0632\u06cc\u0631\u0645\u062a\u0646 \u0648 \u0622\u06cc\u06a9\u0648\u0646\u200c\u0647\u0627\u06cc FontAwesome -->\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <link href=\"https:\/\/cdn.jsdelivr.net\/gh\/rastikerdar\/vazirmatn@v33.003\/Vazirmatn-font-face.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\r\n <!-- \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u0641\u06a9\u062a \u06a9\u0627\u0646\u0641\u062a\u06cc (\u062c\u0634\u0646 \u067e\u06cc\u0631\u0648\u0632\u06cc) -->\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.6.0\/dist\/confetti.browser.min.js\"><\/script>\r\n\r\n <style>\r\n :root {\r\n --primary: #6366f1;\r\n --primary-hover: #4f46e5;\r\n --success: #10b981;\r\n --success-glow: rgba(16, 185, 129, 0.4);\r\n --danger: #ef4444;\r\n --danger-glow: rgba(239, 68, 68, 0.4);\r\n --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #311042 100%);\r\n --card-bg: rgba(255, 255, 255, 0.08);\r\n --card-border: rgba(255, 255, 255, 0.15);\r\n --text-main: #f8fafc;\r\n --text-muted: #94a3b8;\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Vazirmatn', sans-serif;\r\n user-select: none;\r\n }\r\n\r\n body {\r\n min-height: 100vh;\r\n background: var(--bg-gradient);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 20px;\r\n color: var(--text-main);\r\n overflow-x: hidden;\r\n position: relative;\r\n }\r\n\r\n \/* \u062d\u0628\u0627\u0628\u200c\u0647\u0627\u06cc \u0634\u0646\u0627\u0648\u0631 \u062f\u0631 \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 *\/\r\n .bg-circle {\r\n position: absolute;\r\n border-radius: 50%;\r\n filter: blur(80px);\r\n z-index: 0;\r\n animation: float 10s infinite alternate ease-in-out;\r\n }\r\n .circle-1 {\r\n width: 350px;\r\n height: 350px;\r\n background: rgba(99, 102, 241, 0.35);\r\n top: 5%;\r\n left: 10%;\r\n }\r\n .circle-2 {\r\n width: 300px;\r\n height: 300px;\r\n background: rgba(236, 72, 153, 0.3);\r\n bottom: 10%;\r\n right: 10%;\r\n animation-delay: -5s;\r\n }\r\n\r\n @keyframes float {\r\n 0% { transform: translateY(0) scale(1); }\r\n 100% { transform: translateY(40px) scale(1.1); }\r\n }\r\n\r\n \/* \u06a9\u0627\u0631\u062a \u0627\u0635\u0644\u06cc \u0622\u0632\u0645\u0648\u0646 *\/\r\n .quiz-card {\r\n position: relative;\r\n z-index: 1;\r\n width: 100%;\r\n max-width: 550px;\r\n background: var(--card-bg);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n border: 1px solid var(--card-border);\r\n border-radius: 28px;\r\n padding: 35px;\r\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n \/* \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0644\u0631\u0632\u0634 \u0628\u0631\u0627\u06cc \u067e\u0627\u0633\u062e \u0627\u0634\u062a\u0628\u0627\u0647 *\/\r\n .shake {\r\n animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\r\n }\r\n @keyframes shake {\r\n 10%, 90% { transform: translate3d(-2px, 0, 0); }\r\n 20%, 80% { transform: translate3d(4px, 0, 0); }\r\n 30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }\r\n 40%, 60% { transform: translate3d(6px, 0, 0); }\r\n }\r\n\r\n \/* \u0635\u0641\u062d\u0647 \u0634\u0631\u0648\u0639 *\/\r\n .start-screen {\r\n text-align: center;\r\n }\r\n .icon-badge {\r\n width: 80px;\r\n height: 80px;\r\n background: linear-gradient(135deg, #6366f1, #ec4899);\r\n border-radius: 24px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 36px;\r\n margin: 0 auto 20px;\r\n box-shadow: 0 10px 25px rgba(99, 102, 241, 0.4);\r\n }\r\n h2 {\r\n font-size: 24px;\r\n font-weight: 800;\r\n margin-bottom: 10px;\r\n }\r\n p.subtitle {\r\n color: var(--text-muted);\r\n font-size: 14px;\r\n margin-bottom: 25px;\r\n line-height: 1.6;\r\n }\r\n .input-box {\r\n margin-bottom: 25px;\r\n text-align: right;\r\n }\r\n .input-box label {\r\n display: block;\r\n font-size: 14px;\r\n margin-bottom: 8px;\r\n color: #cbd5e1;\r\n }\r\n .input-box input {\r\n width: 100%;\r\n padding: 14px 18px;\r\n border-radius: 14px;\r\n border: 1.5px solid var(--card-border);\r\n background: rgba(15, 23, 42, 0.6);\r\n color: #fff;\r\n font-size: 15px;\r\n outline: none;\r\n transition: 0.3s;\r\n }\r\n .input-box input:focus {\r\n border-color: var(--primary);\r\n box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);\r\n }\r\n\r\n \/* \u062f\u06a9\u0645\u0647\u200c\u0647\u0627 *\/\r\n .btn {\r\n width: 100%;\r\n padding: 15px;\r\n border: none;\r\n border-radius: 16px;\r\n background: linear-gradient(135deg, #6366f1, #8b5cf6);\r\n color: #fff;\r\n font-size: 16px;\r\n font-weight: 700;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n transition: all 0.3s;\r\n box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);\r\n }\r\n .btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 15px 25px rgba(99, 102, 241, 0.45);\r\n }\r\n .btn:active {\r\n transform: translateY(0);\r\n }\r\n\r\n \/* \u0647\u062f\u0631 \u0622\u0632\u0645\u0648\u0646 \u0648 \u0646\u0648\u0627\u0631 \u067e\u06cc\u0634\u0631\u0641\u062a *\/\r\n .quiz-header {\r\n margin-bottom: 20px;\r\n }\r\n .user-info-bar {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n font-size: 14px;\r\n color: var(--text-muted);\r\n margin-bottom: 12px;\r\n }\r\n .progress-container {\r\n width: 100%;\r\n height: 8px;\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: 10px;\r\n overflow: hidden;\r\n }\r\n .progress-bar {\r\n height: 100%;\r\n width: 0%;\r\n background: linear-gradient(90deg, #ec4899, #6366f1);\r\n border-radius: 10px;\r\n transition: width 0.4s ease;\r\n }\r\n\r\n \/* \u0628\u062e\u0634 \u0633\u0648\u0627\u0644\u0627\u062a *\/\r\n .question-box {\r\n direction: ltr;\r\n text-align: left;\r\n background: rgba(15, 23, 42, 0.5);\r\n border-radius: 18px;\r\n padding: 20px;\r\n margin-bottom: 20px;\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n }\r\n .question-box .q-title {\r\n font-size: 18px;\r\n font-weight: 700;\r\n color: #f1f5f9;\r\n line-height: 1.5;\r\n }\r\n\r\n \/* \u06af\u0632\u06cc\u0646\u0647\u200c\u0647\u0627 *\/\r\n .options-grid {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n direction: ltr;\r\n }\r\n .option-btn {\r\n width: 100%;\r\n padding: 16px 20px;\r\n border-radius: 16px;\r\n border: 1.5px solid var(--card-border);\r\n background: rgba(255, 255, 255, 0.03);\r\n color: #f8fafc;\r\n font-size: 16px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n text-align: left;\r\n transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n .option-btn:hover:not(.disabled) {\r\n background: rgba(255, 255, 255, 0.1);\r\n border-color: rgba(255, 255, 255, 0.3);\r\n transform: translateX(4px);\r\n }\r\n\r\n \/* \u062d\u0627\u0644\u062a\u200c\u0647\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0635\u062d\u06cc\u062d \u0648 \u063a\u0644\u0637 *\/\r\n .option-btn.correct {\r\n background: rgba(16, 185, 129, 0.25) !important;\r\n border-color: var(--success) !important;\r\n color: #a7f3d0 !important;\r\n box-shadow: 0 0 20px var(--success-glow);\r\n transform: scale(1.02);\r\n }\r\n .option-btn.wrong {\r\n background: rgba(239, 68, 68, 0.25) !important;\r\n border-color: var(--danger) !important;\r\n color: #fca5a5 !important;\r\n box-shadow: 0 0 20px var(--danger-glow);\r\n animation: pulseWrong 0.4s ease;\r\n }\r\n @keyframes pulseWrong {\r\n 0% { transform: scale(1); }\r\n 50% { transform: scale(0.97); }\r\n 100% { transform: scale(1); }\r\n }\r\n .option-btn.disabled {\r\n cursor: default;\r\n pointer-events: none;\r\n opacity: 0.7;\r\n }\r\n .option-btn.correct.disabled, .option-btn.wrong.disabled {\r\n opacity: 1;\r\n }\r\n\r\n \/* \u06a9\u0627\u0631\u0646\u0627\u0645\u0647 \u0646\u0647\u0627\u06cc\u06cc *\/\r\n .result-screen {\r\n text-align: center;\r\n }\r\n .score-circle {\r\n width: 140px;\r\n height: 140px;\r\n border-radius: 50%;\r\n background: conic-gradient(var(--primary) 0deg, rgba(255, 255, 255, 0.1) 0deg);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 20px auto 25px;\r\n position: relative;\r\n }\r\n .score-circle-inner {\r\n width: 116px;\r\n height: 116px;\r\n border-radius: 50%;\r\n background: #111827;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .score-circle-inner span.score-num {\r\n font-size: 32px;\r\n font-weight: 900;\r\n color: #fff;\r\n }\r\n .score-circle-inner span.score-lbl {\r\n font-size: 12px;\r\n color: var(--text-muted);\r\n }\r\n .stats-box {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n margin-bottom: 25px;\r\n }\r\n .stat-item {\r\n background: rgba(15, 23, 42, 0.5);\r\n padding: 14px;\r\n border-radius: 14px;\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n }\r\n .stat-item .val {\r\n font-size: 20px;\r\n font-weight: 800;\r\n margin-top: 5px;\r\n }\r\n .stat-item.correct .val { color: var(--success); }\r\n .stat-item.wrong .val { color: var(--danger); }\r\n\r\n .badge-level {\r\n display: inline-block;\r\n padding: 6px 16px;\r\n border-radius: 20px;\r\n font-size: 13px;\r\n font-weight: 700;\r\n margin-bottom: 20px;\r\n background: rgba(255,255,255,0.1);\r\n }\r\n\r\n .hidden {\r\n display: none !important;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- \u062d\u0628\u0627\u0628\u200c\u0647\u0627\u06cc \u0646\u0626\u0648\u0646\u06cc \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 -->\r\n <div class=\"bg-circle circle-1\"><\/div>\r\n <div class=\"bg-circle circle-2\"><\/div>\r\n\r\n <div class=\"quiz-card\" id=\"quizCard\">\r\n \r\n <!-- \u06f1. \u0641\u0631\u0645 \u0648\u0631\u0648\u062f \u0646\u0627\u0645 -->\r\n <div id=\"startScreen\" class=\"start-screen\">\r\n <div class=\"icon-badge\">\r\n <i class=\"fa-solid fa-graduation-cap\"><\/i>\r\n <\/div>\r\n <h2>\u0686\u0627\u0644\u0634 \u0632\u0628\u0627\u0646 \u0627\u0646\u06af\u0644\u06cc\u0633\u06cc<\/h2>\r\n <p class=\"subtitle\">\u0645\u06cc\u0632\u0627\u0646 \u062a\u0633\u0644\u0637 \u062e\u0648\u062f \u0628\u0631 \u06af\u0631\u0627\u0645\u0631 \u0648 \u06a9\u0644\u0645\u0627\u062a \u067e\u0627\u06cc\u0647 \u0627\u0646\u06af\u0644\u06cc\u0633\u06cc \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u0622\u0632\u0645\u0648\u0646 \u062c\u0630\u0627\u0628 \u0628\u0633\u0646\u062c\u06cc\u062f!<\/p>\r\n \r\n <div class=\"input-box\">\r\n <label for=\"userName\"><i class=\"fa-regular fa-user\"><\/i> \u0646\u0627\u0645 \u0648 \u0646\u0627\u0645\u200c\u062e\u0627\u0646\u0648\u0627\u062f\u06af\u06cc:<\/label>\r\n <input type=\"text\" id=\"userName\" placeholder=\"\u0645\u062b\u0644\u0627\u064b: \u0639\u0644\u06cc \u0631\u0636\u0627\u06cc\u06cc\" autocomplete=\"off\">\r\n <\/div>\r\n\r\n <button class=\"btn\" onclick=\"startQuiz()\">\r\n <span>\u0634\u0631\u0648\u0639 \u0622\u0632\u0645\u0648\u0646<\/span>\r\n <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- \u06f2. \u0635\u0641\u062d\u0647 \u0633\u0648\u0627\u0644\u0627\u062a \u0622\u0632\u0645\u0648\u0646 -->\r\n <div id=\"quizScreen\" class=\"hidden\">\r\n <div class=\"quiz-header\">\r\n <div class=\"user-info-bar\">\r\n <span id=\"displayUserName\"><i class=\"fa-solid fa-user-tag\"><\/i> <\/span>\r\n <span id=\"questionCount\">\u0633\u0648\u0627\u0644 \u06f1 \u0627\u0632 \u06f5<\/span>\r\n <\/div>\r\n <div class=\"progress-container\">\r\n <div class=\"progress-bar\" id=\"progressBar\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"question-box\">\r\n <div class=\"q-title\" id=\"questionText\">Question loading...<\/div>\r\n <\/div>\r\n\r\n <div class=\"options-grid\" id=\"optionsContainer\">\r\n <!-- \u06af\u0632\u06cc\u0646\u0647\u200c\u0647\u0627 \u0628\u0627 JS \u0633\u0627\u062e\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f -->\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u06f3. \u06a9\u0627\u0631\u0646\u0627\u0645\u0647 \u0648 \u0646\u062a\u06cc\u062c\u0647 \u0646\u0647\u0627\u06cc\u06cc -->\r\n <div id=\"resultScreen\" class=\"result-screen hidden\">\r\n <h2 id=\"resultTitle\">\u0646\u062a\u06cc\u062c\u0647 \u0622\u0632\u0645\u0648\u0646<\/h2>\r\n <div id=\"resultUser\" style=\"color: var(--text-muted); font-size: 14px; margin-top: 4px;\"><\/div>\r\n \r\n <div class=\"score-circle\" id=\"scoreCircle\">\r\n <div class=\"score-circle-inner\">\r\n <span class=\"score-num\" id=\"scorePercent\">0%<\/span>\r\n <span class=\"score-lbl\">\u0627\u0645\u062a\u06cc\u0627\u0632 \u06a9\u0644<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"levelBadge\" class=\"badge-level\">\u0633\u0637\u062d \u0627\u0631\u0632\u06cc\u0627\u0628\u06cc<\/div>\r\n\r\n <div class=\"stats-box\">\r\n <div class=\"stat-item correct\">\r\n <div><i class=\"fa-solid fa-circle-check\"><\/i> \u067e\u0627\u0633\u062e\u200c\u0647\u0627\u06cc \u062f\u0631\u0633\u062a<\/div>\r\n <div class=\"val\" id=\"correctCount\">0<\/div>\r\n <\/div>\r\n <div class=\"stat-item wrong\">\r\n <div><i class=\"fa-solid fa-circle-xmark\"><\/i> \u067e\u0627\u0633\u062e\u200c\u0647\u0627\u06cc \u0646\u0627\u062f\u0631\u0633\u062a<\/div>\r\n <div class=\"val\" id=\"wrongCount\">0<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <button class=\"btn\" onclick=\"restartQuiz()\">\r\n <i class=\"fa-solid fa-rotate-right\"><\/i>\r\n <span>\u062a\u0644\u0627\u0634 \u0645\u062c\u062f\u062f<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <script>\r\n \/\/ \u0628\u0627\u0646\u06a9 \u0633\u0648\u0627\u0644\u0627\u062a \u0633\u0637\u062d \u0645\u0628\u062a\u062f\u06cc \u0627\u0646\u06af\u0644\u06cc\u0633\u06cc (\u0647\u0645\u0631\u0627\u0647 \u0628\u0627 \u0645\u0634\u062e\u0635 \u0628\u0648\u062f\u0646 \u06a9\u0644\u06cc\u062f \u067e\u0627\u0633\u062e)\r\n const questions = [\r\n {\r\n question: \"1. She _______ a doctor at the central hospital.\",\r\n options: [\"is\", \"are\", \"am\", \"be\"],\r\n answer: 0\r\n },\r\n {\r\n question: \"2. Which word is the opposite (\u0645\u062a\u0636\u0627\u062f) of 'Expensive'?\",\r\n options: [\"Difficult\", \"Cheap\", \"Fast\", \"Heavy\"],\r\n answer: 1\r\n },\r\n {\r\n question: \"3. They _______ to school by bus every morning.\",\r\n options: [\"goes\", \"going\", \"go\", \"gone\"],\r\n answer: 2\r\n },\r\n {\r\n question: \"4. I am looking for _______ apple to eat.\",\r\n options: [\"a\", \"an\", \"the\", \"two\"],\r\n answer: 1\r\n },\r\n {\r\n question: \"5. What time _______ you wake up yesterday?\",\r\n options: [\"do\", \"does\", \"are\", \"did\"],\r\n answer: 3\r\n }\r\n ];\r\n\r\n let currentQuestionIndex = 0;\r\n let score = 0;\r\n let userName = \"\";\r\n\r\n \/\/ \u0633\u06cc\u0633\u062a\u0645 \u0635\u0648\u062a\u06cc \u06a9\u0648\u062a\u0627\u0647 \u0628\u0627 AudioContext \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0641\u0627\u06cc\u0644 \u062e\u0627\u0631\u062c\u06cc\r\n const audioCtx = new (window.AudioContext || window.webkitAudioContext)();\r\n \r\n function playSound(type) {\r\n try {\r\n const osc = audioCtx.createOscillator();\r\n const gain = audioCtx.createGain();\r\n osc.connect(gain);\r\n gain.connect(audioCtx.destination);\r\n\r\n if (type === 'correct') {\r\n osc.type = 'triangle';\r\n osc.frequency.setValueAtTime(523.25, audioCtx.currentTime); \/\/ C5\r\n osc.frequency.exponentialRampToValueAtTime(880, audioCtx.currentTime + 0.2); \/\/ A5\r\n gain.gain.setValueAtTime(0.3, audioCtx.currentTime);\r\n gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.3);\r\n osc.start();\r\n osc.stop(audioCtx.currentTime + 0.3);\r\n } else {\r\n osc.type = 'sawtooth';\r\n osc.frequency.setValueAtTime(220, audioCtx.currentTime); \/\/ A3\r\n osc.frequency.exponentialRampToValueAtTime(110, audioCtx.currentTime + 0.25); \/\/ A2\r\n gain.gain.setValueAtTime(0.3, audioCtx.currentTime);\r\n gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.3);\r\n osc.start();\r\n osc.stop(audioCtx.currentTime + 0.3);\r\n }\r\n } catch (e) {\r\n \/\/ \u0646\u0627\u062f\u06cc\u062f\u0647 \u06af\u0631\u0641\u062a\u0646 \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u062d\u062f\u0648\u062f\u06cc\u062a \u0635\u062f\u0627 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f\r\n }\r\n }\r\n\r\n function startQuiz() {\r\n const nameInput = document.getElementById(\"userName\");\r\n if (!nameInput.value.trim()) {\r\n nameInput.focus();\r\n nameInput.style.borderColor = \"#ef4444\";\r\n setTimeout(() => nameInput.style.borderColor = \"var(--card-border)\", 1500);\r\n return;\r\n }\r\n\r\n userName = nameInput.value.trim();\r\n document.getElementById(\"startScreen\").classList.add(\"hidden\");\r\n document.getElementById(\"quizScreen\").classList.remove(\"hidden\");\r\n document.getElementById(\"displayUserName\").innerHTML = `<i class=\"fa-solid fa-user\"><\/i> ${userName}`;\r\n\r\n currentQuestionIndex = 0;\r\n score = 0;\r\n loadQuestion();\r\n }\r\n\r\n function loadQuestion() {\r\n const q = questions[currentQuestionIndex];\r\n document.getElementById(\"questionText\").textContent = q.question;\r\n document.getElementById(\"questionCount\").textContent = `\u0633\u0648\u0627\u0644 ${currentQuestionIndex + 1} \u0627\u0632 ${questions.length}`;\r\n \r\n const progressPercent = ((currentQuestionIndex) \/ questions.length) * 100;\r\n document.getElementById(\"progressBar\").style.width = `${progressPercent}%`;\r\n\r\n const optionsContainer = document.getElementById(\"optionsContainer\");\r\n optionsContainer.innerHTML = \"\";\r\n\r\n q.options.forEach((opt, index) => {\r\n const btn = document.createElement(\"button\");\r\n btn.className = \"option-btn\";\r\n btn.innerHTML = `<span><b>${String.fromCharCode(65 + index)}.<\/b> ${opt}<\/span> <i class=\"fa-regular fa-circle\"><\/i>`;\r\n btn.onclick = () => checkAnswer(index, btn);\r\n optionsContainer.appendChild(btn);\r\n });\r\n }\r\n\r\n function checkAnswer(selectedIndex, selectedBtn) {\r\n const q = questions[currentQuestionIndex];\r\n const allButtons = document.querySelectorAll(\".option-btn\");\r\n const quizCard = document.getElementById(\"quizCard\");\r\n\r\n \/\/ \u0642\u0641\u0644 \u06a9\u0631\u062f\u0646 \u06a9\u0644\u06cc\u06a9\u200c\u0647\u0627\r\n allButtons.forEach(btn => btn.classList.add(\"disabled\"));\r\n\r\n if (selectedIndex === q.answer) {\r\n \/\/ \u067e\u0627\u0633\u062e \u062f\u0631\u0633\u062a\r\n selectedBtn.classList.add(\"correct\");\r\n selectedBtn.querySelector(\"i\").className = \"fa-solid fa-circle-check\";\r\n playSound('correct');\r\n score++;\r\n } else {\r\n \/\/ \u067e\u0627\u0633\u062e \u0646\u0627\u062f\u0631\u0633\u062a\r\n selectedBtn.classList.add(\"wrong\");\r\n selectedBtn.querySelector(\"i\").className = \"fa-solid fa-circle-xmark\";\r\n quizCard.classList.add(\"shake\");\r\n setTimeout(() => quizCard.classList.remove(\"shake\"), 500);\r\n playSound('wrong');\r\n\r\n \/\/ \u0631\u0648\u0634\u0646 \u06a9\u0631\u062f\u0646 \u06af\u0632\u06cc\u0646\u0647 \u062f\u0631\u0633\u062a \u062c\u0647\u062a \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc\r\n allButtons[q.answer].classList.add(\"correct\");\r\n allButtons[q.answer].querySelector(\"i\").className = \"fa-solid fa-circle-check\";\r\n }\r\n\r\n \/\/ \u0627\u0646\u062a\u0642\u0627\u0644 \u0628\u0647 \u0633\u0648\u0627\u0644 \u0628\u0639\u062f \u067e\u0633 \u0627\u0632 \u06f1.\u06f2 \u062b\u0627\u0646\u06cc\u0647 \u0645\u06a9\u062b\r\n setTimeout(() => {\r\n currentQuestionIndex++;\r\n if (currentQuestionIndex < questions.length) {\r\n loadQuestion();\r\n } else {\r\n showResult();\r\n }\r\n }, 1200);\r\n }\r\n\r\n function showResult() {\r\n document.getElementById(\"progressBar\").style.width = `100%`;\r\n document.getElementById(\"quizScreen\").classList.add(\"hidden\");\r\n document.getElementById(\"resultScreen\").classList.remove(\"hidden\");\r\n\r\n const percentage = Math.round((score \/ questions.length) * 100);\r\n document.getElementById(\"resultUser\").textContent = `\u06a9\u0627\u0631\u0646\u0627\u0645\u0647 \u0622\u0632\u0645\u0648\u0646: ${userName}`;\r\n document.getElementById(\"scorePercent\").textContent = `${percentage}%`;\r\n document.getElementById(\"correctCount\").textContent = score;\r\n document.getElementById(\"wrongCount\").textContent = questions.length - score;\r\n\r\n \/\/ \u0631\u0646\u06af\u200c\u0622\u0645\u06cc\u0632\u06cc \u06af\u0631\u0627\u062f\u06cc\u0627\u0646 \u062f\u0627\u06cc\u0631\u0647 \u0646\u062a\u06cc\u062c\u0647 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0646\u0645\u0631\u0647\r\n const circle = document.getElementById(\"scoreCircle\");\r\n const color = percentage >= 70 ? \"#10b981\" : percentage >= 40 ? \"#f59e0b\" : \"#ef4444\";\r\n circle.style.background = `conic-gradient(${color} ${percentage * 3.6}deg, rgba(255, 255, 255, 0.1) 0deg)`;\r\n\r\n \/\/ \u0633\u0637\u062d\u200c\u0628\u0646\u062f\u06cc \u0648 \u0628\u062c\r\n const badge = document.getElementById(\"levelBadge\");\r\n if (percentage >= 80) {\r\n badge.textContent = \"\u0633\u0637\u062d \u0634\u0645\u0627: \u0639\u0627\u0644\u06cc (A+) \u2b50\";\r\n badge.style.color = \"#10b981\";\r\n badge.style.border = \"1px solid #10b981\";\r\n \/\/ \u0627\u0641\u06a9\u062a \u06a9\u0627\u0646\u0641\u062a\u06cc (\u062c\u0634\u0646 \u067e\u06cc\u0631\u0648\u0632\u06cc)\r\n confetti({\r\n particleCount: 100,\r\n spread: 70,\r\n origin: { y: 0.6 }\r\n });\r\n } else if (percentage >= 50) {\r\n badge.textContent = \"\u0633\u0637\u062d \u0634\u0645\u0627: \u0645\u062a\u0648\u0633\u0637 (B) \ud83d\udc4d\";\r\n badge.style.color = \"#f59e0b\";\r\n badge.style.border = \"1px solid #f59e0b\";\r\n } else {\r\n badge.textContent = \"\u0633\u0637\u062d \u0634\u0645\u0627: \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062a\u0645\u0631\u06cc\u0646 \u0628\u06cc\u0634\u062a\u0631 (C) \ud83d\udcda\";\r\n badge.style.color = \"#ef4444\";\r\n badge.style.border = \"1px solid #ef4444\";\r\n }\r\n }\r\n\r\n function restartQuiz() {\r\n document.getElementById(\"resultScreen\").classList.add(\"hidden\");\r\n document.getElementById(\"startScreen\").classList.remove(\"hidden\");\r\n document.getElementById(\"userName\").value = \"\";\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0622\u0632\u0645\u0648\u0646 \u0622\u0646\u0644\u0627\u06cc\u0646 \u0632\u0628\u0627\u0646 \u0627\u0646\u06af\u0644\u06cc\u0633\u06cc \u0645\u0628\u062a\u062f\u06cc \u0686\u0627\u0644\u0634 \u0632\u0628\u0627\u0646 \u0627\u0646\u06af\u0644\u06cc\u0633\u06cc \u0645\u06cc\u0632\u0627\u0646 \u062a\u0633\u0644\u0637 \u062e\u0648\u062f \u0628\u0631 \u06af\u0631\u0627\u0645\u0631 \u0648 \u06a9\u0644\u0645\u0627\u062a \u067e\u0627\u06cc\u0647 \u0627\u0646\u06af\u0644\u06cc\u0633\u06cc \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u0622\u0632\u0645\u0648\u0646 \u062c\u0630\u0627\u0628 \u0628\u0633\u0646\u062c\u06cc\u062f! \u0646\u0627\u0645 \u0648 \u0646\u0627\u0645\u200c\u062e\u0627\u0646\u0648\u0627\u062f\u06af\u06cc: \u0634\u0631\u0648\u0639 \u0622\u0632\u0645\u0648\u0646 \u0633\u0648\u0627\u0644 \u06f1 \u0627\u0632 \u06f5 Question loading… \u0646\u062a\u06cc\u062c\u0647 \u0622\u0632\u0645\u0648\u0646 0% \u0627\u0645\u062a\u06cc\u0627\u0632 \u06a9\u0644 \u0633\u0637\u062d \u0627\u0631\u0632\u06cc\u0627\u0628\u06cc \u067e\u0627\u0633\u062e\u200c\u0647\u0627\u06cc \u062f\u0631\u0633\u062a 0 \u067e\u0627\u0633\u062e\u200c\u0647\u0627\u06cc \u0646\u0627\u062f\u0631\u0633\u062a 0 \u062a\u0644\u0627\u0634 \u0645\u062c\u062f\u062f<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-22","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/alootasisat.website\/index.php?rest_route=\/wp\/v2\/pages\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alootasisat.website\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alootasisat.website\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alootasisat.website\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alootasisat.website\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=22"}],"version-history":[{"count":4,"href":"https:\/\/alootasisat.website\/index.php?rest_route=\/wp\/v2\/pages\/22\/revisions"}],"predecessor-version":[{"id":26,"href":"https:\/\/alootasisat.website\/index.php?rest_route=\/wp\/v2\/pages\/22\/revisions\/26"}],"wp:attachment":[{"href":"https:\/\/alootasisat.website\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}