|
<!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; |
|
} |
|
|
|
.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; |
|
} |
|
.quiz-header { |
|
text-align: center; |
|
margin-bottom: 2.5rem; |
|
border-bottom: 3px solid #0d9488; |
|
padding-bottom: 1rem; |
|
} |
|
.quiz-header h1 { |
|
font-size: 2.25rem; |
|
font-weight: 700; |
|
color: #1f2937; |
|
margin-bottom: 0.5rem; |
|
} |
|
.quiz-header p { |
|
font-size: 1.125rem; |
|
color: #4b5563; |
|
} |
|
|
|
.quiz-question { |
|
border: 1px solid #e5e7eb; |
|
border-radius: 0.5rem; |
|
padding: 1.5rem; |
|
margin-bottom: 1.5rem; |
|
background-color: #f9fafb; |
|
} |
|
.quiz-question h4 { |
|
font-weight: 600; |
|
font-size: 1.125rem; |
|
margin-bottom: 1rem; |
|
color: #111827; |
|
} |
|
.quiz-question .space-y-2 label { |
|
display: block; |
|
padding: 0.75rem 1rem; |
|
border: 1px solid #d1d5db; |
|
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; |
|
} |
|
.quiz-question .space-y-2 input[type="radio"]:checked + span { |
|
font-weight: 600; |
|
} |
|
|
|
|
|
#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; |
|
} |
|
|
|
|
|
.correct-answer-label { |
|
background-color: #dcfce7 !important; |
|
border-color: #86efac !important; |
|
color: #166534 !important; |
|
font-weight: 600; |
|
} |
|
.incorrect-answer-label { |
|
background-color: #fee2e2 !important; |
|
border-color: #fca5a5 !important; |
|
color: #991b1b !important; |
|
font-weight: 600; |
|
} |
|
.unanswered-question h4 { |
|
color: #ca8a04 !important; |
|
font-style: italic; |
|
} |
|
|
|
|
|
.floating-btn { |
|
position: fixed; |
|
bottom: 20px; |
|
left: 20px; |
|
z-index: 10; |
|
transition: transform 0.3s ease; |
|
} |
|
.floating-btn:hover { |
|
transform: scale(1.1); |
|
} |
|
|
|
.submitQuizBtn { |
|
background-color: #991b1b; |
|
} |
|
|
|
@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-pen-nib text-teal-600"></i> اختبار: منهجية تحليل |
|
القولة الفلسفية <i class="fas fa-book-open text-teal-600"></i> |
|
</h1> |
|
<p> |
|
قيّم فهمك لخطوات تحليل القولة الفلسفية المرفقة بسؤال (منهجية 2025). |
|
</p> |
|
</header> |
|
|
|
<form id="comprehensiveQuizForm"> |
|
<div class="space-y-6"> |
|
|
|
<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 |
|
> |
|
ما هي أول خطوة مطلوبة في مرحلة "الفهم" (4 نقاط) حسب المنهجية؟ |
|
</h4> |
|
<div class="space-y-2"> |
|
<label |
|
><input |
|
type="radio" |
|
name="q1" |
|
value="a" |
|
data-correct="true" |
|
class="mr-2" |
|
/><span class="ml-2" |
|
>تقديم عام لموضوع القولة بطريقة تمهيدية.</span |
|
></label |
|
> |
|
<label |
|
><input type="radio" name="q1" value="b" 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" |
|
>4 نقاط</span |
|
></label |
|
> |
|
<label |
|
><input |
|
type="radio" |
|
name="q3" |
|
value="b" |
|
data-correct="true" |
|
class="mr-2" |
|
/><span class="ml-2">5 نقاط</span></label |
|
> |
|
<label |
|
><input type="radio" name="q3" value="c" class="mr-2" /><span |
|
class="ml-2" |
|
>3 نقاط</span |
|
></label |
|
> |
|
<label |
|
><input type="radio" name="q3" value="d" class="mr-2" /><span |
|
class="ml-2" |
|
>6 نقاط</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" 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" |
|
data-correct="true" |
|
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" class="mr-2" /><span |
|
class="ml-2" |
|
>الاتفاق مع جميع المواقف.</span |
|
></label |
|
> |
|
<label |
|
><input |
|
type="radio" |
|
name="q8" |
|
value="c" |
|
data-correct="true" |
|
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" |
|
>5 نقاط</span |
|
></label |
|
> |
|
<label |
|
><input type="radio" name="q9" value="b" class="mr-2" /><span |
|
class="ml-2" |
|
>4 نقاط</span |
|
></label |
|
> |
|
<label |
|
><input |
|
type="radio" |
|
name="q9" |
|
value="c" |
|
data-correct="true" |
|
class="mr-2" |
|
/><span class="ml-2">3 نقاط</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" class="mr-2" /><span |
|
class="ml-2" |
|
>أن يتفق دائماً مع أطروحة القولة.</span |
|
></label |
|
> |
|
<label |
|
><input |
|
type="radio" |
|
name="q10" |
|
value="c" |
|
data-correct="true" |
|
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> |
|
|
|
<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" class="mr-2" /><span |
|
class="ml-2" |
|
>إبراز قيمة الأطروحة.</span |
|
></label |
|
> |
|
<label |
|
><input |
|
type="radio" |
|
name="q12" |
|
value="d" |
|
data-correct="true" |
|
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> |
|
|
|
<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> |
|
|
|
<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 = ""; |
|
clearQuizFormatting(form); |
|
|
|
questions.forEach((questionDiv, index) => { |
|
const questionId = questionDiv.id.replace("-container", ""); |
|
const selectedAnswerInput = questionDiv.querySelector( |
|
`input[name="${questionId}"]:checked` |
|
); |
|
const correctAnswerInput = questionDiv.querySelector( |
|
`input[name="${questionId}"][data-correct="true"]` |
|
); |
|
const questionContainer = document.getElementById(questionDiv.id); |
|
|
|
|
|
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 { |
|
|
|
selectedAnswerInput |
|
.closest("label") |
|
.classList.add("incorrect-answer-label"); |
|
} |
|
} else { |
|
|
|
if (questionContainer) |
|
questionContainer.classList.add("unanswered-question"); |
|
} |
|
|
|
|
|
const radios = questionDiv.querySelectorAll( |
|
`input[name="${questionId}"]` |
|
); |
|
radios.forEach((radio) => (radio.disabled = true)); |
|
}); |
|
|
|
|
|
document.getElementById("submitQuizBtn").disabled = true; |
|
document |
|
.getElementById("submitQuizBtn") |
|
.classList.add("opacity-50", "cursor-not-allowed"); |
|
|
|
const percentage = |
|
totalQuestions > 0 ? Math.round((score / totalQuestions) * 100) : 0; |
|
let feedbackMessage = ""; |
|
let resultClass = ""; |
|
|
|
|
|
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} سؤالًا.`; |
|
resultClass = "bg-red-100 text-red-800 border border-red-300"; |
|
} |
|
|
|
|
|
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> |
|
`; |
|
|
|
|
|
resultDiv.scrollIntoView({ behavior: "smooth", block: "center" }); |
|
} |
|
|
|
|
|
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"); |
|
|
|
const radios = container.querySelectorAll('input[type="radio"]'); |
|
radios.forEach((radio) => (radio.disabled = false)); |
|
}); |
|
|
|
|
|
const submitButton = document.getElementById("submitQuizBtn"); |
|
if (submitButton) { |
|
submitButton.disabled = false; |
|
submitButton.classList.remove("opacity-50", "cursor-not-allowed"); |
|
} |
|
} |
|
|
|
|
|
function retryQuiz() { |
|
const form = document.getElementById("comprehensiveQuizForm"); |
|
const resultDiv = document.getElementById("quizResult"); |
|
|
|
if (form && resultDiv) { |
|
|
|
const radioButtons = form.querySelectorAll('input[type="radio"]'); |
|
radioButtons.forEach((rb) => (rb.checked = false)); |
|
|
|
|
|
resultDiv.innerHTML = ""; |
|
resultDiv.className = "mt-6"; |
|
|
|
|
|
clearQuizFormatting(form); |
|
|
|
|
|
scrollToElement(".quiz-container"); |
|
} else { |
|
console.error("Could not find form or result div to retry."); |
|
} |
|
} |
|
|
|
|
|
function scrollToElement(selector) { |
|
const element = document.querySelector(selector); |
|
if (element) { |
|
element.scrollIntoView({ behavior: "smooth", block: "start" }); |
|
} else { |
|
|
|
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/methodology-quote-mini-quiz" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
|
|