Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>اختبار الفلسفة: النظرية والتجربة</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap'); | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .question-card { | |
| transition: all 0.3s ease; | |
| } | |
| .question-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| .option:hover { | |
| background-color: #e2e8f0; | |
| } | |
| .selected { | |
| background-color: #2563eb; | |
| color: white; | |
| } | |
| .correct { | |
| background-color: #10b981; | |
| color: white; | |
| } | |
| .incorrect { | |
| background-color: #ef4444; | |
| color: white; | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="container mx-auto px-4 py-8 max-w-4xl"> | |
| <!-- Header --> | |
| <header class="text-center mb-8"> | |
| <h1 class="text-3xl font-bold text-blue-800 mb-2">اختبار الفلسفة: النظرية والتجربة</h1> | |
| <p class="text-gray-600">اختبار شامل لمحتوى درس النظرية والتجربة في الفلسفة والعلم</p> | |
| <div class="w-full bg-gray-200 rounded-full h-4 mt-4"> | |
| <div id="progress-bar" class="progress-bar bg-blue-600 h-4 rounded-full" style="width: 0%"></div> | |
| </div> | |
| <div class="flex justify-between mt-2 text-sm text-gray-600"> | |
| <span id="progress-text">0/20</span> | |
| <span id="timer" class="font-bold">20:00</span> | |
| </div> | |
| </header> | |
| <!-- Quiz Container --> | |
| <div id="quiz-container" class="space-y-6"> | |
| <!-- Questions will be inserted here by JavaScript --> | |
| </div> | |
| <!-- Navigation Buttons --> | |
| <div class="flex justify-between mt-8"> | |
| <button id="prev-btn" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-lg hidden"> | |
| <i class="fas fa-arrow-right ml-2"></i> السابق | |
| </button> | |
| <button id="next-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg"> | |
| التالي <i class="fas fa-arrow-left mr-2"></i> | |
| </button> | |
| <button id="submit-btn" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg hidden"> | |
| إنهاء الاختبار <i class="fas fa-check mr-2"></i> | |
| </button> | |
| </div> | |
| <!-- Results Section --> | |
| <div id="results-section" class="hidden mt-8 p-6 bg-white rounded-lg shadow-lg"> | |
| <h2 class="text-2xl font-bold text-center text-blue-800 mb-4">نتائج الاختبار</h2> | |
| <div class="flex justify-center mb-6"> | |
| <div class="w-32 h-32 rounded-full bg-blue-100 flex items-center justify-center border-4 border-blue-500"> | |
| <span id="score" class="text-4xl font-bold text-blue-800">0</span> | |
| <span class="text-xl font-bold text-blue-800">/20</span> | |
| </div> | |
| </div> | |
| <div class="text-center mb-6"> | |
| <p id="result-message" class="text-lg"></p> | |
| <p id="time-taken" class="text-gray-600 mt-2"></p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-green-50 p-4 rounded-lg"> | |
| <h3 class="font-bold text-green-800 mb-2">الإجابات الصحيحة</h3> | |
| <p id="correct-answers" class="text-green-600">0</p> | |
| </div> | |
| <div class="bg-red-50 p-4 rounded-lg"> | |
| <h3 class="font-bold text-red-800 mb-2">الإجابات الخاطئة</h3> | |
| <p id="incorrect-answers" class="text-red-600">0</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="font-bold text-gray-800 mb-2">ملخص الأداء</h3> | |
| <div id="performance-summary" class="space-y-3"> | |
| <!-- Performance summary will be inserted here --> | |
| </div> | |
| </div> | |
| <button id="restart-btn" class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg"> | |
| إعادة الاختبار <i class="fas fa-redo mr-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Quiz data | |
| const quizData = [ | |
| { | |
| question: "ما المقصود بالنظرية في السياق العلمي؟", | |
| options: [ | |
| "آراء شخصية أو أحكام تجاه أحداث معينة", | |
| "الخبرة والحنكة في ممارسة عملية محددة", | |
| "الأنساق الفكرية المنظمة والمنهجية التي تفسر الظواهر العلمية", | |
| "المهارة في إجراء التجارب المخبرية" | |
| ], | |
| correctAnswer: 2, | |
| explanation: "في السياق العلمي، النظرية هي النظم والأنساق الفكرية المنظمة والمنهجية والمنطقية التي تتألف منها القوانين والمبادئ العامة لتفسير ظاهرة أو واقعة علمية." | |
| }, | |
| { | |
| question: "ما الفرق بين التجريب والتجربة حسب المحتوى؟", | |
| options: [ | |
| "التجريب هو الملاحظة العادية بينما التجربة تستخدم الأدوات", | |
| "التجريب عملية أشمل تشمل التجربة كلحظة ضمنه", | |
| "التجربة هي فرضية بينما التجريب هو قانون علمي", | |
| "لا فرق بينهما في السياق العلمي" | |
| ], | |
| correctAnswer: 1, | |
| explanation: "التجريب هو عملية أشمل تشمل التجربة كلحظة ضمنه، حيث أن التجريب هو عملية التدخل في الظاهرة وإعادة صناعتها، بينما التجربة هي لحظة ضمن هذا الإجراء." | |
| }, | |
| { | |
| question: "ما هي الخطوة الأولى في المنهج العلمي حسب كلود برنار؟", | |
| options: [ | |
| "صياغة الفرضية", | |
| "إجراء التجربة", | |
| "الملاحظة", | |
| "صياغة القانون العلمي" | |
| ], | |
| correctAnswer: 2, | |
| explanation: "يرى كلود برنار أن الخطوة الأولى هي الملاحظة التي تمكن العالم من متابعة الظاهرة والإلمام بها، سواء بالعين المجردة أو باستخدام الأدوات." | |
| }, | |
| { | |
| question: "ما الذي أضافه روني طوم إلى مفهوم التجريب؟", | |
| options: [ | |
| "أهمية الملاحظة الدقيقة", | |
| "دور العقل والخيال العلمي في التجربة الذهنية", | |
| "ضرورة استخدام الأدوات المعقدة", | |
| "إهمال الجانب النظري" | |
| ], | |
| correctAnswer: 1, | |
| explanation: "أكد روني طوم على دور العقل والخيال العلمي في التجربة الذهنية، حيث أن دراسة الظواهر الميكروسكوبية تتطلب إبداعاً تجريبياً ذهنياً." | |
| }, | |
| { | |
| question: "ما هي المشكلة الأساسية في التجريب الكلاسيكي حسب المحتوى؟", | |
| options: [ | |
| "عدم القدرة على التعامل مع الظواهر المتناهية الصغر", | |
| "اعتماده الكلي على الخيال العلمي", | |
| "إهماله للملاحظة العلمية", | |
| "عدم وجود مشاكل في التجريب الكلاسيكي" | |
| ], | |
| correctAnswer: 0, | |
| explanation: "التجريب الكلاسيكي يعاني من عجز في التعاطي مع الظواهر المتناهية الصغر، مما يحد من قدرته على كشف الحقيقة العلمية في هذه المجالات." | |
| }, | |
| { | |
| question: "ما موقف ألبرت أينشتاين من مستقبل الفيزياء المعاصرة؟", | |
| options: [ | |
| "يجب أن تعتمد على التجربة فقط", | |
| "يجب أن تكون عقلانية رياضية مبدعة", | |
| "يجب أن تدمج بين العقل والتجربة بالتساوي", | |
| "يجب أن تبتعد عن التجريد الرياضي" | |
| ], | |
| correctAnswer: 1, | |
| explanation: "يرى أينشتاين أن مستقبل الفيزياء المعاصرة يقع في قلب العقل الرياضي المبدع الذي يمكننا من إبداع المفاهيم واكتشاف القوانين." | |
| }, | |
| { | |
| question: "ما نقد غاستون باشلار للعقلانية الرياضية؟", | |
| options: [ | |
| "أنها تعتمد كثيراً على التجربة", | |
| "أنها اشتغال بالعقل في فراغ التطبيق الواقعي", | |
| "أنها تهمل الجانب النظري", | |
| "أنها لا تعتمد على الرياضيات" | |
| ], | |
| correctAnswer: 1, | |
| explanation: "يرى باشلار أن العقلانية الرياضية المبدعة هي عقلانية فارغة لأنها اشتغال بالعقل في فراغ التطبيق الواقعي، ويؤكد على ضرورة الحوار بين العقل والتجربة." | |
| }, | |
| { | |
| question: "ما معيار علمية النظريات العلمية عند كارل بوبر؟", | |
| options: [ | |
| "قابليتها للتأكيد والتثبيت", | |
| "قابليتها للتكذيب والتفنيد", | |
| "ثبات نتائجها بشكل مطلق", | |
| "استحالة نقضها" | |
| ], | |
| correctAnswer: 1, | |
| explanation: "يرى بوبر أن معيار علمية النظرية هو قابليتها للتكذيب والتفنيد، حيث أن سلامة التصور النظري ليست مضمونة ويجب أن تكون قابلة للتصحيح." | |
| }, | |
| { | |
| question: "ما الذي يقترحه بيير تويليي لضمان تماسك النظريات العلمية؟", | |
| options: [ | |
| "إخضاعها لاختبار واحد دقيق", | |
| "إبقائها في عزلتها التجريبية", | |
| "إخضاعها المستمر لفرضيات إضافية واختبارات متعددة", | |
| "تثبيتها دون تغيير" | |
| ], | |
| correctAnswer: 2, | |
| explanation: "يقترح تويليي إخضاع النظريات المستمر لفرضيات إضافية واختبارات متعددة لضمان تماسكها المنطقي وقدرتها على مواكبة التحولات العلمية." | |
| }, | |
| { | |
| question: "ما المقصود بالخيال التجريبي حسب المحتوى؟", | |
| options: [ | |
| "القدرة على تصور تجارب غير واقعية", | |
| "نقلة ثورية لتوسيع الخيال النظري للوصول إلى التجارب الذهنية", | |
| "إهمال الجانب النظري في العلم", | |
| "الاعتماد الكلي على الملاحظة" | |
| ], | |
| correctAnswer: 1, | |
| explanation: "الخيال التجريبي هو نقلة ثورية مهمتها توسيع الخيال النظري للوصول إلى التجارب الذهنية التي تدمج بين الاطلاع النظري العميق والأدوات التجريبية." | |
| }, | |
| { | |
| question: "ما هي الوظيفة الأساسية للتجربة حسب كلود برنار؟", | |
| options: [ | |
| "إثبات صحة الفرضية", | |
| "استبدال الملاحظة", | |
| "تجاهل النظريات السابقة", | |
| "إثبات خطأ جميع الفرضيات" | |
| ], | |
| correctAnswer: 0, | |
| explanation: "حسب كلود برنار، وظيفة التجربة الأساسية هي التأكد من صحة الفرضية التي تم صياغتها بناءً على الملاحظة." | |
| }, | |
| { | |
| question: "ما الذي يميز الملاحظة العلمية عن الملاحظة العادية؟", | |
| options: [ | |
| "اعتمادها الكلي على العين المجردة", | |
| "عدم استخدام أي أدوات", | |
| "كونها مجهزة بآلات وأدوات علمية في أغلب الأحيان", | |
| "عدم وجود منهجية فيها" | |
| ], | |
| correctAnswer: 2, | |
| explanation: "الملاحظة العلمية تختلف عن العادية بأنها في أغلب الأحيان مجهزة بآلات وأدوات علمية، ولا تعتمد على العين المجردة إلا في حدود ضيقة." | |
| }, | |
| { | |
| question: "ما الشرط الأساسي للفرضية العلمية؟", | |
| options: [ | |
| "أن تكون غير قابلة للتحقق التجريبي", | |
| "أن تكون قابلة للتحقق التجريبي ونابعة من الظواهر المدروسة", | |
| "أن تتناقض مع نفسها", | |
| "أن تكون بعيدة عن الظواهر المدروسة" | |
| ], | |
| correctAnswer: 1, | |
| explanation: "يشترط في الفرضية العلمية أن تكون قابلة للتحقق التجريبي ونابعة من الظواهر المدروسة ولا تتناقض مع ذاتها." | |
| }, | |
| { | |
| question: "ما المقصود باليقين المزدوج عند باشلار؟", | |
| options: [ | |
| "التأكد من صحة النظرية مرتين", | |
| "التكامل بين العقل والتجربة في بناء المعرفة العلمية", | |
| "إهمال التجربة لصالح العقل فقط", | |
| "إهمال العقل لصالح التجربة فقط" | |
| ], | |
| correctAnswer: 1, | |
| explanation: "اليقين المزدوج عند باشلار هو التكامل بين العقل والتجربة في بناء المعرفة العلمية، حيث لا يمكن للعقل أن يظل منعزلاً عن التجربة." | |
| }, | |
| { | |
| question: "ما الذي يميز العقلانية العلمية المعاصرة عن الكلاسيكية؟", | |
| options: [ | |
| "انغلاقها ورفضها للتجربة", | |
| "انفتاحها ودمجها بين العقل والتجربة", | |
| "اعتمادها الكلي على التجربة ورفض العقل", | |
| "عدم وجود فرق بينهما" | |
| ], | |
| correctAnswer: 1, | |
| explanation: "العقلانية العلمية المعاصرة تختلف عن الكلاسيكية بانفتاحها ودمجها بين العقل والتجربة، بعكس العقلانية الديكارتية الكلاسيكية المنغلقة." | |
| }, | |
| { | |
| question: "ما سبب التحولات في النظريات العلمية حسب المحتوى؟", | |
| options: [ | |
| "ثبات الحقائق العلمية وعدم تغيرها", | |
| "وجود فراغات نظرية وعوائق ابستمولوجية تحتاج للتعديل", | |
| "عدم وجود أي أخطاء في النظريات العلمية", | |
| "عدم حاجة العلم للتطور" | |
| ], | |
| correctAnswer: 1, | |
| explanation: "التحولات في النظريات العلمية تحدث بسبب وجود فراغات نظرية وعوائق ابستمولوجية تحتاج للتعديل، وهذا ما يعطي العلم قوته وقدرته على التطور." | |
| }, | |
| { | |
| question: "ما الفائدة من معيار تعدد الاختبارات عند تويليي؟", | |
| options: [ | |
| "إبقاء النظرية في عزلتها", | |
| "ضمان تماسك النظرية وقدرتها على مواكبة التحولات", | |
| "تثبيت النظرية دون تغيير", | |
| "عدم اختبار النظرية أبداً" | |
| ], | |
| correctAnswer: 1, | |
| explanation: "تعدد الاختبارات عند تويليي يضمن تماسك النظرية المنطقي الداخلي وقدرتها على مواكبة التحولات العلمية وتصحيح نفسها باستمرار." | |
| }, | |
| { | |
| question: "ما دور التجربة الذهنية في العلم المعاصر؟", | |
| options: [ | |
| "استبدال التجربة المخبرية تماماً", | |
| "توسيع الأداء التجريبي للعالم مع التجربة المخبرية", | |
| "إهمال الجانب النظري تماماً", | |
| "عدم وجود أي دور لها" | |
| ], | |
| correctAnswer: 1, | |
| explanation: "التجربة الذهنية في العلم المعاصر توسع الأداء التجريبي للعالم مع التجربة المخبرية، خاصة في دراسة الظواهر الميكروسكوبية." | |
| }, | |
| { | |
| question: "ما العلاقة بين النظرية والتجربة في بناء المعرفة العلمية؟", | |
| options: [ | |
| "النظرية تنتج عن التجربة فقط", | |
| "التجربة تنتج عن النظرية فقط", | |
| "علاقة جدلية وتكاملية بينهما", | |
| "لا توجد أي علاقة بينهما" | |
| ], | |
| correctAnswer: 2, | |
| explanation: "العلاقة بين النظرية والتجربة هي علاقة جدلية وتكاملية في بناء المعرفة العلمية، حيث يتفاعل الجانب النظري مع التجريبي بشكل مستمر." | |
| }, | |
| { | |
| question: "ما الذي يميز المنهج التجريبي في العلم؟", | |
| options: [ | |
| "اعتماده على التأمل فقط", | |
| "كونه سلسلة من الخطوات المنظمة تبدأ بالملاحظة وتنتهي بصياغة القانون", | |
| "عدم وجود أي خطوات محددة", | |
| "إهمال التجربة تماماً" | |
| ], | |
| correctAnswer: 1, | |
| explanation: "المنهج التجريبي في العلم هو سلسلة من الخطوات المنظمة تبدأ بالملاحظة، ثم الفرضية، فالتجربة، وتنتهي بصياغة القانون العلمي." | |
| } | |
| ]; | |
| // Quiz state | |
| let currentQuestion = 0; | |
| let score = 0; | |
| let userAnswers = Array(quizData.length).fill(null); | |
| let quizCompleted = false; | |
| let timeLeft = 20 * 60; // 20 minutes in seconds | |
| let timerInterval; | |
| // DOM elements | |
| const quizContainer = document.getElementById('quiz-container'); | |
| const prevBtn = document.getElementById('prev-btn'); | |
| const nextBtn = document.getElementById('next-btn'); | |
| const submitBtn = document.getElementById('submit-btn'); | |
| const resultsSection = document.getElementById('results-section'); | |
| const progressBar = document.getElementById('progress-bar'); | |
| const progressText = document.getElementById('progress-text'); | |
| const timer = document.getElementById('timer'); | |
| const scoreDisplay = document.getElementById('score'); | |
| const correctAnswersDisplay = document.getElementById('correct-answers'); | |
| const incorrectAnswersDisplay = document.getElementById('incorrect-answers'); | |
| const resultMessage = document.getElementById('result-message'); | |
| const timeTakenDisplay = document.getElementById('time-taken'); | |
| const performanceSummary = document.getElementById('performance-summary'); | |
| const restartBtn = document.getElementById('restart-btn'); | |
| // Start timer | |
| function startTimer() { | |
| updateTimerDisplay(); | |
| timerInterval = setInterval(() => { | |
| timeLeft--; | |
| updateTimerDisplay(); | |
| if (timeLeft <= 0) { | |
| clearInterval(timerInterval); | |
| submitQuiz(); | |
| } | |
| }, 1000); | |
| } | |
| // Update timer display | |
| function updateTimerDisplay() { | |
| const minutes = Math.floor(timeLeft / 60); | |
| const seconds = timeLeft % 60; | |
| timer.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; | |
| } | |
| // Format time taken | |
| function formatTimeTaken(seconds) { | |
| const mins = Math.floor(seconds / 60); | |
| const secs = seconds % 60; | |
| return `${mins} دقيقة و ${secs} ثانية`; | |
| } | |
| // Display question | |
| function displayQuestion(index) { | |
| const question = quizData[index]; | |
| let optionsHtml = ''; | |
| question.options.forEach((option, i) => { | |
| let optionClass = "option p-4 border border-gray-300 rounded-lg mb-2 cursor-pointer"; | |
| if (userAnswers[index] === i) { | |
| optionClass += " selected"; | |
| } | |
| optionsHtml += ` | |
| <div class="${optionClass}" onclick="selectOption(${i})"> | |
| ${i + 1}. ${option} | |
| </div> | |
| `; | |
| }); | |
| const questionHtml = ` | |
| <div class="question-card bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">${index + 1}. ${question.question}</h2> | |
| <div class="options space-y-2"> | |
| ${optionsHtml} | |
| </div> | |
| ${quizCompleted && userAnswers[index] !== null ? ` | |
| <div class="mt-4 p-4 rounded-lg ${userAnswers[index] === question.correctAnswer ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}"> | |
| <strong>${userAnswers[index] === question.correctAnswer ? 'إجابة صحيحة!' : 'إجابة خاطئة!'}</strong> | |
| <p class="mt-2">${question.explanation}</p> | |
| </div> | |
| ` : ''} | |
| </div> | |
| `; | |
| quizContainer.innerHTML = questionHtml; | |
| updateProgress(); | |
| updateNavButtons(); | |
| } | |
| // Select option | |
| window.selectOption = function(optionIndex) { | |
| if (quizCompleted) return; | |
| userAnswers[currentQuestion] = optionIndex; | |
| // Update display | |
| const options = document.querySelectorAll('.option'); | |
| options.forEach((option, i) => { | |
| option.classList.remove('selected'); | |
| if (i === optionIndex) { | |
| option.classList.add('selected'); | |
| } | |
| }); | |
| }; | |
| // Update navigation buttons | |
| function updateNavButtons() { | |
| prevBtn.classList.toggle('hidden', currentQuestion === 0); | |
| nextBtn.classList.toggle('hidden', currentQuestion === quizData.length - 1 || quizCompleted); | |
| submitBtn.classList.toggle('hidden', currentQuestion !== quizData.length - 1 || quizCompleted); | |
| } | |
| // Update progress | |
| function updateProgress() { | |
| const progress = ((currentQuestion + 1) / quizData.length) * 100; | |
| progressBar.style.width = `${progress}%`; | |
| progressText.textContent = `${currentQuestion + 1}/${quizData.length}`; | |
| } | |
| // Next question | |
| nextBtn.addEventListener('click', () => { | |
| if (currentQuestion < quizData.length - 1) { | |
| currentQuestion++; | |
| displayQuestion(currentQuestion); | |
| } | |
| }); | |
| // Previous question | |
| prevBtn.addEventListener('click', () => { | |
| if (currentQuestion > 0) { | |
| currentQuestion--; | |
| displayQuestion(currentQuestion); | |
| } | |
| }); | |
| // Submit quiz | |
| function submitQuiz() { | |
| clearInterval(timerInterval); | |
| quizCompleted = true; | |
| // Calculate score | |
| score = 0; | |
| quizData.forEach((question, index) => { | |
| if (userAnswers[index] === question.correctAnswer) { | |
| score++; | |
| } | |
| }); | |
| // Display results | |
| resultsSection.classList.remove('hidden'); | |
| scoreDisplay.textContent = score; | |
| correctAnswersDisplay.textContent = score; | |
| incorrectAnswersDisplay.textContent = quizData.length - score; | |
| // Result message | |
| const percentage = (score / quizData.length) * 100; | |
| if (percentage >= 80) { | |
| resultMessage.textContent = "ممتاز! لديك فهم قوي لموضوع النظرية والتجربة."; | |
| resultMessage.className = "text-green-600"; | |
| } else if (percentage >= 60) { | |
| resultMessage.textContent = "جيد جداً! لديك فهم جيد للموضوع ولكن يمكنك تحسينه أكثر."; | |
| resultMessage.className = "text-blue-600"; | |
| } else if (percentage >= 40) { | |
| resultMessage.textContent = "مقبول! لديك فهم أساسي ولكن تحتاج لمراجعة بعض النقاط."; | |
| resultMessage.className = "text-yellow-600"; | |
| } else { | |
| resultMessage.textContent = "تحتاج للمزيد من الدراسة! راجع المحتوى وحاول مرة أخرى."; | |
| resultMessage.className = "text-red-600"; | |
| } | |
| // Time taken | |
| const timeTaken = 20 * 60 - timeLeft; | |
| timeTakenDisplay.textContent = `الوقت المستغرق: ${formatTimeTaken(timeTaken)}`; | |
| // Performance summary | |
| performanceSummary.innerHTML = ''; | |
| quizData.forEach((question, index) => { | |
| const isCorrect = userAnswers[index] === question.correctAnswer; | |
| const summaryItem = document.createElement('div'); | |
| summaryItem.className = `p-3 rounded-lg ${isCorrect ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`; | |
| summaryItem.innerHTML = ` | |
| <p class="font-bold">سؤال ${index + 1}: ${isCorrect ? 'صحيح' : 'خاطئ'}</p> | |
| ${!isCorrect ? `<p class="text-sm mt-1">الإجابة الصحيحة: ${question.options[question.correctAnswer]}</p>` : ''} | |
| `; | |
| performanceSummary.appendChild(summaryItem); | |
| }); | |
| } | |
| submitBtn.addEventListener('click', submitQuiz); | |
| // Restart quiz | |
| restartBtn.addEventListener('click', () => { | |
| currentQuestion = 0; | |
| score = 0; | |
| userAnswers = Array(quizData.length).fill(null); | |
| quizCompleted = false; | |
| timeLeft = 20 * 60; | |
| resultsSection.classList.add('hidden'); | |
| displayQuestion(currentQuestion); | |
| startTimer(); | |
| }); | |
| // Initialize quiz | |
| displayQuestion(currentQuestion); | |
| startTimer(); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=methodya/quiz-theory" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |