Spaces:

methodya
/

quizz-state-full

Running

App Files Files Community

quizz-state-full / index.html

methodya

Add 2 files

87d7bf3 verified about 2 months ago

raw

history blame contribute delete

79.2 kB

	<!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: #f0fdfa; /* teal-50 for background */
	}

	.quiz-container {
	background-color: #ffffff;
	padding: 2rem;
	border-radius: 0.75rem;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08),
	0 4px 6px rgba(0, 0, 0, 0.05);
	margin: 2rem auto;
	max-width: 5xl; /* Equivalent to max-w-5xl */
	}
	.quiz-header {
	text-align: center;
	margin-bottom: 2.5rem;
	border-bottom: 3px solid #0d9488; /* teal-600 */
	padding-bottom: 1rem;
	}
	.quiz-header h1 {
	font-size: 2.25rem; /* text-4xl */
	font-weight: 700;
	color: #1f2937; /* gray-800 */
	margin-bottom: 0.5rem;
	}
	.quiz-header p {
	font-size: 1.125rem; /* text-lg */
	color: #4b5563; /* gray-600 */
	}

	.quiz-question {
	border: 1px solid #e5e7eb; /* gray-200 */
	border-radius: 0.5rem;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	background-color: #f9fafb; /* gray-50 */
	}
	.quiz-question h4 {
	font-weight: 600;
	font-size: 1.125rem; /* text-lg */
	margin-bottom: 1rem;
	color: #111827; /* gray-900 */
	}
	.quiz-question .space-y-2 label {
	display: block;
	padding: 0.75rem 1rem;
	border: 1px solid #d1d5db; /* gray-300 */
	border-radius: 0.375rem;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
	}
	.quiz-question .space-y-2 label:hover {
	background-color: #f3f4f6; /* gray-100 */
	}
	.quiz-question .space-y-2 input[type="radio"]:checked + span {
	font-weight: 600;
	} /* Highlight text of selected answer slightly */

	/* Result Styles */
	#quizResult {
	margin-top: 2rem;
	padding: 1.5rem;
	border-radius: 0.5rem;
	font-size: 1.125rem;
	text-align: center;
	}
	#quizResult h4 {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 0.75rem;
	}

	/* Feedback Styles (applied by JS) */
	.correct-answer-label {
	background-color: #dcfce7 !important; /* green-100 */
	border-color: #86efac !important; /* green-300 */
	color: #166534 !important; /* green-800 */
	font-weight: 600;
	}
	.incorrect-answer-label {
	background-color: #fee2e2 !important; /* red-100 */
	border-color: #fca5a5 !important; /* red-300 */
	color: #991b1b !important; /* red-800 */
	font-weight: 600;
	}
	.unanswered-question h4 {
	color: #ca8a04 !important; /* yellow-600 */
	font-style: italic;
	}

	/* Floating Button Style */
	.floating-btn {
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: 10;
	transition: transform 0.3s ease;
	}
	.floating-btn:hover {
	transform: scale(1.1);
	}

	/* Fade-in Animation */
	@keyframes fadeIn {
	from {
	opacity: 0;
	transform: translateY(10px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}
	.fade-in {
	animation: fadeIn 0.8s ease-out forwards;
	}
	</style>
	</head>
	<body class="bg-teal-50 fade-in">
	<div class="quiz-container">
	<header class="quiz-header">
	<h1>
	<i class="fas fa-landmark text-teal-600"></i> اختبار شامل: درس الدولة
	<i class="fas fa-balance-scale text-teal-600"></i>
	</h1>
	<p>
	قيّم فهمك لمشروعية الدولة وغاياتها، طبيعة السلطة السياسية، والعلاقة
	بين الدولة والحق والعنف.
	</p>
	</header>

	<form id="comprehensiveQuizForm">
	<div class="space-y-6">
	<!-- المحور الأول: مشروعية الدولة وغايتها -->
	<h3
	class="text-xl font-bold text-teal-700 border-b-2 border-teal-200 pb-2 mb-4"
	>
	المحور الأول: مشروعية الدولة وغايتها
	</h3>

	<div class="quiz-question" id="q1-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>1</span
	>
	ما المقصود بـ "مشروعية الدولة" حسب التمهيد للمحور الأول؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q1" value="a" class="mr-2" /><span
	class="ml-2"
	>طريقة ممارسة الدولة لسلطتها.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q1"
	value="b"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>المقومات والأسس والتوافقات التي تبرر قيام الدولة.</span
	></label
	>
	<label
	><input type="radio" name="q1" value="c" class="mr-2" /><span
	class="ml-2"
	>العنف الذي تمارسه الدولة باسم القانون.</span
	></label
	>
	<label
	><input type="radio" name="q1" value="d" class="mr-2" /><span
	class="ml-2"
	>العلاقة بين الحاكم والمحكومين.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q2-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>2</span
	>
	ما هي الفكرة التي دارت حولها فكرة الدولة في العصر الحديث حسب
	التمهيد؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q2" value="a" class="mr-2" /><span
	class="ml-2"
	>الديمقراطية المباشرة كما عند الإغريق.</span
	></label
	>
	<label
	><input type="radio" name="q2" value="b" class="mr-2" /><span
	class="ml-2"
	>السلطة المطلقة للملوك.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q2"
	value="c"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2">فكرة التعاقد الاجتماعي.</span></label
	>
	<label
	><input type="radio" name="q2" value="d" class="mr-2" /><span
	class="ml-2"
	>سيادة القانون الطبيعي.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q3-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>3</span
	>
	وفقًا للتعاقد الاجتماعي المذكور في التمهيد، يتخلى الناس عن حرياتهم
	الطبيعية مقابل ماذا؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q3" value="a" class="mr-2" /><span
	class="ml-2"
	>الثروة والممتلكات.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q3"
	value="b"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>السلم والحرية والحقوق المكفولة قانونًا في الدولة
	المدنية.</span
	></label
	>
	<label
	><input type="radio" name="q3" value="c" class="mr-2" /><span
	class="ml-2"
	>الخضوع الكامل لإرادة الحاكم.</span
	></label
	>
	<label
	><input type="radio" name="q3" value="d" class="mr-2" /><span
	class="ml-2"
	>القوة العسكرية للدولة.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q4-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>4</span
	>
	ما هي الغاية الأساسية للدولة حسب باروخ اسبينوزا؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q4" value="a" class="mr-2" /><span
	class="ml-2"
	>فرض النظام بالقوة والإرهاب.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q4"
	value="b"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>تحقيق الحرية والديمقراطية وتحرير المواطنين من الخوف.</span
	></label
	>
	<label
	><input type="radio" name="q4" value="c" class="mr-2" /><span
	class="ml-2"
	>جمع الثروات وتوسيع النفوذ.</span
	></label
	>
	<label
	><input type="radio" name="q4" value="d" class="mr-2" /><span
	class="ml-2"
	>الحفاظ على الوضع القائم ومنع التغيير.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q5-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>5</span
	>
	كيف تستمد الدولة مشروعيتها عند اسبينوزا؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q5" value="a" class="mr-2" /><span
	class="ml-2"
	>من خلال القهر والتسلط على الأفراد.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q5"
	value="b"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>من كون غايتها ضمان الحريات والحقوق وتحرير الإنسان.</span
	></label
	>
	<label
	><input type="radio" name="q5" value="c" class="mr-2" /><span
	class="ml-2"
	>من العادات والتقاليد المتوارثة.</span
	></label
	>
	<label
	><input type="radio" name="q5" value="d" class="mr-2" /><span
	class="ml-2"
	>من القوة العسكرية التي تمتلكها.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q6-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>6</span
	>
	ما الذي يجب على الدولة تجنبه في علاقتها بالمواطنين حسب اسبينوزا؟
	</h4>
	<div class="space-y-2">
	<label
	><input
	type="radio"
	name="q6"
	value="a"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>جعلهم آلات صماء والاعتماد على الخداع والحقد.</span
	></label
	>
	<label
	><input type="radio" name="q6" value="b" class="mr-2" /><span
	class="ml-2"
	>تمكينهم من ممارسة حقوقهم المدنية.</span
	></label
	>
	<label
	><input type="radio" name="q6" value="c" class="mr-2" /><span
	class="ml-2"
	>ضمان أمنهم وتحريرهم من الخوف.</span
	></label
	>
	<label
	><input type="radio" name="q6" value="d" class="mr-2" /><span
	class="ml-2"
	>الاعتماد على العقل وحده في الحكم.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q7-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>7</span
	>
	من أين تستمد الدولة مشروعيتها حسب مونتسكيو؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q7" value="a" class="mr-2" /><span
	class="ml-2"
	>من إرادة الحاكم المطلقة.</span
	></label
	>
	<label
	><input type="radio" name="q7" value="b" class="mr-2" /><span
	class="ml-2"
	>من تحقيق الحرية فقط كما يرى اسبينوزا.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q7"
	value="c"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>من سيادة روح القوانين وفصل السلطات.</span
	></label
	>
	<label
	><input type="radio" name="q7" value="d" class="mr-2" /><span
	class="ml-2"
	>من القوة العسكرية والعنف المشروع.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q8-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>8</span
	>
	ما هي السلطات الثلاث التي يجب الفصل بينها حسب مونتسكيو؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q8" value="a" class="mr-2" /><span
	class="ml-2"
	>السلطة الدينية، السلطة العسكرية، السلطة المدنية.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q8"
	value="b"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>السلطة التشريعية، السلطة التنفيذية، السلطة القضائية.</span
	></label
	>
	<label
	><input type="radio" name="q8" value="c" class="mr-2" /><span
	class="ml-2"
	>سلطة الملك، سلطة النبلاء، سلطة الشعب.</span
	></label
	>
	<label
	><input type="radio" name="q8" value="d" class="mr-2" /><span
	class="ml-2"
	>السلطة الاقتصادية، السلطة السياسية، السلطة الاجتماعية.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q9-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>9</span
	>
	ما هي الغاية من فصل السلطات عند مونتسكيو؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q9" value="a" class="mr-2" /><span
	class="ml-2"
	>إضعاف الدولة وتقليل فعاليتها.</span
	></label
	>
	<label
	><input type="radio" name="q9" value="b" class="mr-2" /><span
	class="ml-2"
	>تركيز السلطة في يد القضاء.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q9"
	value="c"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>ضمان سيادة القانون وحماية حقوق الأفراد وملكياتهم.</span
	></label
	>
	<label
	><input type="radio" name="q9" value="d" class="mr-2" /><span
	class="ml-2"
	>تسهيل عملية سن القوانين بسرعة.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q10-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>10</span
	>
	وفقًا للتركيب بين اسبينوزا ومونتسكيو، ما الذي يضيفه تصور مونتسكيو
	على تصور اسبينوزا؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q10" value="a" class="mr-2" /><span
	class="ml-2"
	>التركيز على أهمية الحرية الفردية.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q10"
	value="b"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>التأكيد على أن ضمان مكتسبات المواطن يتطلب سيادة القانون وفصل
	السلط.</span
	></label
	>
	<label
	><input type="radio" name="q10" value="c" class="mr-2" /><span
	class="ml-2"
	>رفض فكرة التعاقد الاجتماعي.</span
	></label
	>
	<label
	><input type="radio" name="q10" value="d" class="mr-2" /><span
	class="ml-2"
	>الدعوة إلى دولة دينية.</span
	></label
	>
	</div>
	</div>

	<!-- المحور الثاني: طبيعة السلطة السياسية -->
	<h3
	class="text-xl font-bold text-teal-700 border-b-2 border-teal-200 pb-2 mb-4 mt-8"
	>
	المحور الثاني: طبيعة السلطة السياسية
	</h3>

	<div class="quiz-question" id="q11-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>11</span
	>
	ماذا تعني "طبيعة السلطة السياسية" كما ورد في بداية المحور الثاني؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q11" value="a" class="mr-2" /><span
	class="ml-2"
	>الأسس التي تقوم عليها مشروعية الدولة.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q11"
	value="b"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>الصورة التي تظهر بها الممارسة السياسية للدولة على الشعب
	وأسلوب إدارتها.</span
	></label
	>
	<label
	><input type="radio" name="q11" value="c" class="mr-2" /><span
	class="ml-2"
	>العلاقة بين الدولة والحق والعنف.</span
	></label
	>
	<label
	><input type="radio" name="q11" value="d" class="mr-2" /><span
	class="ml-2"
	>غاية وجود الدولة بالنسبة للأفراد.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q12-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>12</span
	>
	ما هي الأساليب المتأرجحة التي قد تمارس بها الدولة سلطتها حسب
	المحور الثاني؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q12" value="a" class="mr-2" /><span
	class="ml-2"
	>القانون والديمقراطية فقط.</span
	></label
	>
	<label
	><input type="radio" name="q12" value="b" class="mr-2" /><span
	class="ml-2"
	>الرفق واللين فقط.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q12"
	value="c"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>بين القوة والعنف والخداع والمكر، وبين الرفق والذكاء
	والاعتدال.</span
	></label
	>
	<label
	><input type="radio" name="q12" value="d" class="mr-2" /><span
	class="ml-2"
	>التشريع والتنفيذ والقضاء فقط.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q13-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>13</span
	>
	ما هو الشعار أو القاعدة السياسية التي ترتبط عادة بنيقولاي
	ماكيافيللي؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q13" value="a" class="mr-2" /><span
	class="ml-2"
	>"فرق تسد".</span
	></label
	>
	<label
	><input
	type="radio"
	name="q13"
	value="b"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2">"الغاية تبرر الوسيلة".</span></label
	>
	<label
	><input type="radio" name="q13" value="c" class="mr-2" /><span
	class="ml-2"
	>"القانون فوق الجميع".</span
	></label
	>
	<label
	><input type="radio" name="q13" value="d" class="mr-2" /><span
	class="ml-2"
	>"اعرف نفسك".</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q14-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>14</span
	>
	كيف يرى ماكيافيللي مجال الممارسة السياسية؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q14" value="a" class="mr-2" /><span
	class="ml-2"
	>مجال للتعاون والتوافق.</span
	></label
	>
	<label
	><input type="radio" name="q14" value="b" class="mr-2" /><span
	class="ml-2"
	>مجال لتحقيق العدالة المطلقة.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q14"
	value="c"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2">مجال صراع للمصالح المتعارضة.</span></label
	>
	<label
	><input type="radio" name="q14" value="d" class="mr-2" /><span
	class="ml-2"
	>مجال لتطبيق الأخلاق المثالية.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q15-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>15</span
	>
	ما الصفات التي يجب أن يمزج بينها الأمير الناجح حسب ماكيافيللي؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q15" value="a" class="mr-2" /><span
	class="ml-2"
	>الصدق والأمانة فقط.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q15"
	value="b"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>القانون والمكر والخداع والقوة (أن يكون أسداً وثعلباً).</span
	></label
	>
	<label
	><input type="radio" name="q15" value="c" class="mr-2" /><span
	class="ml-2"
	>الرحمة والتسامح فقط.</span
	></label
	>
	<label
	><input type="radio" name="q15" value="d" class="mr-2" /><span
	class="ml-2"
	>الذكاء والحكمة فقط.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q16-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>16</span
	>
	لماذا قد يحتاج الأمير إلى إخفاء صفة القوة والمكر حسب ماكيافيللي؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q16" value="a" class="mr-2" /><span
	class="ml-2"
	>لأنه يخشى من شعبه.</span
	></label
	>
	<label
	><input type="radio" name="q16" value="b" class="mr-2" /><span
	class="ml-2"
	>لأن القانون يمنع ذلك.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q16"
	value="c"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>للعب على وتر القانون ومصلحة الجماعة والحفاظ على مظهره.</span
	></label
	>
	<label
	><input type="radio" name="q16" value="d" class="mr-2" /><span
	class="ml-2"
	>لأنه لا يحتاج إليها في الواقع.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q17-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>17</span
	>
	ما هو المبدأ الأساسي الذي يجب أن تقوم عليه ممارسة السلطة حسب عبد
	الرحمن ابن خلدون؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q17" value="a" class="mr-2" /><span
	class="ml-2"
	>القوة المطلقة والخداع.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q17"
	value="b"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>الاعتدال والرفق والحكمة بين القوة واللين (الكيس).</span
	></label
	>
	<label
	><input type="radio" name="q17" value="c" class="mr-2" /><span
	class="ml-2"
	>الاعتماد الكلي على القانون المكتوب.</span
	></label
	>
	<label
	><input type="radio" name="q17" value="d" class="mr-2" /><span
	class="ml-2"
	>تحقيق المصلحة الشخصية للحاكم.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q18-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>18</span
	>
	كيف تؤثر علاقة القرب والرفق بين السلطان والرعية حسب ابن خلدون؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q18" value="a" class="mr-2" /><span
	class="ml-2"
	>تؤدي إلى ضعف السلطان.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q18"
	value="b"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>تُشرِب الرعية محبة السلطان وتزيد ولاءها.</span
	></label
	>
	<label
	><input type="radio" name="q18" value="c" class="mr-2" /><span
	class="ml-2"
	>تؤدي إلى فساد أخلاق الرعية.</span
	></label
	>
	<label
	><input type="radio" name="q18" value="d" class="mr-2" /><span
	class="ml-2"
	>لا تؤثر على الإطلاق.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q19-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>19</span
	>
	ما نتيجة التعسف والإفراط في القوة حسب ابن خلدون؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q19" value="a" class="mr-2" /><span
	class="ml-2"
	>زيادة هيبة السلطان.</span
	></label
	>
	<label
	><input type="radio" name="q19" value="b" class="mr-2" /><span
	class="ml-2"
	>تحقيق العدالة بسرعة.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q19"
	value="c"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>فساد أخلاق الرعية وخذلانها للسلطان في النزاعات.</span
	></label
	>
	<label
	><input type="radio" name="q19" value="d" class="mr-2" /><span
	class="ml-2"
	>تحسين الاقتصاد.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q20-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>20</span
	>
	ماذا يعتبر ابن خلدون الإسراف في الرفق؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q20" value="a" class="mr-2" /><span
	class="ml-2"
	>فضيلة مطلقة.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q20"
	value="b"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2">غفلة (غفل).</span></label
	>
	<label
	><input type="radio" name="q20" value="c" class="mr-2" /><span
	class="ml-2"
	>غبناً للرعية.</span
	></label
	>
	<label
	><input type="radio" name="q20" value="d" class="mr-2" /><span
	class="ml-2"
	>حكمة سياسية.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q21-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>21</span
	>
	ما المنظور الثالث لطبيعة السلطة السياسية الذي يمكن إضافته لمناقشة
	ماكيافيللي وابن خلدون؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q21" value="a" class="mr-2" /><span
	class="ml-2"
	>السلطة الدينية المطلقة.</span
	></label
	>
	<label
	><input type="radio" name="q21" value="b" class="mr-2" /><span
	class="ml-2"
	>السلطة القائمة على العنف المشروع فقط (فيبر).</span
	></label
	>
	<label
	><input
	type="radio"
	name="q21"
	value="c"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>السلطة القائمة على الديمقراطية وسيادة القانون (مثل
	مونتسكيو).</span
	></label
	>
	<label
	><input type="radio" name="q21" value="d" class="mr-2" /><span
	class="ml-2"
	>السلطة القائمة على الكاريزما الشخصية.</span
	></label
	>
	</div>
	</div>

	<!-- المحور الثالث: الدولة بين الحق والعنف -->
	<h3
	class="text-xl font-bold text-teal-700 border-b-2 border-teal-200 pb-2 mb-4 mt-8"
	>
	المحور الثالث: الدولة بين الحق والعنف
	</h3>

	<div class="quiz-question" id="q22-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>22</span
	>
	ما الإشكالية الرئيسية التي يطرحها المحور الثالث؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q22" value="a" class="mr-2" /><span
	class="ml-2"
	>كيف نشأت الدولة تاريخياً؟</span
	></label
	>
	<label
	><input type="radio" name="q22" value="b" class="mr-2" /><span
	class="ml-2"
	>ما هي أفضل أشكال الحكم؟</span
	></label
	>
	<label
	><input
	type="radio"
	name="q22"
	value="c"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>هل تمارس الدولة سلطتها بالقوة والعنف أم بالحق والقانون؟ وهل
	يمكن للدولة أن تكون دولة حق وتمارس العنف؟</span
	></label
	>
	<label
	><input type="radio" name="q22" value="d" class="mr-2" /><span
	class="ml-2"
	>ما هي واجبات المواطن تجاه الدولة؟</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q23-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>23</span
	>
	حسب مقدمة المحور الثالث، هل الدول الديمقراطية الحديثة لا تمارس
	العنف؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q23" value="a" class="mr-2" /><span
	class="ml-2"
	>نعم، هي دول حق فقط ولا تمارس العنف.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q23"
	value="b"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>لا، حتى الدول الديمقراطية تمتلك أجهزة قمعية وقد تمارس
	العنف.</span
	></label
	>
	<label
	><input type="radio" name="q23" value="c" class="mr-2" /><span
	class="ml-2"
	>العنف يمارسه الأفراد فقط وليس الدول.</span
	></label
	>
	<label
	><input type="radio" name="q23" value="d" class="mr-2" /><span
	class="ml-2"
	>الديمقراطية تلغي الحاجة لأي شكل من أشكال القوة.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q24-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>24</span
	>
	ما هو المفهوم المركزي في موقف ماكس فيبر حول علاقة الدولة بالعنف؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q24" value="a" class="mr-2" /><span
	class="ml-2"
	>العنف العشوائي.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q24"
	value="b"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>العنف المشروع (La violence Légitime).</span
	></label
	>
	<label
	><input type="radio" name="q24" value="c" class="mr-2" /><span
	class="ml-2"
	>رفض العنف بشكل مطلق.</span
	></label
	>
	<label
	><input type="radio" name="q24" value="d" class="mr-2" /><span
	class="ml-2"
	>الحق الطبيعي في العنف.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q25-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>25</span
	>
	لماذا يعتبر ماكس فيبر "العنف المشروع" وسيلة الدولة المفضلة وحقها؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q25" value="a" class="mr-2" /><span
	class="ml-2"
	>لأنه أسهل طريقة للحكم.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q25"
	value="b"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>لضمان استمرارية الدولة وتماسكها وخضوع الأفراد ومنع
	الفوضى.</span
	></label
	>
	<label
	><input type="radio" name="q25" value="c" class="mr-2" /><span
	class="ml-2"
	>لتحقيق رغبات الحاكم الشخصية.</span
	></label
	>
	<label
	><input type="radio" name="q25" value="d" class="mr-2" /><span
	class="ml-2"
	>لأنه يرضي جميع المواطنين.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q26-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>26</span
	>
	من له الحق في ممارسة العنف حسب ماكس فيبر؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q26" value="a" class="mr-2" /><span
	class="ml-2"
	>أي فرد أو جماعة للدفاع عن النفس.</span
	></label
	>
	<label
	><input type="radio" name="q26" value="b" class="mr-2" /><span
	class="ml-2"
	>الجيش والشرطة فقط.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q26"
	value="c"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>الدولة وحدها، أو من تفوضه الدولة.</span
	></label
	>
	<label
	><input type="radio" name="q26" value="d" class="mr-2" /><span
	class="ml-2"
	>المؤسسات الدينية.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q27-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>27</span
	>
	ما هو الموقف الأساسي لجاكلين روس من علاقة الدولة بالعنف؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q27" value="a" class="mr-2" /><span
	class="ml-2"
	>الدولة يجب أن تعتمد كلياً على العنف المشروع.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q27"
	value="b"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>الدولة يجب أن تكون دولة حق تحترم الشخص والكرامة وتتجنب
	العنف.</span
	></label
	>
	<label
	><input type="radio" name="q27" value="c" class="mr-2" /><span
	class="ml-2"
	>العنف ضروري لتحقيق الحق.</span
	></label
	>
	<label
	><input type="radio" name="q27" value="d" class="mr-2" /><span
	class="ml-2"
	>لا فرق بين دولة الحق ودولة العنف.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q28-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>28</span
	>
	ما الذي يجب على الدولة أن تتجنبه حسب جاكلين روس؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q28" value="a" class="mr-2" /><span
	class="ml-2"
	>ضمان حريات المواطنين.</span
	></label
	>
	<label
	><input type="radio" name="q28" value="b" class="mr-2" /><span
	class="ml-2"
	>مراعاة الكرامة الإنسانية.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q28"
	value="c"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>الظلم والطغيان والتعسف والعنف باسم القانون.</span
	></label
	>
	<label
	><input type="radio" name="q28" value="d" class="mr-2" /><span
	class="ml-2"
	>فصل السلطات.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q29-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>29</span
	>
	كيف يمكن للدولة أن تجسد نموذج دولة الحق وتتجنب استغلال السلطة حسب
	جاكلين روس؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q29" value="a" class="mr-2" /><span
	class="ml-2"
	>عن طريق تركيز السلطة في يد شخص واحد.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q29"
	value="b"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>عن طريق الحرص على فصل السلطات.</span
	></label
	>
	<label
	><input type="radio" name="q29" value="c" class="mr-2" /><span
	class="ml-2"
	>عن طريق زيادة استخدام العنف المشروع.</span
	></label
	>
	<label
	><input type="radio" name="q29" value="d" class="mr-2" /><span
	class="ml-2"
	>عن طريق تجاهل حقوق المواطنين.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q30-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>30</span
	>
	ما هي النقطة الرئيسية التي يركز عليها ماكس فيبر في الخلاصة
	التركيبية للمحور الثالث؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q30" value="a" class="mr-2" /><span
	class="ml-2"
	>أهمية الديمقراطية.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q30"
	value="b"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>أن خاصية الدولة الأساسية هي العنف المشروع وأن غيابه يؤدي
	للفوضى.</span
	></label
	>
	<label
	><input type="radio" name="q30" value="c" class="mr-2" /><span
	class="ml-2"
	>ضرورة تجنب الدولة للعنف.</span
	></label
	>
	<label
	><input type="radio" name="q30" value="d" class="mr-2" /><span
	class="ml-2"
	>أهمية فصل السلطات.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q31-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>31</span
	>
	ما هي النقطة الرئيسية التي تركز عليها جاكلين روس في الخلاصة
	التركيبية للمحور الثالث؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q31" value="a" class="mr-2" /><span
	class="ml-2"
	>أن العنف المشروع ضروري للدولة.</span
	></label
	>
	<label
	><input type="radio" name="q31" value="b" class="mr-2" /><span
	class="ml-2"
	>أن الدولة لا تحتاج إلى سلطات.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q31"
	value="c"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>أن الدولة مطالبة بتجنب العنف وتجسيد نموذج دولة الحق وفصل
	السلطات.</span
	></label
	>
	<label
	><input type="radio" name="q31" value="d" class="mr-2" /><span
	class="ml-2"
	>أن الفوضى أفضل من الدولة.</span
	></label
	>
	</div>
	</div>

	<!-- أسئلة إضافية للتغطية الشاملة والوصول إلى 40 سؤال -->

	<div class="quiz-question" id="q32-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>32</span
	>
	أي فيلسوف يرى أن غاية الدولة هي تمكين الأفراد من استخدام قواهم
	الطبيعية والمدنية بحرية؟
	</h4>
	<div class="space-y-2">
	<label
	><input
	type="radio"
	name="q32"
	value="a"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2">باروخ اسبينوزا</span></label
	>
	<label
	><input type="radio" name="q32" value="b" class="mr-2" /><span
	class="ml-2"
	>مونتسكيو</span
	></label
	>
	<label
	><input type="radio" name="q32" value="c" class="mr-2" /><span
	class="ml-2"
	>ماكيافيللي</span
	></label
	>
	<label
	><input type="radio" name="q32" value="d" class="mr-2" /><span
	class="ml-2"
	>ماكس فيبر</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q33-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>33</span
	>
	"روح القوانين" هو مفهوم أساسي في فكر أي فيلسوف تم تقديمه؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q33" value="a" class="mr-2" /><span
	class="ml-2"
	>اسبينوزا</span
	></label
	>
	<label
	><input
	type="radio"
	name="q33"
	value="b"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2">مونتسكيو</span></label
	>
	<label
	><input type="radio" name="q33" value="c" class="mr-2" /><span
	class="ml-2"
	>ابن خلدون</span
	></label
	>
	<label
	><input type="radio" name="q33" value="d" class="mr-2" /><span
	class="ml-2"
	>جاكلين روس</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q34-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>34</span
	>
	مفهوم "الواقعية السياسية" يرتبط بشكل وثيق بأفكار من؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q34" value="a" class="mr-2" /><span
	class="ml-2"
	>ابن خلدون</span
	></label
	>
	<label
	><input type="radio" name="q34" value="b" class="mr-2" /><span
	class="ml-2"
	>مونتسكيو</span
	></label
	>
	<label
	><input
	type="radio"
	name="q34"
	value="c"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2">نيقولاي ماكيافيللي</span></label
	>
	<label
	><input type="radio" name="q34" value="d" class="mr-2" /><span
	class="ml-2"
	>جاكلين روس</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q35-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>35</span
	>
	أي مفكر يشدد على أهمية "الرفق" و"الكيس" (الذكاء والحكمة) في ممارسة
	السلطة؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q35" value="a" class="mr-2" /><span
	class="ml-2"
	>ماكيافيللي</span
	></label
	>
	<label
	><input
	type="radio"
	name="q35"
	value="b"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2">عبد الرحمن ابن خلدون</span></label
	>
	<label
	><input type="radio" name="q35" value="c" class="mr-2" /><span
	class="ml-2"
	>ماكس فيبر</span
	></label
	>
	<label
	><input type="radio" name="q35" value="d" class="mr-2" /><span
	class="ml-2"
	>اسبينوزا</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q36-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>36</span
	>
	من يرى أن الدولة تحتكر استخدام العنف "المشروع"؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q36" value="a" class="mr-2" /><span
	class="ml-2"
	>جاكلين روس</span
	></label
	>
	<label
	><input type="radio" name="q36" value="b" class="mr-2" /><span
	class="ml-2"
	>ابن خلدون</span
	></label
	>
	<label
	><input
	type="radio"
	name="q36"
	value="c"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2">ماكس فيبر</span></label
	>
	<label
	><input type="radio" name="q36" value="d" class="mr-2" /><span
	class="ml-2"
	>مونتسكيو</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q37-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>37</span
	>
	أي موقف يمثل النقيض لفكرة أن الدولة يجب أن تكون دولة حق في المقام
	الأول؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q37" value="a" class="mr-2" /><span
	class="ml-2"
	>موقف جاكلين روس.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q37"
	value="b"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>موقف ماكيافيللي (الغاية تبرر الوسيلة).</span
	></label
	>
	<label
	><input type="radio" name="q37" value="c" class="mr-2" /><span
	class="ml-2"
	>موقف اسبينوزا (الغاية هي الحرية).</span
	></label
	>
	<label
	><input type="radio" name="q37" value="d" class="mr-2" /><span
	class="ml-2"
	>موقف ابن خلدون (الاعتدال والرفق).</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q38-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>38</span
	>
	فكرة الانتقال من "حالة الطبيعة" (اللادولة) إلى "حالة الدولة
	المدنية" ترتبط بمفهوم ماذا؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q38" value="a" class="mr-2" /><span
	class="ml-2"
	>العنف المشروع.</span
	></label
	>
	<label
	><input type="radio" name="q38" value="b" class="mr-2" /><span
	class="ml-2"
	>فصل السلطات.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q38"
	value="c"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2">التعاقد الاجتماعي.</span></label
	>
	<label
	><input type="radio" name="q38" value="d" class="mr-2" /><span
	class="ml-2"
	>الواقعية السياسية.</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q39-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>39</span
	>
	من هو المفكر الذي يرى أن على الحاكم أن يكون "أسداً ليخيف الذئاب
	وثعلباً ليتجنب الفخاخ" (بمعنى القوة والمكر)؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q39" value="a" class="mr-2" /><span
	class="ml-2"
	>اسبينوزا</span
	></label
	>
	<label
	><input type="radio" name="q39" value="b" class="mr-2" /><span
	class="ml-2"
	>ابن خلدون</span
	></label
	>
	<label
	><input
	type="radio"
	name="q39"
	value="c"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2">ماكيافيللي</span></label
	>
	<label
	><input type="radio" name="q39" value="d" class="mr-2" /><span
	class="ml-2"
	>مونتسكيو</span
	></label
	>
	</div>
	</div>

	<div class="quiz-question" id="q40-container">
	<h4 class="flex items-center">
	<span
	class="ml-2 bg-teal-100 text-teal-700 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm"
	>40</span
	>
	أي مفهوم يعبر عن الدولة التي تحترم كرامة الإنسان وحرياته وتتجنب
	الطغيان والتعسف؟
	</h4>
	<div class="space-y-2">
	<label
	><input type="radio" name="q40" value="a" class="mr-2" /><span
	class="ml-2"
	>الدولة الثيوقراطية.</span
	></label
	>
	<label
	><input
	type="radio"
	name="q40"
	value="b"
	data-correct="true"
	class="mr-2"
	/><span class="ml-2"
	>دولة الحق (كما تراها جاكلين روس).</span
	></label
	>
	<label
	><input type="radio" name="q40" value="c" class="mr-2" /><span
	class="ml-2"
	>الدولة القائمة على العنف المشروع (فيبر).</span
	></label
	>
	<label
	><input type="radio" name="q40" value="d" class="mr-2" /><span
	class="ml-2"
	>الدولة في حالة الطبيعة.</span
	></label
	>
	</div>
	</div>
	</div>
	<!-- End of questions container -->

	<button
	type="button"
	id="submitQuizBtn"
	class="mt-10 w-full bg-teal-600 text-white py-4 px-8 rounded-lg font-bold text-xl hover:bg-teal-700 transition duration-300 shadow-md flex items-center justify-center"
	>
	<svg
	xmlns="http://www.w3.org/2000/svg"
	class="w-6 h-6 ml-2"
	viewBox="0 0 24 24"
	fill="currentColor"
	>
	<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
	</svg>
	إرسال الإجابات
	</button>

	<div id="quizResult" class="mt-6"></div>
	</form>
	</div>
	<!-- End of quiz-container -->

	<a
	href="#"
	onclick="event.preventDefault(); scrollToElement('body');"
	class="floating-btn bg-teal-600 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg hover:bg-teal-700"
	>
	<i class="fas fa-arrow-up text-xl" aria-hidden="true"></i>
	<span class="sr-only">الصعود للأعلى</span>
	</a>

	<script>
	// --- نفس كود الجافاسكربت الموجود في النموذج الأصلي ---
	// --- يتم نسخه ولصقه هنا بالكامل دون تغيير ---
	document.addEventListener("DOMContentLoaded", () => {
	document.body.classList.add("fade-in");
	const submitButton = document.getElementById("submitQuizBtn");
	if (submitButton) {
	submitButton.addEventListener("click", submitComprehensiveQuiz);
	}
	});

	function submitComprehensiveQuiz() {
	const form = document.getElementById("comprehensiveQuizForm");
	const resultDiv = document.getElementById("quizResult");
	const questions = form.querySelectorAll(".quiz-question");
	const totalQuestions = questions.length;
	let score = 0;

	resultDiv.innerHTML = ""; // Clear previous results
	clearQuizFormatting(form); // Clear previous formatting

	questions.forEach((questionDiv, index) => {
	const questionId = questionDiv.id.replace("-container", ""); // e.g., 'q1'
	const selectedAnswerInput = questionDiv.querySelector(
	`input[name="${questionId}"]:checked`
	);
	const correctAnswerInput = questionDiv.querySelector(
	`input[name="${questionId}"][data-correct="true"]`
	);
	const questionContainer = document.getElementById(questionDiv.id); // Get the container div

	// Highlight the correct answer label
	if (correctAnswerInput) {
	correctAnswerInput
	.closest("label")
	.classList.add("correct-answer-label");
	} else {
	console.warn(
	`No correct answer defined for question ${questionId}`
	);
	}

	if (selectedAnswerInput) {
	if (selectedAnswerInput.hasAttribute("data-correct")) {
	score++;
	} else {
	// Highlight the incorrectly selected answer label
	selectedAnswerInput
	.closest("label")
	.classList.add("incorrect-answer-label");
	}
	} else {
	// Highlight unanswered questions container
	if (questionContainer)
	questionContainer.classList.add("unanswered-question");
	}

	// Disable inputs after submission
	const radios = questionDiv.querySelectorAll(
	`input[name="${questionId}"]`
	);
	radios.forEach((radio) => (radio.disabled = true));
	});

	// Disable submit button after submission
	const submitBtn = document.getElementById("submitQuizBtn");
	if (submitBtn) {
	submitBtn.disabled = true;
	submitBtn.classList.add("opacity-50", "cursor-not-allowed");
	}

	const percentage =
	totalQuestions > 0 ? Math.round((score / totalQuestions) * 100) : 0;
	let feedbackMessage = "";
	let resultClass = "";

	// Generate feedback message and result div class based on score
	if (percentage >= 80) {
	feedbackMessage = `ممتاز! لقد أجبت بشكل صحيح على ${score} من ${totalQuestions} سؤالًا.`;
	resultClass = "bg-green-100 text-green-800 border border-green-300";
	} else if (percentage >= 50) {
	feedbackMessage = `جيد! لقد أجبت بشكل صحيح على ${score} من ${totalQuestions} سؤالًا. راجع الأسئلة المميزة لمزيد من الفهم.`;
	resultClass =
	"bg-yellow-100 text-yellow-800 border border-yellow-300";
	} else {
	feedbackMessage = `تحتاج إلى مراجعة الدرس. لقد أجبت بشكل صحيح على ${score} من ${totalQuestions} سؤالًا.`; // Adjusted feedback
	resultClass = "bg-red-100 text-red-800 border border-red-300";
	}

	// Display the result with feedback and retry button
	resultDiv.className = `mt-8 p-6 rounded-lg shadow-md text-center ${resultClass}`;
	resultDiv.innerHTML = `
	<h4 class="font-bold text-2xl mb-3">النتيجة النهائية: ${percentage}%</h4>
	<p class="mb-5 text-lg">${feedbackMessage}</p>
	<button onclick="retryQuiz()" class="bg-teal-600 hover:bg-teal-700 text-white py-2 px-6 rounded-lg font-semibold transition duration-300 text-lg">
	إعادة الاختبار <i class="fas fa-redo ml-2"></i>
	</button>
	`;

	// Scroll result into view smoothly
	resultDiv.scrollIntoView({ behavior: "smooth", block: "center" });
	}

	// Function to clear quiz formatting
	function clearQuizFormatting(form) {
	const labels = form.querySelectorAll("label");
	labels.forEach((label) => {
	label.classList.remove(
	"correct-answer-label",
	"incorrect-answer-label"
	);
	});
	const questionContainers = form.querySelectorAll(".quiz-question");
	questionContainers.forEach((container) => {
	container.classList.remove("unanswered-question");
	// Re-enable radio buttons if needed for retry
	const radios = container.querySelectorAll('input[type="radio"]');
	radios.forEach((radio) => (radio.disabled = false));
	});

	// Re-enable submit button
	const submitButton = document.getElementById("submitQuizBtn");
	if (submitButton) {
	submitButton.disabled = false;
	submitButton.classList.remove("opacity-50", "cursor-not-allowed");
	}
	}

	// Retry function for the comprehensive quiz
	function retryQuiz() {
	const form = document.getElementById("comprehensiveQuizForm");
	const resultDiv = document.getElementById("quizResult");

	if (form && resultDiv) {
	// Clear radio buttons
	const radioButtons = form.querySelectorAll('input[type="radio"]');
	radioButtons.forEach((rb) => (rb.checked = false));

	// Clear result div
	resultDiv.innerHTML = "";
	resultDiv.className = "mt-6"; // Reset result div style

	// Clear formatting and re-enable inputs/button
	clearQuizFormatting(form);

	// Scroll to the top of the quiz
	scrollToElement(".quiz-container"); // Scroll to the container start
	} else {
	console.error("Could not find form or result div to retry.");
	}
	}

	// Generic smooth scroll function
	function scrollToElement(selector) {
	const element = document.querySelector(selector);
	if (element) {
	element.scrollIntoView({ behavior: "smooth", block: "start" });
	} else {
	// Fallback for 'body' or other top-level elements
	window.scrollTo({ top: 0, behavior: "smooth" });
	}
	}
	</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/quizz-state-full" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>