\u0627\u062e\u062a\u0628\u0627\u0631 \u0627\u0644\u062c\u0645\u0644 \u0627\u0644\u0645\u0646\u0642\u0633\u0645\u0629<\/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 h1 { color: var(--primary-color); margin-bottom: 15px; font-size: 1.6em; font-family: 'Tajawal', 'Roboto', sans-serif; } \/* Arabic first for main title *\/\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; font-family: 'Tajawal', 'Roboto', sans-serif; direction: rtl;}\n #quiz-screen { display: none; }\n .question-header { margin-bottom: 15px; font-size: 1em; color: var(--secondary-color); text-align: left;}\n \/* Style for original sentence context *\/\n .original-sentence-context {\n font-style: italic;\n color: var(--secondary-color);\n margin-bottom: 10px;\n font-size: 1.1em;\n text-align: left;\n direction: ltr;\n }\n #question-text {\n font-size: 1.3em;\n font-weight: bold;\n margin-bottom: 25px;\n min-height: 50px;\n text-align: left;\n direction: ltr;\n }\n .options-container {\n display: grid;\n grid-template-columns: 1fr;\n gap: 10px;\n margin-bottom: 20px;\n direction: ltr;\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;\n width: 100%;\n word-wrap: break-word;\n font-family: 'Roboto', 'Tajawal', sans-serif;\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; }\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;\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; }\n #progress-text { margin-top: 6px; font-size: 0.9em; color: var(--secondary-color); text-align: center; }\n #results-screen h2 { margin-bottom: 15px; font-size: 1.6em; font-family: 'Tajawal', 'Roboto', sans-serif; }\n #score { font-size: 1.6em; font-weight: bold; color: var(--dark-color); margin-bottom: 25px; direction: rtl; }\n #results-screen h3 { direction: rtl; font-family: 'Tajawal', 'Roboto', sans-serif;}\n .review-container {\n margin-top: 20px;\n text-align: left;\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;\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-context { font-style: italic; color: #555; margin-bottom: 5px; font-size: 0.9em; }\n .review-question { font-weight: bold; }\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; }\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 (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; }\n .original-sentence-context { font-size: 1em; }\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\u062c\u0645\u0644 \u0627\u0644\u0645\u0646\u0642\u0633\u0645\u0629<\/h1> {\/* *\/}\n <h2>Cleft Sentences Quiz<\/h2>\n {\/* *\/}\n <p>\u0647\u0630\u0627 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 21 \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 \u0645\u0646 \u0623\u0633\u0626\u0644\u0629 \u0627\u0644\u0648\u0632\u0627\u0631\u064a \u0627\u0644\u0633\u0627\u0628\u0642\u0629.<\/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 {\/* *\/}\n <div class=\"original-sentence-context\" id=\"original-sentence\"><\/div>\n <div id=\"question-text\"><\/div>\n <div class=\"options-container\" id=\"options-container\"><\/div>\n <div id=\"feedback\"><\/div>\n <div class=\"navigation-buttons\">\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 \/ 21<\/div>\n <\/div>\n\n <div id=\"results-screen\" style=\"display: none;\">\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\"><\/div>\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 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 Cleft Sentence Questions from \u0627\u0644\u0648\u0632\u0627\u0631\u064a section\n const englishQuizQuestions = [\n \/\/ Q1 (Completion)\n { type: 'completion', question: \"Complete the sentence: The person ________\", options: [\"who invented Al-Jazari the mechanical clock was in the twelfth century.\", \"who invented the mechanical clock in the twelfth century was Al-Jazari.\", \"who invented the twelfth century in the mechanical clock was Al-Jazari.\", \"who invented in the twelfth century Al-Jazari was the mechanical clock.\"], correctAnswer: \"who invented the mechanical clock in the twelfth century was Al-Jazari.\", originalSentence: null },\n \/\/ Q2 (Rewrite)\n { type: 'rewrite', question: \"Choose the sentence which emphasises the underlined words:\", options: [\"The thing which made the players cancel the game is the rainy weather.\", \"The thing which makes the players cancel the game was the rainy weather.\", \"The thing which made the players cancel the game was the rainy weather.\", \"The thing which makes the players cancel the game is the rainy weather.\"], correctAnswer: \"The thing which made the players cancel the game was the rainy weather.\", originalSentence: \"The <u>rainy weather<\/u> made the players cancel the game.\" },\n \/\/ Q3 (Rewrite)\n { type: 'rewrite', question: \"Choose the sentence which emphasises the underlined words:\", options: [\"it is 9 p.m. when I finished typing the report.\", \"it was 9 p.m. when I finish typing the report.\", \"it is 9 p.m. when I finish typing the report.\", \"it was 9 p.m. when I finished typing the report.\"], correctAnswer: \"it was 9 p.m. when I finished typing the report.\", originalSentence: \"I finished typing the report at <u>9 p.m.<\/u>\" },\n \/\/ Q4 (Rewrite - Similar Meaning)\n { type: 'rewrite', question: \"Choose the sentence which has a similar meaning (using cleft structure):\", options: [\"The year when Petra was made a World Heritage Site was 1985CE.\", \"The year when Petra was made a World Heritage Site is 1985CE.\", \"The year which Petra was made a World Heritage Site was 1985CE.\", \"The year when Petra is made a World Heritage Site was 1985CE.\"], correctAnswer: \"The year when Petra was made a World Heritage Site was 1985CE.\", originalSentence: \"Petra was made a World Heritage Site in 1985CE.\" },\n \/\/ Q5 (Rewrite - Emphasize Bold) - Assuming bold was 'in 2012 CE'\n { type: 'rewrite', question: \"Choose the correct cleft sentence that emphasises the time:\", options: [\"in 2012 CE that the Olympic Games were held in London\", \"it is in 2012 CE that the Olympic Games were held in London\", \"it was in 2012 CE that the Olympic Games were held in London\", \"it in 2012 CE that the Olympic Games were held in London\"], correctAnswer: \"it was in 2012 CE that the Olympic Games were held in London\", originalSentence: \"The Olympic Games were held in London <b>in 2012 CE<\/b>.\" },\n \/\/ Q6 (Completion)\n { type: 'completion', question: \"Complete the sentence: it ________ 11 p.m. when I stopped working.\", options: [\"be\", \"is\", \"was\", \"been\"], correctAnswer: \"was\", originalSentence: null },\n \/\/ Q7 (Rewrite - Emphasize Bold) - Assuming bold was 'The heat'\n { type: 'rewrite', question: \"Choose the correct cleft sentence that emphasises the cause:\", options: [\"it was the heat which made the journey unpleasant.\", \"it is the heat that made the journey unpleasant.\", \"it was the heat which makes the journey unpleasant.\", \"it is the heat which made the journey unpleasant.\"], correctAnswer: \"it was the heat which made the journey unpleasant.\", originalSentence: \"<b>The heat<\/b> made the journey unpleasant.\" },\n \/\/ Q8 (Rewrite - Emphasize Bold) - Assuming bold was 'geography'\n { type: 'rewrite', question: \"Choose the correct cleft sentence that emphasises the subject:\", options: [\"The subject that I like most of all is Geography.\", \"The subject I like most of all was Geography.\", \"That the subject I liked most of all is Geography.\", \"That I like most of all is the Geography.\"], correctAnswer: \"The subject that I like most of all is Geography.\", originalSentence: \"I like <b>geography<\/b> most of all.\" },\n \/\/ Q9 (Completion)\n { type: 'completion', question: \"Complete the sentence: ________ the invention of the oud was Al-Kindi.\", options: [\"The person who contributed to\", \"The person who contributing to\", \"it is the person who contributed to\", \"it is Al-Kindi who contributed to\"], correctAnswer: \"The person who contributed to\", originalSentence: null },\n \/\/ Q10 (Rewrite - Emphasize Bold) - Assuming bold was 'English'\n { type: 'rewrite', question: \"Choose the correct cleft sentence that emphasises the subject:\", options: [\"The person that I liked most of all has been English.\", \"The subject that I like most of all is English.\", \"The subject which I like most of all was English.\", \"The person which I liked most of all has been English.\"], correctAnswer: \"The subject that I like most of all is English.\", originalSentence: \"I like <b>English<\/b> most of all.\" },\n \/\/ Q11 (Completion)\n { type: 'completion', question: \"Complete the sentence: ________ Jabir Ibn Hayyan did his research in a laboratory was Iraq.\", options: [\"The country when\", \"The year where\", \"The place when\", \"The country where\"], correctAnswer: \"The country where\", originalSentence: null },\n \/\/ Q12 (Completion)\n { type: 'completion', question: \"Complete the sentence: The year when Petra was made a World Heritage Site ________ 1985 CE.\", options: [\"was\", \"be\", \"are\", \"been\"], correctAnswer: \"was\", originalSentence: null },\n \/\/ Q13 (Rewrite - Choose any valid Cleft)\n { type: 'rewrite', question: \"Choose a correctly formed cleft sentence from the original:\", options: [\"The person who won the prize for Art last year was Huda.\", \"The prize that Huda won last year was for Art.\", \"it was last year that Huda won the prize for Art.\", \"The prize which was won by Huda last year was for Art.\"], correctAnswer: \"The person who won the prize for Art last year was Huda.\", originalSentence: \"Huda won the prize for Art last year.\" }, \/\/ Note: B and C are also potentially valid depending on focus. A is chosen as a common default.\n \/\/ Q14 (Completion)\n { type: 'completion', question: \"Complete the sentence: ________ me how to play the drum.\", options: [\"it was my uncle who taught\", \"it is my uncle teaching\", \"My uncle who taught\", \"it was my uncle taught\"], correctAnswer: \"it was my uncle who taught\", originalSentence: null },\n \/\/ Q15 (Rewrite - Focus on Person)\n { type: 'rewrite', question: \"Choose the cleft sentence that correctly emphasizes the person influencing:\", options: [\"It was the person who has been influenced most by my father.\", \"It was me who has been influenced most by my father.\", \"The person who has influenced me most is my father.\", \"The person who has been most influenced by my father is me.\"], correctAnswer: \"The person who has influenced me most is my father.\", originalSentence: \"My father has influenced me most.\" },\n \/\/ Q16 (Rewrite - Focus on Subject\/Action) - Ambiguous focus, choosing subject focus.\n { type: 'rewrite', question: \"Choose the cleft sentence that best emphasizes who established the school:\", options: [\"It was in 789 CE that Ali ibn Nafi' established the first music school in Cordoba.\", \"the person who established the first music school in Cordoba was Ali ibn Nafi'.\", \"the year when Ali ibn Nafi' established the first music school in Cordoba was 789 CE.\", \"the thing that Ali ibn Nafi' established in Cordoba was the first music school.\"], correctAnswer: \"the person who established the first music school in Cordoba was Ali ibn Nafi'.\", originalSentence: \"Ali ibn Nafi' (who was born in 789 CE) established the first music school in Cordoba.\" },\n \/\/ Q17 (Rewrite - Emphasize Person)\n { type: 'rewrite', question: \"Choose the sentence which emphasises the underlined person:\", options: [\"The year when Naguib Mahfouz won Nobel Prize for Literature was 1988.\", \"The person who won Nobel Prize for Literature in 1988 was Naguib Mahfouz.\", \"it was Naguib Mahfouz who won Nobel Prize for Literature in 1988.\", \"The thing that Naguib Mahfouz won in 1988 was Nobel Prize for Literature.\"], correctAnswer: \"it was Naguib Mahfouz who won Nobel Prize for Literature in 1988.\", originalSentence: \"The person who won Nobel Prize for Literature in 1988 was <u>Naguib Mahfouz<\/u>.\" },\n \/\/ Q18 (Rewrite - Emphasize Person)\n { type: 'rewrite', question: \"Choose the sentence which emphasises the underlined person:\", options: [\"The thing that Dr Jamal revolutionised in the world was the nutrition system.\", \"The person who revolutionised the nutrition system in the world is Dr Jamal.\", \"it was Dr Jamal who revolutionised the nutrition system in the world.\", \"The thing which revolutionised Dr Jamal was the nutrition system in the world.\"], correctAnswer: \"it was Dr Jamal who revolutionised the nutrition system in the world.\", originalSentence: \"<u>Dr Jamal<\/u> revolutionised the nutrition system in the world.\" },\n \/\/ Q19 (Duplicate of Q1 - Completion)\n { type: 'completion', question: \"Complete the sentence: The person ________\", options: [\"who invented Al-Jazari the mechanical clock was in the twelfth century.\", \"who invented the mechanical clock in the twelfth century was Al-Jazari.\", \"who invented the twelfth century in the mechanical clock was Al-Jazari.\", \"who invented in the twelfth century Al-Jazari was the mechanical clock.\"], correctAnswer: \"who invented the mechanical clock in the twelfth century was Al-Jazari.\", originalSentence: null },\n \/\/ Q20 (Rewrite - Emphasize Thing)\n { type: 'rewrite', question: \"Choose the sentence which emphasises the underlined words:\", options: [\"The person who was especially famous for his work in geometry was Al-Kindi.\", \"The time that Al-Kindi lived in was the 9th century.\", \"The thing that Al-Kindi was especially famous for was his work in geometry.\", \"it was Al-Kindi who was especially famous for his work in geometry.\"], correctAnswer: \"The thing that Al-Kindi was especially famous for was his work in geometry.\", originalSentence: \"Al-Kindi lived in the 9th century and was especially famous for <u>his work in geometry<\/u>.\" },\n \/\/ Q21 (Rewrite - Emphasize Person)\n { type: 'rewrite', question: \"Choose the sentence which emphasises the underlined person:\", options: [\"The person who invented the mechanical clock in the twelfth century was Al-Jazari.\", \"it was Al-Jazari who invented the mechanical clock in the twelfth century.\", \"it was the mechanical clock that Al-Jazari invented in the twelfth century.\", \"it was in the twelfth century that Al-Jazari invented the mechanical clock.\"], correctAnswer: \"it was Al-Jazari who invented the mechanical clock in the twelfth century.\", originalSentence: \"<u>Al-Jazari<\/u> invented the mechanical clock in the twelfth century.\" }\n ];\n\n let questions = []; \/\/ Will be populated in startQuiz\n let currentQuestionIndex = 0;\n let score = 0;\n const totalQuestions = englishQuizQuestions.length; \/\/ Total is 21\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 originalSentenceEl = document.getElementById('original-sentence'); \/\/ Get context element\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 questions = englishQuizQuestions.map((q, index) => ({ ...q, originalIndex: index, userAnswer: null, isCorrect: null }));\n shuffleArray(questions); \/\/ Shuffle the questions array\n\n startScreen.style.display = 'none';\n resultsScreen.style.display = 'none';\n quizScreen.style.display = 'block';\n currentQuestionIndex = 0;\n score = 0;\n progressTextEl.textContent = `0 \/ ${totalQuestions}`;\n loadQuestion(currentQuestionIndex);\n }\n\n function loadQuestion(index) {\n feedbackEl.textContent = '';\n feedbackEl.className = '';\n const currentQuestion = questions[index];\n\n \/\/ Display original sentence context if available\n if (currentQuestion.originalSentence) {\n \/\/ Use innerHTML to render bold\/underline tags if present\n originalSentenceEl.innerHTML = `Original: ${currentQuestion.originalSentence}`;\n originalSentenceEl.style.display = 'block';\n } else {\n originalSentenceEl.style.display = 'none';\n originalSentenceEl.innerHTML = ''; \/\/ Clear previous context\n }\n\n questionNumberEl.textContent = `Question ${index + 1} of ${totalQuestions}`;\n questionTextEl.textContent = currentQuestion.question; \/\/ Main instruction\/question part\n optionsContainer.innerHTML = '';\n\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 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 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);\n\n if (isCorrect) {\n score++;\n selectedButton.classList.add('correct');\n feedbackEl.textContent = '\u0625\u062c\u0627\u0628\u0629 \u0635\u062d\u064a\u062d\u0629!';\n feedbackEl.className = 'correct';\n } else {\n selectedButton.classList.add('incorrect');\n feedbackEl.textContent = '\u0625\u062c\u0627\u0628\u0629 \u062e\u0627\u0637\u0626\u0629!';\n feedbackEl.className = 'incorrect';\n optionButtons.forEach(btn => {\n if (btn.textContent === currentQuestion.correctAnswer) {\n btn.classList.add('correct');\n }\n });\n }\n }\n\n function updateProgressBar() {\n const answeredCount = questions.filter(q => q.userAnswer !== null).length;\n \/\/ Base progress on answered questions OR current index, depending on desired behavior\n \/\/ Using current index for smoother progress feel:\n const progressPercentage = ((currentQuestionIndex + 1) \/ totalQuestions) * 100;\n \/\/ Using answered count:\n \/\/ const progressPercentage = (answeredCount \/ totalQuestions) * 100;\n\n progressBar.style.width = `${progressPercentage}%`;\n progressTextEl.textContent = `${currentQuestionIndex + 1} \/ ${totalQuestions}`; \/\/ Show position\n \/\/ Or show answered count:\n \/\/ progressTextEl.textContent = `${answeredCount} \/ ${totalQuestions}`;\n }\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';\n } else {\n nextBtn.textContent = 'Next';\n }\n \/\/ Optional: Disable Next until answer is selected\n \/\/ nextBtn.disabled = questions[currentQuestionIndex].userAnswer === null;\n }\n\n function nextQuestion() {\n \/\/ Optional: Check if answered\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}%)`;\n reviewContainer.innerHTML = '';\n\n \/\/ Sort by original index for review\n const sortedQuestionsForReview = [...questions].sort((a, b) => a.originalIndex - b.originalIndex);\n\n sortedQuestionsForReview.forEach((q) => {\n const originalQData = englishQuizQuestions[q.originalIndex]; \/\/ Get original data\n const reviewItem = document.createElement('div');\n reviewItem.classList.add('review-item');\n\n \/\/ Add original sentence context in review if it existed\n if(originalQData.originalSentence) {\n const contextP = document.createElement('p');\n contextP.classList.add('review-question-context');\n contextP.innerHTML = `Original: ${originalQData.originalSentence}`; \/\/ Use innerHTML for tags\n reviewItem.appendChild(contextP);\n }\n\n const questionP = document.createElement('p');\n questionP.classList.add('review-question');\n questionP.textContent = `${q.originalIndex + 1}. ${originalQData.question}`; \/\/ Use original index + 1\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');\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) {\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 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>\u0627\u062e\u062a\u0628\u0627\u0631 \u0627\u0644\u062c\u0645\u0644 \u0627\u0644\u0645\u0646\u0642\u0633\u0645\u0629 {\/* *\/} \u0627\u062e\u062a\u0628\u0627\u0631 \u0627\u0644\u062c\u0645\u0644 \u0627\u0644\u0645\u0646\u0642\u0633\u0645\u0629 {\/* *\/} Cleft Sentences Quiz {\/* *\/} \u0647\u0630\u0627 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 21 […]<\/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-4964","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\/4964","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=4964"}],"version-history":[{"count":1,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4964\/revisions"}],"predecessor-version":[{"id":4965,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4964\/revisions\/4965"}],"wp:attachment":[{"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4964"},{"taxonomy":"reaction","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Freaction&post=4964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":4964,"date":"2025-04-16T15:00:33","date_gmt":"2025-04-16T15:00:33","guid":{"rendered":"https:\/\/tawjihy.com\/?p=4964"},"modified":"2025-04-16T15:00:36","modified_gmt":"2025-04-16T15:00:36","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%ac%d9%85%d9%84-%d8%a7%d9%84%d9%85%d9%86%d9%82%d8%b3%d9%85%d8%a9-%d8%a7%d9%84","status":"publish","type":"post","link":"https:\/\/tawjihy.com\/?p=4964","title":{"rendered":"\u0627\u0645\u062a\u062d\u0627\u0646 \u0645\u062d\u0648\u0633\u0628 \u0644\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u062c\u0645\u0644 \u0627\u0644\u0645\u0646\u0642\u0633\u0645\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 \u0627\u062e\u062a\u0628\u0627\u0631 \u0627\u0644\u062c\u0645\u0644 \u0627\u0644\u0645\u0646\u0642\u0633\u0645\u0629<\/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 h1 { color: var(--primary-color); margin-bottom: 15px; font-size: 1.6em; font-family: 'Tajawal', 'Roboto', sans-serif; } \/* Arabic first for main title *\/\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; font-family: 'Tajawal', 'Roboto', sans-serif; direction: rtl;}\n #quiz-screen { display: none; }\n .question-header { margin-bottom: 15px; font-size: 1em; color: var(--secondary-color); text-align: left;}\n \/* Style for original sentence context *\/\n .original-sentence-context {\n font-style: italic;\n color: var(--secondary-color);\n margin-bottom: 10px;\n font-size: 1.1em;\n text-align: left;\n direction: ltr;\n }\n #question-text {\n font-size: 1.3em;\n font-weight: bold;\n margin-bottom: 25px;\n min-height: 50px;\n text-align: left;\n direction: ltr;\n }\n .options-container {\n display: grid;\n grid-template-columns: 1fr;\n gap: 10px;\n margin-bottom: 20px;\n direction: ltr;\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;\n width: 100%;\n word-wrap: break-word;\n font-family: 'Roboto', 'Tajawal', sans-serif;\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; }\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;\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; }\n #progress-text { margin-top: 6px; font-size: 0.9em; color: var(--secondary-color); text-align: center; }\n #results-screen h2 { margin-bottom: 15px; font-size: 1.6em; font-family: 'Tajawal', 'Roboto', sans-serif; }\n #score { font-size: 1.6em; font-weight: bold; color: var(--dark-color); margin-bottom: 25px; direction: rtl; }\n #results-screen h3 { direction: rtl; font-family: 'Tajawal', 'Roboto', sans-serif;}\n .review-container {\n margin-top: 20px;\n text-align: left;\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;\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-context { font-style: italic; color: #555; margin-bottom: 5px; font-size: 0.9em; }\n .review-question { font-weight: bold; }\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; }\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 (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; }\n .original-sentence-context { font-size: 1em; }\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\u062c\u0645\u0644 \u0627\u0644\u0645\u0646\u0642\u0633\u0645\u0629<\/h1> {\/* *\/}\n <h2>Cleft Sentences Quiz<\/h2>\n {\/* *\/}\n <p>\u0647\u0630\u0627 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 21 \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 \u0645\u0646 \u0623\u0633\u0626\u0644\u0629 \u0627\u0644\u0648\u0632\u0627\u0631\u064a \u0627\u0644\u0633\u0627\u0628\u0642\u0629.<\/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 {\/* *\/}\n <div class=\"original-sentence-context\" id=\"original-sentence\"><\/div>\n <div id=\"question-text\"><\/div>\n <div class=\"options-container\" id=\"options-container\"><\/div>\n <div id=\"feedback\"><\/div>\n <div class=\"navigation-buttons\">\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 \/ 21<\/div>\n <\/div>\n\n <div id=\"results-screen\" style=\"display: none;\">\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\"><\/div>\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 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 Cleft Sentence Questions from \u0627\u0644\u0648\u0632\u0627\u0631\u064a section\n const englishQuizQuestions = [\n \/\/ Q1 (Completion)\n { type: 'completion', question: \"Complete the sentence: The person ________\", options: [\"who invented Al-Jazari the mechanical clock was in the twelfth century.\", \"who invented the mechanical clock in the twelfth century was Al-Jazari.\", \"who invented the twelfth century in the mechanical clock was Al-Jazari.\", \"who invented in the twelfth century Al-Jazari was the mechanical clock.\"], correctAnswer: \"who invented the mechanical clock in the twelfth century was Al-Jazari.\", originalSentence: null },\n \/\/ Q2 (Rewrite)\n { type: 'rewrite', question: \"Choose the sentence which emphasises the underlined words:\", options: [\"The thing which made the players cancel the game is the rainy weather.\", \"The thing which makes the players cancel the game was the rainy weather.\", \"The thing which made the players cancel the game was the rainy weather.\", \"The thing which makes the players cancel the game is the rainy weather.\"], correctAnswer: \"The thing which made the players cancel the game was the rainy weather.\", originalSentence: \"The <u>rainy weather<\/u> made the players cancel the game.\" },\n \/\/ Q3 (Rewrite)\n { type: 'rewrite', question: \"Choose the sentence which emphasises the underlined words:\", options: [\"it is 9 p.m. when I finished typing the report.\", \"it was 9 p.m. when I finish typing the report.\", \"it is 9 p.m. when I finish typing the report.\", \"it was 9 p.m. when I finished typing the report.\"], correctAnswer: \"it was 9 p.m. when I finished typing the report.\", originalSentence: \"I finished typing the report at <u>9 p.m.<\/u>\" },\n \/\/ Q4 (Rewrite - Similar Meaning)\n { type: 'rewrite', question: \"Choose the sentence which has a similar meaning (using cleft structure):\", options: [\"The year when Petra was made a World Heritage Site was 1985CE.\", \"The year when Petra was made a World Heritage Site is 1985CE.\", \"The year which Petra was made a World Heritage Site was 1985CE.\", \"The year when Petra is made a World Heritage Site was 1985CE.\"], correctAnswer: \"The year when Petra was made a World Heritage Site was 1985CE.\", originalSentence: \"Petra was made a World Heritage Site in 1985CE.\" },\n \/\/ Q5 (Rewrite - Emphasize Bold) - Assuming bold was 'in 2012 CE'\n { type: 'rewrite', question: \"Choose the correct cleft sentence that emphasises the time:\", options: [\"in 2012 CE that the Olympic Games were held in London\", \"it is in 2012 CE that the Olympic Games were held in London\", \"it was in 2012 CE that the Olympic Games were held in London\", \"it in 2012 CE that the Olympic Games were held in London\"], correctAnswer: \"it was in 2012 CE that the Olympic Games were held in London\", originalSentence: \"The Olympic Games were held in London <b>in 2012 CE<\/b>.\" },\n \/\/ Q6 (Completion)\n { type: 'completion', question: \"Complete the sentence: it ________ 11 p.m. when I stopped working.\", options: [\"be\", \"is\", \"was\", \"been\"], correctAnswer: \"was\", originalSentence: null },\n \/\/ Q7 (Rewrite - Emphasize Bold) - Assuming bold was 'The heat'\n { type: 'rewrite', question: \"Choose the correct cleft sentence that emphasises the cause:\", options: [\"it was the heat which made the journey unpleasant.\", \"it is the heat that made the journey unpleasant.\", \"it was the heat which makes the journey unpleasant.\", \"it is the heat which made the journey unpleasant.\"], correctAnswer: \"it was the heat which made the journey unpleasant.\", originalSentence: \"<b>The heat<\/b> made the journey unpleasant.\" },\n \/\/ Q8 (Rewrite - Emphasize Bold) - Assuming bold was 'geography'\n { type: 'rewrite', question: \"Choose the correct cleft sentence that emphasises the subject:\", options: [\"The subject that I like most of all is Geography.\", \"The subject I like most of all was Geography.\", \"That the subject I liked most of all is Geography.\", \"That I like most of all is the Geography.\"], correctAnswer: \"The subject that I like most of all is Geography.\", originalSentence: \"I like <b>geography<\/b> most of all.\" },\n \/\/ Q9 (Completion)\n { type: 'completion', question: \"Complete the sentence: ________ the invention of the oud was Al-Kindi.\", options: [\"The person who contributed to\", \"The person who contributing to\", \"it is the person who contributed to\", \"it is Al-Kindi who contributed to\"], correctAnswer: \"The person who contributed to\", originalSentence: null },\n \/\/ Q10 (Rewrite - Emphasize Bold) - Assuming bold was 'English'\n { type: 'rewrite', question: \"Choose the correct cleft sentence that emphasises the subject:\", options: [\"The person that I liked most of all has been English.\", \"The subject that I like most of all is English.\", \"The subject which I like most of all was English.\", \"The person which I liked most of all has been English.\"], correctAnswer: \"The subject that I like most of all is English.\", originalSentence: \"I like <b>English<\/b> most of all.\" },\n \/\/ Q11 (Completion)\n { type: 'completion', question: \"Complete the sentence: ________ Jabir Ibn Hayyan did his research in a laboratory was Iraq.\", options: [\"The country when\", \"The year where\", \"The place when\", \"The country where\"], correctAnswer: \"The country where\", originalSentence: null },\n \/\/ Q12 (Completion)\n { type: 'completion', question: \"Complete the sentence: The year when Petra was made a World Heritage Site ________ 1985 CE.\", options: [\"was\", \"be\", \"are\", \"been\"], correctAnswer: \"was\", originalSentence: null },\n \/\/ Q13 (Rewrite - Choose any valid Cleft)\n { type: 'rewrite', question: \"Choose a correctly formed cleft sentence from the original:\", options: [\"The person who won the prize for Art last year was Huda.\", \"The prize that Huda won last year was for Art.\", \"it was last year that Huda won the prize for Art.\", \"The prize which was won by Huda last year was for Art.\"], correctAnswer: \"The person who won the prize for Art last year was Huda.\", originalSentence: \"Huda won the prize for Art last year.\" }, \/\/ Note: B and C are also potentially valid depending on focus. A is chosen as a common default.\n \/\/ Q14 (Completion)\n { type: 'completion', question: \"Complete the sentence: ________ me how to play the drum.\", options: [\"it was my uncle who taught\", \"it is my uncle teaching\", \"My uncle who taught\", \"it was my uncle taught\"], correctAnswer: \"it was my uncle who taught\", originalSentence: null },\n \/\/ Q15 (Rewrite - Focus on Person)\n { type: 'rewrite', question: \"Choose the cleft sentence that correctly emphasizes the person influencing:\", options: [\"It was the person who has been influenced most by my father.\", \"It was me who has been influenced most by my father.\", \"The person who has influenced me most is my father.\", \"The person who has been most influenced by my father is me.\"], correctAnswer: \"The person who has influenced me most is my father.\", originalSentence: \"My father has influenced me most.\" },\n \/\/ Q16 (Rewrite - Focus on Subject\/Action) - Ambiguous focus, choosing subject focus.\n { type: 'rewrite', question: \"Choose the cleft sentence that best emphasizes who established the school:\", options: [\"It was in 789 CE that Ali ibn Nafi' established the first music school in Cordoba.\", \"the person who established the first music school in Cordoba was Ali ibn Nafi'.\", \"the year when Ali ibn Nafi' established the first music school in Cordoba was 789 CE.\", \"the thing that Ali ibn Nafi' established in Cordoba was the first music school.\"], correctAnswer: \"the person who established the first music school in Cordoba was Ali ibn Nafi'.\", originalSentence: \"Ali ibn Nafi' (who was born in 789 CE) established the first music school in Cordoba.\" },\n \/\/ Q17 (Rewrite - Emphasize Person)\n { type: 'rewrite', question: \"Choose the sentence which emphasises the underlined person:\", options: [\"The year when Naguib Mahfouz won Nobel Prize for Literature was 1988.\", \"The person who won Nobel Prize for Literature in 1988 was Naguib Mahfouz.\", \"it was Naguib Mahfouz who won Nobel Prize for Literature in 1988.\", \"The thing that Naguib Mahfouz won in 1988 was Nobel Prize for Literature.\"], correctAnswer: \"it was Naguib Mahfouz who won Nobel Prize for Literature in 1988.\", originalSentence: \"The person who won Nobel Prize for Literature in 1988 was <u>Naguib Mahfouz<\/u>.\" },\n \/\/ Q18 (Rewrite - Emphasize Person)\n { type: 'rewrite', question: \"Choose the sentence which emphasises the underlined person:\", options: [\"The thing that Dr Jamal revolutionised in the world was the nutrition system.\", \"The person who revolutionised the nutrition system in the world is Dr Jamal.\", \"it was Dr Jamal who revolutionised the nutrition system in the world.\", \"The thing which revolutionised Dr Jamal was the nutrition system in the world.\"], correctAnswer: \"it was Dr Jamal who revolutionised the nutrition system in the world.\", originalSentence: \"<u>Dr Jamal<\/u> revolutionised the nutrition system in the world.\" },\n \/\/ Q19 (Duplicate of Q1 - Completion)\n { type: 'completion', question: \"Complete the sentence: The person ________\", options: [\"who invented Al-Jazari the mechanical clock was in the twelfth century.\", \"who invented the mechanical clock in the twelfth century was Al-Jazari.\", \"who invented the twelfth century in the mechanical clock was Al-Jazari.\", \"who invented in the twelfth century Al-Jazari was the mechanical clock.\"], correctAnswer: \"who invented the mechanical clock in the twelfth century was Al-Jazari.\", originalSentence: null },\n \/\/ Q20 (Rewrite - Emphasize Thing)\n { type: 'rewrite', question: \"Choose the sentence which emphasises the underlined words:\", options: [\"The person who was especially famous for his work in geometry was Al-Kindi.\", \"The time that Al-Kindi lived in was the 9th century.\", \"The thing that Al-Kindi was especially famous for was his work in geometry.\", \"it was Al-Kindi who was especially famous for his work in geometry.\"], correctAnswer: \"The thing that Al-Kindi was especially famous for was his work in geometry.\", originalSentence: \"Al-Kindi lived in the 9th century and was especially famous for <u>his work in geometry<\/u>.\" },\n \/\/ Q21 (Rewrite - Emphasize Person)\n { type: 'rewrite', question: \"Choose the sentence which emphasises the underlined person:\", options: [\"The person who invented the mechanical clock in the twelfth century was Al-Jazari.\", \"it was Al-Jazari who invented the mechanical clock in the twelfth century.\", \"it was the mechanical clock that Al-Jazari invented in the twelfth century.\", \"it was in the twelfth century that Al-Jazari invented the mechanical clock.\"], correctAnswer: \"it was Al-Jazari who invented the mechanical clock in the twelfth century.\", originalSentence: \"<u>Al-Jazari<\/u> invented the mechanical clock in the twelfth century.\" }\n ];\n\n let questions = []; \/\/ Will be populated in startQuiz\n let currentQuestionIndex = 0;\n let score = 0;\n const totalQuestions = englishQuizQuestions.length; \/\/ Total is 21\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 originalSentenceEl = document.getElementById('original-sentence'); \/\/ Get context element\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 questions = englishQuizQuestions.map((q, index) => ({ ...q, originalIndex: index, userAnswer: null, isCorrect: null }));\n shuffleArray(questions); \/\/ Shuffle the questions array\n\n startScreen.style.display = 'none';\n resultsScreen.style.display = 'none';\n quizScreen.style.display = 'block';\n currentQuestionIndex = 0;\n score = 0;\n progressTextEl.textContent = `0 \/ ${totalQuestions}`;\n loadQuestion(currentQuestionIndex);\n }\n\n function loadQuestion(index) {\n feedbackEl.textContent = '';\n feedbackEl.className = '';\n const currentQuestion = questions[index];\n\n \/\/ Display original sentence context if available\n if (currentQuestion.originalSentence) {\n \/\/ Use innerHTML to render bold\/underline tags if present\n originalSentenceEl.innerHTML = `Original: ${currentQuestion.originalSentence}`;\n originalSentenceEl.style.display = 'block';\n } else {\n originalSentenceEl.style.display = 'none';\n originalSentenceEl.innerHTML = ''; \/\/ Clear previous context\n }\n\n questionNumberEl.textContent = `Question ${index + 1} of ${totalQuestions}`;\n questionTextEl.textContent = currentQuestion.question; \/\/ Main instruction\/question part\n optionsContainer.innerHTML = '';\n\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 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 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);\n\n if (isCorrect) {\n score++;\n selectedButton.classList.add('correct');\n feedbackEl.textContent = '\u0625\u062c\u0627\u0628\u0629 \u0635\u062d\u064a\u062d\u0629!';\n feedbackEl.className = 'correct';\n } else {\n selectedButton.classList.add('incorrect');\n feedbackEl.textContent = '\u0625\u062c\u0627\u0628\u0629 \u062e\u0627\u0637\u0626\u0629!';\n feedbackEl.className = 'incorrect';\n optionButtons.forEach(btn => {\n if (btn.textContent === currentQuestion.correctAnswer) {\n btn.classList.add('correct');\n }\n });\n }\n }\n\n function updateProgressBar() {\n const answeredCount = questions.filter(q => q.userAnswer !== null).length;\n \/\/ Base progress on answered questions OR current index, depending on desired behavior\n \/\/ Using current index for smoother progress feel:\n const progressPercentage = ((currentQuestionIndex + 1) \/ totalQuestions) * 100;\n \/\/ Using answered count:\n \/\/ const progressPercentage = (answeredCount \/ totalQuestions) * 100;\n\n progressBar.style.width = `${progressPercentage}%`;\n progressTextEl.textContent = `${currentQuestionIndex + 1} \/ ${totalQuestions}`; \/\/ Show position\n \/\/ Or show answered count:\n \/\/ progressTextEl.textContent = `${answeredCount} \/ ${totalQuestions}`;\n }\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';\n } else {\n nextBtn.textContent = 'Next';\n }\n \/\/ Optional: Disable Next until answer is selected\n \/\/ nextBtn.disabled = questions[currentQuestionIndex].userAnswer === null;\n }\n\n function nextQuestion() {\n \/\/ Optional: Check if answered\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}%)`;\n reviewContainer.innerHTML = '';\n\n \/\/ Sort by original index for review\n const sortedQuestionsForReview = [...questions].sort((a, b) => a.originalIndex - b.originalIndex);\n\n sortedQuestionsForReview.forEach((q) => {\n const originalQData = englishQuizQuestions[q.originalIndex]; \/\/ Get original data\n const reviewItem = document.createElement('div');\n reviewItem.classList.add('review-item');\n\n \/\/ Add original sentence context in review if it existed\n if(originalQData.originalSentence) {\n const contextP = document.createElement('p');\n contextP.classList.add('review-question-context');\n contextP.innerHTML = `Original: ${originalQData.originalSentence}`; \/\/ Use innerHTML for tags\n reviewItem.appendChild(contextP);\n }\n\n const questionP = document.createElement('p');\n questionP.classList.add('review-question');\n questionP.textContent = `${q.originalIndex + 1}. ${originalQData.question}`; \/\/ Use original index + 1\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');\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) {\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 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>\u0627\u062e\u062a\u0628\u0627\u0631 \u0627\u0644\u062c\u0645\u0644 \u0627\u0644\u0645\u0646\u0642\u0633\u0645\u0629 {\/* *\/} \u0627\u062e\u062a\u0628\u0627\u0631 \u0627\u0644\u062c\u0645\u0644 \u0627\u0644\u0645\u0646\u0642\u0633\u0645\u0629 {\/* *\/} Cleft Sentences Quiz {\/* *\/} \u0647\u0630\u0627 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 21 […]<\/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-4964","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\/4964","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=4964"}],"version-history":[{"count":1,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4964\/revisions"}],"predecessor-version":[{"id":4965,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4964\/revisions\/4965"}],"wp:attachment":[{"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4964"},{"taxonomy":"reaction","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Freaction&post=4964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}