\u0627\u062e\u062a\u0628\u0627\u0631\u0627\u062a \u0645\u0639\u0627\u0646\u064a \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u0633\u0627\u0628\u0639\u0629<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;700&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 flex-direction: column; \n align-items: center;\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: 30px;\n margin-bottom: 30px;\n border-top: 5px solid var(--primary-color);\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 { \n font-size: 1.3em; \n font-weight: bold; \n margin-bottom: 25px; \n min-height: 50px; \n text-align: right; \n direction: rtl; \/* Default for Arabic quiz *\/\n }\n \/* Style for English Quiz (LTR) *\/\n .quiz-container[data-lang=\"en\"] .question-text, \n .quiz-container[data-lang=\"en\"] .option-btn,\n .quiz-container[data-lang=\"en\"] .review-item {\n direction: ltr; \n text-align: left;\n }\n \/* Style for Arabic Quiz with mixed LTR\/RTL text *\/\n .quiz-container[data-lang=\"ar\"] .question-text {\n \/* To ensure the English part is read LTR, but the overall alignment is RTL *\/\n text-align: right;\n }\n .options-container { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; }\n @media (min-width: 600px) { .options-container { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; } }\n .option-btn { \n background-color: var(--light-color); \n border: 1px solid #ddd; \n color: var(--text-color); \n padding: 10px 12px; \n border-radius: var(--border-radius); \n cursor: pointer; \n transition: all 0.3s ease; \n font-size: 1em; \n text-align: right; \n width: 100%; \n word-wrap: break-word;\n direction: rtl; \/* Default for Arabic quiz options *\/\n }\n .option-btn:hover:not(:disabled) { background-color: #e2e6ea; border-color: #adb5bd; }\n .option-btn:disabled { cursor: not-allowed; opacity: 0.8; }\n .option-btn.correct { background-color: var(--success-color); border-color: var(--success-color); color: white; font-weight: bold; }\n .option-btn.incorrect { background-color: var(--danger-color); border-color: var(--danger-color); color: white; }\n .navigation-buttons { display: flex; justify-content: space-between; margin-top: 25px; }\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: rtl; }\n .review-item { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px dashed #ccc; font-size: 0.95em; direction: rtl; text-align: right;}\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\" id=\"english-quiz\" data-lang=\"en\">\n <div id=\"english-start-screen\" class=\"start-screen\">\n <h1>\u0627\u062e\u062a\u0628\u0627\u0631 \u0645\u0639\u0627\u0646\u064a \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u0633\u0627\u0628\u0639\u0629<\/h1>\n <h2>(\u0627\u0644\u0646\u0633\u062e\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 19 \u0633\u0624\u0627\u0644 \u0645\u062a\u0639\u062f\u062f \u0627\u0644\u062e\u064a\u0627\u0631\u0627\u062a.<\/p>\n <button id=\"english-start-btn\" class=\"start-btn\">\u0627\u0628\u062f\u0623 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631<\/button>\n <\/div>\n\n <div id=\"english-quiz-screen\" class=\"quiz-screen\">\n <div class=\"question-header\">\n <span id=\"english-question-number\"><\/span>\n <\/div>\n <div id=\"english-question-text\" class=\"question-text\"><\/div>\n <div class=\"options-container\" id=\"english-options-container\">\n <\/div>\n <div id=\"english-feedback\" class=\"feedback\"><\/div>\n <div class=\"navigation-buttons\">\n <button id=\"english-prev-btn\" class=\"nav-btn\">\u0627\u0644\u0633\u0627\u0628\u0642<\/button>\n <button id=\"english-next-btn\" class=\"nav-btn\">\u0627\u0644\u062a\u0627\u0644\u064a<\/button>\n <\/div>\n <div class=\"progress-container\">\n <div id=\"english-progress-bar\" class=\"progress-bar\"><\/div>\n <\/div>\n <div id=\"english-progress-text\" class=\"progress-text\">0 \/ 19<\/div>\n <\/div>\n\n <div id=\"english-results-screen\" class=\"results-screen\">\n <h2>\u0646\u062a\u0627\u0626\u062c \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631 (\u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629)<\/h2>\n <div id=\"english-score\" class=\"score\"><\/div>\n <h3>\u0645\u0631\u0627\u062c\u0639\u0629 \u0627\u0644\u0623\u0633\u0626\u0644\u0629:<\/h3>\n <div class=\"review-container\" id=\"english-review-container\">\n <\/div>\n <button id=\"english-restart-btn\" class=\"restart-btn\">\u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631<\/button>\n <\/div>\n <\/div>\n \n <div class=\"quiz-container\" id=\"arabic-quiz\" data-lang=\"ar\">\n <div id=\"arabic-start-screen\" class=\"start-screen\">\n <h1>\u0627\u062e\u062a\u0628\u0627\u0631 \u0645\u0639\u0627\u0646\u064a \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u0633\u0627\u0628\u0639\u0629<\/h1>\n <h2>(\u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629)<\/h2>\n <p>\u0647\u0630\u0627 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 19 \u0633\u0624\u0627\u0644 \u0645\u062a\u0639\u062f\u062f \u0627\u0644\u062e\u064a\u0627\u0631\u0627\u062a.<\/p>\n <button id=\"arabic-start-btn\" class=\"start-btn\">\u0627\u0628\u062f\u0623 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631<\/button>\n <\/div>\n\n <div id=\"arabic-quiz-screen\" class=\"quiz-screen\">\n <div class=\"question-header\">\n <span id=\"arabic-question-number\"><\/span>\n <\/div>\n <div id=\"arabic-question-text\" class=\"question-text\"><\/div>\n <div class=\"options-container\" id=\"arabic-options-container\">\n <\/div>\n <div id=\"arabic-feedback\" class=\"feedback\"><\/div>\n <div class=\"navigation-buttons\">\n <button id=\"arabic-prev-btn\" class=\"nav-btn\">\u0627\u0644\u0633\u0627\u0628\u0642<\/button>\n <button id=\"arabic-next-btn\" class=\"nav-btn\">\u0627\u0644\u062a\u0627\u0644\u064a<\/button>\n <\/div>\n <div class=\"progress-container\">\n <div id=\"arabic-progress-bar\" class=\"progress-bar\"><\/div>\n <\/div>\n <div id=\"arabic-progress-text\" class=\"progress-text\">0 \/ 19<\/div>\n <\/div>\n\n <div id=\"arabic-results-screen\" class=\"results-screen\">\n <h2>\u0646\u062a\u0627\u0626\u062c \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631 (\u0627\u0644\u0639\u0631\u0628\u064a\u0629)<\/h2>\n <div id=\"arabic-score\" class=\"score\"><\/div>\n <h3>\u0645\u0631\u0627\u062c\u0639\u0629 \u0627\u0644\u0623\u0633\u0626\u0644\u0629:<\/h3>\n <div class=\"review-container\" id=\"arabic-review-container\">\n <\/div>\n <button id=\"arabic-restart-btn\" class=\"restart-btn\">\u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631<\/button>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Data for the English-only quiz\n const englishQuizQuestions = [\n { question: \"We all know that there are many social and ________ problems around the world.\", options: [\"broken\", \"environmental\", \"natural\", \"provide\"], correctAnswer: \"environmental\" },\n { question: \"It also helps to ________ water filters and install new toilets.\", options: [\"Contaminate\", \"provide\", \"natural\", \"broken\"], correctAnswer: \"provide\" },\n { question: \"The charity also helps to repair ________ pipes.\", options: [\"broken\", \"provide\", \"Contaminate\", \"natural\"], correctAnswer: \"broken\" },\n { question: \"Dirty water often ________ fresh water supplies.\", options: [\"provide\", \"natural\", \"Contaminate\", \"broken\"], correctAnswer: \"Contaminate\" },\n { question: \"90% of the world's ________ disasters are related to water.\", options: [\"natural\", \"install\", \"broken\", \"environmental\"], correctAnswer: \"natural\" },\n { question: \"It also helps to provide water filters and ________ new toilets.\", options: [\"broken\", \"install\", \"Contaminate\", \"natural\"], correctAnswer: \"install\" },\n { question: \"His parents said he wasn't working hard enough and his terrible exam results have ________ them right.\", options: [\"share\", \"proven\", \"bright\", \"angle\"], correctAnswer: \"proven\" },\n { question: \"Does anyone have any ________ ideas for Maha's surprise family party?\", options: [\"bright\", \"angle\", \"proven\", \"share\"], correctAnswer: \"bright\" },\n { question: \"To find a solution we need to look at the problem from a different ________.\", options: [\"angle\", \"proven\", \"bright\", \"share\"], correctAnswer: \"angle\" },\n { question: \"Please ________ your thoughts on what you think went wrong.\", options: [\"proven\", \"share\", \"angle\", \"bright\"], correctAnswer: \"share\" },\n { question: \"It helps to move people out of ________.\", options: [\"environment\", \"facilities\", \"poverty\", \"opportunities\"], correctAnswer: \"poverty\" },\n { question: \"It aims to give better work to ________ women and young people.\", options: [\"opportunities\", \"homes\", \"facilities\", \"poverty\"], correctAnswer: \"opportunities\" },\n { question: \"It helps to improve health ________.\", options: [\"homes\", \"poverty\", \"opportunities\", \"facilities\"], correctAnswer: \"facilities\" },\n { question: \"It helps refugees to find ________ work.\", options: [\"homes\", \"environment\", \"facilities\", \"opportunities\"], correctAnswer: \"homes\" },\n { question: \"It promotes sustainable development that does not harm the ________.\", options: [\"environment\", \"poverty\", \"facilities\", \"homes\"], correctAnswer: \"environment\" },\n { question: \"Monkeys live ________ fruit and nuts.\", options: [\"out\", \"with\", \"in\", \"on\"], correctAnswer: \"on\" },\n { question: \"Monkeys live ________ trees.\", options: [\"on\", \"with\", \"in\", \"out\"], correctAnswer: \"in\" },\n { question: \"We eat soup ________ of a bowl.\", options: [\"out\", \"with\", \"in\", \"on\"], correctAnswer: \"out\" },\n { question: \"We need to deal ________ the climate crisis.\", options: [\"on\", \"out\", \"in\", \"with\"], correctAnswer: \"with\" }\n ];\n\n \/\/ Data for the Arabic quiz (Arabic and English combined text)\n const arabicQuizQuestions = [\n \/\/ Q1: environmental\n { \n question: \"1. We all know that there are many social and **...** problems around the world. (\u062c\u0645\u064a\u0639\u0627 \u0646\u0639\u0644\u0645 \u0623\u0646 \u0647\u0646\u0627\u0643 \u0627\u0644\u0639\u062f\u064a\u062f \u0645\u0646 \u0627\u0644\u0645\u0634\u0627\u0643\u0644 \u0627\u0644\u0627\u062c\u062a\u0645\u0627\u0639\u064a\u0629 \u0648... \u062d\u0648\u0644 \u0627\u0644\u0639\u0627\u0644\u0645.)\", \n options: [\"broken - \u0645\u0643\u0633\u0648\u0631\u0629\", \"environmental - \u0628\u064a\u0626\u064a\u0629\", \"natural - \u0637\u0628\u064a\u0639\u064a\u0629\", \"provide - \u064a\u0648\u0641\u0631\"], \n correctAnswer: \"environmental - \u0628\u064a\u0626\u064a\u0629\" \n },\n \/\/ Q2: provide\n { \n question: \"2. It also helps to **...** water filters and install new toilets. (\u0643\u0645\u0627 \u064a\u0633\u0627\u0639\u062f \u0641\u064a ... \u0641\u0644\u0627\u062a\u0631 \u0627\u0644\u0645\u064a\u0627\u0647 \u0648\u062a\u0631\u0643\u064a\u0628 \u062d\u0645\u0627\u0645\u0627\u062a \u062c\u062f\u064a\u062f\u0629.)\", \n options: [\"Contaminate - \u062a\u0644\u0648\u062b\", \"provide - \u064a\u0648\u0641\u0631\", \"natural - \u0637\u0628\u064a\u0639\u064a\", \"broken - \u0643\u0633\u0631\"], \n correctAnswer: \"provide - \u064a\u0648\u0641\u0631\" \n },\n \/\/ Q3: broken\n { \n question: \"3. The charity also helps to repair **...** pipes. (\u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0623\u064a\u0636\u0627 \u062a\u0633\u0627\u0639\u062f \u0641\u064a \u0625\u0635\u0644\u0627\u062d \u0627\u0644\u0623\u0646\u0627\u0628\u064a\u0628 ...)\", \n options: [\"broken - \u0627\u0644\u0645\u0643\u0633\u0648\u0631\u0629\", \"provide - \u064a\u0648\u0641\u0631\", \"Contaminate - \u0627\u0644\u0645\u0644\u0648\u062b\u0629\", \"natural - \u0627\u0644\u0637\u0628\u064a\u0639\u064a\u0629\"], \n correctAnswer: \"broken - \u0627\u0644\u0645\u0643\u0633\u0648\u0631\u0629\" \n },\n \/\/ Q4: Contaminate\n { \n question: \"4. Dirty water often **...** fresh water supplies. (\u0627\u0644\u0645\u064a\u0627\u0647 \u0627\u0644\u0648\u0633\u062e\u0629 \u063a\u0627\u0644\u0628\u0627 \u0645\u0627 ... \u0625\u0645\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u0645\u064a\u0627\u0647 \u0627\u0644\u0646\u0638\u064a\u0641\u0629.)\", \n options: [\"natural - \u0637\u0628\u064a\u0639\u064a\", \"provide - \u062a\u0648\u0641\u0631\", \"Contaminate - \u062a\u0644\u0648\u062b\", \"broken - \u062a\u0643\u0633\u0631\"], \n correctAnswer: \"Contaminate - \u062a\u0644\u0648\u062b\" \n },\n \/\/ Q5: natural\n { \n question: \"5. 90% of the world's **...** disasters are related to water. (%90 \u0645\u0646 \u0627\u0644\u0643\u0648\u0627\u0631\u062b ... \u0641\u064a \u0627\u0644\u0639\u0627\u0644\u0645 \u0645\u0631\u062a\u0628\u0637\u0629 \u0628\u0627\u0644\u0645\u064a\u0627\u0647.)\", \n options: [\"natural - \u0627\u0644\u0637\u0628\u064a\u0639\u064a\u0629\", \"install - \u062a\u0631\u0643\u064a\u0628\", \"broken - \u0627\u0644\u0645\u0643\u0633\u0648\u0631\u0629\", \"environmental - \u0627\u0644\u0628\u064a\u0626\u064a\u0629\"], \n correctAnswer: \"natural - \u0627\u0644\u0637\u0628\u064a\u0639\u064a\u0629\" \n },\n \/\/ Q6: install\n { \n question: \"6. It also helps to provide water filters and **...** new toilets. (\u0643\u0645\u0627 \u064a\u0633\u0627\u0639\u062f \u0641\u064a \u062a\u0648\u0641\u064a\u0631 \u0641\u0644\u0627\u062a\u0631 \u0627\u0644\u0645\u064a\u0627\u0647 ... \u062d\u0645\u0627\u0645\u0627\u062a \u062c\u062f\u064a\u062f\u0629.)\", \n options: [\"broken - \u0643\u0633\u0631\", \"install - \u062a\u0631\u0643\u064a\u0628\", \"Contaminate - \u062a\u0644\u0648\u062b\", \"natural - \u0637\u0628\u064a\u0639\u064a\"], \n correctAnswer: \"install - \u062a\u0631\u0643\u064a\u0628\" \n },\n \/\/ Q7: proven\n { \n question: \"7. His parents said he wasn't working hard enough and his terrible exam results have **...** them right. (\u0648\u0627\u0644\u062f\u0627\u0647 \u0642\u0627\u0644\u0627 \u0625\u0646\u0647 \u0644\u0645 \u064a\u0639\u0645\u0644 \u0628\u062c\u062f \u0643\u0627\u0641 \u0648\u0646\u062a\u064a\u062c\u0629 \u0627\u0645\u062a\u062d\u0627\u0646\u0647 \u0627\u0644\u0633\u064a\u0626\u0629 \u0642\u062f ... \u0631\u0623\u064a\u0647\u0645.)\", \n options: [\"share - \u0634\u0627\u0631\u0643\u062a\", \"proven - \u0623\u062b\u0628\u062a\u062a\", \"bright - \u0630\u0643\u064a\u0629\", \"angle - \u0632\u0627\u0648\u064a\u0629\"], \n correctAnswer: \"proven - \u0623\u062b\u0628\u062a\u062a\" \n },\n \/\/ Q8: bright\n { \n question: \"8. Does anyone have any **...** ideas for Maha's surprise family party? (\u0647\u0644 \u0623\u064a \u0634\u062e\u0635 \u064a\u0645\u0644\u0643 \u0623\u064a \u0623\u0641\u0643\u0627\u0631 ... \u0644\u0644\u062d\u0641\u0644\u0629 \u0645\u0641\u0627\u062c\u0623\u0629 \u0644\u0645\u0627\u0647\u0627 \u0627\u0644\u0639\u0627\u0626\u0644\u064a\u0629\u061f)\", \n options: [\"bright - \u0630\u0643\u064a\u0629\", \"angle - \u0632\u0627\u0648\u064a\u0629\", \"proven - \u0645\u062b\u0628\u062a\u0629\", \"share - \u064a\u0634\u0627\u0631\u0643\"], \n correctAnswer: \"bright - \u0630\u0643\u064a\u0629\" \n },\n \/\/ Q9: angle\n { \n question: \"9. To find a solution we need to look at the problem from a different **...**. (\u0644\u0625\u064a\u062c\u0627\u062f \u062d\u0644\u060c \u0646\u062d\u062a\u0627\u062c \u0625\u0644\u0649 \u0627\u0644\u0646\u0638\u0631 \u0625\u0644\u0649 \u0627\u0644\u0645\u0634\u0643\u0644\u0629 \u0645\u0646 \u0632\u0627\u0648\u064a\u0629 \u0645\u062e\u062a\u0644\u0641\u0629)\", \n options: [\"angle - \u0632\u0627\u0648\u064a\u0629\", \"proven - \u0645\u062b\u0628\u062a\u0629\", \"bright - \u0630\u0643\u064a\u0629\", \"share - \u062a\u0634\u0627\u0631\u0643\"], \n correctAnswer: \"angle - \u0632\u0627\u0648\u064a\u0629\" \n },\n \/\/ Q10: share\n { \n question: \"10. Please **...** your thoughts on what you think went wrong. (\u064a\u0631\u062c\u0649 ... \u0623\u0641\u0643\u0627\u0631\u0643 \u062d\u0648\u0644 \u0645\u0627 \u062a\u0639\u062a\u0642\u062f \u0623\u0646\u0647 \u062d\u062f\u062b \u0628\u0634\u0643\u0644 \u062e\u0627\u0637\u0626.)\", \n options: [\"proven - \u0627\u062b\u0628\u0627\u062a\", \"share - \u0645\u0634\u0627\u0631\u0643\u0629\", \"angle - \u0632\u0627\u0648\u064a\u0629\", \"bright - \u0631\u0627\u0626\u0639\u0629\"], \n correctAnswer: \"share - \u0645\u0634\u0627\u0631\u0643\u0629\" \n },\n \/\/ Q11: poverty\n { \n question: \"11. It helps to move people out of **...**. (\u064a\u0633\u0627\u0639\u062f \u0639\u0644\u0649 \u0625\u062e\u0631\u0627\u062c \u0627\u0644\u0646\u0627\u0633 \u0645\u0646 ...)\", \n options: [\"environment - \u0627\u0644\u0628\u064a\u0626\u0629\", \"facilities - \u0627\u0644\u0645\u0631\u0627\u0641\u0642\", \"poverty - \u0627\u0644\u0641\u0642\u0631\", \"opportunities - \u0627\u0644\u0641\u0631\u0635\"], \n correctAnswer: \"poverty - \u0627\u0644\u0641\u0642\u0631\" \n },\n \/\/ Q12: opportunities\n { \n question: \"12. It aims to give better work to **...** women and young people. (\u064a\u0647\u062f\u0641 \u0625\u0644\u0649 \u062a\u0648\u0641\u064a\u0631 \u0639\u0645\u0644 \u0623\u0641\u0636\u0644 \u0644\u0644\u0646\u0633\u0627\u0621 \u0648\u0627\u0644\u0634\u0628\u0627\u0628.)\", \n options: [\"opportunities - \u0641\u0631\u0635\", \"homes - \u0645\u0646\u0627\u0632\u0644\", \"facilities - \u0645\u0631\u0627\u0641\u0642\", \"poverty - \u0641\u0642\u0631\"], \n correctAnswer: \"opportunities - \u0641\u0631\u0635\" \n },\n \/\/ Q13: facilities\n { \n question: \"13. It helps to improve health **...**. (\u064a\u0633\u0627\u0639\u062f \u0639\u0644\u0649 \u062a\u062d\u0633\u064a\u0646 ... \u0627\u0644\u0635\u062d\u064a\u0629.)\", \n options: [\"homes - \u0627\u0644\u0645\u0646\u0627\u0632\u0644\", \"poverty - \u0627\u0644\u0641\u0642\u0631\", \"opportunities - \u0627\u0644\u0641\u0631\u0635\", \"facilities - \u0627\u0644\u0645\u0631\u0627\u0641\u0642\"], \n correctAnswer: \"facilities - \u0627\u0644\u0645\u0631\u0627\u0641\u0642\" \n },\n \/\/ Q14: homes\n { \n question: \"14. It helps refugees to find **...** as well as with education, finance, and work. (\u064a\u0633\u0627\u0639\u062f \u0627\u0644\u0644\u0627\u062c\u0626\u064a\u0646 \u0641\u064a \u0627\u0644\u0639\u062b\u0648\u0631 \u0639\u0644\u0649 ... \u0628\u0627\u0644\u0625\u0636\u0627\u0641\u0629 \u0625\u0644\u0649 \u0627\u0644\u062a\u0639\u0644\u064a\u0645 \u0648\u0627\u0644\u062a\u0645\u0648\u064a\u0644 \u0648\u0627\u0644\u0639\u0645\u0644.)\", \n options: [\"homes - \u0645\u0646\u0627\u0632\u0644\", \"environment - \u0628\u064a\u0626\u0629\", \"facilities - \u0645\u0631\u0627\u0641\u0642\", \"opportunities - \u0641\u0631\u0635\"], \n correctAnswer: \"homes - \u0645\u0646\u0627\u0632\u0644\" \n },\n \/\/ Q15: environment\n { \n question: \"15. It promotes sustainable development that does not harm the **...**. (\u064a\u0639\u0632\u0632 \u0627\u0644\u062a\u0646\u0645\u064a\u0629 \u0627\u0644\u0645\u0633\u062a\u062f\u0627\u0645\u0629 \u0627\u0644\u062a\u064a \u0644\u0627 \u062a\u0636\u0631 ...)\", \n options: [\"environment - \u0627\u0644\u0628\u064a\u0626\u0629\", \"poverty - \u0627\u0644\u0641\u0642\u0631\", \"facilities - \u0627\u0644\u0645\u0631\u0627\u0641\u0642\", \"homes - \u0627\u0644\u0645\u0646\u0627\u0632\u0644\"], \n correctAnswer: \"environment - \u0627\u0644\u0628\u064a\u0626\u0629\" \n },\n \/\/ Q16: on\n { \n question: \"16. Monkeys live **...** fruit and nuts. (\u0627\u0644\u0642\u0631\u0648\u062f \u062a\u0639\u064a\u0634 ... \u0627\u0644\u0641\u0648\u0627\u0643\u0647 \u0648\u0627\u0644\u0645\u0643\u0633\u0631\u0627\u062a.)\", \n options: [\"out - \u062e\u0631\u062c\", \"with - \u0645\u0639\", \"in - \u0641\u064a\", \"on - \u0639\u0644\u0649\"], \n correctAnswer: \"on - \u0639\u0644\u0649\" \n },\n \/\/ Q17: in\n { \n question: \"17. Monkeys live **...** trees. (\u0627\u0644\u0642\u0631\u0648\u062f \u062a\u0639\u064a\u0634 ... \u0627\u0644\u0623\u0634\u062c\u0627\u0631.)\", \n options: [\"on - \u0639\u0644\u0649\", \"with - \u0645\u0639\", \"in - \u0641\u064a\", \"out - \u062e\u0631\u062c\"], \n correctAnswer: \"in - \u0641\u064a\" \n },\n \/\/ Q18: out\n { \n question: \"18. We eat soup **...** of a bowl. (\u0646\u0623\u0643\u0644 \u0627\u0644\u062d\u0633\u0627\u0621 ... \u0645\u0646 \u0648\u0639\u0627\u0621.)\", \n options: [\"out - \u062e\u0627\u0631\u062c\", \"with - \u0645\u0639\", \"in - \u0641\u064a\", \"on - \u0639\u0644\u0649\"], \n correctAnswer: \"out - \u062e\u0627\u0631\u062c\" \n },\n \/\/ Q19: with\n { \n question: \"19. We need to deal **...** the climate crisis. (\u0646\u062d\u062a\u0627\u062c \u0625\u0644\u0649 \u0627\u0644\u062a\u0639\u0627\u0645\u0644 ... \u0623\u0632\u0645\u0629 \u0627\u0644\u0645\u0646\u0627\u062e.)\", \n options: [\"on - \u0639\u0644\u0649\", \"out - \u062e\u0627\u0631\u062c\", \"in - \u0641\u064a\", \"with - \u0645\u0639\"], \n correctAnswer: \"with - \u0645\u0639\" \n }\n ];\n\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 \/\/ Reusable function to create and manage a quiz instance\n function createQuizApp(prefix, originalQuestions) {\n let questions = [];\n let currentQuestionIndex = 0;\n const totalQuestions = originalQuestions.length;\n\n \/\/ Element references scoped by prefix\n const startScreen = document.getElementById(`${prefix}-start-screen`);\n const quizScreen = document.getElementById(`${prefix}-quiz-screen`);\n const resultsScreen = document.getElementById(`${prefix}-results-screen`);\n const startBtn = document.getElementById(`${prefix}-start-btn`);\n const questionNumberEl = document.getElementById(`${prefix}-question-number`);\n const questionTextEl = document.getElementById(`${prefix}-question-text`);\n const optionsContainer = document.getElementById(`${prefix}-options-container`);\n const feedbackEl = document.getElementById(`${prefix}-feedback`);\n const prevBtn = document.getElementById(`${prefix}-prev-btn`);\n const nextBtn = document.getElementById(`${prefix}-next-btn`);\n const progressBar = document.getElementById(`${prefix}-progress-bar`);\n const progressTextEl = document.getElementById(`${prefix}-progress-text`);\n const scoreEl = document.getElementById(`${prefix}-score`);\n const reviewContainer = document.getElementById(`${prefix}-review-container`);\n const restartBtn = document.getElementById(`${prefix}-restart-btn`);\n\n startBtn.addEventListener('click', startQuiz);\n prevBtn.addEventListener('click', prevQuestion);\n nextBtn.addEventListener('click', nextQuestion);\n restartBtn.addEventListener('click', restartQuiz);\n\n function startQuiz() {\n questions = JSON.parse(JSON.stringify(originalQuestions));\n questions.forEach(q => {\n q.userAnswer = null;\n q.isCorrect = null;\n shuffleArray(q.options);\n });\n shuffleArray(questions);\n\n startScreen.style.display = 'none';\n resultsScreen.style.display = 'none';\n quizScreen.style.display = 'block';\n currentQuestionIndex = 0;\n displayQuestion();\n }\n\n function displayQuestion() {\n const question = questions[currentQuestionIndex];\n questionNumberEl.textContent = `\u0627\u0644\u0633\u0624\u0627\u0644 ${currentQuestionIndex + 1} \u0645\u0646 ${totalQuestions}`;\n questionTextEl.textContent = question.question;\n\n optionsContainer.innerHTML = '';\n feedbackEl.textContent = '';\n feedbackEl.className = 'feedback';\n\n const currentOptions = question.options;\n currentOptions.forEach(option => {\n const button = document.createElement('button');\n button.textContent = option;\n button.className = 'option-btn';\n button.onclick = () => selectAnswer(option, button);\n optionsContainer.appendChild(button);\n });\n\n updateNavigation();\n updateProgressBar();\n highlightPreviousAnswer();\n }\n\n function selectAnswer(selectedOption, btn) {\n const question = questions[currentQuestionIndex];\n\n if (question.userAnswer !== null) return;\n\n question.userAnswer = selectedOption;\n const isCorrect = selectedOption === question.correctAnswer;\n question.isCorrect = isCorrect;\n\n if (isCorrect) {\n feedbackEl.textContent = '\u0625\u062c\u0627\u0628\u0629 \u0635\u062d\u064a\u062d\u0629!';\n feedbackEl.classList.add('correct');\n } else {\n feedbackEl.textContent = `\u0625\u062c\u0627\u0628\u0629 \u062e\u0627\u0637\u0626\u0629. \u0627\u0644\u0635\u062d\u064a\u062d\u0629 \u0647\u064a: ${question.correctAnswer}`;\n feedbackEl.classList.add('incorrect');\n }\n\n Array.from(optionsContainer.children).forEach(button => {\n button.disabled = true;\n if (button.textContent === question.correctAnswer) {\n button.classList.add('correct');\n } else if (button.textContent === selectedOption) {\n button.classList.add('incorrect');\n }\n });\n\n nextBtn.focus();\n }\n\n function highlightPreviousAnswer() {\n const question = questions[currentQuestionIndex];\n if (question.userAnswer === null) {\n feedbackEl.textContent = '';\n feedbackEl.className = 'feedback';\n return;\n }\n\n Array.from(optionsContainer.children).forEach(button => {\n const optionText = button.textContent;\n button.disabled = true;\n if (optionText === question.correctAnswer) {\n button.classList.add('correct');\n } else if (optionText === question.userAnswer) {\n button.classList.add('incorrect');\n }\n });\n \n if (question.isCorrect) {\n feedbackEl.textContent = '\u0625\u062c\u0627\u0628\u0629 \u0635\u062d\u064a\u062d\u0629!';\n feedbackEl.classList.add('correct');\n } else if (question.userAnswer) {\n feedbackEl.textContent = `\u0625\u062c\u0627\u0628\u0629 \u062e\u0627\u0637\u0626\u0629. \u0627\u0644\u0635\u062d\u064a\u062d\u0629 \u0647\u064a: ${question.correctAnswer}`;\n feedbackEl.classList.add('incorrect');\n }\n }\n\n function updateNavigation() {\n prevBtn.disabled = currentQuestionIndex === 0;\n if (currentQuestionIndex === totalQuestions - 1) {\n nextBtn.textContent = '\u0625\u0646\u0647\u0627\u0621 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631';\n } else {\n nextBtn.textContent = '\u0627\u0644\u062a\u0627\u0644\u064a';\n }\n }\n\n function updateProgressBar() {\n const progressPercentage = ((currentQuestionIndex + 1) \/ totalQuestions) * 100;\n progressBar.style.width = `${progressPercentage}%`;\n progressTextEl.textContent = `${currentQuestionIndex + 1} \/ ${totalQuestions}`;\n }\n\n function nextQuestion() {\n if (currentQuestionIndex < totalQuestions - 1) {\n currentQuestionIndex++;\n displayQuestion();\n } else if (currentQuestionIndex === totalQuestions - 1) {\n showResults();\n }\n }\n\n function prevQuestion() {\n if (currentQuestionIndex > 0) {\n currentQuestionIndex--;\n displayQuestion();\n }\n }\n\n function showResults() {\n quizScreen.style.display = 'none';\n resultsScreen.style.display = 'block';\n\n const score = questions.filter(q => q.isCorrect).length;\n const scorePercentage = ((score \/ totalQuestions) * 100).toFixed(2);\n scoreEl.innerHTML = `\u0646\u062a\u064a\u062c\u062a\u0643: ${score} \u0645\u0646 ${totalQuestions} (${scorePercentage}%)`;\n\n reviewContainer.innerHTML = '';\n questions.forEach((question, index) => {\n const reviewItem = document.createElement('div');\n reviewItem.classList.add('review-item');\n\n const questionP = document.createElement('p');\n questionP.className = 'review-question';\n questionP.textContent = `${index + 1}. ${question.question}`;\n\n const userAnswerP = document.createElement('p');\n userAnswerP.className = 'review-user-answer';\n userAnswerP.textContent = `\u0625\u062c\u0627\u0628\u062a\u0643: ${question.userAnswer || '\u0644\u0645 \u062a\u062c\u0628'}`;\n\n if (question.userAnswer) {\n userAnswerP.classList.add(question.isCorrect ? 'correct' : 'incorrect');\n } else {\n userAnswerP.classList.add('incorrect');\n }\n\n const correctAnswerP = document.createElement('p');\n correctAnswerP.className = 'review-correct-answer';\n correctAnswerP.innerHTML = `\u0627\u0644\u0625\u062c\u0627\u0628\u0629 \u0627\u0644\u0635\u062d\u064a\u062d\u0629: <span>${question.correctAnswer}<\/span>`;\n\n reviewItem.appendChild(questionP);\n reviewItem.appendChild(userAnswerP);\n if (!question.isCorrect) {\n reviewItem.appendChild(correctAnswerP);\n }\n reviewContainer.appendChild(reviewItem);\n });\n }\n\n function restartQuiz() {\n resultsScreen.style.display = 'none';\n startScreen.style.display = 'flex';\n }\n }\n\n \/\/ Initialize both quizzes\n createQuizApp('english', englishQuizQuestions);\n createQuizApp('arabic', arabicQuizQuestions);\n\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n\n<!DOCTYPE html>\n<html lang=\"ar\" dir=\"rtl\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u0627\u0645\u062a\u062d\u0627\u0646\u0627\u062a \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 – \u0623\u0648\u0644 \u062b\u0627\u0646\u0648\u064a 2008<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n \/* \u062d\u0630\u0641 \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0628\u0631\u062a\u0642\u0627\u0644\u064a\u0629 \u0627\u0644\u0645\u062a\u062f\u0631\u062c\u0629 *\/\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n overflow: auto;\n }\n .container {\n text-align: center;\n background: rgba(255, 255, 255, 0.95);\n padding: 40px;\n border-radius: 20px;\n box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);\n margin: 20px;\n width: 90%;\n max-width: 600px;\n }\n h1 {\n color: #ff6200;\n font-size: 1.8em;\n margin-bottom: 30px;\n text-shadow: 2px 2px 5px rgba(255, 98, 0, 0.2);\n line-height: 1.5;\n }\n .button-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr); \/* \u0639\u0645\u0648\u062f\u064a\u0646 \u062f\u0627\u0626\u0645\u064b\u0627 *\/\n gap: 20px;\n max-width: 100%;\n }\n .cute-button {\n background: #ff6200;\n color: white;\n padding: 12px 25px;\n border: none;\n border-radius: 15px;\n font-size: 1.1em;\n cursor: pointer;\n position: relative;\n transition: all 0.3s ease;\n box-shadow: 0 5px 10px rgba(255, 98, 0, 0.4), \n inset 0 3px 8px rgba(255, 255, 255, 0.3);\n transform: perspective(500px) rotateX(5deg);\n }\n .cute-button:hover {\n transform: perspective(500px) rotateX(0deg) translateY(-3px);\n box-shadow: 0 8px 15px rgba(255, 98, 0, 0.6), \n inset 0 3px 8px rgba(255, 255, 255, 0.5);\n }\n .cute-button:active {\n transform: perspective(500px) rotateX(0deg) scale(0.97);\n box-shadow: 0 3px 8px rgba(255, 98, 0, 0.3), \n inset 0 2px 5px rgba(255, 255, 255, 0.2);\n }\n .cute-button::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n background: rgba(255, 255, 255, 0.3);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n transition: width 0.4s ease, height 0.4s ease;\n }\n .cute-button:hover::before {\n width: 150px;\n height: 150px;\n }\n @keyframes bounceIn {\n 0% { opacity: 0; transform: perspective(500px) rotateX(15deg) scale(0.9); }\n 60% { opacity: 1; transform: perspective(500px) rotateX(-3deg) scale(1.03); }\n 100% { transform: perspective(500px) rotateX(5deg) scale(1); }\n }\n .cute-button {\n animation: bounceIn 0.5s ease forwards;\n }\n\n \/* \u0627\u0644\u062a\u0648\u0627\u0641\u0642 \u0645\u0639 \u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0647\u0648\u0627\u062a\u0641 \u0645\u0639 \u0627\u0644\u0625\u0628\u0642\u0627\u0621 \u0639\u0644\u0649 \u0639\u0645\u0648\u062f\u064a\u0646 *\/\n @media (max-width: 600px) {\n .container {\n padding: 20px;\n }\n h1 {\n font-size: 1.4em;\n line-height: 1.6;\n }\n .button-grid {\n grid-template-columns: repeat(2, 1fr); \/* \u0627\u0644\u0625\u0628\u0642\u0627\u0621 \u0639\u0644\u0649 \u0639\u0645\u0648\u062f\u064a\u0646 *\/\n gap: 10px;\n }\n .cute-button {\n padding: 8px 15px;\n font-size: 0.9em;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h1>\u0627\u0645\u062a\u062d\u0627\u0646\u0627\u062a \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0644\u062c\u0645\u064a\u0639 \u0648\u062d\u062f\u0627\u062a \u0643\u062a\u0627\u0628 \u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0644\u0644\u0635\u0641 \u0627\u0644\u0623\u0648\u0644 \u062b\u0627\u0646\u0648\u064a \u0627\u0644\u0623\u0643\u0627\u062f\u064a\u0645\u064a \u062c\u064a\u0644 2008<\/h1>\n <div class=\"button-grid\">\n <a href=\"https:\/\/tawjihy.com\/?p=4781\"><button class=\"cute-button\">\u0627\u0645\u062a\u062d\u0627\u0646 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u0623\u0648\u0644\u0649<\/button><\/a>\n <a href=\"https:\/\/tawjihy.com\/?p=4790\"><button class=\"cute-button\">\u0627\u0645\u062a\u062d\u0627\u0646 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629<\/button><\/a>\n <a href=\"https:\/\/tawjihy.com\/?p=4792\"><button class=\"cute-button\">\u0627\u0645\u062a\u062d\u0627\u0646 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u062b\u0627\u0644\u062b\u0629<\/button><\/a>\n <a href=\"https:\/\/tawjihy.com\/?p=4797\"><button class=\"cute-button\">\u0627\u0645\u062a\u062d\u0627\u0646 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u0631\u0627\u0628\u0639\u0629<\/button><\/a>\n <a href=\"https:\/\/tawjihy.com\/?p=4806\"><button class=\"cute-button\">\u0627\u0645\u062a\u062d\u0627\u0646 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u0633\u0627\u062f\u0633\u0629<\/button><\/a>\n <a href=\"https:\/\/tawjihy.com\/?p=4811\"><button class=\"cute-button\">\u0627\u0645\u062a\u062d\u0627\u0646 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u0633\u0627\u0628\u0639\u0629<\/button><\/a>\n <a href=\"https:\/\/tawjihy.com\/?p=4813\"><button class=\"cute-button\">\u0627\u0645\u062a\u062d\u0627\u0646 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u062b\u0627\u0645\u0646\u0629<\/button><\/a>\n <a href=\"https:\/\/tawjihy.com\/?p=4816\"><button class=\"cute-button\">\u0627\u0645\u062a\u062d\u0627\u0646 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u062a\u0627\u0633\u0639\u0629<\/button><\/a>\n <a href=\"https:\/\/tawjihy.com\/?p=4826\"><button class=\"cute-button\">\u0627\u0645\u062a\u062d\u0627\u0646 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u0639\u0627\u0634\u0631\u0629<\/button><\/a>\n <\/div>\n <\/div>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0627\u0645\u062a\u062d\u0627\u0646 \u0645\u0639\u0627\u0646\u064a \u0645\u062d\u0648\u0633\u0628 \u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u0633\u0627\u0628\u0639\u0629 \u0623\u0648\u0644 \u062b\u0627\u0646\u0648\u064a \u0623\u0643\u0627\u062f\u064a\u0645\u064a 2008 \u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0645\u0639\u0644\u0645 \u0627\u064a\u0645\u0646 \u0627\u0644\u062e\u0636\u064a\u0631\u0627\u062a \u0627\u062e\u062a\u0628\u0627\u0631\u0627\u062a \u0645\u0639\u0627\u0646\u064a \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u0633\u0627\u0628\u0639\u0629 \u0627\u062e\u062a\u0628\u0627\u0631 […]<\/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-4811","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\/4811","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=4811"}],"version-history":[{"count":5,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4811\/revisions"}],"predecessor-version":[{"id":5045,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4811\/revisions\/5045"}],"wp:attachment":[{"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4811"},{"taxonomy":"reaction","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Freaction&post=4811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":4811,"date":"2025-04-05T04:30:24","date_gmt":"2025-04-05T04:30:24","guid":{"rendered":"https:\/\/tawjihy.com\/?p=4811"},"modified":"2025-10-17T12:55:59","modified_gmt":"2025-10-17T12:55:59","slug":"%d8%a7%d9%85%d8%aa%d8%ad%d8%a7%d9%86-%d9%85%d8%b9%d8%a7%d9%86%d9%8a-%d8%a7%d9%84%d9%83%d8%aa%d8%b1%d9%88%d9%86%d9%8a-%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","status":"publish","type":"post","link":"https:\/\/tawjihy.com\/?p=4811","title":{"rendered":"\u0627\u0645\u062a\u062d\u0627\u0646 \u0645\u0639\u0627\u0646\u064a \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u0633\u0627\u0628\u0639\u0629 \u0623\u0648\u0644 \u062b\u0627\u0646\u0648\u064a \u0623\u0643\u0627\u062f\u064a\u0645\u064a 2008"},"content":{"rendered":"\n\n\n\n

\u0627\u0645\u062a\u062d\u0627\u0646 \u0645\u0639\u0627\u0646\u064a \u0645\u062d\u0648\u0633\u0628 \u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u0633\u0627\u0628\u0639\u0629 \u0623\u0648\u0644 \u062b\u0627\u0646\u0648\u064a \u0623\u0643\u0627\u062f\u064a\u0645\u064a 2008
<\/p>\n\n\n\n

\u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0645\u0639\u0644\u0645 \u0627\u064a\u0645\u0646 \u0627\u0644\u062e\u0636\u064a\u0631\u0627\u062a <\/p>\n\n\n\n\n\n\n \n \n \u0627\u062e\u062a\u0628\u0627\u0631\u0627\u062a \u0645\u0639\u0627\u0646\u064a \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u0633\u0627\u0628\u0639\u0629<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;700&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 flex-direction: column; \n align-items: center;\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: 30px;\n margin-bottom: 30px;\n border-top: 5px solid var(--primary-color);\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 { \n font-size: 1.3em; \n font-weight: bold; \n margin-bottom: 25px; \n min-height: 50px; \n text-align: right; \n direction: rtl; \/* Default for Arabic quiz *\/\n }\n \/* Style for English Quiz (LTR) *\/\n .quiz-container[data-lang=\"en\"] .question-text, \n .quiz-container[data-lang=\"en\"] .option-btn,\n .quiz-container[data-lang=\"en\"] .review-item {\n direction: ltr; \n text-align: left;\n }\n \/* Style for Arabic Quiz with mixed LTR\/RTL text *\/\n .quiz-container[data-lang=\"ar\"] .question-text {\n \/* To ensure the English part is read LTR, but the overall alignment is RTL *\/\n text-align: right;\n }\n .options-container { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; }\n @media (min-width: 600px) { .options-container { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; } }\n .option-btn { \n background-color: var(--light-color); \n border: 1px solid #ddd; \n color: var(--text-color); \n padding: 10px 12px; \n border-radius: var(--border-radius); \n cursor: pointer; \n transition: all 0.3s ease; \n font-size: 1em; \n text-align: right; \n width: 100%; \n word-wrap: break-word;\n direction: rtl; \/* Default for Arabic quiz options *\/\n }\n .option-btn:hover:not(:disabled) { background-color: #e2e6ea; border-color: #adb5bd; }\n .option-btn:disabled { cursor: not-allowed; opacity: 0.8; }\n .option-btn.correct { background-color: var(--success-color); border-color: var(--success-color); color: white; font-weight: bold; }\n .option-btn.incorrect { background-color: var(--danger-color); border-color: var(--danger-color); color: white; }\n .navigation-buttons { display: flex; justify-content: space-between; margin-top: 25px; }\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: rtl; }\n .review-item { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px dashed #ccc; font-size: 0.95em; direction: rtl; text-align: right;}\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\" id=\"english-quiz\" data-lang=\"en\">\n <div id=\"english-start-screen\" class=\"start-screen\">\n <h1>\u0627\u062e\u062a\u0628\u0627\u0631 \u0645\u0639\u0627\u0646\u064a \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u0633\u0627\u0628\u0639\u0629<\/h1>\n <h2>(\u0627\u0644\u0646\u0633\u062e\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 19 \u0633\u0624\u0627\u0644 \u0645\u062a\u0639\u062f\u062f \u0627\u0644\u062e\u064a\u0627\u0631\u0627\u062a.<\/p>\n <button id=\"english-start-btn\" class=\"start-btn\">\u0627\u0628\u062f\u0623 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631<\/button>\n <\/div>\n\n <div id=\"english-quiz-screen\" class=\"quiz-screen\">\n <div class=\"question-header\">\n <span id=\"english-question-number\"><\/span>\n <\/div>\n <div id=\"english-question-text\" class=\"question-text\"><\/div>\n <div class=\"options-container\" id=\"english-options-container\">\n <\/div>\n <div id=\"english-feedback\" class=\"feedback\"><\/div>\n <div class=\"navigation-buttons\">\n <button id=\"english-prev-btn\" class=\"nav-btn\">\u0627\u0644\u0633\u0627\u0628\u0642<\/button>\n <button id=\"english-next-btn\" class=\"nav-btn\">\u0627\u0644\u062a\u0627\u0644\u064a<\/button>\n <\/div>\n <div class=\"progress-container\">\n <div id=\"english-progress-bar\" class=\"progress-bar\"><\/div>\n <\/div>\n <div id=\"english-progress-text\" class=\"progress-text\">0 \/ 19<\/div>\n <\/div>\n\n <div id=\"english-results-screen\" class=\"results-screen\">\n <h2>\u0646\u062a\u0627\u0626\u062c \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631 (\u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629)<\/h2>\n <div id=\"english-score\" class=\"score\"><\/div>\n <h3>\u0645\u0631\u0627\u062c\u0639\u0629 \u0627\u0644\u0623\u0633\u0626\u0644\u0629:<\/h3>\n <div class=\"review-container\" id=\"english-review-container\">\n <\/div>\n <button id=\"english-restart-btn\" class=\"restart-btn\">\u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631<\/button>\n <\/div>\n <\/div>\n \n <div class=\"quiz-container\" id=\"arabic-quiz\" data-lang=\"ar\">\n <div id=\"arabic-start-screen\" class=\"start-screen\">\n <h1>\u0627\u062e\u062a\u0628\u0627\u0631 \u0645\u0639\u0627\u0646\u064a \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u0633\u0627\u0628\u0639\u0629<\/h1>\n <h2>(\u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629)<\/h2>\n <p>\u0647\u0630\u0627 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 19 \u0633\u0624\u0627\u0644 \u0645\u062a\u0639\u062f\u062f \u0627\u0644\u062e\u064a\u0627\u0631\u0627\u062a.<\/p>\n <button id=\"arabic-start-btn\" class=\"start-btn\">\u0627\u0628\u062f\u0623 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631<\/button>\n <\/div>\n\n <div id=\"arabic-quiz-screen\" class=\"quiz-screen\">\n <div class=\"question-header\">\n <span id=\"arabic-question-number\"><\/span>\n <\/div>\n <div id=\"arabic-question-text\" class=\"question-text\"><\/div>\n <div class=\"options-container\" id=\"arabic-options-container\">\n <\/div>\n <div id=\"arabic-feedback\" class=\"feedback\"><\/div>\n <div class=\"navigation-buttons\">\n <button id=\"arabic-prev-btn\" class=\"nav-btn\">\u0627\u0644\u0633\u0627\u0628\u0642<\/button>\n <button id=\"arabic-next-btn\" class=\"nav-btn\">\u0627\u0644\u062a\u0627\u0644\u064a<\/button>\n <\/div>\n <div class=\"progress-container\">\n <div id=\"arabic-progress-bar\" class=\"progress-bar\"><\/div>\n <\/div>\n <div id=\"arabic-progress-text\" class=\"progress-text\">0 \/ 19<\/div>\n <\/div>\n\n <div id=\"arabic-results-screen\" class=\"results-screen\">\n <h2>\u0646\u062a\u0627\u0626\u062c \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631 (\u0627\u0644\u0639\u0631\u0628\u064a\u0629)<\/h2>\n <div id=\"arabic-score\" class=\"score\"><\/div>\n <h3>\u0645\u0631\u0627\u062c\u0639\u0629 \u0627\u0644\u0623\u0633\u0626\u0644\u0629:<\/h3>\n <div class=\"review-container\" id=\"arabic-review-container\">\n <\/div>\n <button id=\"arabic-restart-btn\" class=\"restart-btn\">\u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631<\/button>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Data for the English-only quiz\n const englishQuizQuestions = [\n { question: \"We all know that there are many social and ________ problems around the world.\", options: [\"broken\", \"environmental\", \"natural\", \"provide\"], correctAnswer: \"environmental\" },\n { question: \"It also helps to ________ water filters and install new toilets.\", options: [\"Contaminate\", \"provide\", \"natural\", \"broken\"], correctAnswer: \"provide\" },\n { question: \"The charity also helps to repair ________ pipes.\", options: [\"broken\", \"provide\", \"Contaminate\", \"natural\"], correctAnswer: \"broken\" },\n { question: \"Dirty water often ________ fresh water supplies.\", options: [\"provide\", \"natural\", \"Contaminate\", \"broken\"], correctAnswer: \"Contaminate\" },\n { question: \"90% of the world's ________ disasters are related to water.\", options: [\"natural\", \"install\", \"broken\", \"environmental\"], correctAnswer: \"natural\" },\n { question: \"It also helps to provide water filters and ________ new toilets.\", options: [\"broken\", \"install\", \"Contaminate\", \"natural\"], correctAnswer: \"install\" },\n { question: \"His parents said he wasn't working hard enough and his terrible exam results have ________ them right.\", options: [\"share\", \"proven\", \"bright\", \"angle\"], correctAnswer: \"proven\" },\n { question: \"Does anyone have any ________ ideas for Maha's surprise family party?\", options: [\"bright\", \"angle\", \"proven\", \"share\"], correctAnswer: \"bright\" },\n { question: \"To find a solution we need to look at the problem from a different ________.\", options: [\"angle\", \"proven\", \"bright\", \"share\"], correctAnswer: \"angle\" },\n { question: \"Please ________ your thoughts on what you think went wrong.\", options: [\"proven\", \"share\", \"angle\", \"bright\"], correctAnswer: \"share\" },\n { question: \"It helps to move people out of ________.\", options: [\"environment\", \"facilities\", \"poverty\", \"opportunities\"], correctAnswer: \"poverty\" },\n { question: \"It aims to give better work to ________ women and young people.\", options: [\"opportunities\", \"homes\", \"facilities\", \"poverty\"], correctAnswer: \"opportunities\" },\n { question: \"It helps to improve health ________.\", options: [\"homes\", \"poverty\", \"opportunities\", \"facilities\"], correctAnswer: \"facilities\" },\n { question: \"It helps refugees to find ________ work.\", options: [\"homes\", \"environment\", \"facilities\", \"opportunities\"], correctAnswer: \"homes\" },\n { question: \"It promotes sustainable development that does not harm the ________.\", options: [\"environment\", \"poverty\", \"facilities\", \"homes\"], correctAnswer: \"environment\" },\n { question: \"Monkeys live ________ fruit and nuts.\", options: [\"out\", \"with\", \"in\", \"on\"], correctAnswer: \"on\" },\n { question: \"Monkeys live ________ trees.\", options: [\"on\", \"with\", \"in\", \"out\"], correctAnswer: \"in\" },\n { question: \"We eat soup ________ of a bowl.\", options: [\"out\", \"with\", \"in\", \"on\"], correctAnswer: \"out\" },\n { question: \"We need to deal ________ the climate crisis.\", options: [\"on\", \"out\", \"in\", \"with\"], correctAnswer: \"with\" }\n ];\n\n \/\/ Data for the Arabic quiz (Arabic and English combined text)\n const arabicQuizQuestions = [\n \/\/ Q1: environmental\n { \n question: \"1. We all know that there are many social and **...** problems around the world. (\u062c\u0645\u064a\u0639\u0627 \u0646\u0639\u0644\u0645 \u0623\u0646 \u0647\u0646\u0627\u0643 \u0627\u0644\u0639\u062f\u064a\u062f \u0645\u0646 \u0627\u0644\u0645\u0634\u0627\u0643\u0644 \u0627\u0644\u0627\u062c\u062a\u0645\u0627\u0639\u064a\u0629 \u0648... \u062d\u0648\u0644 \u0627\u0644\u0639\u0627\u0644\u0645.)\", \n options: [\"broken - \u0645\u0643\u0633\u0648\u0631\u0629\", \"environmental - \u0628\u064a\u0626\u064a\u0629\", \"natural - \u0637\u0628\u064a\u0639\u064a\u0629\", \"provide - \u064a\u0648\u0641\u0631\"], \n correctAnswer: \"environmental - \u0628\u064a\u0626\u064a\u0629\" \n },\n \/\/ Q2: provide\n { \n question: \"2. It also helps to **...** water filters and install new toilets. (\u0643\u0645\u0627 \u064a\u0633\u0627\u0639\u062f \u0641\u064a ... \u0641\u0644\u0627\u062a\u0631 \u0627\u0644\u0645\u064a\u0627\u0647 \u0648\u062a\u0631\u0643\u064a\u0628 \u062d\u0645\u0627\u0645\u0627\u062a \u062c\u062f\u064a\u062f\u0629.)\", \n options: [\"Contaminate - \u062a\u0644\u0648\u062b\", \"provide - \u064a\u0648\u0641\u0631\", \"natural - \u0637\u0628\u064a\u0639\u064a\", \"broken - \u0643\u0633\u0631\"], \n correctAnswer: \"provide - \u064a\u0648\u0641\u0631\" \n },\n \/\/ Q3: broken\n { \n question: \"3. The charity also helps to repair **...** pipes. (\u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0623\u064a\u0636\u0627 \u062a\u0633\u0627\u0639\u062f \u0641\u064a \u0625\u0635\u0644\u0627\u062d \u0627\u0644\u0623\u0646\u0627\u0628\u064a\u0628 ...)\", \n options: [\"broken - \u0627\u0644\u0645\u0643\u0633\u0648\u0631\u0629\", \"provide - \u064a\u0648\u0641\u0631\", \"Contaminate - \u0627\u0644\u0645\u0644\u0648\u062b\u0629\", \"natural - \u0627\u0644\u0637\u0628\u064a\u0639\u064a\u0629\"], \n correctAnswer: \"broken - \u0627\u0644\u0645\u0643\u0633\u0648\u0631\u0629\" \n },\n \/\/ Q4: Contaminate\n { \n question: \"4. Dirty water often **...** fresh water supplies. (\u0627\u0644\u0645\u064a\u0627\u0647 \u0627\u0644\u0648\u0633\u062e\u0629 \u063a\u0627\u0644\u0628\u0627 \u0645\u0627 ... \u0625\u0645\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u0645\u064a\u0627\u0647 \u0627\u0644\u0646\u0638\u064a\u0641\u0629.)\", \n options: [\"natural - \u0637\u0628\u064a\u0639\u064a\", \"provide - \u062a\u0648\u0641\u0631\", \"Contaminate - \u062a\u0644\u0648\u062b\", \"broken - \u062a\u0643\u0633\u0631\"], \n correctAnswer: \"Contaminate - \u062a\u0644\u0648\u062b\" \n },\n \/\/ Q5: natural\n { \n question: \"5. 90% of the world's **...** disasters are related to water. (%90 \u0645\u0646 \u0627\u0644\u0643\u0648\u0627\u0631\u062b ... \u0641\u064a \u0627\u0644\u0639\u0627\u0644\u0645 \u0645\u0631\u062a\u0628\u0637\u0629 \u0628\u0627\u0644\u0645\u064a\u0627\u0647.)\", \n options: [\"natural - \u0627\u0644\u0637\u0628\u064a\u0639\u064a\u0629\", \"install - \u062a\u0631\u0643\u064a\u0628\", \"broken - \u0627\u0644\u0645\u0643\u0633\u0648\u0631\u0629\", \"environmental - \u0627\u0644\u0628\u064a\u0626\u064a\u0629\"], \n correctAnswer: \"natural - \u0627\u0644\u0637\u0628\u064a\u0639\u064a\u0629\" \n },\n \/\/ Q6: install\n { \n question: \"6. It also helps to provide water filters and **...** new toilets. (\u0643\u0645\u0627 \u064a\u0633\u0627\u0639\u062f \u0641\u064a \u062a\u0648\u0641\u064a\u0631 \u0641\u0644\u0627\u062a\u0631 \u0627\u0644\u0645\u064a\u0627\u0647 ... \u062d\u0645\u0627\u0645\u0627\u062a \u062c\u062f\u064a\u062f\u0629.)\", \n options: [\"broken - \u0643\u0633\u0631\", \"install - \u062a\u0631\u0643\u064a\u0628\", \"Contaminate - \u062a\u0644\u0648\u062b\", \"natural - \u0637\u0628\u064a\u0639\u064a\"], \n correctAnswer: \"install - \u062a\u0631\u0643\u064a\u0628\" \n },\n \/\/ Q7: proven\n { \n question: \"7. His parents said he wasn't working hard enough and his terrible exam results have **...** them right. (\u0648\u0627\u0644\u062f\u0627\u0647 \u0642\u0627\u0644\u0627 \u0625\u0646\u0647 \u0644\u0645 \u064a\u0639\u0645\u0644 \u0628\u062c\u062f \u0643\u0627\u0641 \u0648\u0646\u062a\u064a\u062c\u0629 \u0627\u0645\u062a\u062d\u0627\u0646\u0647 \u0627\u0644\u0633\u064a\u0626\u0629 \u0642\u062f ... \u0631\u0623\u064a\u0647\u0645.)\", \n options: [\"share - \u0634\u0627\u0631\u0643\u062a\", \"proven - \u0623\u062b\u0628\u062a\u062a\", \"bright - \u0630\u0643\u064a\u0629\", \"angle - \u0632\u0627\u0648\u064a\u0629\"], \n correctAnswer: \"proven - \u0623\u062b\u0628\u062a\u062a\" \n },\n \/\/ Q8: bright\n { \n question: \"8. Does anyone have any **...** ideas for Maha's surprise family party? (\u0647\u0644 \u0623\u064a \u0634\u062e\u0635 \u064a\u0645\u0644\u0643 \u0623\u064a \u0623\u0641\u0643\u0627\u0631 ... \u0644\u0644\u062d\u0641\u0644\u0629 \u0645\u0641\u0627\u062c\u0623\u0629 \u0644\u0645\u0627\u0647\u0627 \u0627\u0644\u0639\u0627\u0626\u0644\u064a\u0629\u061f)\", \n options: [\"bright - \u0630\u0643\u064a\u0629\", \"angle - \u0632\u0627\u0648\u064a\u0629\", \"proven - \u0645\u062b\u0628\u062a\u0629\", \"share - \u064a\u0634\u0627\u0631\u0643\"], \n correctAnswer: \"bright - \u0630\u0643\u064a\u0629\" \n },\n \/\/ Q9: angle\n { \n question: \"9. To find a solution we need to look at the problem from a different **...**. (\u0644\u0625\u064a\u062c\u0627\u062f \u062d\u0644\u060c \u0646\u062d\u062a\u0627\u062c \u0625\u0644\u0649 \u0627\u0644\u0646\u0638\u0631 \u0625\u0644\u0649 \u0627\u0644\u0645\u0634\u0643\u0644\u0629 \u0645\u0646 \u0632\u0627\u0648\u064a\u0629 \u0645\u062e\u062a\u0644\u0641\u0629)\", \n options: [\"angle - \u0632\u0627\u0648\u064a\u0629\", \"proven - \u0645\u062b\u0628\u062a\u0629\", \"bright - \u0630\u0643\u064a\u0629\", \"share - \u062a\u0634\u0627\u0631\u0643\"], \n correctAnswer: \"angle - \u0632\u0627\u0648\u064a\u0629\" \n },\n \/\/ Q10: share\n { \n question: \"10. Please **...** your thoughts on what you think went wrong. (\u064a\u0631\u062c\u0649 ... \u0623\u0641\u0643\u0627\u0631\u0643 \u062d\u0648\u0644 \u0645\u0627 \u062a\u0639\u062a\u0642\u062f \u0623\u0646\u0647 \u062d\u062f\u062b \u0628\u0634\u0643\u0644 \u062e\u0627\u0637\u0626.)\", \n options: [\"proven - \u0627\u062b\u0628\u0627\u062a\", \"share - \u0645\u0634\u0627\u0631\u0643\u0629\", \"angle - \u0632\u0627\u0648\u064a\u0629\", \"bright - \u0631\u0627\u0626\u0639\u0629\"], \n correctAnswer: \"share - \u0645\u0634\u0627\u0631\u0643\u0629\" \n },\n \/\/ Q11: poverty\n { \n question: \"11. It helps to move people out of **...**. (\u064a\u0633\u0627\u0639\u062f \u0639\u0644\u0649 \u0625\u062e\u0631\u0627\u062c \u0627\u0644\u0646\u0627\u0633 \u0645\u0646 ...)\", \n options: [\"environment - \u0627\u0644\u0628\u064a\u0626\u0629\", \"facilities - \u0627\u0644\u0645\u0631\u0627\u0641\u0642\", \"poverty - \u0627\u0644\u0641\u0642\u0631\", \"opportunities - \u0627\u0644\u0641\u0631\u0635\"], \n correctAnswer: \"poverty - \u0627\u0644\u0641\u0642\u0631\" \n },\n \/\/ Q12: opportunities\n { \n question: \"12. It aims to give better work to **...** women and young people. (\u064a\u0647\u062f\u0641 \u0625\u0644\u0649 \u062a\u0648\u0641\u064a\u0631 \u0639\u0645\u0644 \u0623\u0641\u0636\u0644 \u0644\u0644\u0646\u0633\u0627\u0621 \u0648\u0627\u0644\u0634\u0628\u0627\u0628.)\", \n options: [\"opportunities - \u0641\u0631\u0635\", \"homes - \u0645\u0646\u0627\u0632\u0644\", \"facilities - \u0645\u0631\u0627\u0641\u0642\", \"poverty - \u0641\u0642\u0631\"], \n correctAnswer: \"opportunities - \u0641\u0631\u0635\" \n },\n \/\/ Q13: facilities\n { \n question: \"13. It helps to improve health **...**. (\u064a\u0633\u0627\u0639\u062f \u0639\u0644\u0649 \u062a\u062d\u0633\u064a\u0646 ... \u0627\u0644\u0635\u062d\u064a\u0629.)\", \n options: [\"homes - \u0627\u0644\u0645\u0646\u0627\u0632\u0644\", \"poverty - \u0627\u0644\u0641\u0642\u0631\", \"opportunities - \u0627\u0644\u0641\u0631\u0635\", \"facilities - \u0627\u0644\u0645\u0631\u0627\u0641\u0642\"], \n correctAnswer: \"facilities - \u0627\u0644\u0645\u0631\u0627\u0641\u0642\" \n },\n \/\/ Q14: homes\n { \n question: \"14. It helps refugees to find **...** as well as with education, finance, and work. (\u064a\u0633\u0627\u0639\u062f \u0627\u0644\u0644\u0627\u062c\u0626\u064a\u0646 \u0641\u064a \u0627\u0644\u0639\u062b\u0648\u0631 \u0639\u0644\u0649 ... \u0628\u0627\u0644\u0625\u0636\u0627\u0641\u0629 \u0625\u0644\u0649 \u0627\u0644\u062a\u0639\u0644\u064a\u0645 \u0648\u0627\u0644\u062a\u0645\u0648\u064a\u0644 \u0648\u0627\u0644\u0639\u0645\u0644.)\", \n options: [\"homes - \u0645\u0646\u0627\u0632\u0644\", \"environment - \u0628\u064a\u0626\u0629\", \"facilities - \u0645\u0631\u0627\u0641\u0642\", \"opportunities - \u0641\u0631\u0635\"], \n correctAnswer: \"homes - \u0645\u0646\u0627\u0632\u0644\" \n },\n \/\/ Q15: environment\n { \n question: \"15. It promotes sustainable development that does not harm the **...**. (\u064a\u0639\u0632\u0632 \u0627\u0644\u062a\u0646\u0645\u064a\u0629 \u0627\u0644\u0645\u0633\u062a\u062f\u0627\u0645\u0629 \u0627\u0644\u062a\u064a \u0644\u0627 \u062a\u0636\u0631 ...)\", \n options: [\"environment - \u0627\u0644\u0628\u064a\u0626\u0629\", \"poverty - \u0627\u0644\u0641\u0642\u0631\", \"facilities - \u0627\u0644\u0645\u0631\u0627\u0641\u0642\", \"homes - \u0627\u0644\u0645\u0646\u0627\u0632\u0644\"], \n correctAnswer: \"environment - \u0627\u0644\u0628\u064a\u0626\u0629\" \n },\n \/\/ Q16: on\n { \n question: \"16. Monkeys live **...** fruit and nuts. (\u0627\u0644\u0642\u0631\u0648\u062f \u062a\u0639\u064a\u0634 ... \u0627\u0644\u0641\u0648\u0627\u0643\u0647 \u0648\u0627\u0644\u0645\u0643\u0633\u0631\u0627\u062a.)\", \n options: [\"out - \u062e\u0631\u062c\", \"with - \u0645\u0639\", \"in - \u0641\u064a\", \"on - \u0639\u0644\u0649\"], \n correctAnswer: \"on - \u0639\u0644\u0649\" \n },\n \/\/ Q17: in\n { \n question: \"17. Monkeys live **...** trees. (\u0627\u0644\u0642\u0631\u0648\u062f \u062a\u0639\u064a\u0634 ... \u0627\u0644\u0623\u0634\u062c\u0627\u0631.)\", \n options: [\"on - \u0639\u0644\u0649\", \"with - \u0645\u0639\", \"in - \u0641\u064a\", \"out - \u062e\u0631\u062c\"], \n correctAnswer: \"in - \u0641\u064a\" \n },\n \/\/ Q18: out\n { \n question: \"18. We eat soup **...** of a bowl. (\u0646\u0623\u0643\u0644 \u0627\u0644\u062d\u0633\u0627\u0621 ... \u0645\u0646 \u0648\u0639\u0627\u0621.)\", \n options: [\"out - \u062e\u0627\u0631\u062c\", \"with - \u0645\u0639\", \"in - \u0641\u064a\", \"on - \u0639\u0644\u0649\"], \n correctAnswer: \"out - \u062e\u0627\u0631\u062c\" \n },\n \/\/ Q19: with\n { \n question: \"19. We need to deal **...** the climate crisis. (\u0646\u062d\u062a\u0627\u062c \u0625\u0644\u0649 \u0627\u0644\u062a\u0639\u0627\u0645\u0644 ... \u0623\u0632\u0645\u0629 \u0627\u0644\u0645\u0646\u0627\u062e.)\", \n options: [\"on - \u0639\u0644\u0649\", \"out - \u062e\u0627\u0631\u062c\", \"in - \u0641\u064a\", \"with - \u0645\u0639\"], \n correctAnswer: \"with - \u0645\u0639\" \n }\n ];\n\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 \/\/ Reusable function to create and manage a quiz instance\n function createQuizApp(prefix, originalQuestions) {\n let questions = [];\n let currentQuestionIndex = 0;\n const totalQuestions = originalQuestions.length;\n\n \/\/ Element references scoped by prefix\n const startScreen = document.getElementById(`${prefix}-start-screen`);\n const quizScreen = document.getElementById(`${prefix}-quiz-screen`);\n const resultsScreen = document.getElementById(`${prefix}-results-screen`);\n const startBtn = document.getElementById(`${prefix}-start-btn`);\n const questionNumberEl = document.getElementById(`${prefix}-question-number`);\n const questionTextEl = document.getElementById(`${prefix}-question-text`);\n const optionsContainer = document.getElementById(`${prefix}-options-container`);\n const feedbackEl = document.getElementById(`${prefix}-feedback`);\n const prevBtn = document.getElementById(`${prefix}-prev-btn`);\n const nextBtn = document.getElementById(`${prefix}-next-btn`);\n const progressBar = document.getElementById(`${prefix}-progress-bar`);\n const progressTextEl = document.getElementById(`${prefix}-progress-text`);\n const scoreEl = document.getElementById(`${prefix}-score`);\n const reviewContainer = document.getElementById(`${prefix}-review-container`);\n const restartBtn = document.getElementById(`${prefix}-restart-btn`);\n\n startBtn.addEventListener('click', startQuiz);\n prevBtn.addEventListener('click', prevQuestion);\n nextBtn.addEventListener('click', nextQuestion);\n restartBtn.addEventListener('click', restartQuiz);\n\n function startQuiz() {\n questions = JSON.parse(JSON.stringify(originalQuestions));\n questions.forEach(q => {\n q.userAnswer = null;\n q.isCorrect = null;\n shuffleArray(q.options);\n });\n shuffleArray(questions);\n\n startScreen.style.display = 'none';\n resultsScreen.style.display = 'none';\n quizScreen.style.display = 'block';\n currentQuestionIndex = 0;\n displayQuestion();\n }\n\n function displayQuestion() {\n const question = questions[currentQuestionIndex];\n questionNumberEl.textContent = `\u0627\u0644\u0633\u0624\u0627\u0644 ${currentQuestionIndex + 1} \u0645\u0646 ${totalQuestions}`;\n questionTextEl.textContent = question.question;\n\n optionsContainer.innerHTML = '';\n feedbackEl.textContent = '';\n feedbackEl.className = 'feedback';\n\n const currentOptions = question.options;\n currentOptions.forEach(option => {\n const button = document.createElement('button');\n button.textContent = option;\n button.className = 'option-btn';\n button.onclick = () => selectAnswer(option, button);\n optionsContainer.appendChild(button);\n });\n\n updateNavigation();\n updateProgressBar();\n highlightPreviousAnswer();\n }\n\n function selectAnswer(selectedOption, btn) {\n const question = questions[currentQuestionIndex];\n\n if (question.userAnswer !== null) return;\n\n question.userAnswer = selectedOption;\n const isCorrect = selectedOption === question.correctAnswer;\n question.isCorrect = isCorrect;\n\n if (isCorrect) {\n feedbackEl.textContent = '\u0625\u062c\u0627\u0628\u0629 \u0635\u062d\u064a\u062d\u0629!';\n feedbackEl.classList.add('correct');\n } else {\n feedbackEl.textContent = `\u0625\u062c\u0627\u0628\u0629 \u062e\u0627\u0637\u0626\u0629. \u0627\u0644\u0635\u062d\u064a\u062d\u0629 \u0647\u064a: ${question.correctAnswer}`;\n feedbackEl.classList.add('incorrect');\n }\n\n Array.from(optionsContainer.children).forEach(button => {\n button.disabled = true;\n if (button.textContent === question.correctAnswer) {\n button.classList.add('correct');\n } else if (button.textContent === selectedOption) {\n button.classList.add('incorrect');\n }\n });\n\n nextBtn.focus();\n }\n\n function highlightPreviousAnswer() {\n const question = questions[currentQuestionIndex];\n if (question.userAnswer === null) {\n feedbackEl.textContent = '';\n feedbackEl.className = 'feedback';\n return;\n }\n\n Array.from(optionsContainer.children).forEach(button => {\n const optionText = button.textContent;\n button.disabled = true;\n if (optionText === question.correctAnswer) {\n button.classList.add('correct');\n } else if (optionText === question.userAnswer) {\n button.classList.add('incorrect');\n }\n });\n \n if (question.isCorrect) {\n feedbackEl.textContent = '\u0625\u062c\u0627\u0628\u0629 \u0635\u062d\u064a\u062d\u0629!';\n feedbackEl.classList.add('correct');\n } else if (question.userAnswer) {\n feedbackEl.textContent = `\u0625\u062c\u0627\u0628\u0629 \u062e\u0627\u0637\u0626\u0629. \u0627\u0644\u0635\u062d\u064a\u062d\u0629 \u0647\u064a: ${question.correctAnswer}`;\n feedbackEl.classList.add('incorrect');\n }\n }\n\n function updateNavigation() {\n prevBtn.disabled = currentQuestionIndex === 0;\n if (currentQuestionIndex === totalQuestions - 1) {\n nextBtn.textContent = '\u0625\u0646\u0647\u0627\u0621 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631';\n } else {\n nextBtn.textContent = '\u0627\u0644\u062a\u0627\u0644\u064a';\n }\n }\n\n function updateProgressBar() {\n const progressPercentage = ((currentQuestionIndex + 1) \/ totalQuestions) * 100;\n progressBar.style.width = `${progressPercentage}%`;\n progressTextEl.textContent = `${currentQuestionIndex + 1} \/ ${totalQuestions}`;\n }\n\n function nextQuestion() {\n if (currentQuestionIndex < totalQuestions - 1) {\n currentQuestionIndex++;\n displayQuestion();\n } else if (currentQuestionIndex === totalQuestions - 1) {\n showResults();\n }\n }\n\n function prevQuestion() {\n if (currentQuestionIndex > 0) {\n currentQuestionIndex--;\n displayQuestion();\n }\n }\n\n function showResults() {\n quizScreen.style.display = 'none';\n resultsScreen.style.display = 'block';\n\n const score = questions.filter(q => q.isCorrect).length;\n const scorePercentage = ((score \/ totalQuestions) * 100).toFixed(2);\n scoreEl.innerHTML = `\u0646\u062a\u064a\u062c\u062a\u0643: ${score} \u0645\u0646 ${totalQuestions} (${scorePercentage}%)`;\n\n reviewContainer.innerHTML = '';\n questions.forEach((question, index) => {\n const reviewItem = document.createElement('div');\n reviewItem.classList.add('review-item');\n\n const questionP = document.createElement('p');\n questionP.className = 'review-question';\n questionP.textContent = `${index + 1}. ${question.question}`;\n\n const userAnswerP = document.createElement('p');\n userAnswerP.className = 'review-user-answer';\n userAnswerP.textContent = `\u0625\u062c\u0627\u0628\u062a\u0643: ${question.userAnswer || '\u0644\u0645 \u062a\u062c\u0628'}`;\n\n if (question.userAnswer) {\n userAnswerP.classList.add(question.isCorrect ? 'correct' : 'incorrect');\n } else {\n userAnswerP.classList.add('incorrect');\n }\n\n const correctAnswerP = document.createElement('p');\n correctAnswerP.className = 'review-correct-answer';\n correctAnswerP.innerHTML = `\u0627\u0644\u0625\u062c\u0627\u0628\u0629 \u0627\u0644\u0635\u062d\u064a\u062d\u0629: <span>${question.correctAnswer}<\/span>`;\n\n reviewItem.appendChild(questionP);\n reviewItem.appendChild(userAnswerP);\n if (!question.isCorrect) {\n reviewItem.appendChild(correctAnswerP);\n }\n reviewContainer.appendChild(reviewItem);\n });\n }\n\n function restartQuiz() {\n resultsScreen.style.display = 'none';\n startScreen.style.display = 'flex';\n }\n }\n\n \/\/ Initialize both quizzes\n createQuizApp('english', englishQuizQuestions);\n createQuizApp('arabic', arabicQuizQuestions);\n\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n\n<!DOCTYPE html>\n<html lang=\"ar\" dir=\"rtl\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u0627\u0645\u062a\u062d\u0627\u0646\u0627\u062a \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 – \u0623\u0648\u0644 \u062b\u0627\u0646\u0648\u064a 2008<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n \/* \u062d\u0630\u0641 \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0628\u0631\u062a\u0642\u0627\u0644\u064a\u0629 \u0627\u0644\u0645\u062a\u062f\u0631\u062c\u0629 *\/\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n overflow: auto;\n }\n .container {\n text-align: center;\n background: rgba(255, 255, 255, 0.95);\n padding: 40px;\n border-radius: 20px;\n box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);\n margin: 20px;\n width: 90%;\n max-width: 600px;\n }\n h1 {\n color: #ff6200;\n font-size: 1.8em;\n margin-bottom: 30px;\n text-shadow: 2px 2px 5px rgba(255, 98, 0, 0.2);\n line-height: 1.5;\n }\n .button-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr); \/* \u0639\u0645\u0648\u062f\u064a\u0646 \u062f\u0627\u0626\u0645\u064b\u0627 *\/\n gap: 20px;\n max-width: 100%;\n }\n .cute-button {\n background: #ff6200;\n color: white;\n padding: 12px 25px;\n border: none;\n border-radius: 15px;\n font-size: 1.1em;\n cursor: pointer;\n position: relative;\n transition: all 0.3s ease;\n box-shadow: 0 5px 10px rgba(255, 98, 0, 0.4), \n inset 0 3px 8px rgba(255, 255, 255, 0.3);\n transform: perspective(500px) rotateX(5deg);\n }\n .cute-button:hover {\n transform: perspective(500px) rotateX(0deg) translateY(-3px);\n box-shadow: 0 8px 15px rgba(255, 98, 0, 0.6), \n inset 0 3px 8px rgba(255, 255, 255, 0.5);\n }\n .cute-button:active {\n transform: perspective(500px) rotateX(0deg) scale(0.97);\n box-shadow: 0 3px 8px rgba(255, 98, 0, 0.3), \n inset 0 2px 5px rgba(255, 255, 255, 0.2);\n }\n .cute-button::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n background: rgba(255, 255, 255, 0.3);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n transition: width 0.4s ease, height 0.4s ease;\n }\n .cute-button:hover::before {\n width: 150px;\n height: 150px;\n }\n @keyframes bounceIn {\n 0% { opacity: 0; transform: perspective(500px) rotateX(15deg) scale(0.9); }\n 60% { opacity: 1; transform: perspective(500px) rotateX(-3deg) scale(1.03); }\n 100% { transform: perspective(500px) rotateX(5deg) scale(1); }\n }\n .cute-button {\n animation: bounceIn 0.5s ease forwards;\n }\n\n \/* \u0627\u0644\u062a\u0648\u0627\u0641\u0642 \u0645\u0639 \u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0647\u0648\u0627\u062a\u0641 \u0645\u0639 \u0627\u0644\u0625\u0628\u0642\u0627\u0621 \u0639\u0644\u0649 \u0639\u0645\u0648\u062f\u064a\u0646 *\/\n @media (max-width: 600px) {\n .container {\n padding: 20px;\n }\n h1 {\n font-size: 1.4em;\n line-height: 1.6;\n }\n .button-grid {\n grid-template-columns: repeat(2, 1fr); \/* \u0627\u0644\u0625\u0628\u0642\u0627\u0621 \u0639\u0644\u0649 \u0639\u0645\u0648\u062f\u064a\u0646 *\/\n gap: 10px;\n }\n .cute-button {\n padding: 8px 15px;\n font-size: 0.9em;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h1>\u0627\u0645\u062a\u062d\u0627\u0646\u0627\u062a \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0644\u062c\u0645\u064a\u0639 \u0648\u062d\u062f\u0627\u062a \u0643\u062a\u0627\u0628 \u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0644\u0644\u0635\u0641 \u0627\u0644\u0623\u0648\u0644 \u062b\u0627\u0646\u0648\u064a \u0627\u0644\u0623\u0643\u0627\u062f\u064a\u0645\u064a \u062c\u064a\u0644 2008<\/h1>\n <div class=\"button-grid\">\n <a href=\"https:\/\/tawjihy.com\/?p=4781\"><button class=\"cute-button\">\u0627\u0645\u062a\u062d\u0627\u0646 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u0623\u0648\u0644\u0649<\/button><\/a>\n <a href=\"https:\/\/tawjihy.com\/?p=4790\"><button class=\"cute-button\">\u0627\u0645\u062a\u062d\u0627\u0646 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629<\/button><\/a>\n <a href=\"https:\/\/tawjihy.com\/?p=4792\"><button class=\"cute-button\">\u0627\u0645\u062a\u062d\u0627\u0646 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u062b\u0627\u0644\u062b\u0629<\/button><\/a>\n <a href=\"https:\/\/tawjihy.com\/?p=4797\"><button class=\"cute-button\">\u0627\u0645\u062a\u062d\u0627\u0646 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u0631\u0627\u0628\u0639\u0629<\/button><\/a>\n <a href=\"https:\/\/tawjihy.com\/?p=4806\"><button class=\"cute-button\">\u0627\u0645\u062a\u062d\u0627\u0646 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u0633\u0627\u062f\u0633\u0629<\/button><\/a>\n <a href=\"https:\/\/tawjihy.com\/?p=4811\"><button class=\"cute-button\">\u0627\u0645\u062a\u062d\u0627\u0646 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u0633\u0627\u0628\u0639\u0629<\/button><\/a>\n <a href=\"https:\/\/tawjihy.com\/?p=4813\"><button class=\"cute-button\">\u0627\u0645\u062a\u062d\u0627\u0646 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u062b\u0627\u0645\u0646\u0629<\/button><\/a>\n <a href=\"https:\/\/tawjihy.com\/?p=4816\"><button class=\"cute-button\">\u0627\u0645\u062a\u062d\u0627\u0646 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u062a\u0627\u0633\u0639\u0629<\/button><\/a>\n <a href=\"https:\/\/tawjihy.com\/?p=4826\"><button class=\"cute-button\">\u0627\u0645\u062a\u062d\u0627\u0646 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u0639\u0627\u0634\u0631\u0629<\/button><\/a>\n <\/div>\n <\/div>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0627\u0645\u062a\u062d\u0627\u0646 \u0645\u0639\u0627\u0646\u064a \u0645\u062d\u0648\u0633\u0628 \u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u0633\u0627\u0628\u0639\u0629 \u0623\u0648\u0644 \u062b\u0627\u0646\u0648\u064a \u0623\u0643\u0627\u062f\u064a\u0645\u064a 2008 \u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0645\u0639\u0644\u0645 \u0627\u064a\u0645\u0646 \u0627\u0644\u062e\u0636\u064a\u0631\u0627\u062a \u0627\u062e\u062a\u0628\u0627\u0631\u0627\u062a \u0645\u0639\u0627\u0646\u064a \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u0633\u0627\u0628\u0639\u0629 \u0627\u062e\u062a\u0628\u0627\u0631 […]<\/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-4811","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\/4811","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=4811"}],"version-history":[{"count":5,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4811\/revisions"}],"predecessor-version":[{"id":5045,"href":"https:\/\/tawjihy.com\/index.php?rest_route=\/wp\/v2\/posts\/4811\/revisions\/5045"}],"wp:attachment":[{"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4811"},{"taxonomy":"reaction","embeddable":true,"href":"https:\/\/tawjihy.com\/index.php?rest_route=%2Fwp%2Fv2%2Freaction&post=4811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}