\u0627\u062e\u062a\u0628\u0627\u0631 \u0642\u0627\u0639\u062f\u0629 If (Conditional Clauses)<\/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; display: flex; align-items: center; min-height: 45px; } \/* Adjusted text alignment and height *\/\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 \/* Styles for sentence transformation questions *\/\n .review-question .situation {\n font-weight: normal;\n display: block;\n margin-bottom: 5px;\n font-style: italic;\n color: #555;\n }\n .review-question .instruction {\n font-weight: bold;\n display: block;\n }\n\n @media (max-width: 600px) {\n body { padding: 10px; }\n .quiz-container { padding: 15px; margin-top: 10px; margin-bottom: 10px; }\n h1 { font-size: 1.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; min-height: 40px;}\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 \u0642\u0627\u0639\u062f\u0629 If (Conditional Clauses)<\/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 for If-Clauses\n const originalIfClauseQuestions = [\n \/\/ From Page 2\n { originalIndex: 1, question: \"If public transport is efficient, people ________ using their cars.\", options: [\"stop\", \"would stop\", \"stopped\", \"will be stopped\"], correctAnswer: \"stop\", userAnswer: null, isCorrect: null }, \/\/ Type 0\/1 - 'stop' fits Type 0 general result\n { originalIndex: 2, question: \"I wouldn't have visited Cairo if I ________ my passport.\", options: [\"haven't issued\", \"had issued\", \"have issued\", \"hadn't issued\"], correctAnswer: \"hadn't issued\", userAnswer: null, isCorrect: null }, \/\/ Type 3\n { originalIndex: 3, question: \"I wouldn't have gone to my friend's party if he ________ me.\", options: [\"hadn't invited\", \"had invited\", \"haven't invited\", \"have invited\"], correctAnswer: \"hadn't invited\", userAnswer: null, isCorrect: null }, \/\/ Type 3\n { originalIndex: 4, question: \"If I had had enough money, I ________ that radio.\", options: [\"bought\", \"would buy\", \"would have bought\", \"had bought\"], correctAnswer: \"would have bought\", userAnswer: null, isCorrect: null }, \/\/ Type 3\n { originalIndex: 5, question: \"It ________ easy to paint pictures if you knew how to.\", options: [\"would be\", \"had been\", \"would have been\", \"be\"], correctAnswer: \"would be\", userAnswer: null, isCorrect: null }, \/\/ Type 2\n { originalIndex: 6, question: \"If it ________, I would stay at home.\", options: [\"rains\", \"rained\", \"has rained\", \"had rained\"], correctAnswer: \"rained\", userAnswer: null, isCorrect: null }, \/\/ Type 2\n { originalIndex: 7, question: \"If I were you, I ________ more exercise to get fit.\", options: [\"would have done\", \"would do\", \"will do\", \"did\"], correctAnswer: \"would do\", userAnswer: null, isCorrect: null }, \/\/ Type 2\n { originalIndex: 8, question: \"If I had stayed at home that day, I ________ the celebration.\", options: [\"would miss\", \"would have missed\", \"will miss\", \"has missed\"], correctAnswer: \"would have missed\", userAnswer: null, isCorrect: null }, \/\/ Type 3\n { originalIndex: 9, question: \"I might have won the first prize, if I ________ better for the competition.\", options: [\"prepared\", \"have prepared\", \"had prepared\", \"prepare\"], correctAnswer: \"had prepared\", userAnswer: null, isCorrect: null }, \/\/ Type 3\n { originalIndex: 10, question: \"If plants ________ enough water, they die.\", options: [\"don't get\", \"didn't get\", \"hadn't got\", \"doesn't get\"], correctAnswer: \"don't get\", userAnswer: null, isCorrect: null }, \/\/ Type 0\n \/\/ From Page 3\n { originalIndex: 11, question: \"If we were in Madaba today, we ________ able to go to Mount Nebo.\", options: [\"are\", \"be\", \"would be\", \"will be\"], correctAnswer: \"would be\", userAnswer: null, isCorrect: null }, \/\/ Type 2\n { originalIndex: 12, question: \"If Faisal had slept better the night before the exam, he ________ better.\", options: [\"concentrated\", \"could have concentrated\", \"could concentrate\", \"have concentrated\"], correctAnswer: \"could have concentrated\", userAnswer: null, isCorrect: null }, \/\/ Type 3\n { originalIndex: 13, question: \"If Huda ________ ill yesterday, she wouldn't have missed the exam.\", options: [\"hadn't been\", \"had been\", \"hasn't been\", \"has been\"], correctAnswer: \"hadn't been\", userAnswer: null, isCorrect: null }, \/\/ Type 3\n { originalIndex: 14, question: \"If the students ________ to learn a new language, they need to be motivated.\", options: [\"want\", \"will want\", \"wanted\", \"wants\"], correctAnswer: \"want\", userAnswer: null, isCorrect: null }, \/\/ Type 0\/1\n { originalIndex: 15, question: \"________ you water the plants, they will die.\", options: [\"If\", \"Unless\", \"When\", \"Even if\"], correctAnswer: \"Unless\", userAnswer: null, isCorrect: null }, \/\/ Unless = If not\n { originalIndex: 16, question: \"If Rami had done the course, he ________ enough experience to apply for the job.\", options: [\"would have\", \"have had\", \"will have\", \"would have had\"], correctAnswer: \"would have had\", userAnswer: null, isCorrect: null }, \/\/ Type 3\n { originalIndex: 17, question: \"I will buy the book ________ it is too expensive.\", options: [\"unless\", \"as long as\", \"provided that\", \"when\"], correctAnswer: \"unless\", userAnswer: null, isCorrect: null }, \/\/ Unless = if not\n { originalIndex: 18, question: \"if children ________ outside, they get overweight.\", options: [\"don't play\", \"doesn't play\", \"didn't play\", \"hasn't played\"], correctAnswer: \"don't play\", userAnswer: null, isCorrect: null }, \/\/ Type 0\n { originalIndex: 19, question: \"if it rains, we ________ the match.\", options: [\"Would cancel\", \"cancelled\", \"cancels\", \"will cancel\"], correctAnswer: \"will cancel\", userAnswer: null, isCorrect: null }, \/\/ Type 1\n \/\/ From Page 4\n { originalIndex: 20, question: \"if Ashraf had gotten up early, he ________ late for work.\", options: [\"will not have been\", \"won't have\", \"have been\", \"wouldn't have been\"], correctAnswer: \"wouldn't have been\", userAnswer: null, isCorrect: null }, \/\/ Type 3\n { originalIndex: 21, question: \"if plants ________ enough sunlight, they die.\", options: [\"didn't get\", \"doesn't get\", \"don't get\", \"hasn't got\"], correctAnswer: \"don't get\", userAnswer: null, isCorrect: null }, \/\/ Type 0\n { originalIndex: 22, question: \"My father ________ the new house, if it isn't too expensive.\", options: [\"would buy\", \"will buy\", \"wouldn't have bought\", \"wouldn't buy\"], correctAnswer: \"will buy\", userAnswer: null, isCorrect: null }, \/\/ Type 1\n { originalIndex: 23, question: \"If you ________ up the tree, you might have got hurt.\", options: [\"has climbed\", \"had climbed\", \"don't climb\", \"have climbed\"], correctAnswer: \"had climbed\", userAnswer: null, isCorrect: null }, \/\/ Type 3\n { originalIndex: 24, question: \"If I hadn't found a new job, I ________ my old one.\", options: [\"had kept\", \"will keep\", \"might have kept\", \"have kept\"], correctAnswer: \"might have kept\", userAnswer: null, isCorrect: null }, \/\/ Type 3\n { originalIndex: 25, question: \"If my children ________ off the water when asked, we wouldn't have had a flooded bathroom.\", options: [\"had turned\", \"will turn\", \"turn\", \"have turned\"], correctAnswer: \"had turned\", userAnswer: null, isCorrect: null }, \/\/ Type 3\n { originalIndex: 26, question: \"You will feel much better if you ________ more sports.\", options: [\"did\", \"does\", \"do\", \"had done\"], correctAnswer: \"do\", userAnswer: null, isCorrect: null }, \/\/ Type 1\n { originalIndex: 27, question: \"If you ________ a little bit more, you will be more attractive.\", options: [\"will smile\", \"smiles\", \"smile\", \"would have smiled\"], correctAnswer: \"smile\", userAnswer: null, isCorrect: null }, \/\/ Type 1\n { originalIndex: 28, question: \"If you put water in a freezer, it ________ ice.\", options: [\"become\", \"had become\", \"became\", \"becomes\"], correctAnswer: \"becomes\", userAnswer: null, isCorrect: null }, \/\/ Type 0\n \/\/ From Page 5 (Sentence Transformations)\n { originalIndex: 29, question: \"Saeed left his camera at home; so, he wasn't able to take pictures of the parade.<br><i>The sentence which has a similar meaning to the one above is:<\/i>\", options: [\"if Saeed left his camera at home, he could not take pictures of the parade.\", \"if Saeed had left his camera at home, he could have taken pictures of the parade.\", \"if Saeed hadn't left his camera at home, he could have taken pictures of the parade.\", \"if Saeed leaves his camera at home, he could have taken pictures of the parade.\"], correctAnswer: \"if Saeed hadn't left his camera at home, he could have taken pictures of the parade.\", userAnswer: null, isCorrect: null }, \/\/ Type 3 transformation\n { originalIndex: 30, question: \"I had a headache yesterday, and I didn't do well in the driving test.<br><i>The sentence which has a similar meaning to the one above is:<\/i>\", options: [\"if I had had a headache yesterday, I might not have done well in the driving test.\", \"if I haven't had a headache yesterday, I might not have done well in the driving test\", \"if I hadn't had a headache yesterday, I might not have done well in the driving test.\", \"if I hadn't had a headache yesterday, I might have done well in the driving test.\"], correctAnswer: \"if I hadn't had a headache yesterday, I might have done well in the driving test.\", userAnswer: null, isCorrect: null }, \/\/ Type 3 transformation\n { originalIndex: 31, question: \"Huda left her map at home, so she wasn't able to enjoy the trip in the forest.<br><i>The sentence which has a similar meaning to the one above is:<\/i>\", options: [\"if Huda hadn't left her map at home, she couldn't enjoy the trip in the forest.\", \"if Huda had left her map at home, she could have enjoyed the trip in the forest.\", \"if Huda had left her map at home, she couldn't enjoy the trip in the forest.\", \"if Huda hadn't left her map at home, she could have enjoyed the trip in the forest.\"], correctAnswer: \"if Huda hadn't left her map at home, she could have enjoyed the trip in the forest.\", userAnswer: null, isCorrect: null }, \/\/ Type 3 transformation\n \/\/ From Page 6 (Sentence Transformations)\n { originalIndex: 32, question: \"You had a brightly-coloured hat on. That's how I noticed you in the crowd.<br><i>The correct sentence which has a similar meaning to the above situation is:<\/i>\", options: [\"if you had had a brightly-coloured hat on, I mightn't have noticed you in the crowd.\", \"if you hadn't had a brightly-coloured hat on, I mightn't have noticed you in the crowd.\", \"if you haven't had a brightly-coloured hat on, I mightn't have noticed you in the crowd.\", \"if you hadn't had a brightly-coloured hat on, I might have noticed you in the crowd.\"], correctAnswer: \"if you hadn't had a brightly-coloured hat on, I mightn't have noticed you in the crowd.\", userAnswer: null, isCorrect: null }, \/\/ Type 3 transformation\n { originalIndex: 33, question: \"I didn't know your phone number, so I wasn't able to contact you.<br><i>The sentence which has a similar meaning to the one above is:<\/i>\", options: [\"I could have been able to contact you if I had known your phone number.\", \"I couldn't have been able to contact you if I had known your phone number.\", \"I could have been able to contact you if I hadn't known your phone number.\", \"if I hadn't known your phone number, I couldn't have been able to contact you.\"], correctAnswer: \"I could have been able to contact you if I had known your phone number.\", userAnswer: null, isCorrect: null }, \/\/ Type 3 transformation\n { originalIndex: 34, question: \"I worked really hard the day before the exam. I got top marks.<br><i>The sentence which has a similar meaning to the one above is:<\/i>\", options: [\"I might have got top marks if I hadn't worked really hard the day before the exam.\", \"I might not have got top marks if I had worked really hard the day before the exam.\", \"I might not have got top marks if I hadn't worked really hard the day before the exam.\", \"I might have got top marks if I had worked really hard the day before the exam.\"], correctAnswer: \"I might not have got top marks if I hadn't worked really hard the day before the exam.\", userAnswer: null, isCorrect: null } \/\/ Type 3 transformation\n ];\n\n\n \/\/ --- JavaScript Logic (Mostly Identical, adapted variable names and total) ---\n let questions = [...originalIfClauseQuestions]; \/\/ 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 \/\/ Use innerHTML to render the <br> tag correctly for sentence transformation questions\n questionTextEl.innerHTML = currentQuestion.question;\n optionsContainer.innerHTML = '';\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; \/\/ Use textContent here for security unless HTML in options is needed\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'); \/\/ Highlight correct one if already answered wrong\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 \/\/ Check if all questions are answered before changing button text\n const allAnswered = questions.every(q => q.userAnswer !== null);\n nextBtn.textContent = allAnswered ? '\u0625\u0646\u0647\u0627\u0621 \u0648\u0639\u0631\u0636 \u0627\u0644\u0646\u062a\u064a\u062c\u0629' : '\u0627\u0644\u062a\u0627\u0644\u064a';\n } else {\n nextBtn.textContent = '\u0627\u0644\u062a\u0627\u0644\u064a';\n }\n \/\/ Disable next button if current question hasn't been answered yet? Let's allow navigation.\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 \/\/ Only show results if the last question is answered (or attempted)\n if (questions[currentQuestionIndex].userAnswer !== null) {\n showResults();\n } else {\n \/\/ Maybe add a small visual cue that the last question needs answering?\n \/\/ Or just let the user click finish again after answering.\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, index) => {\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 innerHTML for questions 29-34 that contain HTML (<br>, <i>)\n if (q.originalIndex >= 29) {\n \/\/ Simple way to structure sentence transformation review\n const parts = q.question.split('<br><i>');\n questionP.innerHTML = `${index + 1}. <span class=\"situation\">${parts[0]}<\/span> <span class=\"instruction\"><i>${parts[1]}<\/i><\/span>`;\n } else {\n questionP.textContent = `${index + 1}. ${q.question}`; \/\/ Original index for reference\n }\n\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 = [...originalIfClauseQuestions]; \/\/ 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 \u0642\u0627\u0639\u062f\u0629 If (Conditional Clauses) \u0627\u062e\u062a\u0628\u0627\u0631 \u0642\u0627\u0639\u062f\u0629 If (Conditional Clauses) \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-4971","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\/4971","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=4971"}],"version-history":[{"count":1,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4971\/revisions"}],"predecessor-version":[{"id":4972,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4971\/revisions\/4972"}],"wp:attachment":[{"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4971"},{"taxonomy":"reaction","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Freaction&post=4971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":4971,"date":"2025-04-16T16:41:20","date_gmt":"2025-04-16T16:41:20","guid":{"rendered":"https:\/\/tawjihy.com\/?p=4971"},"modified":"2025-04-16T16:41:22","modified_gmt":"2025-04-16T16:41:22","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-if-%d8%a7%d9%84%d9%84%d8%ba%d8%a9-%d8%a7%d9%84%d8%a5%d9%86%d8%ac%d9%84%d9%8a%d8%b2%d9%8a%d8%a9","status":"publish","type":"post","link":"https:\/\/tawjihy.com\/?p=4971","title":{"rendered":"\u0627\u0645\u062a\u062d\u0627\u0646 \u0645\u062d\u0648\u0633\u0628 \u0644\u0642\u0627\u0639\u062f\u0629 if \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 \u0642\u0627\u0639\u062f\u0629 If (Conditional Clauses)<\/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; display: flex; align-items: center; min-height: 45px; } \/* Adjusted text alignment and height *\/\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 \/* Styles for sentence transformation questions *\/\n .review-question .situation {\n font-weight: normal;\n display: block;\n margin-bottom: 5px;\n font-style: italic;\n color: #555;\n }\n .review-question .instruction {\n font-weight: bold;\n display: block;\n }\n\n @media (max-width: 600px) {\n body { padding: 10px; }\n .quiz-container { padding: 15px; margin-top: 10px; margin-bottom: 10px; }\n h1 { font-size: 1.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; min-height: 40px;}\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 \u0642\u0627\u0639\u062f\u0629 If (Conditional Clauses)<\/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 for If-Clauses\n const originalIfClauseQuestions = [\n \/\/ From Page 2\n { originalIndex: 1, question: \"If public transport is efficient, people ________ using their cars.\", options: [\"stop\", \"would stop\", \"stopped\", \"will be stopped\"], correctAnswer: \"stop\", userAnswer: null, isCorrect: null }, \/\/ Type 0\/1 - 'stop' fits Type 0 general result\n { originalIndex: 2, question: \"I wouldn't have visited Cairo if I ________ my passport.\", options: [\"haven't issued\", \"had issued\", \"have issued\", \"hadn't issued\"], correctAnswer: \"hadn't issued\", userAnswer: null, isCorrect: null }, \/\/ Type 3\n { originalIndex: 3, question: \"I wouldn't have gone to my friend's party if he ________ me.\", options: [\"hadn't invited\", \"had invited\", \"haven't invited\", \"have invited\"], correctAnswer: \"hadn't invited\", userAnswer: null, isCorrect: null }, \/\/ Type 3\n { originalIndex: 4, question: \"If I had had enough money, I ________ that radio.\", options: [\"bought\", \"would buy\", \"would have bought\", \"had bought\"], correctAnswer: \"would have bought\", userAnswer: null, isCorrect: null }, \/\/ Type 3\n { originalIndex: 5, question: \"It ________ easy to paint pictures if you knew how to.\", options: [\"would be\", \"had been\", \"would have been\", \"be\"], correctAnswer: \"would be\", userAnswer: null, isCorrect: null }, \/\/ Type 2\n { originalIndex: 6, question: \"If it ________, I would stay at home.\", options: [\"rains\", \"rained\", \"has rained\", \"had rained\"], correctAnswer: \"rained\", userAnswer: null, isCorrect: null }, \/\/ Type 2\n { originalIndex: 7, question: \"If I were you, I ________ more exercise to get fit.\", options: [\"would have done\", \"would do\", \"will do\", \"did\"], correctAnswer: \"would do\", userAnswer: null, isCorrect: null }, \/\/ Type 2\n { originalIndex: 8, question: \"If I had stayed at home that day, I ________ the celebration.\", options: [\"would miss\", \"would have missed\", \"will miss\", \"has missed\"], correctAnswer: \"would have missed\", userAnswer: null, isCorrect: null }, \/\/ Type 3\n { originalIndex: 9, question: \"I might have won the first prize, if I ________ better for the competition.\", options: [\"prepared\", \"have prepared\", \"had prepared\", \"prepare\"], correctAnswer: \"had prepared\", userAnswer: null, isCorrect: null }, \/\/ Type 3\n { originalIndex: 10, question: \"If plants ________ enough water, they die.\", options: [\"don't get\", \"didn't get\", \"hadn't got\", \"doesn't get\"], correctAnswer: \"don't get\", userAnswer: null, isCorrect: null }, \/\/ Type 0\n \/\/ From Page 3\n { originalIndex: 11, question: \"If we were in Madaba today, we ________ able to go to Mount Nebo.\", options: [\"are\", \"be\", \"would be\", \"will be\"], correctAnswer: \"would be\", userAnswer: null, isCorrect: null }, \/\/ Type 2\n { originalIndex: 12, question: \"If Faisal had slept better the night before the exam, he ________ better.\", options: [\"concentrated\", \"could have concentrated\", \"could concentrate\", \"have concentrated\"], correctAnswer: \"could have concentrated\", userAnswer: null, isCorrect: null }, \/\/ Type 3\n { originalIndex: 13, question: \"If Huda ________ ill yesterday, she wouldn't have missed the exam.\", options: [\"hadn't been\", \"had been\", \"hasn't been\", \"has been\"], correctAnswer: \"hadn't been\", userAnswer: null, isCorrect: null }, \/\/ Type 3\n { originalIndex: 14, question: \"If the students ________ to learn a new language, they need to be motivated.\", options: [\"want\", \"will want\", \"wanted\", \"wants\"], correctAnswer: \"want\", userAnswer: null, isCorrect: null }, \/\/ Type 0\/1\n { originalIndex: 15, question: \"________ you water the plants, they will die.\", options: [\"If\", \"Unless\", \"When\", \"Even if\"], correctAnswer: \"Unless\", userAnswer: null, isCorrect: null }, \/\/ Unless = If not\n { originalIndex: 16, question: \"If Rami had done the course, he ________ enough experience to apply for the job.\", options: [\"would have\", \"have had\", \"will have\", \"would have had\"], correctAnswer: \"would have had\", userAnswer: null, isCorrect: null }, \/\/ Type 3\n { originalIndex: 17, question: \"I will buy the book ________ it is too expensive.\", options: [\"unless\", \"as long as\", \"provided that\", \"when\"], correctAnswer: \"unless\", userAnswer: null, isCorrect: null }, \/\/ Unless = if not\n { originalIndex: 18, question: \"if children ________ outside, they get overweight.\", options: [\"don't play\", \"doesn't play\", \"didn't play\", \"hasn't played\"], correctAnswer: \"don't play\", userAnswer: null, isCorrect: null }, \/\/ Type 0\n { originalIndex: 19, question: \"if it rains, we ________ the match.\", options: [\"Would cancel\", \"cancelled\", \"cancels\", \"will cancel\"], correctAnswer: \"will cancel\", userAnswer: null, isCorrect: null }, \/\/ Type 1\n \/\/ From Page 4\n { originalIndex: 20, question: \"if Ashraf had gotten up early, he ________ late for work.\", options: [\"will not have been\", \"won't have\", \"have been\", \"wouldn't have been\"], correctAnswer: \"wouldn't have been\", userAnswer: null, isCorrect: null }, \/\/ Type 3\n { originalIndex: 21, question: \"if plants ________ enough sunlight, they die.\", options: [\"didn't get\", \"doesn't get\", \"don't get\", \"hasn't got\"], correctAnswer: \"don't get\", userAnswer: null, isCorrect: null }, \/\/ Type 0\n { originalIndex: 22, question: \"My father ________ the new house, if it isn't too expensive.\", options: [\"would buy\", \"will buy\", \"wouldn't have bought\", \"wouldn't buy\"], correctAnswer: \"will buy\", userAnswer: null, isCorrect: null }, \/\/ Type 1\n { originalIndex: 23, question: \"If you ________ up the tree, you might have got hurt.\", options: [\"has climbed\", \"had climbed\", \"don't climb\", \"have climbed\"], correctAnswer: \"had climbed\", userAnswer: null, isCorrect: null }, \/\/ Type 3\n { originalIndex: 24, question: \"If I hadn't found a new job, I ________ my old one.\", options: [\"had kept\", \"will keep\", \"might have kept\", \"have kept\"], correctAnswer: \"might have kept\", userAnswer: null, isCorrect: null }, \/\/ Type 3\n { originalIndex: 25, question: \"If my children ________ off the water when asked, we wouldn't have had a flooded bathroom.\", options: [\"had turned\", \"will turn\", \"turn\", \"have turned\"], correctAnswer: \"had turned\", userAnswer: null, isCorrect: null }, \/\/ Type 3\n { originalIndex: 26, question: \"You will feel much better if you ________ more sports.\", options: [\"did\", \"does\", \"do\", \"had done\"], correctAnswer: \"do\", userAnswer: null, isCorrect: null }, \/\/ Type 1\n { originalIndex: 27, question: \"If you ________ a little bit more, you will be more attractive.\", options: [\"will smile\", \"smiles\", \"smile\", \"would have smiled\"], correctAnswer: \"smile\", userAnswer: null, isCorrect: null }, \/\/ Type 1\n { originalIndex: 28, question: \"If you put water in a freezer, it ________ ice.\", options: [\"become\", \"had become\", \"became\", \"becomes\"], correctAnswer: \"becomes\", userAnswer: null, isCorrect: null }, \/\/ Type 0\n \/\/ From Page 5 (Sentence Transformations)\n { originalIndex: 29, question: \"Saeed left his camera at home; so, he wasn't able to take pictures of the parade.<br><i>The sentence which has a similar meaning to the one above is:<\/i>\", options: [\"if Saeed left his camera at home, he could not take pictures of the parade.\", \"if Saeed had left his camera at home, he could have taken pictures of the parade.\", \"if Saeed hadn't left his camera at home, he could have taken pictures of the parade.\", \"if Saeed leaves his camera at home, he could have taken pictures of the parade.\"], correctAnswer: \"if Saeed hadn't left his camera at home, he could have taken pictures of the parade.\", userAnswer: null, isCorrect: null }, \/\/ Type 3 transformation\n { originalIndex: 30, question: \"I had a headache yesterday, and I didn't do well in the driving test.<br><i>The sentence which has a similar meaning to the one above is:<\/i>\", options: [\"if I had had a headache yesterday, I might not have done well in the driving test.\", \"if I haven't had a headache yesterday, I might not have done well in the driving test\", \"if I hadn't had a headache yesterday, I might not have done well in the driving test.\", \"if I hadn't had a headache yesterday, I might have done well in the driving test.\"], correctAnswer: \"if I hadn't had a headache yesterday, I might have done well in the driving test.\", userAnswer: null, isCorrect: null }, \/\/ Type 3 transformation\n { originalIndex: 31, question: \"Huda left her map at home, so she wasn't able to enjoy the trip in the forest.<br><i>The sentence which has a similar meaning to the one above is:<\/i>\", options: [\"if Huda hadn't left her map at home, she couldn't enjoy the trip in the forest.\", \"if Huda had left her map at home, she could have enjoyed the trip in the forest.\", \"if Huda had left her map at home, she couldn't enjoy the trip in the forest.\", \"if Huda hadn't left her map at home, she could have enjoyed the trip in the forest.\"], correctAnswer: \"if Huda hadn't left her map at home, she could have enjoyed the trip in the forest.\", userAnswer: null, isCorrect: null }, \/\/ Type 3 transformation\n \/\/ From Page 6 (Sentence Transformations)\n { originalIndex: 32, question: \"You had a brightly-coloured hat on. That's how I noticed you in the crowd.<br><i>The correct sentence which has a similar meaning to the above situation is:<\/i>\", options: [\"if you had had a brightly-coloured hat on, I mightn't have noticed you in the crowd.\", \"if you hadn't had a brightly-coloured hat on, I mightn't have noticed you in the crowd.\", \"if you haven't had a brightly-coloured hat on, I mightn't have noticed you in the crowd.\", \"if you hadn't had a brightly-coloured hat on, I might have noticed you in the crowd.\"], correctAnswer: \"if you hadn't had a brightly-coloured hat on, I mightn't have noticed you in the crowd.\", userAnswer: null, isCorrect: null }, \/\/ Type 3 transformation\n { originalIndex: 33, question: \"I didn't know your phone number, so I wasn't able to contact you.<br><i>The sentence which has a similar meaning to the one above is:<\/i>\", options: [\"I could have been able to contact you if I had known your phone number.\", \"I couldn't have been able to contact you if I had known your phone number.\", \"I could have been able to contact you if I hadn't known your phone number.\", \"if I hadn't known your phone number, I couldn't have been able to contact you.\"], correctAnswer: \"I could have been able to contact you if I had known your phone number.\", userAnswer: null, isCorrect: null }, \/\/ Type 3 transformation\n { originalIndex: 34, question: \"I worked really hard the day before the exam. I got top marks.<br><i>The sentence which has a similar meaning to the one above is:<\/i>\", options: [\"I might have got top marks if I hadn't worked really hard the day before the exam.\", \"I might not have got top marks if I had worked really hard the day before the exam.\", \"I might not have got top marks if I hadn't worked really hard the day before the exam.\", \"I might have got top marks if I had worked really hard the day before the exam.\"], correctAnswer: \"I might not have got top marks if I hadn't worked really hard the day before the exam.\", userAnswer: null, isCorrect: null } \/\/ Type 3 transformation\n ];\n\n\n \/\/ --- JavaScript Logic (Mostly Identical, adapted variable names and total) ---\n let questions = [...originalIfClauseQuestions]; \/\/ 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 \/\/ Use innerHTML to render the <br> tag correctly for sentence transformation questions\n questionTextEl.innerHTML = currentQuestion.question;\n optionsContainer.innerHTML = '';\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; \/\/ Use textContent here for security unless HTML in options is needed\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'); \/\/ Highlight correct one if already answered wrong\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 \/\/ Check if all questions are answered before changing button text\n const allAnswered = questions.every(q => q.userAnswer !== null);\n nextBtn.textContent = allAnswered ? '\u0625\u0646\u0647\u0627\u0621 \u0648\u0639\u0631\u0636 \u0627\u0644\u0646\u062a\u064a\u062c\u0629' : '\u0627\u0644\u062a\u0627\u0644\u064a';\n } else {\n nextBtn.textContent = '\u0627\u0644\u062a\u0627\u0644\u064a';\n }\n \/\/ Disable next button if current question hasn't been answered yet? Let's allow navigation.\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 \/\/ Only show results if the last question is answered (or attempted)\n if (questions[currentQuestionIndex].userAnswer !== null) {\n showResults();\n } else {\n \/\/ Maybe add a small visual cue that the last question needs answering?\n \/\/ Or just let the user click finish again after answering.\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, index) => {\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 innerHTML for questions 29-34 that contain HTML (<br>, <i>)\n if (q.originalIndex >= 29) {\n \/\/ Simple way to structure sentence transformation review\n const parts = q.question.split('<br><i>');\n questionP.innerHTML = `${index + 1}. <span class=\"situation\">${parts[0]}<\/span> <span class=\"instruction\"><i>${parts[1]}<\/i><\/span>`;\n } else {\n questionP.textContent = `${index + 1}. ${q.question}`; \/\/ Original index for reference\n }\n\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 = [...originalIfClauseQuestions]; \/\/ 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 \u0642\u0627\u0639\u062f\u0629 If (Conditional Clauses) \u0627\u062e\u062a\u0628\u0627\u0631 \u0642\u0627\u0639\u062f\u0629 If (Conditional Clauses) \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-4971","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\/4971","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=4971"}],"version-history":[{"count":1,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4971\/revisions"}],"predecessor-version":[{"id":4972,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4971\/revisions\/4972"}],"wp:attachment":[{"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4971"},{"taxonomy":"reaction","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Freaction&post=4971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}