\u0627\u062e\u062a\u0628\u0627\u0631 \u0636\u0645\u0627\u0626\u0631 \u0627\u0644\u0648\u0635\u0644 (Relative Pronouns)<\/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&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: 'Tajawal', sans-serif;\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, h2 { color: var(--primary-color); margin-bottom: 15px; font-size: 1.8em; }\n h2 { font-size: 1.5em; margin-bottom: 20px; }\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 { font-size: 1.3em; font-weight: bold; margin-bottom: 25px; min-height: 50px; direction: ltr; text-align: left; } \/* Adjusted for English questions *\/\n .options-container { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; direction: ltr;} \/* Adjusted for English options *\/\n @media (min-width: 600px) { .options-container { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; } }\n .option-btn { background-color: var(--light-color); border: 1px solid #ddd; color: var(--text-color); padding: 10px 12px; border-radius: var(--border-radius); cursor: pointer; transition: all 0.3s ease; font-size: 1em; text-align: left; width: 100%; word-wrap: break-word; } \/* Adjusted text alignment *\/\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; }\n .nav-btn, #start-btn, #restart-btn { background-color: var(--primary-color); color: white; border: none; padding: 10px 20px; border-radius: var(--border-radius); cursor: pointer; font-size: 1em; transition: background-color 0.3s ease; }\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; } \/* Progress bar 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; }\n #progress-text { margin-top: 6px; font-size: 0.9em; color: var(--secondary-color); }\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; }\n .review-container { margin-top: 20px; text-align: right; max-height: 350px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; border-radius: var(--border-radius); }\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; direction: ltr; text-align: left; } \/* Review Question LTR *\/\n .review-user-answer { direction: ltr; text-align: left; } \/* Review Answer LTR *\/\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; direction: ltr; text-align: left; } \/* Review Correct Answer LTR *\/\n #feedback { min-height: 20px; margin-top: 10px; font-weight: bold; font-size: 1em; }\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 @media (max-width: 600px) {\n body { padding: 10px; }\n .quiz-container { padding: 15px; margin-top: 10px; margin-bottom: 10px; }\n h1 { font-size: 1.6em; }\n h2 { font-size: 1.3em; }\n #start-screen p { 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 \u0636\u0645\u0627\u0626\u0631 \u0627\u0644\u0648\u0635\u0644 (Relative Pronouns)<\/h1>\n <p>\u0647\u0630\u0627 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 34 \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 <button id=\"prev-btn\" class=\"nav-btn\" onclick=\"prevQuestion()\">\u0627\u0644\u0633\u0627\u0628\u0642<\/button>\n <button id=\"next-btn\" class=\"nav-btn\" onclick=\"nextQuestion()\">\u0627\u0644\u062a\u0627\u0644\u064a<\/button>\n <\/div>\n <div class=\"progress-container\">\n <div id=\"progress-bar\"><\/div>\n <\/div>\n <div id=\"progress-text\">0 \/ 34<\/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\">\n <\/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 \/\/ 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 \/\/ Questions Data extracted and cleaned from the PDF\n const originalEnglishQuizQuestions = [\n \/\/ From Page 2\n { originalIndex: 1, question: \"The skirt is a lovely dark blue colour, ________ only cost \u00a310.\", options: [\"who\", \"which\", \"where\", \"when\"], correctAnswer: \"which\", userAnswer: null, isCorrect: null },\n { originalIndex: 2, question: \"My grandfather, ________ is 87, goes swimming every day.\", options: [\"who\", \"which\", \"where\", \"when\"], correctAnswer: \"who\", userAnswer: null, isCorrect: null },\n { originalIndex: 3, question: \"The film, ________ stars Tom Carter, is released on Friday.\", options: [\"who\", \"which\", \"where\", \"when\"], correctAnswer: \"which\", userAnswer: null, isCorrect: null },\n { originalIndex: 4, question: \"My sister, ________ is now living in New York, has just had a baby.\", options: [\"who\", \"which\", \"where\", \"whose\"], correctAnswer: \"who\", userAnswer: null, isCorrect: null },\n { originalIndex: 5, question: \"I'd like to eat at the restaurant ________ we met.\", options: [\"who\", \"which\", \"where\", \"when\"], correctAnswer: \"where\", userAnswer: null, isCorrect: null },\n { originalIndex: 6, question: \"I'll always remember the day ________ we met.\", options: [\"who\", \"which\", \"where\", \"when\"], correctAnswer: \"when\", userAnswer: null, isCorrect: null },\n { originalIndex: 7, question: \"This is the place ________ I saw him the last time.\", options: [\"who\", \"which\", \"where\", \"when\"], correctAnswer: \"where\", userAnswer: null, isCorrect: null },\n { originalIndex: 8, question: \"Sony is building a robot ________ can form an 'emotional connection' with humans.\", options: [\"who\", \"which\", \"where\", \"when\"], correctAnswer: \"which\", userAnswer: null, isCorrect: null },\n { originalIndex: 9, question: \"Is that the man ________ house was destroyed by the hurricane?\", options: [\"who\", \"which\", \"whose\", \"when\"], correctAnswer: \"whose\", userAnswer: null, isCorrect: null },\n { originalIndex: 10, question: \"Is that the boy ________ insulted you?\", options: [\"who\", \"which\", \"where\", \"whose\"], correctAnswer: \"who\", userAnswer: null, isCorrect: null },\n { originalIndex: 11, question: \"He gave me the letter, ________ I read immediately.\", options: [\"who\", \"which\", \"where\", \"whose\"], correctAnswer: \"which\", userAnswer: null, isCorrect: null },\n { originalIndex: 12, question: \"We visited the castle ________ was built by the Romans.\", options: [\"where\", \"when\", \"who\", \"which\"], correctAnswer: \"which\", userAnswer: null, isCorrect: null },\n { originalIndex: 13, question: \"In the second century ________ most people emigrated from Arabia.\", options: [\"where\", \"when\", \"who\", \"which\"], correctAnswer: \"when\", userAnswer: null, isCorrect: null },\n \/\/ From Page 3 (\u0648\u0632\u0627\u0631\u064a)\n { originalIndex: 14, question: \"Al-kindi ________ made many important mathematical discoveries was a true polymath.\", options: [\"which\", \"whole\", \"when\", \"who\"], correctAnswer: \"who\", userAnswer: null, isCorrect: null },\n { originalIndex: 15, question: \"In Qasr Bashir, there are about twenty-three stables ________ horses may have been kept.\", options: [\"when\", \"where\", \"which\", \"who\"], correctAnswer: \"where\", userAnswer: null, isCorrect: null },\n { originalIndex: 16, question: \"The event ________ took place in London in 2012 CE was the Olympic Games.\", options: [\"when\", \"that\", \"where\", \"who\"], correctAnswer: \"that\", userAnswer: null, isCorrect: null },\n { originalIndex: 17, question: \"The country ________ Jabir ibn Hayan did his research in a laboratory was Iraq.\", options: [\"who\", \"where\", \"which\", \"when\"], correctAnswer: \"where\", userAnswer: null, isCorrect: null },\n { originalIndex: 18, question: \"Ibn Sina ________ is also known as Avicenna was a polymath.\", options: [\"that\", \"where\", \"who\", \"when\"], correctAnswer: \"who\", userAnswer: null, isCorrect: null }, \/\/ Note: Duplicate text, using first occurrence options\n { originalIndex: 19, question: \"The day ________ I have to call to schedule an appointment is Monday.\", options: [\"who\", \"where\", \"which\", \"when\"], correctAnswer: \"when\", userAnswer: null, isCorrect: null },\n { originalIndex: 20, question: \"My father ________ loves exploring historical Roman ruins will certainly find a visit to Qasr Bashir very interesting.\", options: [\"who\", \"when\", \"which\", \"where\"], correctAnswer: \"who\", userAnswer: null, isCorrect: null },\n { originalIndex: 21, question: \"The cake ________ my mother made tasted really great.\", options: [\"who\", \"that\", \"when\", \"where\"], correctAnswer: \"that\", userAnswer: null, isCorrect: null },\n { originalIndex: 22, question: \"\\\"Physician\\\" is an old-fashioned word ________ means \\\"doctor\\\".\", options: [\"when\", \"who\", \"where\", \"which\"], correctAnswer: \"which\", userAnswer: null, isCorrect: null },\n { originalIndex: 23, question: \"Ibn Sina ________ is also known as Avicenna was a polymath.\", options: [\"which\", \"where\", \"who\", \"when\"], correctAnswer: \"who\", userAnswer: null, isCorrect: null }, \/\/ Note: Duplicate text, using second occurrence options\n { originalIndex: 24, question: \"Thank you very much for your e-mail ________ was interesting.\", options: [\"where\", \"who\", \"when\", \"which\"], correctAnswer: \"which\", userAnswer: null, isCorrect: null },\n { originalIndex: 25, question: \"Ali, ________ mother is a professor, forgot his umbrella.\", options: [\"whose\", \"when\", \"where\", \"who\"], correctAnswer: \"whose\", userAnswer: null, isCorrect: null },\n { originalIndex: 26, question: \"The old hotel ________ we stayed last week was really big.\", options: [\"when\", \"where\", \"who\", \"whose\"], correctAnswer: \"where\", userAnswer: null, isCorrect: null },\n { originalIndex: 27, question: \"It was at night ________ the rescue team arrived at the scene of the accident.\", options: [\"where\", \"when\", \"which\", \"who\"], correctAnswer: \"when\", userAnswer: null, isCorrect: null },\n \/\/ From Page 4 (\u0648\u0632\u0627\u0631\u064a cont.)\n { originalIndex: 28, question: \"The person ________ won the prize for Art last year was Sara.\", options: [\"which\", \"where\", \"who\", \"when\"], correctAnswer: \"who\", userAnswer: null, isCorrect: null },\n { originalIndex: 29, question: \"The country ________ the scientists did their research was Jordan.\", options: [\"whose\", \"where\", \"who\", \"when\"], correctAnswer: \"where\", userAnswer: null, isCorrect: null },\n { originalIndex: 30, question: \"It was the month of Ramadan ________ Ibn Sina died.\", options: [\"which\", \"who\", \"where\", \"when\"], correctAnswer: \"when\", userAnswer: null, isCorrect: null },\n { originalIndex: 31, question: \"Many computers have filters ________ stop people seeing certain websites.\", options: [\"which\", \"who\", \"where\", \"when\"], correctAnswer: \"which\", userAnswer: null, isCorrect: null },\n { originalIndex: 32, question: \"The architect of the tower was Ahmad Ben Baste, ________ began work in 1184 CE.\", options: [\"which\", \"who\", \"where\", \"when\"], correctAnswer: \"who\", userAnswer: null, isCorrect: null },\n { originalIndex: 33, question: \"The stars and planets are things ________ astronomers study.\", options: [\"that\", \"who\", \"where\", \"when\"], correctAnswer: \"that\", userAnswer: null, isCorrect: null },\n { originalIndex: 34, question: \"Ibn Sina wrote on early Islamic philosophy, ________ included many subjects, especially logic and ethics.\", options: [\"which\", \"who\", \"where\", \"when\"], correctAnswer: \"which\", userAnswer: null, isCorrect: null }\n ];\n\n\n \/\/ --- JavaScript Logic (Mostly Identical, adapted variable names and total) ---\n let questions = [...originalEnglishQuizQuestions]; \/\/ Use the new questions data\n let currentQuestionIndex = 0;\n let score = 0;\n const totalQuestions = questions.length; \/\/ Updated to 34\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 shuffleArray(questions);\n startScreen.style.display = 'none';\n resultsScreen.style.display = 'none';\n quizScreen.style.display = 'block';\n currentQuestionIndex = 0;\n score = 0;\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 = `\u0627\u0644\u0633\u0624\u0627\u0644 ${index + 1} \u0645\u0646 ${totalQuestions}`;\n questionTextEl.textContent = currentQuestion.question;\n optionsContainer.innerHTML = '';\n \/\/ Options shuffling might be confusing for language learning, let's keep original PDF order for options if needed.\n \/\/ const shuffledOptions = [...currentQuestion.options];\n \/\/ shuffleArray(shuffledOptions);\n const options = currentQuestion.options; \/\/ Use original order for consistency\n const alreadyAnswered = currentQuestion.userAnswer !== null;\n\n options.forEach(option => {\n const button = document.createElement('button');\n button.textContent = option;\n button.classList.add('option-btn');\n button.disabled = alreadyAnswered;\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 \/\/ Highlight correct answer if user was wrong\n button.classList.add('correct');\n }\n } else {\n button.onclick = () => handleAnswer(button, option);\n }\n optionsContainer.appendChild(button);\n });\n updateProgressBar();\n updateNavigationButtons();\n \/\/ Scroll to top of question on load\n quizScreen.scrollTop = 0;\n }\n\n function handleAnswer(selectedButton, selectedAnswer) {\n const currentQuestion = questions[currentQuestionIndex];\n if (currentQuestion.userAnswer !== null) return; \/\/ Prevent re-answering\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!';\n feedbackEl.className = 'correct';\n } else {\n selectedButton.classList.add('incorrect');\n feedbackEl.textContent = `\u0625\u062c\u0627\u0628\u0629 \u062e\u0627\u0637\u0626\u0629! \u0627\u0644\u0635\u062d\u064a\u062d: ${currentQuestion.correctAnswer}`; \/\/ Show correct answer immediately in feedback\n feedbackEl.className = 'incorrect';\n \/\/ Find and highlight the correct button\n optionButtons.forEach(btn => {\n if (btn.textContent === currentQuestion.correctAnswer) {\n btn.classList.add('correct'); \/\/ Highlight correct one immediately\n }\n });\n }\n \/\/ Automatically move to the next question after a short delay\n setTimeout(() => {\n nextQuestion();\n }, 1500); \/\/ Delay of 1.5 seconds\n }\n\n function updateProgressBar() {\n \/\/ Calculate answered questions for accurate progress\n const answeredQuestions = questions.filter(q => q.userAnswer !== null).length;\n const progressPercentage = ((answeredQuestions) \/ totalQuestions) * 100;\n progressBar.style.width = `${progressPercentage}%`;\n progressTextEl.textContent = `${answeredQuestions} \/ ${totalQuestions}`; \/\/ Show answered count\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 = '\u0627\u0644\u062a\u0627\u0644\u064a';\n }\n \/\/ Disable next button if current question hasn't been answered yet? Optional.\n \/\/ nextBtn.disabled = questions[currentQuestionIndex].userAnswer === null;\n }\n\n function nextQuestion() {\n if (currentQuestionIndex < totalQuestions - 1) {\n currentQuestionIndex++;\n loadQuestion(currentQuestionIndex);\n } else {\n \/\/ Check if all questions answered before showing results\n const allAnswered = questions.every(q => q.userAnswer !== null);\n if (allAnswered) {\n showResults();\n } else {\n \/\/ Optionally prompt user to answer remaining questions\n \/\/ Or simply load the last question again if it wasn't answered\n loadQuestion(currentQuestionIndex);\n \/\/ Or find the first unanswered question and jump to it\n }\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 = ''; \/\/ Clear previous review\n \/\/ Sort questions by their original index for review\n const sortedQuestionsForReview = [...questions].sort((a, b) => a.originalIndex - b.originalIndex);\n\n sortedQuestionsForReview.forEach((q) => {\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 = `${q.originalIndex}. ${q.question}`; \/\/ Show original index and question\n\n const userAnswerP = document.createElement('p');\n userAnswerP.classList.add('review-user-answer');\n if (q.userAnswer === null) {\n userAnswerP.textContent = '\u0625\u062c\u0627\u0628\u062a\u0643: \u0644\u0645 \u062a\u062a\u0645 \u0627\u0644\u0625\u062c\u0627\u0628\u0629';\n userAnswerP.classList.add('incorrect'); \/\/ Mark unanswered as incorrect visually\n } else {\n userAnswerP.textContent = `\u0625\u062c\u0627\u0628\u062a\u0643: ${q.userAnswer}`;\n userAnswerP.classList.add(q.isCorrect ? 'correct' : 'incorrect');\n }\n\n reviewItem.appendChild(questionP);\n reviewItem.appendChild(userAnswerP);\n\n \/\/ Always show the correct answer in review for learning\n const correctAnswerP = document.createElement('p');\n correctAnswerP.classList.add('review-correct-answer');\n correctAnswerP.textContent = `\u0627\u0644\u0625\u062c\u0627\u0628\u0629 \u0627\u0644\u0635\u062d\u064a\u062d\u0629: ${q.correctAnswer}`;\n reviewItem.appendChild(correctAnswerP);\n\n reviewContainer.appendChild(reviewItem);\n });\n \/\/ Scroll to top of results\n resultsScreen.scrollTop = 0;\n }\n\n function restartQuiz() {\n questions = [...originalEnglishQuizQuestions]; \/\/ Reset with original data\n startQuiz(); \/\/ Start the quiz process again\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 \u0636\u0645\u0627\u0626\u0631 \u0627\u0644\u0648\u0635\u0644 (Relative Pronouns) \u0627\u062e\u062a\u0628\u0627\u0631 \u0636\u0645\u0627\u0626\u0631 \u0627\u0644\u0648\u0635\u0644 (Relative Pronouns) \u0647\u0630\u0627 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 34 \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-4969","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\/4969","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=4969"}],"version-history":[{"count":1,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4969\/revisions"}],"predecessor-version":[{"id":4970,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4969\/revisions\/4970"}],"wp:attachment":[{"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4969"},{"taxonomy":"reaction","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Freaction&post=4969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":4969,"date":"2025-04-16T16:34:47","date_gmt":"2025-04-16T16:34:47","guid":{"rendered":"https:\/\/tawjihy.com\/?p=4969"},"modified":"2025-04-16T16:34:49","modified_gmt":"2025-04-16T16:34:49","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%b6%d9%85%d8%a7%d8%a6%d8%b1-%d8%a7%d9%84%d9%88%d8%b5%d9%84-%d8%a7%d9%84%d9%84%d8%ba%d8%a9","status":"publish","type":"post","link":"https:\/\/tawjihy.com\/?p=4969","title":{"rendered":"\u0627\u0645\u062a\u062d\u0627\u0646 \u0645\u062d\u0648\u0633\u0628 \u0644\u0642\u0627\u0639\u062f\u0629 \u0636\u0645\u0627\u0626\u0631 \u0627\u0644\u0648\u0635\u0644 \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 \u0636\u0645\u0627\u0626\u0631 \u0627\u0644\u0648\u0635\u0644 (Relative Pronouns)<\/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&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: 'Tajawal', sans-serif;\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, h2 { color: var(--primary-color); margin-bottom: 15px; font-size: 1.8em; }\n h2 { font-size: 1.5em; margin-bottom: 20px; }\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 { font-size: 1.3em; font-weight: bold; margin-bottom: 25px; min-height: 50px; direction: ltr; text-align: left; } \/* Adjusted for English questions *\/\n .options-container { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; direction: ltr;} \/* Adjusted for English options *\/\n @media (min-width: 600px) { .options-container { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; } }\n .option-btn { background-color: var(--light-color); border: 1px solid #ddd; color: var(--text-color); padding: 10px 12px; border-radius: var(--border-radius); cursor: pointer; transition: all 0.3s ease; font-size: 1em; text-align: left; width: 100%; word-wrap: break-word; } \/* Adjusted text alignment *\/\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; }\n .nav-btn, #start-btn, #restart-btn { background-color: var(--primary-color); color: white; border: none; padding: 10px 20px; border-radius: var(--border-radius); cursor: pointer; font-size: 1em; transition: background-color 0.3s ease; }\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; } \/* Progress bar 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; }\n #progress-text { margin-top: 6px; font-size: 0.9em; color: var(--secondary-color); }\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; }\n .review-container { margin-top: 20px; text-align: right; max-height: 350px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; border-radius: var(--border-radius); }\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; direction: ltr; text-align: left; } \/* Review Question LTR *\/\n .review-user-answer { direction: ltr; text-align: left; } \/* Review Answer LTR *\/\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; direction: ltr; text-align: left; } \/* Review Correct Answer LTR *\/\n #feedback { min-height: 20px; margin-top: 10px; font-weight: bold; font-size: 1em; }\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 @media (max-width: 600px) {\n body { padding: 10px; }\n .quiz-container { padding: 15px; margin-top: 10px; margin-bottom: 10px; }\n h1 { font-size: 1.6em; }\n h2 { font-size: 1.3em; }\n #start-screen p { 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 \u0636\u0645\u0627\u0626\u0631 \u0627\u0644\u0648\u0635\u0644 (Relative Pronouns)<\/h1>\n <p>\u0647\u0630\u0627 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 34 \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 <button id=\"prev-btn\" class=\"nav-btn\" onclick=\"prevQuestion()\">\u0627\u0644\u0633\u0627\u0628\u0642<\/button>\n <button id=\"next-btn\" class=\"nav-btn\" onclick=\"nextQuestion()\">\u0627\u0644\u062a\u0627\u0644\u064a<\/button>\n <\/div>\n <div class=\"progress-container\">\n <div id=\"progress-bar\"><\/div>\n <\/div>\n <div id=\"progress-text\">0 \/ 34<\/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\">\n <\/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 \/\/ 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 \/\/ Questions Data extracted and cleaned from the PDF\n const originalEnglishQuizQuestions = [\n \/\/ From Page 2\n { originalIndex: 1, question: \"The skirt is a lovely dark blue colour, ________ only cost \u00a310.\", options: [\"who\", \"which\", \"where\", \"when\"], correctAnswer: \"which\", userAnswer: null, isCorrect: null },\n { originalIndex: 2, question: \"My grandfather, ________ is 87, goes swimming every day.\", options: [\"who\", \"which\", \"where\", \"when\"], correctAnswer: \"who\", userAnswer: null, isCorrect: null },\n { originalIndex: 3, question: \"The film, ________ stars Tom Carter, is released on Friday.\", options: [\"who\", \"which\", \"where\", \"when\"], correctAnswer: \"which\", userAnswer: null, isCorrect: null },\n { originalIndex: 4, question: \"My sister, ________ is now living in New York, has just had a baby.\", options: [\"who\", \"which\", \"where\", \"whose\"], correctAnswer: \"who\", userAnswer: null, isCorrect: null },\n { originalIndex: 5, question: \"I'd like to eat at the restaurant ________ we met.\", options: [\"who\", \"which\", \"where\", \"when\"], correctAnswer: \"where\", userAnswer: null, isCorrect: null },\n { originalIndex: 6, question: \"I'll always remember the day ________ we met.\", options: [\"who\", \"which\", \"where\", \"when\"], correctAnswer: \"when\", userAnswer: null, isCorrect: null },\n { originalIndex: 7, question: \"This is the place ________ I saw him the last time.\", options: [\"who\", \"which\", \"where\", \"when\"], correctAnswer: \"where\", userAnswer: null, isCorrect: null },\n { originalIndex: 8, question: \"Sony is building a robot ________ can form an 'emotional connection' with humans.\", options: [\"who\", \"which\", \"where\", \"when\"], correctAnswer: \"which\", userAnswer: null, isCorrect: null },\n { originalIndex: 9, question: \"Is that the man ________ house was destroyed by the hurricane?\", options: [\"who\", \"which\", \"whose\", \"when\"], correctAnswer: \"whose\", userAnswer: null, isCorrect: null },\n { originalIndex: 10, question: \"Is that the boy ________ insulted you?\", options: [\"who\", \"which\", \"where\", \"whose\"], correctAnswer: \"who\", userAnswer: null, isCorrect: null },\n { originalIndex: 11, question: \"He gave me the letter, ________ I read immediately.\", options: [\"who\", \"which\", \"where\", \"whose\"], correctAnswer: \"which\", userAnswer: null, isCorrect: null },\n { originalIndex: 12, question: \"We visited the castle ________ was built by the Romans.\", options: [\"where\", \"when\", \"who\", \"which\"], correctAnswer: \"which\", userAnswer: null, isCorrect: null },\n { originalIndex: 13, question: \"In the second century ________ most people emigrated from Arabia.\", options: [\"where\", \"when\", \"who\", \"which\"], correctAnswer: \"when\", userAnswer: null, isCorrect: null },\n \/\/ From Page 3 (\u0648\u0632\u0627\u0631\u064a)\n { originalIndex: 14, question: \"Al-kindi ________ made many important mathematical discoveries was a true polymath.\", options: [\"which\", \"whole\", \"when\", \"who\"], correctAnswer: \"who\", userAnswer: null, isCorrect: null },\n { originalIndex: 15, question: \"In Qasr Bashir, there are about twenty-three stables ________ horses may have been kept.\", options: [\"when\", \"where\", \"which\", \"who\"], correctAnswer: \"where\", userAnswer: null, isCorrect: null },\n { originalIndex: 16, question: \"The event ________ took place in London in 2012 CE was the Olympic Games.\", options: [\"when\", \"that\", \"where\", \"who\"], correctAnswer: \"that\", userAnswer: null, isCorrect: null },\n { originalIndex: 17, question: \"The country ________ Jabir ibn Hayan did his research in a laboratory was Iraq.\", options: [\"who\", \"where\", \"which\", \"when\"], correctAnswer: \"where\", userAnswer: null, isCorrect: null },\n { originalIndex: 18, question: \"Ibn Sina ________ is also known as Avicenna was a polymath.\", options: [\"that\", \"where\", \"who\", \"when\"], correctAnswer: \"who\", userAnswer: null, isCorrect: null }, \/\/ Note: Duplicate text, using first occurrence options\n { originalIndex: 19, question: \"The day ________ I have to call to schedule an appointment is Monday.\", options: [\"who\", \"where\", \"which\", \"when\"], correctAnswer: \"when\", userAnswer: null, isCorrect: null },\n { originalIndex: 20, question: \"My father ________ loves exploring historical Roman ruins will certainly find a visit to Qasr Bashir very interesting.\", options: [\"who\", \"when\", \"which\", \"where\"], correctAnswer: \"who\", userAnswer: null, isCorrect: null },\n { originalIndex: 21, question: \"The cake ________ my mother made tasted really great.\", options: [\"who\", \"that\", \"when\", \"where\"], correctAnswer: \"that\", userAnswer: null, isCorrect: null },\n { originalIndex: 22, question: \"\\\"Physician\\\" is an old-fashioned word ________ means \\\"doctor\\\".\", options: [\"when\", \"who\", \"where\", \"which\"], correctAnswer: \"which\", userAnswer: null, isCorrect: null },\n { originalIndex: 23, question: \"Ibn Sina ________ is also known as Avicenna was a polymath.\", options: [\"which\", \"where\", \"who\", \"when\"], correctAnswer: \"who\", userAnswer: null, isCorrect: null }, \/\/ Note: Duplicate text, using second occurrence options\n { originalIndex: 24, question: \"Thank you very much for your e-mail ________ was interesting.\", options: [\"where\", \"who\", \"when\", \"which\"], correctAnswer: \"which\", userAnswer: null, isCorrect: null },\n { originalIndex: 25, question: \"Ali, ________ mother is a professor, forgot his umbrella.\", options: [\"whose\", \"when\", \"where\", \"who\"], correctAnswer: \"whose\", userAnswer: null, isCorrect: null },\n { originalIndex: 26, question: \"The old hotel ________ we stayed last week was really big.\", options: [\"when\", \"where\", \"who\", \"whose\"], correctAnswer: \"where\", userAnswer: null, isCorrect: null },\n { originalIndex: 27, question: \"It was at night ________ the rescue team arrived at the scene of the accident.\", options: [\"where\", \"when\", \"which\", \"who\"], correctAnswer: \"when\", userAnswer: null, isCorrect: null },\n \/\/ From Page 4 (\u0648\u0632\u0627\u0631\u064a cont.)\n { originalIndex: 28, question: \"The person ________ won the prize for Art last year was Sara.\", options: [\"which\", \"where\", \"who\", \"when\"], correctAnswer: \"who\", userAnswer: null, isCorrect: null },\n { originalIndex: 29, question: \"The country ________ the scientists did their research was Jordan.\", options: [\"whose\", \"where\", \"who\", \"when\"], correctAnswer: \"where\", userAnswer: null, isCorrect: null },\n { originalIndex: 30, question: \"It was the month of Ramadan ________ Ibn Sina died.\", options: [\"which\", \"who\", \"where\", \"when\"], correctAnswer: \"when\", userAnswer: null, isCorrect: null },\n { originalIndex: 31, question: \"Many computers have filters ________ stop people seeing certain websites.\", options: [\"which\", \"who\", \"where\", \"when\"], correctAnswer: \"which\", userAnswer: null, isCorrect: null },\n { originalIndex: 32, question: \"The architect of the tower was Ahmad Ben Baste, ________ began work in 1184 CE.\", options: [\"which\", \"who\", \"where\", \"when\"], correctAnswer: \"who\", userAnswer: null, isCorrect: null },\n { originalIndex: 33, question: \"The stars and planets are things ________ astronomers study.\", options: [\"that\", \"who\", \"where\", \"when\"], correctAnswer: \"that\", userAnswer: null, isCorrect: null },\n { originalIndex: 34, question: \"Ibn Sina wrote on early Islamic philosophy, ________ included many subjects, especially logic and ethics.\", options: [\"which\", \"who\", \"where\", \"when\"], correctAnswer: \"which\", userAnswer: null, isCorrect: null }\n ];\n\n\n \/\/ --- JavaScript Logic (Mostly Identical, adapted variable names and total) ---\n let questions = [...originalEnglishQuizQuestions]; \/\/ Use the new questions data\n let currentQuestionIndex = 0;\n let score = 0;\n const totalQuestions = questions.length; \/\/ Updated to 34\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 shuffleArray(questions);\n startScreen.style.display = 'none';\n resultsScreen.style.display = 'none';\n quizScreen.style.display = 'block';\n currentQuestionIndex = 0;\n score = 0;\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 = `\u0627\u0644\u0633\u0624\u0627\u0644 ${index + 1} \u0645\u0646 ${totalQuestions}`;\n questionTextEl.textContent = currentQuestion.question;\n optionsContainer.innerHTML = '';\n \/\/ Options shuffling might be confusing for language learning, let's keep original PDF order for options if needed.\n \/\/ const shuffledOptions = [...currentQuestion.options];\n \/\/ shuffleArray(shuffledOptions);\n const options = currentQuestion.options; \/\/ Use original order for consistency\n const alreadyAnswered = currentQuestion.userAnswer !== null;\n\n options.forEach(option => {\n const button = document.createElement('button');\n button.textContent = option;\n button.classList.add('option-btn');\n button.disabled = alreadyAnswered;\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 \/\/ Highlight correct answer if user was wrong\n button.classList.add('correct');\n }\n } else {\n button.onclick = () => handleAnswer(button, option);\n }\n optionsContainer.appendChild(button);\n });\n updateProgressBar();\n updateNavigationButtons();\n \/\/ Scroll to top of question on load\n quizScreen.scrollTop = 0;\n }\n\n function handleAnswer(selectedButton, selectedAnswer) {\n const currentQuestion = questions[currentQuestionIndex];\n if (currentQuestion.userAnswer !== null) return; \/\/ Prevent re-answering\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!';\n feedbackEl.className = 'correct';\n } else {\n selectedButton.classList.add('incorrect');\n feedbackEl.textContent = `\u0625\u062c\u0627\u0628\u0629 \u062e\u0627\u0637\u0626\u0629! \u0627\u0644\u0635\u062d\u064a\u062d: ${currentQuestion.correctAnswer}`; \/\/ Show correct answer immediately in feedback\n feedbackEl.className = 'incorrect';\n \/\/ Find and highlight the correct button\n optionButtons.forEach(btn => {\n if (btn.textContent === currentQuestion.correctAnswer) {\n btn.classList.add('correct'); \/\/ Highlight correct one immediately\n }\n });\n }\n \/\/ Automatically move to the next question after a short delay\n setTimeout(() => {\n nextQuestion();\n }, 1500); \/\/ Delay of 1.5 seconds\n }\n\n function updateProgressBar() {\n \/\/ Calculate answered questions for accurate progress\n const answeredQuestions = questions.filter(q => q.userAnswer !== null).length;\n const progressPercentage = ((answeredQuestions) \/ totalQuestions) * 100;\n progressBar.style.width = `${progressPercentage}%`;\n progressTextEl.textContent = `${answeredQuestions} \/ ${totalQuestions}`; \/\/ Show answered count\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 = '\u0627\u0644\u062a\u0627\u0644\u064a';\n }\n \/\/ Disable next button if current question hasn't been answered yet? Optional.\n \/\/ nextBtn.disabled = questions[currentQuestionIndex].userAnswer === null;\n }\n\n function nextQuestion() {\n if (currentQuestionIndex < totalQuestions - 1) {\n currentQuestionIndex++;\n loadQuestion(currentQuestionIndex);\n } else {\n \/\/ Check if all questions answered before showing results\n const allAnswered = questions.every(q => q.userAnswer !== null);\n if (allAnswered) {\n showResults();\n } else {\n \/\/ Optionally prompt user to answer remaining questions\n \/\/ Or simply load the last question again if it wasn't answered\n loadQuestion(currentQuestionIndex);\n \/\/ Or find the first unanswered question and jump to it\n }\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 = ''; \/\/ Clear previous review\n \/\/ Sort questions by their original index for review\n const sortedQuestionsForReview = [...questions].sort((a, b) => a.originalIndex - b.originalIndex);\n\n sortedQuestionsForReview.forEach((q) => {\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 = `${q.originalIndex}. ${q.question}`; \/\/ Show original index and question\n\n const userAnswerP = document.createElement('p');\n userAnswerP.classList.add('review-user-answer');\n if (q.userAnswer === null) {\n userAnswerP.textContent = '\u0625\u062c\u0627\u0628\u062a\u0643: \u0644\u0645 \u062a\u062a\u0645 \u0627\u0644\u0625\u062c\u0627\u0628\u0629';\n userAnswerP.classList.add('incorrect'); \/\/ Mark unanswered as incorrect visually\n } else {\n userAnswerP.textContent = `\u0625\u062c\u0627\u0628\u062a\u0643: ${q.userAnswer}`;\n userAnswerP.classList.add(q.isCorrect ? 'correct' : 'incorrect');\n }\n\n reviewItem.appendChild(questionP);\n reviewItem.appendChild(userAnswerP);\n\n \/\/ Always show the correct answer in review for learning\n const correctAnswerP = document.createElement('p');\n correctAnswerP.classList.add('review-correct-answer');\n correctAnswerP.textContent = `\u0627\u0644\u0625\u062c\u0627\u0628\u0629 \u0627\u0644\u0635\u062d\u064a\u062d\u0629: ${q.correctAnswer}`;\n reviewItem.appendChild(correctAnswerP);\n\n reviewContainer.appendChild(reviewItem);\n });\n \/\/ Scroll to top of results\n resultsScreen.scrollTop = 0;\n }\n\n function restartQuiz() {\n questions = [...originalEnglishQuizQuestions]; \/\/ Reset with original data\n startQuiz(); \/\/ Start the quiz process again\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 \u0636\u0645\u0627\u0626\u0631 \u0627\u0644\u0648\u0635\u0644 (Relative Pronouns) \u0627\u062e\u062a\u0628\u0627\u0631 \u0636\u0645\u0627\u0626\u0631 \u0627\u0644\u0648\u0635\u0644 (Relative Pronouns) \u0647\u0630\u0627 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 34 \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-4969","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\/4969","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=4969"}],"version-history":[{"count":1,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4969\/revisions"}],"predecessor-version":[{"id":4970,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4969\/revisions\/4970"}],"wp:attachment":[{"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4969"},{"taxonomy":"reaction","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Freaction&post=4969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}