\u0627\u062e\u062a\u0628\u0627\u0631 \u0627\u0644\u0645\u0628\u0646\u064a \u0644\u0644\u0645\u062c\u0647\u0648\u0644<\/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; }\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; \/* Keep questions left-to-right *\/}\n .options-container { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; direction: ltr; \/* Keep options left-to-right *\/}\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; \/* Align option text left *\/ width: 100%; word-wrap: break-word; }\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; }\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); direction: ltr; \/* Keep review left-to-right *\/}\n .review-item { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px dashed #ccc; font-size: 0.95em; text-align: left; \/* Align review item text left *\/}\n .review-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }\n .review-item p { margin: 4px 0; }\n .review-question { font-weight: bold; }\n .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; }\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 \u0627\u0644\u0645\u0628\u0646\u064a \u0644\u0644\u0645\u062c\u0647\u0648\u0644 (Passive Voice)<\/h1>\n <h2>\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629<\/h2>\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.<\/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 \/ 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\">\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 from the PDF (Passive Voice)\n const originalEnglishQuizQuestions = [\n { originalIndex: 1, question: \"The sentence which has a similar meaning to 'This German company manufactures hybrid engines.' is:\", options: [\"Hybrid engines were manufactured by this German company.\", \"Hybrid engines are manufactured by this German company.\", \"Hybrid engines have been manufactured by this German company.\", \"Hybrid engines are being manufactured by this German company.\"], correctAnswer: \"Hybrid engines are manufactured by this German company.\", userAnswer: null, isCorrect: null },\n { originalIndex: 2, question: \"The sentence which has a similar meaning to 'By 2035, you could embed a chip like this in your wrist.' is:\", options: [\"By 2035, a chip like this could embed in your wrist.\", \"By 2035, a chip like this could be embedding in your wrist.\", \"By 2035, a chip like this could be embedded in your wrist.\", \"By 2035, a chip like this can be embedded in your wrist.\"], correctAnswer: \"By 2035, a chip like this could be embedded in your wrist.\", userAnswer: null, isCorrect: null },\n { originalIndex: 3, question: \"The sentence which has a similar meaning to 'Over two million people have downloaded this 'body tracking' app.' is:\", options: [\"This 'body tracking' app has been downloaded by over two million people.\", \"This 'body tracking' app is downloaded by over two million people.\", \"This 'body tracking' app was downloaded by over two million people.\", \"This 'body tracking' app had been downloaded by over two million people.\"], correctAnswer: \"This 'body tracking' app has been downloaded by over two million people.\", userAnswer: null, isCorrect: null },\n { originalIndex: 4, question: \"The sentence which has a similar meaning to 'An insect caused the malfunction.' is:\", options: [\"The malfunction is caused by an insect.\", \"The malfunction was caused by an insect.\", \"The malfunction has been caused by an insect.\", \"The malfunction had been caused by an insect.\"], correctAnswer: \"The malfunction was caused by an insect.\", userAnswer: null, isCorrect: null },\n { originalIndex: 5, question: \"The sentence which has a similar meaning to 'Somebody was regularly hacking into celebrities' smartphones.' is:\", options: [\"Celebrities' smartphones were regularly hacked into.\", \"Celebrities' smartphones were regularly being hacked into.\", \"Celebrities' smartphones have been regularly hacked into.\", \"Celebrities' smartphones are being regularly hacked into.\"], correctAnswer: \"Celebrities' smartphones were regularly being hacked into.\", userAnswer: null, isCorrect: null },\n { originalIndex: 6, question: \"The sentence which has a similar meaning to 'Most people are going to use wearables in the near future.' is:\", options: [\"Wearables are going to be used by most people in the near future.\", \"Wearables are used by most people in the near future.\", \"Wearables were going to be used by most people in the near future.\", \"Wearables are being used by most people in the near future.\"], correctAnswer: \"Wearables are going to be used by most people in the near future.\", userAnswer: null, isCorrect: null },\n { originalIndex: 7, question: \"The sentence which has a similar meaning to 'I would really like to employ one of the giant tech companies.' is:\", options: [\"I would really like being employed by one of the giant tech companies.\", \"I would really like employ one of the giant tech companies.\", \"I would really like to be employed by one of the giant tech companies.\", \"I would really like to have employed by one of the giant tech companies.\"], correctAnswer: \"I would really like to be employed by one of the giant tech companies.\", userAnswer: null, isCorrect: null },\n { originalIndex: 8, question: \"The sentence which has a similar meaning to 'Young people don't need telling how to use new devices.' is:\", options: [\"Young people don't need to told how to use new devices.\", \"Young people don't need to be told how to use new devices.\", \"Young people don't need told how to use new devices.\", \"Young people don't need to telling how to use new devices.\"], correctAnswer: \"Young people don't need to be told how to use new devices.\", userAnswer: null, isCorrect: null },\n { originalIndex: 9, question: \"The sentence which has a similar meaning to 'The new phone implants are going to sell in all kinds of shops.' is:\", options: [\"The new phone implants are going to selling in all kinds of shops.\", \"The new phone implants are going to being sold in all kinds of shops.\", \"The new phone implants are going to be sold in all kinds of shops.\", \"The new phone implants are going to have been sold in all kinds of shops.\"], correctAnswer: \"The new phone implants are going to be sold in all kinds of shops.\", userAnswer: null, isCorrect: null },\n { originalIndex: 10, question: \"The sentence which has a similar meaning to 'The teacher congratulated them on invited to take part in the science fair next week.' is:\", options: [\"The teacher congratulated them on is inviting to take part in the science fair next week.\", \"The teacher congratulated them on being invited to take part in the science fair next week.\", \"The teacher congratulated them on to be invited to take part in the science fair next week.\", \"The teacher congratulated them on have been invited to take part in the science fair next week.\"], correctAnswer: \"The teacher congratulated them on being invited to take part in the science fair next week.\", userAnswer: null, isCorrect: null },\n { originalIndex: 11, question: \"I am writing to complain about one of your company's smartwatches, which ________ to me last week.\", options: [\"was giving\", \"was given\", \"be given\", \"has given\"], correctAnswer: \"was given\", userAnswer: null, isCorrect: null },\n { originalIndex: 12, question: \"Firstly, it ________ in large amounts of unnecessary plastic packaging.\", options: [\"was wrapping\", \"has wrapped\", \"are wrapped\", \"be wrapped\"], correctAnswer: \"was wrapping\", userAnswer: null, isCorrect: null },\n { originalIndex: 13, question: \"Don't you think your products ________ in a more eco-friendly way?\", options: [\"should be packaging\", \"should is packaged\", \"should be packaged\", \"should be\"], correctAnswer: \"should be packaged\", userAnswer: null, isCorrect: null },\n { originalIndex: 14, question: \"Secondly, the watch clearly ________ before being sent from your factory.\", options: [\"was not checked\", \"was not checking\", \"were not checking\", \"had not checked\"], correctAnswer: \"was not checked\", userAnswer: null, isCorrect: null },\n { originalIndex: 16, question: \"We would appreciate it if this ________ without unnecessary plastic packaging.\", options: [\"could be doing\", \"could be done\", \"could have been doing\", \"could doing\"], correctAnswer: \"could be done\", userAnswer: null, isCorrect: null },\n { originalIndex: 17, question: \"Our Smart Doorbell ________ at our factory in Portugal.\", options: [\"is manufacturing\", \"has manufactured\", \"is manufactured\", \"be manufactured\"], correctAnswer: \"is manufactured\", userAnswer: null, isCorrect: null },\n { originalIndex: 18, question: \"To date, over 10,000 of our doorbells have ________ throughout Europe.\", options: [\"have sold\", \"been sold\", \"were sold\", \"are sold\"], correctAnswer: \"been sold\", userAnswer: null, isCorrect: null },\n { originalIndex: 19, question: \"The on-board camera can ________ to see who's at your door.\", options: [\"be used\", \"used\", \"using\", \"be using\"], correctAnswer: \"be used\", userAnswer: null, isCorrect: null },\n { originalIndex: 20, question: \"To activate this function, the doorbell needs to ________ with one of our smart locks.\", options: [\"be pairing\", \"be paired\", \"pairing\", \"paired\"], correctAnswer: \"be paired\", userAnswer: null, isCorrect: null },\n { originalIndex: 21, question: \"the all-important charging cable ________.\", options: [\"was not included\", \"was not including\", \"be not included\", \"has not included\"], correctAnswer: \"was not included\", userAnswer: null, isCorrect: null },\n { originalIndex: 22, question: \"Could a cable please ________ to us as soon as possible?\", options: [\"be sent\", \"be send\", \"be sending\", \"has been sending\"], correctAnswer: \"be sent\", userAnswer: null, isCorrect: null }\n ];\n\n \/\/ --- JavaScript Logic ---\n let questions = [...originalEnglishQuizQuestions];\n let currentQuestionIndex = 0;\n let score = 0;\n const totalQuestions = questions.length; \/\/ Now 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 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 \/\/ Assign a temporary index for display during the quiz after shuffle\n questions.forEach((q, index) => { q.quizIndex = index + 1; });\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 \/\/ Use the temporary quizIndex for display number\n questionNumberEl.textContent = `\u0627\u0644\u0633\u0624\u0627\u0644 ${currentQuestion.quizIndex} \u0645\u0646 ${totalQuestions}`;\n questionTextEl.textContent = currentQuestion.question;\n optionsContainer.innerHTML = '';\n const shuffledOptions = [...currentQuestion.options];\n shuffleArray(shuffledOptions);\n const alreadyAnswered = currentQuestion.userAnswer !== null;\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 if (alreadyAnswered) {\n if (option === currentQuestion.userAnswer) {\n button.classList.add(currentQuestion.isCorrect ? 'correct' : 'incorrect');\n } else if (option === currentQuestion.correctAnswer && !currentQuestion.isCorrect) {\n \/\/ Only show 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 }\n\n function handleAnswer(selectedButton, selectedAnswer) {\n const currentQuestion = questions[currentQuestionIndex];\n if (currentQuestion.userAnswer !== null) return; \/\/ Prevent re-answering\n currentQuestion.userAnswer = selectedAnswer;\n const isCorrect = selectedAnswer === currentQuestion.correctAnswer;\n currentQuestion.isCorrect = isCorrect;\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!';\n feedbackEl.className = 'incorrect';\n \/\/ Highlight the correct answer after a short delay\n optionButtons.forEach(btn => {\n if (btn.textContent === currentQuestion.correctAnswer) {\n setTimeout(() => { btn.classList.add('correct'); }, 500); \/\/ Delay helps user see their wrong choice first\n }\n });\n }\n \/\/ Optional: Automatically move to the next question after a delay\n \/\/ setTimeout(nextQuestion, 1500);\n }\n\n function updateProgressBar() {\n \/\/ Calculate answered questions count\n const answeredCount = questions.filter(q => q.userAnswer !== null).length;\n const progressPercentage = (answeredCount \/ totalQuestions) * 100;\n progressBar.style.width = `${progressPercentage}%`;\n \/\/ Display current question number based on quizIndex\n progressTextEl.textContent = `${questions[currentQuestionIndex].quizIndex} \/ ${totalQuestions}`;\n }\n\n\n function updateNavigationButtons() {\n prevBtn.disabled = currentQuestionIndex === 0;\n \/\/ Enable Next button only if the current question has been answered, or if it's the last question\n \/\/ nextBtn.disabled = questions[currentQuestionIndex].userAnswer === null && currentQuestionIndex < totalQuestions - 1;\n\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 }\n\n function nextQuestion() {\n if (currentQuestionIndex < totalQuestions - 1) {\n currentQuestionIndex++;\n loadQuestion(currentQuestionIndex);\n } else {\n \/\/ Check if the last question was answered before showing results\n \/\/ if (questions[currentQuestionIndex].userAnswer !== null) {\n showResults();\n \/\/ } else {\n \/\/ Optionally alert the user to answer the last question\n \/\/ alert(\"\u0627\u0644\u0631\u062c\u0627\u0621 \u0627\u0644\u0625\u062c\u0627\u0628\u0629 \u0639\u0644\u0649 \u0627\u0644\u0633\u0624\u0627\u0644 \u0627\u0644\u0623\u062e\u064a\u0631 \u0642\u0628\u0644 \u0625\u0646\u0647\u0627\u0621 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631.\");\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 = '';\n \/\/ Sort questions by their original index for review\n const sortedQuestionsForReview = [...questions].sort((a, b) => a.originalIndex - b.originalIndex);\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 \/\/ Use originalIndex for review numbering\n questionP.textContent = `${q.originalIndex}. ${q.question}`;\n reviewItem.appendChild(questionP);\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'); \/\/ Mark unanswered as incorrect visually\n } else {\n userAnswerP.textContent = `Your Answer: ${q.userAnswer} (${q.isCorrect ? 'Correct' : 'Incorrect'})`;\n userAnswerP.classList.add(q.isCorrect ? 'correct' : 'incorrect');\n }\n reviewItem.appendChild(userAnswerP);\n\n \/\/ Show correct answer only if the user was wrong or didn't answer\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 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 \u0627\u0644\u0645\u0628\u0646\u064a \u0644\u0644\u0645\u062c\u0647\u0648\u0644 \u0627\u062e\u062a\u0628\u0627\u0631 \u0627\u0644\u0645\u0628\u0646\u064a \u0644\u0644\u0645\u062c\u0647\u0648\u0644 (Passive Voice) \u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \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 […]<\/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-4946","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\/4946","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=4946"}],"version-history":[{"count":3,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4946\/revisions"}],"predecessor-version":[{"id":4996,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4946\/revisions\/4996"}],"wp:attachment":[{"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4946"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4946"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4946"},{"taxonomy":"reaction","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Freaction&post=4946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":4946,"date":"2025-04-14T15:04:19","date_gmt":"2025-04-14T15:04:19","guid":{"rendered":"https:\/\/tawjihy.com\/?p=4946"},"modified":"2025-05-05T13:04:25","modified_gmt":"2025-05-05T13:04:25","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%d9%85%d8%a8%d9%86%d9%8a-%d9%84%d9%84%d9%85%d8%ac%d9%87%d9%88%d9%84-%d8%a7%d9%84","status":"publish","type":"post","link":"https:\/\/tawjihy.com\/?p=4946","title":{"rendered":"\u0627\u0645\u062a\u062d\u0627\u0646 \u0645\u062d\u0648\u0633\u0628 \u0644\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0645\u0628\u0646\u064a \u0644\u0644\u0645\u062c\u0647\u0648\u0644 \u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0627\u0644\u0623\u0648\u0644 \u062b\u0627\u0646\u0648\u064a \u0623\u0643\u0627\u062f\u064a\u0645\u064a 2008"},"content":{"rendered":"\n\n\n\n\n\n\n\n \n \n \u0627\u062e\u062a\u0628\u0627\u0631 \u0627\u0644\u0645\u0628\u0646\u064a \u0644\u0644\u0645\u062c\u0647\u0648\u0644<\/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; }\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; \/* Keep questions left-to-right *\/}\n .options-container { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; direction: ltr; \/* Keep options left-to-right *\/}\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; \/* Align option text left *\/ width: 100%; word-wrap: break-word; }\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; }\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); direction: ltr; \/* Keep review left-to-right *\/}\n .review-item { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px dashed #ccc; font-size: 0.95em; text-align: left; \/* Align review item text left *\/}\n .review-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }\n .review-item p { margin: 4px 0; }\n .review-question { font-weight: bold; }\n .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; }\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 \u0627\u0644\u0645\u0628\u0646\u064a \u0644\u0644\u0645\u062c\u0647\u0648\u0644 (Passive Voice)<\/h1>\n <h2>\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629<\/h2>\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.<\/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 \/ 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\">\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 from the PDF (Passive Voice)\n const originalEnglishQuizQuestions = [\n { originalIndex: 1, question: \"The sentence which has a similar meaning to 'This German company manufactures hybrid engines.' is:\", options: [\"Hybrid engines were manufactured by this German company.\", \"Hybrid engines are manufactured by this German company.\", \"Hybrid engines have been manufactured by this German company.\", \"Hybrid engines are being manufactured by this German company.\"], correctAnswer: \"Hybrid engines are manufactured by this German company.\", userAnswer: null, isCorrect: null },\n { originalIndex: 2, question: \"The sentence which has a similar meaning to 'By 2035, you could embed a chip like this in your wrist.' is:\", options: [\"By 2035, a chip like this could embed in your wrist.\", \"By 2035, a chip like this could be embedding in your wrist.\", \"By 2035, a chip like this could be embedded in your wrist.\", \"By 2035, a chip like this can be embedded in your wrist.\"], correctAnswer: \"By 2035, a chip like this could be embedded in your wrist.\", userAnswer: null, isCorrect: null },\n { originalIndex: 3, question: \"The sentence which has a similar meaning to 'Over two million people have downloaded this 'body tracking' app.' is:\", options: [\"This 'body tracking' app has been downloaded by over two million people.\", \"This 'body tracking' app is downloaded by over two million people.\", \"This 'body tracking' app was downloaded by over two million people.\", \"This 'body tracking' app had been downloaded by over two million people.\"], correctAnswer: \"This 'body tracking' app has been downloaded by over two million people.\", userAnswer: null, isCorrect: null },\n { originalIndex: 4, question: \"The sentence which has a similar meaning to 'An insect caused the malfunction.' is:\", options: [\"The malfunction is caused by an insect.\", \"The malfunction was caused by an insect.\", \"The malfunction has been caused by an insect.\", \"The malfunction had been caused by an insect.\"], correctAnswer: \"The malfunction was caused by an insect.\", userAnswer: null, isCorrect: null },\n { originalIndex: 5, question: \"The sentence which has a similar meaning to 'Somebody was regularly hacking into celebrities' smartphones.' is:\", options: [\"Celebrities' smartphones were regularly hacked into.\", \"Celebrities' smartphones were regularly being hacked into.\", \"Celebrities' smartphones have been regularly hacked into.\", \"Celebrities' smartphones are being regularly hacked into.\"], correctAnswer: \"Celebrities' smartphones were regularly being hacked into.\", userAnswer: null, isCorrect: null },\n { originalIndex: 6, question: \"The sentence which has a similar meaning to 'Most people are going to use wearables in the near future.' is:\", options: [\"Wearables are going to be used by most people in the near future.\", \"Wearables are used by most people in the near future.\", \"Wearables were going to be used by most people in the near future.\", \"Wearables are being used by most people in the near future.\"], correctAnswer: \"Wearables are going to be used by most people in the near future.\", userAnswer: null, isCorrect: null },\n { originalIndex: 7, question: \"The sentence which has a similar meaning to 'I would really like to employ one of the giant tech companies.' is:\", options: [\"I would really like being employed by one of the giant tech companies.\", \"I would really like employ one of the giant tech companies.\", \"I would really like to be employed by one of the giant tech companies.\", \"I would really like to have employed by one of the giant tech companies.\"], correctAnswer: \"I would really like to be employed by one of the giant tech companies.\", userAnswer: null, isCorrect: null },\n { originalIndex: 8, question: \"The sentence which has a similar meaning to 'Young people don't need telling how to use new devices.' is:\", options: [\"Young people don't need to told how to use new devices.\", \"Young people don't need to be told how to use new devices.\", \"Young people don't need told how to use new devices.\", \"Young people don't need to telling how to use new devices.\"], correctAnswer: \"Young people don't need to be told how to use new devices.\", userAnswer: null, isCorrect: null },\n { originalIndex: 9, question: \"The sentence which has a similar meaning to 'The new phone implants are going to sell in all kinds of shops.' is:\", options: [\"The new phone implants are going to selling in all kinds of shops.\", \"The new phone implants are going to being sold in all kinds of shops.\", \"The new phone implants are going to be sold in all kinds of shops.\", \"The new phone implants are going to have been sold in all kinds of shops.\"], correctAnswer: \"The new phone implants are going to be sold in all kinds of shops.\", userAnswer: null, isCorrect: null },\n { originalIndex: 10, question: \"The sentence which has a similar meaning to 'The teacher congratulated them on invited to take part in the science fair next week.' is:\", options: [\"The teacher congratulated them on is inviting to take part in the science fair next week.\", \"The teacher congratulated them on being invited to take part in the science fair next week.\", \"The teacher congratulated them on to be invited to take part in the science fair next week.\", \"The teacher congratulated them on have been invited to take part in the science fair next week.\"], correctAnswer: \"The teacher congratulated them on being invited to take part in the science fair next week.\", userAnswer: null, isCorrect: null },\n { originalIndex: 11, question: \"I am writing to complain about one of your company's smartwatches, which ________ to me last week.\", options: [\"was giving\", \"was given\", \"be given\", \"has given\"], correctAnswer: \"was given\", userAnswer: null, isCorrect: null },\n { originalIndex: 12, question: \"Firstly, it ________ in large amounts of unnecessary plastic packaging.\", options: [\"was wrapping\", \"has wrapped\", \"are wrapped\", \"be wrapped\"], correctAnswer: \"was wrapping\", userAnswer: null, isCorrect: null },\n { originalIndex: 13, question: \"Don't you think your products ________ in a more eco-friendly way?\", options: [\"should be packaging\", \"should is packaged\", \"should be packaged\", \"should be\"], correctAnswer: \"should be packaged\", userAnswer: null, isCorrect: null },\n { originalIndex: 14, question: \"Secondly, the watch clearly ________ before being sent from your factory.\", options: [\"was not checked\", \"was not checking\", \"were not checking\", \"had not checked\"], correctAnswer: \"was not checked\", userAnswer: null, isCorrect: null },\n { originalIndex: 16, question: \"We would appreciate it if this ________ without unnecessary plastic packaging.\", options: [\"could be doing\", \"could be done\", \"could have been doing\", \"could doing\"], correctAnswer: \"could be done\", userAnswer: null, isCorrect: null },\n { originalIndex: 17, question: \"Our Smart Doorbell ________ at our factory in Portugal.\", options: [\"is manufacturing\", \"has manufactured\", \"is manufactured\", \"be manufactured\"], correctAnswer: \"is manufactured\", userAnswer: null, isCorrect: null },\n { originalIndex: 18, question: \"To date, over 10,000 of our doorbells have ________ throughout Europe.\", options: [\"have sold\", \"been sold\", \"were sold\", \"are sold\"], correctAnswer: \"been sold\", userAnswer: null, isCorrect: null },\n { originalIndex: 19, question: \"The on-board camera can ________ to see who's at your door.\", options: [\"be used\", \"used\", \"using\", \"be using\"], correctAnswer: \"be used\", userAnswer: null, isCorrect: null },\n { originalIndex: 20, question: \"To activate this function, the doorbell needs to ________ with one of our smart locks.\", options: [\"be pairing\", \"be paired\", \"pairing\", \"paired\"], correctAnswer: \"be paired\", userAnswer: null, isCorrect: null },\n { originalIndex: 21, question: \"the all-important charging cable ________.\", options: [\"was not included\", \"was not including\", \"be not included\", \"has not included\"], correctAnswer: \"was not included\", userAnswer: null, isCorrect: null },\n { originalIndex: 22, question: \"Could a cable please ________ to us as soon as possible?\", options: [\"be sent\", \"be send\", \"be sending\", \"has been sending\"], correctAnswer: \"be sent\", userAnswer: null, isCorrect: null }\n ];\n\n \/\/ --- JavaScript Logic ---\n let questions = [...originalEnglishQuizQuestions];\n let currentQuestionIndex = 0;\n let score = 0;\n const totalQuestions = questions.length; \/\/ Now 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 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 \/\/ Assign a temporary index for display during the quiz after shuffle\n questions.forEach((q, index) => { q.quizIndex = index + 1; });\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 \/\/ Use the temporary quizIndex for display number\n questionNumberEl.textContent = `\u0627\u0644\u0633\u0624\u0627\u0644 ${currentQuestion.quizIndex} \u0645\u0646 ${totalQuestions}`;\n questionTextEl.textContent = currentQuestion.question;\n optionsContainer.innerHTML = '';\n const shuffledOptions = [...currentQuestion.options];\n shuffleArray(shuffledOptions);\n const alreadyAnswered = currentQuestion.userAnswer !== null;\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 if (alreadyAnswered) {\n if (option === currentQuestion.userAnswer) {\n button.classList.add(currentQuestion.isCorrect ? 'correct' : 'incorrect');\n } else if (option === currentQuestion.correctAnswer && !currentQuestion.isCorrect) {\n \/\/ Only show 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 }\n\n function handleAnswer(selectedButton, selectedAnswer) {\n const currentQuestion = questions[currentQuestionIndex];\n if (currentQuestion.userAnswer !== null) return; \/\/ Prevent re-answering\n currentQuestion.userAnswer = selectedAnswer;\n const isCorrect = selectedAnswer === currentQuestion.correctAnswer;\n currentQuestion.isCorrect = isCorrect;\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!';\n feedbackEl.className = 'incorrect';\n \/\/ Highlight the correct answer after a short delay\n optionButtons.forEach(btn => {\n if (btn.textContent === currentQuestion.correctAnswer) {\n setTimeout(() => { btn.classList.add('correct'); }, 500); \/\/ Delay helps user see their wrong choice first\n }\n });\n }\n \/\/ Optional: Automatically move to the next question after a delay\n \/\/ setTimeout(nextQuestion, 1500);\n }\n\n function updateProgressBar() {\n \/\/ Calculate answered questions count\n const answeredCount = questions.filter(q => q.userAnswer !== null).length;\n const progressPercentage = (answeredCount \/ totalQuestions) * 100;\n progressBar.style.width = `${progressPercentage}%`;\n \/\/ Display current question number based on quizIndex\n progressTextEl.textContent = `${questions[currentQuestionIndex].quizIndex} \/ ${totalQuestions}`;\n }\n\n\n function updateNavigationButtons() {\n prevBtn.disabled = currentQuestionIndex === 0;\n \/\/ Enable Next button only if the current question has been answered, or if it's the last question\n \/\/ nextBtn.disabled = questions[currentQuestionIndex].userAnswer === null && currentQuestionIndex < totalQuestions - 1;\n\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 }\n\n function nextQuestion() {\n if (currentQuestionIndex < totalQuestions - 1) {\n currentQuestionIndex++;\n loadQuestion(currentQuestionIndex);\n } else {\n \/\/ Check if the last question was answered before showing results\n \/\/ if (questions[currentQuestionIndex].userAnswer !== null) {\n showResults();\n \/\/ } else {\n \/\/ Optionally alert the user to answer the last question\n \/\/ alert(\"\u0627\u0644\u0631\u062c\u0627\u0621 \u0627\u0644\u0625\u062c\u0627\u0628\u0629 \u0639\u0644\u0649 \u0627\u0644\u0633\u0624\u0627\u0644 \u0627\u0644\u0623\u062e\u064a\u0631 \u0642\u0628\u0644 \u0625\u0646\u0647\u0627\u0621 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631.\");\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 = '';\n \/\/ Sort questions by their original index for review\n const sortedQuestionsForReview = [...questions].sort((a, b) => a.originalIndex - b.originalIndex);\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 \/\/ Use originalIndex for review numbering\n questionP.textContent = `${q.originalIndex}. ${q.question}`;\n reviewItem.appendChild(questionP);\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'); \/\/ Mark unanswered as incorrect visually\n } else {\n userAnswerP.textContent = `Your Answer: ${q.userAnswer} (${q.isCorrect ? 'Correct' : 'Incorrect'})`;\n userAnswerP.classList.add(q.isCorrect ? 'correct' : 'incorrect');\n }\n reviewItem.appendChild(userAnswerP);\n\n \/\/ Show correct answer only if the user was wrong or didn't answer\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 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 \u0627\u0644\u0645\u0628\u0646\u064a \u0644\u0644\u0645\u062c\u0647\u0648\u0644 \u0627\u062e\u062a\u0628\u0627\u0631 \u0627\u0644\u0645\u0628\u0646\u064a \u0644\u0644\u0645\u062c\u0647\u0648\u0644 (Passive Voice) \u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \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 […]<\/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-4946","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\/4946","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=4946"}],"version-history":[{"count":3,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4946\/revisions"}],"predecessor-version":[{"id":4996,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4946\/revisions\/4996"}],"wp:attachment":[{"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4946"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4946"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4946"},{"taxonomy":"reaction","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Freaction&post=4946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}