Spaces:

methodya
/

quiz-theory

Running

App Files Files Community

methodya commited on Apr 8

Commit

085114d

verified ·

1 Parent(s): c0a803d

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +545 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Quiz Theory
-emoji: 🐨
-colorFrom: green
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: quiz-theory
+emoji: 🐳
+colorFrom: pink
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,545 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>