Tenses Quiz<\/title> {\/* *\/}\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;700&family=Roboto:wght@400;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --primary-color: #007bff;\n --secondary-color: #6c757d;\n --success-color: #28a745;\n --danger-color: #dc3545;\n --light-color: #f8f9fa;\n --dark-color: #343a40;\n --background-color: #eef2f7;\n --text-color: #333;\n --border-radius: 8px;\n }\n html { box-sizing: border-box; }\n *, *:before, *:after { box-sizing: inherit; }\n body {\n font-family: 'Roboto', 'Tajawal', sans-serif; \/* English font first *\/\n background-color: var(--background-color);\n color: var(--text-color);\n margin: 0;\n padding: 15px;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n min-height: 100vh;\n line-height: 1.6;\n }\n .quiz-container {\n background-color: #fff;\n padding: 25px;\n border-radius: var(--border-radius);\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n width: 100%;\n max-width: 800px;\n text-align: center;\n margin-top: 20px;\n margin-bottom: 20px;\n }\n \/* Adjusted heading font size for potentially longer English titles *\/\n h1 { color: var(--primary-color); margin-bottom: 15px; font-size: 1.6em; }\n h2 { color: var(--primary-color); margin-bottom: 15px; font-size: 1.4em; }\n #start-screen, #results-screen { display: flex; flex-direction: column; align-items: center; }\n #start-screen p { font-size: 1.1em; margin-bottom: 25px; }\n #quiz-screen { display: none; }\n .question-header { margin-bottom: 15px; font-size: 1em; color: var(--secondary-color); }\n #question-text {\n font-size: 1.3em;\n font-weight: bold;\n margin-bottom: 25px;\n min-height: 50px;\n text-align: left; \/* Align question text to the left for English *\/\n direction: ltr; \/* Ensure LTR direction for question *\/\n }\n .options-container {\n display: grid;\n grid-template-columns: 1fr;\n gap: 10px;\n margin-bottom: 20px;\n direction: ltr; \/* Ensure LTR for options grid *\/\n }\n @media (min-width: 600px) { .options-container { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; } }\n .option-btn {\n background-color: var(--light-color);\n border: 1px solid #ddd;\n color: var(--text-color);\n padding: 10px 12px;\n border-radius: var(--border-radius);\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 1em;\n text-align: left; \/* Align option text to the left *\/\n width: 100%;\n word-wrap: break-word;\n font-family: 'Roboto', 'Tajawal', sans-serif; \/* Ensure font consistency *\/\n }\n .option-btn:hover:not(:disabled) { background-color: #e2e6ea; border-color: #adb5bd; }\n .option-btn:disabled { cursor: not-allowed; opacity: 0.8; }\n .option-btn.correct { background-color: var(--success-color); border-color: var(--success-color); color: white; font-weight: bold; }\n .option-btn.incorrect { background-color: var(--danger-color); border-color: var(--danger-color); color: white; }\n .navigation-buttons { display: flex; justify-content: space-between; margin-top: 25px; direction: ltr; \/* LTR for button order *\/ }\n \/* Add specific styles for Arabic buttons if needed, or adjust general button text *\/\n .nav-btn, #start-btn, #restart-btn {\n background-color: var(--primary-color);\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: var(--border-radius);\n cursor: pointer;\n font-size: 1em;\n transition: background-color 0.3s ease;\n font-family: 'Tajawal', 'Roboto', sans-serif; \/* Arabic font preference for buttons *\/\n }\n #start-btn { padding: 12px 35px; font-size: 1.2em; margin-top: 20px; }\n .nav-btn:hover, #start-btn:hover, #restart-btn:hover { background-color: #0056b3; }\n .nav-btn:disabled { background-color: var(--secondary-color); cursor: not-allowed; opacity: 0.7; }\n .progress-container { width: 100%; background-color: #e9ecef; border-radius: var(--border-radius); margin-top: 25px; overflow: hidden; direction: ltr; }\n #progress-bar { height: 12px; width: 0%; background-color: var(--primary-color); border-radius: var(--border-radius); transition: width 0.4s ease-in-out; float: left; \/* Ensure progress starts from left *\/ }\n #progress-text { margin-top: 6px; font-size: 0.9em; color: var(--secondary-color); text-align: center; \/* Center progress text *\/ }\n #results-screen h2 { margin-bottom: 15px; font-size: 1.6em; }\n #score { font-size: 1.6em; font-weight: bold; color: var(--dark-color); margin-bottom: 25px; direction: rtl; \/* Right-align score text *\/ }\n #results-screen h3 { direction: rtl; } \/* Right-align review heading *\/\n .review-container {\n margin-top: 20px;\n text-align: left; \/* Align review items left for LTR content *\/\n max-height: 350px;\n overflow-y: auto;\n border: 1px solid #ddd;\n padding: 10px;\n border-radius: var(--border-radius);\n direction: ltr; \/* LTR for review content *\/\n }\n .review-item { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px dashed #ccc; font-size: 0.95em; }\n .review-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }\n .review-item p { margin: 4px 0; }\n .review-question { font-weight: bold; }\n \/* Keep review text alignment consistent *\/\n .review-user-answer, .review-correct-answer { text-align: left; }\n .review-user-answer.correct { color: var(--success-color); }\n .review-user-answer.incorrect { color: var(--danger-color); }\n .review-correct-answer { color: var(--success-color); font-weight: bold; }\n #feedback { min-height: 20px; margin-top: 10px; font-weight: bold; font-size: 1em; direction: rtl; \/* Right-align feedback *\/ }\n #feedback.correct { color: var(--success-color); }\n #feedback.incorrect { color: var(--danger-color); }\n #restart-btn { margin-top: 20px; background-color: var(--secondary-color); }\n #restart-btn:hover { background-color: #5a6268; }\n\n \/* Media query adjustments - minor tweaks if needed *\/\n @media (max-width: 600px) {\n body { padding: 10px; }\n .quiz-container { padding: 15px; margin-top: 10px; margin-bottom: 10px; }\n h1 { font-size: 1.4em; }\n h2 { font-size: 1.2em; }\n #start-screen p { font-size: 1em; direction: rtl; } \/* Right-align start text *\/\n #question-text { font-size: 1.15em; margin-bottom: 20px; }\n .option-btn { font-size: 0.95em; padding: 8px 10px; }\n .nav-btn, #start-btn, #restart-btn { font-size: 0.95em; padding: 8px 15px; }\n #start-btn { font-size: 1.1em; padding: 10px 30px; }\n #score { font-size: 1.4em; }\n .review-container { max-height: 300px; }\n .review-item { font-size: 0.9em; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"quiz-container\">\n <div id=\"start-screen\">\n <h1>\u0627\u062e\u062a\u0628\u0627\u0631 \u0627\u0644\u0623\u0632\u0645\u0646\u0629<\/h1> {\/* *\/}\n <h2>Tenses Quiz<\/h2>\n <p>\u0647\u0630\u0627 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 24 \u0633\u0624\u0627\u0644 \u0645\u062a\u0639\u062f\u062f \u0627\u0644\u062e\u064a\u0627\u0631\u0627\u062a \u0628\u062a\u0631\u062a\u064a\u0628 \u0639\u0634\u0648\u0627\u0626\u064a.<\/p> {\/* *\/}\n <button id=\"start-btn\">\u0627\u0628\u062f\u0623 \u0627\u0644\u0627\u0645\u062a\u062d\u0627\u0646<\/button>\n <\/div>\n\n <div id=\"quiz-screen\">\n <div class=\"question-header\">\n <span id=\"question-number\"><\/span>\n <\/div>\n <div id=\"question-text\"><\/div>\n <div class=\"options-container\" id=\"options-container\">\n <\/div>\n <div id=\"feedback\"><\/div>\n <div class=\"navigation-buttons\">\n {\/* *\/}\n <button id=\"prev-btn\" class=\"nav-btn\" onclick=\"prevQuestion()\">Previous<\/button>\n <button id=\"next-btn\" class=\"nav-btn\" onclick=\"nextQuestion()\">Next<\/button>\n <\/div>\n <div class=\"progress-container\">\n <div id=\"progress-bar\"><\/div>\n <\/div>\n {\/* *\/}\n <div id=\"progress-text\">0 \/ 24<\/div>\n <\/div>\n\n <div id=\"results-screen\" style=\"display: none;\">\n {\/* *\/}\n <h2>\u0646\u062a\u0627\u0626\u062c \u0627\u0644\u0627\u0645\u062a\u062d\u0627\u0646<\/h2>\n <div id=\"score\"><\/div>\n <h3>\u0645\u0631\u0627\u062c\u0639\u0629 \u0627\u0644\u0623\u0633\u0626\u0644\u0629:<\/h3>\n <div class=\"review-container\" id=\"review-container\">\n <\/div>\n {\/* *\/}\n <button id=\"restart-btn\" onclick=\"restartQuiz()\">\u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631<\/button>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Fisher-Yates (Knuth) Shuffle Algorithm\n function shuffleArray(array) {\n for (let i = array.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [array[i], array[j]] = [array[j], array[i]];\n }\n }\n\n \/\/ Processed Questions from PDF (Pages 5+)\n const englishQuizQuestions = [\n { question: \"We're late! By the time we get to the airport, the plane ________.\", options: [\"will have gone\", \"had gone\", \"went\", \"has gone\"], correctAnswer: \"will have gone\", userAnswer: null, isCorrect: null },\n { question: \"Rakan had his novel ________ into three different languages.\", options: [\"is translated\", \"was translated\", \"translated\", \"will translate\"], correctAnswer: \"translated\", userAnswer: null, isCorrect: null },\n { question: \"Salam ________ her report when the light in her room switched itself off.\", options: [\"was typing\", \"is typing\", \"types\", \"was typed\"], correctAnswer: \"was typing\", userAnswer: null, isCorrect: null },\n { question: \"My mother was very tired; she ________ all afternoon for a special family dinner.\", options: [\"is cooking\", \"has been cooking\", \"cooks\", \"had been cooking\"], correctAnswer: \"had been cooking\", userAnswer: null, isCorrect: null },\n { question: \"We won't be home tomorrow night. We ________ the football match at the stadium.\", options: [\"were watching\", \"will be watching\", \"have watched\", \"had been watching\"], correctAnswer: \"will be watching\", userAnswer: null, isCorrect: null },\n { question: \"Rayan had his computer ________ as it had stopped working.\", options: [\"is repaired\", \"repaired\", \"was repaired\", \"will repair\"], correctAnswer: \"repaired\", userAnswer: null, isCorrect: null },\n { question: \"Ghina ________ her bedroom when her friends arrived to her house.\", options: [\"is cleaning\", \"were cleaning\", \"was cleaning\", \"will be cleaning\"], correctAnswer: \"was cleaning\", userAnswer: null, isCorrect: null },\n { question: \"Students in my country ________ their classes online since last semester.\", options: [\"are attended\", \"has been attending\", \"would attend\", \"have been attending\"], correctAnswer: \"have been attending\", userAnswer: null, isCorrect: null },\n { question: \"People ________ microwaves in their houses since they were invented.\", options: [\"have been used\", \"had used\", \"were using\", \"have been using\"], correctAnswer: \"have been using\", userAnswer: null, isCorrect: null },\n { question: \"Khaled had his new novel ________ into three different languages.\", options: [\"is translated\", \"was translated\", \"translated\", \"will translate\"], correctAnswer: \"translated\", userAnswer: null, isCorrect: null },\n { question: \"We won't be home tomorrow night. We ________ the football match at the stadium.\", options: [\"will be watching\", \"have watched\", \"have been watching\", \"were watching\"], correctAnswer: \"will be watching\", userAnswer: null, isCorrect: null },\n { question: \"During the previous decade, computer companies ________ tablets in different shapes.\", options: [\"manufacture\", \"manufactured\", \"were manufactured\", \"has manufactured\"], correctAnswer: \"manufactured\", userAnswer: null, isCorrect: null },\n { question: \"Do you know what research ________ in medicine at the moment?\", options: [\"were happening\", \"is happened\", \"happen\", \"is happening\"], correctAnswer: \"is happening\", userAnswer: null, isCorrect: null },\n { question: \"This time next year, they ________ for their graduation project.\", options: [\"have prepared\", \"will be preparing\", \"have been preparing\", \"be prepared\"], correctAnswer: \"will be preparing\", userAnswer: null, isCorrect: null },\n { question: \"By 2023 CE, they ________ the new electric motorway in my town.\", options: [\"will be opened\", \"have been opened\", \"have opened\", \"will have opened\"], correctAnswer: \"will have opened\", userAnswer: null, isCorrect: null }, \/\/ Option D modified as requested\n { question: \"We ________ the coach to come for half an hour in the gym.\", options: [\"have been waiting\", \"had been waited\", \"has been waiting\", \"have been waited\"], correctAnswer: \"have been waiting\", userAnswer: null, isCorrect: null },\n { question: \"Nowadays, many doctors ________ homoeopathy a viable option for some diseases.\", options: [\"were considered\", \"are considered\", \"consider\", \"had considered\"], correctAnswer: \"consider\", userAnswer: null, isCorrect: null },\n { question: \"This time next month, my family ________ themselves for moving to a new house.\", options: [\"have been preparing\", \"have prepared\", \"were preparing\", \"will be preparing\"], correctAnswer: \"will be preparing\", userAnswer: null, isCorrect: null },\n { question: \"We're late! By the time we get to the restaurant, the guests ________.\", options: [\"have been left\", \"will have left\", \"would have left\", \"have been leaving\"], correctAnswer: \"will have left\", userAnswer: null, isCorrect: null },\n { question: \"Salma had her car ________ since it stopped working.\", options: [\"is repaired\", \"repaired\", \"was repaired\", \"will repair\"], correctAnswer: \"repaired\", userAnswer: null, isCorrect: null },\n \/\/ Question 21 was removed as requested\n { question: \"In thirty years' time, scientists ________ a cure for cancer.\", options: [\"will have found\", \"will find\", \"would have found\", \"find\"], correctAnswer: \"will have found\", userAnswer: null, isCorrect: null },\n { question: \"Kareem's father bought him a smartphone after he ________ good marks in his exam.\", options: [\"has been getting\", \"had got\", \"was getting\", \"had been got\"], correctAnswer: \"had got\", userAnswer: null, isCorrect: null },\n { question: \"Everything is wet. It ________ since this morning.\", options: [\"has been rained\", \"is raining\", \"will rain\", \"has been raining\"], correctAnswer: \"has been raining\", userAnswer: null, isCorrect: null },\n { question: \"My friend has a headache. He ________ too much TV all night.\", options: [\"is watched\", \"has been watching\", \"will be watching\", \"had been watching\"], correctAnswer: \"has been watching\", userAnswer: null, isCorrect: null }\n ];\n\n\n let questions = [...englishQuizQuestions];\n let currentQuestionIndex = 0;\n let score = 0;\n const totalQuestions = questions.length; \/\/ Updated total\n\n const startScreen = document.getElementById('start-screen');\n const quizScreen = document.getElementById('quiz-screen');\n const resultsScreen = document.getElementById('results-screen');\n const startBtn = document.getElementById('start-btn');\n const questionNumberEl = document.getElementById('question-number');\n const questionTextEl = document.getElementById('question-text');\n const optionsContainer = document.getElementById('options-container');\n const feedbackEl = document.getElementById('feedback');\n const prevBtn = document.getElementById('prev-btn');\n const nextBtn = document.getElementById('next-btn');\n const progressBar = document.getElementById('progress-bar');\n const progressTextEl = document.getElementById('progress-text');\n const scoreEl = document.getElementById('score');\n const reviewContainer = document.getElementById('review-container');\n\n startBtn.addEventListener('click', startQuiz);\n\n function startQuiz() {\n \/\/ Add originalIndex property before shuffling for review sorting\n questions = englishQuizQuestions.map((q, index) => ({ ...q, originalIndex: index }));\n shuffleArray(questions); \/\/ Shuffle the questions with original index attached\n\n startScreen.style.display = 'none';\n resultsScreen.style.display = 'none';\n quizScreen.style.display = 'block';\n currentQuestionIndex = 0;\n score = 0;\n \/\/ Reset answers for the shuffled array\n questions.forEach(q => {\n q.userAnswer = null;\n q.isCorrect = null;\n });\n progressTextEl.textContent = `0 \/ ${totalQuestions}`; \/\/ Update total here\n loadQuestion(currentQuestionIndex);\n }\n\n function loadQuestion(index) {\n feedbackEl.textContent = '';\n feedbackEl.className = '';\n const currentQuestion = questions[index];\n questionNumberEl.textContent = `Question ${index + 1} of ${totalQuestions}`; \/\/ Use English for question counter\n questionTextEl.textContent = currentQuestion.question;\n optionsContainer.innerHTML = '';\n\n \/\/ Shuffle options for the current question\n const shuffledOptions = [...currentQuestion.options];\n shuffleArray(shuffledOptions);\n\n const alreadyAnswered = currentQuestion.userAnswer !== null;\n\n shuffledOptions.forEach(option => {\n const button = document.createElement('button');\n button.textContent = option;\n button.classList.add('option-btn');\n button.disabled = alreadyAnswered;\n\n if (alreadyAnswered) {\n if (option === currentQuestion.userAnswer) {\n button.classList.add(currentQuestion.isCorrect ? 'correct' : 'incorrect');\n } else if (option === currentQuestion.correctAnswer && !currentQuestion.isCorrect) {\n \/\/ Only highlight the correct answer if the user was wrong\n button.classList.add('correct');\n }\n } else {\n button.onclick = () => handleAnswer(button, option);\n }\n optionsContainer.appendChild(button);\n });\n\n updateProgressBar();\n updateNavigationButtons();\n }\n\n function handleAnswer(selectedButton, selectedAnswer) {\n const currentQuestion = questions[currentQuestionIndex];\n \/\/ Prevent re-answering\n if (currentQuestion.userAnswer !== null) return;\n\n currentQuestion.userAnswer = selectedAnswer;\n const isCorrect = selectedAnswer === currentQuestion.correctAnswer;\n currentQuestion.isCorrect = isCorrect;\n\n const optionButtons = optionsContainer.querySelectorAll('.option-btn');\n optionButtons.forEach(btn => btn.disabled = true); \/\/ Disable all options\n\n if (isCorrect) {\n score++;\n selectedButton.classList.add('correct');\n feedbackEl.textContent = '\u0625\u062c\u0627\u0628\u0629 \u0635\u062d\u064a\u062d\u0629!'; \/\/ Correct!\n feedbackEl.className = 'correct';\n } else {\n selectedButton.classList.add('incorrect');\n feedbackEl.textContent = '\u0625\u062c\u0627\u0628\u0629 \u062e\u0627\u0637\u0626\u0629!'; \/\/ Incorrect!\n feedbackEl.className = 'incorrect';\n \/\/ Highlight the correct answer immediately after a wrong choice\n optionButtons.forEach(btn => {\n if (btn.textContent === currentQuestion.correctAnswer) {\n btn.classList.add('correct'); \/\/ Add correct class directly\n }\n });\n }\n \/\/ Automatically move to the next question after a short delay? Optional.\n \/\/ setTimeout(nextQuestion, 1500);\n }\n\n function updateProgressBar() {\n const progressPercentage = ((currentQuestionIndex + 1) \/ totalQuestions) * 100;\n progressBar.style.width = `${progressPercentage}%`;\n progressTextEl.textContent = `${currentQuestionIndex + 1} \/ ${totalQuestions}`;\n }\n\n function updateNavigationButtons() {\n prevBtn.disabled = currentQuestionIndex === 0;\n if (currentQuestionIndex === totalQuestions - 1) {\n nextBtn.textContent = '\u0625\u0646\u0647\u0627\u0621 \u0648\u0639\u0631\u0636 \u0627\u0644\u0646\u062a\u064a\u062c\u0629'; \/\/ Finish and Show Results\n } else {\n nextBtn.textContent = 'Next'; \/\/ Use English for Next button until the end\n }\n \/\/ Disable next button until an answer is selected for the current question? Optional.\n \/\/ nextBtn.disabled = questions[currentQuestionIndex].userAnswer === null;\n }\n\n function nextQuestion() {\n \/\/ Ensure an answer has been given before proceeding (optional, but good practice)\n \/\/ if (questions[currentQuestionIndex].userAnswer === null) return;\n\n if (currentQuestionIndex < totalQuestions - 1) {\n currentQuestionIndex++;\n loadQuestion(currentQuestionIndex);\n } else {\n showResults();\n }\n }\n\n function prevQuestion() {\n if (currentQuestionIndex > 0) {\n currentQuestionIndex--;\n loadQuestion(currentQuestionIndex);\n }\n }\n\n function showResults() {\n quizScreen.style.display = 'none';\n resultsScreen.style.display = 'block';\n const scorePercentage = ((score \/ totalQuestions) * 100).toFixed(1);\n scoreEl.textContent = `\u0646\u062a\u064a\u062c\u062a\u0643: ${score} \u0645\u0646 ${totalQuestions} (${scorePercentage}%)`; \/\/ Your score: ...\n reviewContainer.innerHTML = '';\n\n \/\/ Sort questions based on the original index for review\n const sortedQuestionsForReview = [...questions].sort((a, b) => a.originalIndex - b.originalIndex);\n\n sortedQuestionsForReview.forEach((q, index) => { \/\/ Use index for review numbering\n const reviewItem = document.createElement('div');\n reviewItem.classList.add('review-item');\n\n const questionP = document.createElement('p');\n questionP.classList.add('review-question');\n questionP.textContent = `${index + 1}. ${englishQuizQuestions[q.originalIndex].question}`; \/\/ Get original question text\n\n const userAnswerP = document.createElement('p');\n userAnswerP.classList.add('review-user-answer');\n if (q.userAnswer === null) {\n userAnswerP.textContent = 'Your answer: Not Answered';\n userAnswerP.classList.add('incorrect'); \/\/ Style unanswered as incorrect\n } else {\n userAnswerP.textContent = `Your answer: ${q.userAnswer} (${q.isCorrect ? 'Correct' : 'Incorrect'})`;\n userAnswerP.classList.add(q.isCorrect ? 'correct' : 'incorrect');\n }\n\n reviewItem.appendChild(questionP);\n reviewItem.appendChild(userAnswerP);\n\n if (!q.isCorrect || q.userAnswer === null) { \/\/ Show correct answer if wrong or unanswered\n const correctAnswerP = document.createElement('p');\n correctAnswerP.classList.add('review-correct-answer');\n correctAnswerP.textContent = `Correct answer: ${q.correctAnswer}`;\n reviewItem.appendChild(correctAnswerP);\n }\n\n reviewContainer.appendChild(reviewItem);\n });\n }\n\n function restartQuiz() {\n \/\/ Reset to original questions array if needed, or just re-run startQuiz\n startQuiz();\n }\n\n \/\/ Initial setup\n quizScreen.style.display = 'none';\n resultsScreen.style.display = 'none';\n\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Tenses Quiz {\/* *\/} \u0627\u062e\u062a\u0628\u0627\u0631 \u0627\u0644\u0623\u0632\u0645\u0646\u0629 {\/* *\/} Tenses Quiz \u0647\u0630\u0627 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 24 \u0633\u0624\u0627\u0644 \u0645\u062a\u0639\u062f\u062f \u0627\u0644\u062e\u064a\u0627\u0631\u0627\u062a \u0628\u062a\u0631\u062a\u064a\u0628 \u0639\u0634\u0648\u0627\u0626\u064a. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_sitemap_exclude":false,"_sitemap_priority":"","_sitemap_frequency":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"reaction":[],"class_list":["post-4962","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"aioseo_notices":[],"wps_subtitle":"","_links":{"self":[{"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4962","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4962"}],"version-history":[{"count":2,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4962\/revisions"}],"predecessor-version":[{"id":4975,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4962\/revisions\/4975"}],"wp:attachment":[{"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4962"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4962"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4962"},{"taxonomy":"reaction","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Freaction&post=4962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":4962,"date":"2025-04-16T14:56:18","date_gmt":"2025-04-16T14:56:18","guid":{"rendered":"https:\/\/tawjihy.com\/?p=4962"},"modified":"2025-04-16T16:45:32","modified_gmt":"2025-04-16T16:45:32","slug":"%d8%a7%d9%85%d8%aa%d8%ad%d8%a7%d9%86-%d9%85%d8%ad%d9%88%d8%b3%d8%a8-%d9%84%d9%82%d8%a7%d8%b9%d8%af%d8%a9-%d8%a7%d9%84%d8%a7%d8%b2%d9%85%d9%86%d8%a9-%d8%a7%d9%84%d9%84%d8%ba%d8%a9-%d8%a7%d9%84%d8%a5","status":"publish","type":"post","link":"https:\/\/tawjihy.com\/?p=4962","title":{"rendered":"\u0627\u0645\u062a\u062d\u0627\u0646 \u0645\u062d\u0648\u0633\u0628 \u0644\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0627\u0632\u0645\u0646\u0629 \u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0627\u0644\u062a\u0648\u062c\u064a\u0647\u064a 2007"},"content":{"rendered":"\n\n\n\n\n\n\n \n \n Tenses Quiz<\/title> {\/* *\/}\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;700&family=Roboto:wght@400;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --primary-color: #007bff;\n --secondary-color: #6c757d;\n --success-color: #28a745;\n --danger-color: #dc3545;\n --light-color: #f8f9fa;\n --dark-color: #343a40;\n --background-color: #eef2f7;\n --text-color: #333;\n --border-radius: 8px;\n }\n html { box-sizing: border-box; }\n *, *:before, *:after { box-sizing: inherit; }\n body {\n font-family: 'Roboto', 'Tajawal', sans-serif; \/* English font first *\/\n background-color: var(--background-color);\n color: var(--text-color);\n margin: 0;\n padding: 15px;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n min-height: 100vh;\n line-height: 1.6;\n }\n .quiz-container {\n background-color: #fff;\n padding: 25px;\n border-radius: var(--border-radius);\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n width: 100%;\n max-width: 800px;\n text-align: center;\n margin-top: 20px;\n margin-bottom: 20px;\n }\n \/* Adjusted heading font size for potentially longer English titles *\/\n h1 { color: var(--primary-color); margin-bottom: 15px; font-size: 1.6em; }\n h2 { color: var(--primary-color); margin-bottom: 15px; font-size: 1.4em; }\n #start-screen, #results-screen { display: flex; flex-direction: column; align-items: center; }\n #start-screen p { font-size: 1.1em; margin-bottom: 25px; }\n #quiz-screen { display: none; }\n .question-header { margin-bottom: 15px; font-size: 1em; color: var(--secondary-color); }\n #question-text {\n font-size: 1.3em;\n font-weight: bold;\n margin-bottom: 25px;\n min-height: 50px;\n text-align: left; \/* Align question text to the left for English *\/\n direction: ltr; \/* Ensure LTR direction for question *\/\n }\n .options-container {\n display: grid;\n grid-template-columns: 1fr;\n gap: 10px;\n margin-bottom: 20px;\n direction: ltr; \/* Ensure LTR for options grid *\/\n }\n @media (min-width: 600px) { .options-container { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; } }\n .option-btn {\n background-color: var(--light-color);\n border: 1px solid #ddd;\n color: var(--text-color);\n padding: 10px 12px;\n border-radius: var(--border-radius);\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 1em;\n text-align: left; \/* Align option text to the left *\/\n width: 100%;\n word-wrap: break-word;\n font-family: 'Roboto', 'Tajawal', sans-serif; \/* Ensure font consistency *\/\n }\n .option-btn:hover:not(:disabled) { background-color: #e2e6ea; border-color: #adb5bd; }\n .option-btn:disabled { cursor: not-allowed; opacity: 0.8; }\n .option-btn.correct { background-color: var(--success-color); border-color: var(--success-color); color: white; font-weight: bold; }\n .option-btn.incorrect { background-color: var(--danger-color); border-color: var(--danger-color); color: white; }\n .navigation-buttons { display: flex; justify-content: space-between; margin-top: 25px; direction: ltr; \/* LTR for button order *\/ }\n \/* Add specific styles for Arabic buttons if needed, or adjust general button text *\/\n .nav-btn, #start-btn, #restart-btn {\n background-color: var(--primary-color);\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: var(--border-radius);\n cursor: pointer;\n font-size: 1em;\n transition: background-color 0.3s ease;\n font-family: 'Tajawal', 'Roboto', sans-serif; \/* Arabic font preference for buttons *\/\n }\n #start-btn { padding: 12px 35px; font-size: 1.2em; margin-top: 20px; }\n .nav-btn:hover, #start-btn:hover, #restart-btn:hover { background-color: #0056b3; }\n .nav-btn:disabled { background-color: var(--secondary-color); cursor: not-allowed; opacity: 0.7; }\n .progress-container { width: 100%; background-color: #e9ecef; border-radius: var(--border-radius); margin-top: 25px; overflow: hidden; direction: ltr; }\n #progress-bar { height: 12px; width: 0%; background-color: var(--primary-color); border-radius: var(--border-radius); transition: width 0.4s ease-in-out; float: left; \/* Ensure progress starts from left *\/ }\n #progress-text { margin-top: 6px; font-size: 0.9em; color: var(--secondary-color); text-align: center; \/* Center progress text *\/ }\n #results-screen h2 { margin-bottom: 15px; font-size: 1.6em; }\n #score { font-size: 1.6em; font-weight: bold; color: var(--dark-color); margin-bottom: 25px; direction: rtl; \/* Right-align score text *\/ }\n #results-screen h3 { direction: rtl; } \/* Right-align review heading *\/\n .review-container {\n margin-top: 20px;\n text-align: left; \/* Align review items left for LTR content *\/\n max-height: 350px;\n overflow-y: auto;\n border: 1px solid #ddd;\n padding: 10px;\n border-radius: var(--border-radius);\n direction: ltr; \/* LTR for review content *\/\n }\n .review-item { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px dashed #ccc; font-size: 0.95em; }\n .review-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }\n .review-item p { margin: 4px 0; }\n .review-question { font-weight: bold; }\n \/* Keep review text alignment consistent *\/\n .review-user-answer, .review-correct-answer { text-align: left; }\n .review-user-answer.correct { color: var(--success-color); }\n .review-user-answer.incorrect { color: var(--danger-color); }\n .review-correct-answer { color: var(--success-color); font-weight: bold; }\n #feedback { min-height: 20px; margin-top: 10px; font-weight: bold; font-size: 1em; direction: rtl; \/* Right-align feedback *\/ }\n #feedback.correct { color: var(--success-color); }\n #feedback.incorrect { color: var(--danger-color); }\n #restart-btn { margin-top: 20px; background-color: var(--secondary-color); }\n #restart-btn:hover { background-color: #5a6268; }\n\n \/* Media query adjustments - minor tweaks if needed *\/\n @media (max-width: 600px) {\n body { padding: 10px; }\n .quiz-container { padding: 15px; margin-top: 10px; margin-bottom: 10px; }\n h1 { font-size: 1.4em; }\n h2 { font-size: 1.2em; }\n #start-screen p { font-size: 1em; direction: rtl; } \/* Right-align start text *\/\n #question-text { font-size: 1.15em; margin-bottom: 20px; }\n .option-btn { font-size: 0.95em; padding: 8px 10px; }\n .nav-btn, #start-btn, #restart-btn { font-size: 0.95em; padding: 8px 15px; }\n #start-btn { font-size: 1.1em; padding: 10px 30px; }\n #score { font-size: 1.4em; }\n .review-container { max-height: 300px; }\n .review-item { font-size: 0.9em; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"quiz-container\">\n <div id=\"start-screen\">\n <h1>\u0627\u062e\u062a\u0628\u0627\u0631 \u0627\u0644\u0623\u0632\u0645\u0646\u0629<\/h1> {\/* *\/}\n <h2>Tenses Quiz<\/h2>\n <p>\u0647\u0630\u0627 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 24 \u0633\u0624\u0627\u0644 \u0645\u062a\u0639\u062f\u062f \u0627\u0644\u062e\u064a\u0627\u0631\u0627\u062a \u0628\u062a\u0631\u062a\u064a\u0628 \u0639\u0634\u0648\u0627\u0626\u064a.<\/p> {\/* *\/}\n <button id=\"start-btn\">\u0627\u0628\u062f\u0623 \u0627\u0644\u0627\u0645\u062a\u062d\u0627\u0646<\/button>\n <\/div>\n\n <div id=\"quiz-screen\">\n <div class=\"question-header\">\n <span id=\"question-number\"><\/span>\n <\/div>\n <div id=\"question-text\"><\/div>\n <div class=\"options-container\" id=\"options-container\">\n <\/div>\n <div id=\"feedback\"><\/div>\n <div class=\"navigation-buttons\">\n {\/* *\/}\n <button id=\"prev-btn\" class=\"nav-btn\" onclick=\"prevQuestion()\">Previous<\/button>\n <button id=\"next-btn\" class=\"nav-btn\" onclick=\"nextQuestion()\">Next<\/button>\n <\/div>\n <div class=\"progress-container\">\n <div id=\"progress-bar\"><\/div>\n <\/div>\n {\/* *\/}\n <div id=\"progress-text\">0 \/ 24<\/div>\n <\/div>\n\n <div id=\"results-screen\" style=\"display: none;\">\n {\/* *\/}\n <h2>\u0646\u062a\u0627\u0626\u062c \u0627\u0644\u0627\u0645\u062a\u062d\u0627\u0646<\/h2>\n <div id=\"score\"><\/div>\n <h3>\u0645\u0631\u0627\u062c\u0639\u0629 \u0627\u0644\u0623\u0633\u0626\u0644\u0629:<\/h3>\n <div class=\"review-container\" id=\"review-container\">\n <\/div>\n {\/* *\/}\n <button id=\"restart-btn\" onclick=\"restartQuiz()\">\u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631<\/button>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Fisher-Yates (Knuth) Shuffle Algorithm\n function shuffleArray(array) {\n for (let i = array.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [array[i], array[j]] = [array[j], array[i]];\n }\n }\n\n \/\/ Processed Questions from PDF (Pages 5+)\n const englishQuizQuestions = [\n { question: \"We're late! By the time we get to the airport, the plane ________.\", options: [\"will have gone\", \"had gone\", \"went\", \"has gone\"], correctAnswer: \"will have gone\", userAnswer: null, isCorrect: null },\n { question: \"Rakan had his novel ________ into three different languages.\", options: [\"is translated\", \"was translated\", \"translated\", \"will translate\"], correctAnswer: \"translated\", userAnswer: null, isCorrect: null },\n { question: \"Salam ________ her report when the light in her room switched itself off.\", options: [\"was typing\", \"is typing\", \"types\", \"was typed\"], correctAnswer: \"was typing\", userAnswer: null, isCorrect: null },\n { question: \"My mother was very tired; she ________ all afternoon for a special family dinner.\", options: [\"is cooking\", \"has been cooking\", \"cooks\", \"had been cooking\"], correctAnswer: \"had been cooking\", userAnswer: null, isCorrect: null },\n { question: \"We won't be home tomorrow night. We ________ the football match at the stadium.\", options: [\"were watching\", \"will be watching\", \"have watched\", \"had been watching\"], correctAnswer: \"will be watching\", userAnswer: null, isCorrect: null },\n { question: \"Rayan had his computer ________ as it had stopped working.\", options: [\"is repaired\", \"repaired\", \"was repaired\", \"will repair\"], correctAnswer: \"repaired\", userAnswer: null, isCorrect: null },\n { question: \"Ghina ________ her bedroom when her friends arrived to her house.\", options: [\"is cleaning\", \"were cleaning\", \"was cleaning\", \"will be cleaning\"], correctAnswer: \"was cleaning\", userAnswer: null, isCorrect: null },\n { question: \"Students in my country ________ their classes online since last semester.\", options: [\"are attended\", \"has been attending\", \"would attend\", \"have been attending\"], correctAnswer: \"have been attending\", userAnswer: null, isCorrect: null },\n { question: \"People ________ microwaves in their houses since they were invented.\", options: [\"have been used\", \"had used\", \"were using\", \"have been using\"], correctAnswer: \"have been using\", userAnswer: null, isCorrect: null },\n { question: \"Khaled had his new novel ________ into three different languages.\", options: [\"is translated\", \"was translated\", \"translated\", \"will translate\"], correctAnswer: \"translated\", userAnswer: null, isCorrect: null },\n { question: \"We won't be home tomorrow night. We ________ the football match at the stadium.\", options: [\"will be watching\", \"have watched\", \"have been watching\", \"were watching\"], correctAnswer: \"will be watching\", userAnswer: null, isCorrect: null },\n { question: \"During the previous decade, computer companies ________ tablets in different shapes.\", options: [\"manufacture\", \"manufactured\", \"were manufactured\", \"has manufactured\"], correctAnswer: \"manufactured\", userAnswer: null, isCorrect: null },\n { question: \"Do you know what research ________ in medicine at the moment?\", options: [\"were happening\", \"is happened\", \"happen\", \"is happening\"], correctAnswer: \"is happening\", userAnswer: null, isCorrect: null },\n { question: \"This time next year, they ________ for their graduation project.\", options: [\"have prepared\", \"will be preparing\", \"have been preparing\", \"be prepared\"], correctAnswer: \"will be preparing\", userAnswer: null, isCorrect: null },\n { question: \"By 2023 CE, they ________ the new electric motorway in my town.\", options: [\"will be opened\", \"have been opened\", \"have opened\", \"will have opened\"], correctAnswer: \"will have opened\", userAnswer: null, isCorrect: null }, \/\/ Option D modified as requested\n { question: \"We ________ the coach to come for half an hour in the gym.\", options: [\"have been waiting\", \"had been waited\", \"has been waiting\", \"have been waited\"], correctAnswer: \"have been waiting\", userAnswer: null, isCorrect: null },\n { question: \"Nowadays, many doctors ________ homoeopathy a viable option for some diseases.\", options: [\"were considered\", \"are considered\", \"consider\", \"had considered\"], correctAnswer: \"consider\", userAnswer: null, isCorrect: null },\n { question: \"This time next month, my family ________ themselves for moving to a new house.\", options: [\"have been preparing\", \"have prepared\", \"were preparing\", \"will be preparing\"], correctAnswer: \"will be preparing\", userAnswer: null, isCorrect: null },\n { question: \"We're late! By the time we get to the restaurant, the guests ________.\", options: [\"have been left\", \"will have left\", \"would have left\", \"have been leaving\"], correctAnswer: \"will have left\", userAnswer: null, isCorrect: null },\n { question: \"Salma had her car ________ since it stopped working.\", options: [\"is repaired\", \"repaired\", \"was repaired\", \"will repair\"], correctAnswer: \"repaired\", userAnswer: null, isCorrect: null },\n \/\/ Question 21 was removed as requested\n { question: \"In thirty years' time, scientists ________ a cure for cancer.\", options: [\"will have found\", \"will find\", \"would have found\", \"find\"], correctAnswer: \"will have found\", userAnswer: null, isCorrect: null },\n { question: \"Kareem's father bought him a smartphone after he ________ good marks in his exam.\", options: [\"has been getting\", \"had got\", \"was getting\", \"had been got\"], correctAnswer: \"had got\", userAnswer: null, isCorrect: null },\n { question: \"Everything is wet. It ________ since this morning.\", options: [\"has been rained\", \"is raining\", \"will rain\", \"has been raining\"], correctAnswer: \"has been raining\", userAnswer: null, isCorrect: null },\n { question: \"My friend has a headache. He ________ too much TV all night.\", options: [\"is watched\", \"has been watching\", \"will be watching\", \"had been watching\"], correctAnswer: \"has been watching\", userAnswer: null, isCorrect: null }\n ];\n\n\n let questions = [...englishQuizQuestions];\n let currentQuestionIndex = 0;\n let score = 0;\n const totalQuestions = questions.length; \/\/ Updated total\n\n const startScreen = document.getElementById('start-screen');\n const quizScreen = document.getElementById('quiz-screen');\n const resultsScreen = document.getElementById('results-screen');\n const startBtn = document.getElementById('start-btn');\n const questionNumberEl = document.getElementById('question-number');\n const questionTextEl = document.getElementById('question-text');\n const optionsContainer = document.getElementById('options-container');\n const feedbackEl = document.getElementById('feedback');\n const prevBtn = document.getElementById('prev-btn');\n const nextBtn = document.getElementById('next-btn');\n const progressBar = document.getElementById('progress-bar');\n const progressTextEl = document.getElementById('progress-text');\n const scoreEl = document.getElementById('score');\n const reviewContainer = document.getElementById('review-container');\n\n startBtn.addEventListener('click', startQuiz);\n\n function startQuiz() {\n \/\/ Add originalIndex property before shuffling for review sorting\n questions = englishQuizQuestions.map((q, index) => ({ ...q, originalIndex: index }));\n shuffleArray(questions); \/\/ Shuffle the questions with original index attached\n\n startScreen.style.display = 'none';\n resultsScreen.style.display = 'none';\n quizScreen.style.display = 'block';\n currentQuestionIndex = 0;\n score = 0;\n \/\/ Reset answers for the shuffled array\n questions.forEach(q => {\n q.userAnswer = null;\n q.isCorrect = null;\n });\n progressTextEl.textContent = `0 \/ ${totalQuestions}`; \/\/ Update total here\n loadQuestion(currentQuestionIndex);\n }\n\n function loadQuestion(index) {\n feedbackEl.textContent = '';\n feedbackEl.className = '';\n const currentQuestion = questions[index];\n questionNumberEl.textContent = `Question ${index + 1} of ${totalQuestions}`; \/\/ Use English for question counter\n questionTextEl.textContent = currentQuestion.question;\n optionsContainer.innerHTML = '';\n\n \/\/ Shuffle options for the current question\n const shuffledOptions = [...currentQuestion.options];\n shuffleArray(shuffledOptions);\n\n const alreadyAnswered = currentQuestion.userAnswer !== null;\n\n shuffledOptions.forEach(option => {\n const button = document.createElement('button');\n button.textContent = option;\n button.classList.add('option-btn');\n button.disabled = alreadyAnswered;\n\n if (alreadyAnswered) {\n if (option === currentQuestion.userAnswer) {\n button.classList.add(currentQuestion.isCorrect ? 'correct' : 'incorrect');\n } else if (option === currentQuestion.correctAnswer && !currentQuestion.isCorrect) {\n \/\/ Only highlight the correct answer if the user was wrong\n button.classList.add('correct');\n }\n } else {\n button.onclick = () => handleAnswer(button, option);\n }\n optionsContainer.appendChild(button);\n });\n\n updateProgressBar();\n updateNavigationButtons();\n }\n\n function handleAnswer(selectedButton, selectedAnswer) {\n const currentQuestion = questions[currentQuestionIndex];\n \/\/ Prevent re-answering\n if (currentQuestion.userAnswer !== null) return;\n\n currentQuestion.userAnswer = selectedAnswer;\n const isCorrect = selectedAnswer === currentQuestion.correctAnswer;\n currentQuestion.isCorrect = isCorrect;\n\n const optionButtons = optionsContainer.querySelectorAll('.option-btn');\n optionButtons.forEach(btn => btn.disabled = true); \/\/ Disable all options\n\n if (isCorrect) {\n score++;\n selectedButton.classList.add('correct');\n feedbackEl.textContent = '\u0625\u062c\u0627\u0628\u0629 \u0635\u062d\u064a\u062d\u0629!'; \/\/ Correct!\n feedbackEl.className = 'correct';\n } else {\n selectedButton.classList.add('incorrect');\n feedbackEl.textContent = '\u0625\u062c\u0627\u0628\u0629 \u062e\u0627\u0637\u0626\u0629!'; \/\/ Incorrect!\n feedbackEl.className = 'incorrect';\n \/\/ Highlight the correct answer immediately after a wrong choice\n optionButtons.forEach(btn => {\n if (btn.textContent === currentQuestion.correctAnswer) {\n btn.classList.add('correct'); \/\/ Add correct class directly\n }\n });\n }\n \/\/ Automatically move to the next question after a short delay? Optional.\n \/\/ setTimeout(nextQuestion, 1500);\n }\n\n function updateProgressBar() {\n const progressPercentage = ((currentQuestionIndex + 1) \/ totalQuestions) * 100;\n progressBar.style.width = `${progressPercentage}%`;\n progressTextEl.textContent = `${currentQuestionIndex + 1} \/ ${totalQuestions}`;\n }\n\n function updateNavigationButtons() {\n prevBtn.disabled = currentQuestionIndex === 0;\n if (currentQuestionIndex === totalQuestions - 1) {\n nextBtn.textContent = '\u0625\u0646\u0647\u0627\u0621 \u0648\u0639\u0631\u0636 \u0627\u0644\u0646\u062a\u064a\u062c\u0629'; \/\/ Finish and Show Results\n } else {\n nextBtn.textContent = 'Next'; \/\/ Use English for Next button until the end\n }\n \/\/ Disable next button until an answer is selected for the current question? Optional.\n \/\/ nextBtn.disabled = questions[currentQuestionIndex].userAnswer === null;\n }\n\n function nextQuestion() {\n \/\/ Ensure an answer has been given before proceeding (optional, but good practice)\n \/\/ if (questions[currentQuestionIndex].userAnswer === null) return;\n\n if (currentQuestionIndex < totalQuestions - 1) {\n currentQuestionIndex++;\n loadQuestion(currentQuestionIndex);\n } else {\n showResults();\n }\n }\n\n function prevQuestion() {\n if (currentQuestionIndex > 0) {\n currentQuestionIndex--;\n loadQuestion(currentQuestionIndex);\n }\n }\n\n function showResults() {\n quizScreen.style.display = 'none';\n resultsScreen.style.display = 'block';\n const scorePercentage = ((score \/ totalQuestions) * 100).toFixed(1);\n scoreEl.textContent = `\u0646\u062a\u064a\u062c\u062a\u0643: ${score} \u0645\u0646 ${totalQuestions} (${scorePercentage}%)`; \/\/ Your score: ...\n reviewContainer.innerHTML = '';\n\n \/\/ Sort questions based on the original index for review\n const sortedQuestionsForReview = [...questions].sort((a, b) => a.originalIndex - b.originalIndex);\n\n sortedQuestionsForReview.forEach((q, index) => { \/\/ Use index for review numbering\n const reviewItem = document.createElement('div');\n reviewItem.classList.add('review-item');\n\n const questionP = document.createElement('p');\n questionP.classList.add('review-question');\n questionP.textContent = `${index + 1}. ${englishQuizQuestions[q.originalIndex].question}`; \/\/ Get original question text\n\n const userAnswerP = document.createElement('p');\n userAnswerP.classList.add('review-user-answer');\n if (q.userAnswer === null) {\n userAnswerP.textContent = 'Your answer: Not Answered';\n userAnswerP.classList.add('incorrect'); \/\/ Style unanswered as incorrect\n } else {\n userAnswerP.textContent = `Your answer: ${q.userAnswer} (${q.isCorrect ? 'Correct' : 'Incorrect'})`;\n userAnswerP.classList.add(q.isCorrect ? 'correct' : 'incorrect');\n }\n\n reviewItem.appendChild(questionP);\n reviewItem.appendChild(userAnswerP);\n\n if (!q.isCorrect || q.userAnswer === null) { \/\/ Show correct answer if wrong or unanswered\n const correctAnswerP = document.createElement('p');\n correctAnswerP.classList.add('review-correct-answer');\n correctAnswerP.textContent = `Correct answer: ${q.correctAnswer}`;\n reviewItem.appendChild(correctAnswerP);\n }\n\n reviewContainer.appendChild(reviewItem);\n });\n }\n\n function restartQuiz() {\n \/\/ Reset to original questions array if needed, or just re-run startQuiz\n startQuiz();\n }\n\n \/\/ Initial setup\n quizScreen.style.display = 'none';\n resultsScreen.style.display = 'none';\n\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Tenses Quiz {\/* *\/} \u0627\u062e\u062a\u0628\u0627\u0631 \u0627\u0644\u0623\u0632\u0645\u0646\u0629 {\/* *\/} Tenses Quiz \u0647\u0630\u0627 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 24 \u0633\u0624\u0627\u0644 \u0645\u062a\u0639\u062f\u062f \u0627\u0644\u062e\u064a\u0627\u0631\u0627\u062a \u0628\u062a\u0631\u062a\u064a\u0628 \u0639\u0634\u0648\u0627\u0626\u064a. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_sitemap_exclude":false,"_sitemap_priority":"","_sitemap_frequency":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"reaction":[],"class_list":["post-4962","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"aioseo_notices":[],"wps_subtitle":"","_links":{"self":[{"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4962","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4962"}],"version-history":[{"count":2,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4962\/revisions"}],"predecessor-version":[{"id":4975,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4962\/revisions\/4975"}],"wp:attachment":[{"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4962"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4962"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4962"},{"taxonomy":"reaction","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Freaction&post=4962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}