Hugging Face's logo

Spaces:
methodya
/
theory-experiment
Running

App Files Community
methodya commited on
Commit
cde1dc2
·
verified ·
1 Parent(s): 90584e6

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +750 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Theory Experiment
3
- emoji: 🐨
4
- colorFrom: indigo
5
  colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: theory-experiment
3
+ emoji: 🐳
4
+ colorFrom: blue
5
  colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,750 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>درس النظرية والتجريب</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');
11
+
12
+ body {
13
+ font-family: 'Tajawal', sans-serif;
14
+ background-color: #f8fafc; /* gray-50 */
15
+ }
16
+
17
+ .concept-card {
18
+ transition: all 0.3s ease;
19
+ }
20
+
21
+ .concept-card:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
24
+ }
25
+
26
+ .philosopher-card {
27
+ border-left: 4px solid; /* Color set by Tailwind */
28
+ transition: all 0.3s ease;
29
+ }
30
+ .philosopher-card:hover {
31
+ box-shadow: 0 5px 15px rgba(0,0,0,0.08);
32
+ }
33
+
34
+ .axis-header {
35
+ position: relative;
36
+ padding-bottom: 15px; /* Added padding */
37
+ margin-bottom: 20px; /* Added margin */
38
+ }
39
+
40
+ .axis-header::after {
41
+ content: "";
42
+ position: absolute;
43
+ bottom: 0; /* Adjusted position */
44
+ right: 0;
45
+ width: 100px;
46
+ height: 3px;
47
+ background-color: #0d9488; /* teal-600 - New color for this lesson */
48
+ border-radius: 1.5px;
49
+ }
50
+
51
+ .comparison-card {
52
+ background: linear-gradient(135deg, #f0fdfa, #ccfbf1); /* teal-50 to teal-100 */
53
+ border: 1px solid #99f6e4; /* teal-200 */
54
+ }
55
+
56
+ /* Floating Button Style */
57
+ .floating-btn {
58
+ position: fixed; bottom: 20px; left: 20px; z-index: 10; transition: transform 0.3s ease;
59
+ }
60
+ .floating-btn:hover {
61
+ transform: scale(1.1);
62
+ }
63
+
64
+ .highlight {
65
+ background-color: rgba(20, 184, 166, 0.2); /* teal-500 with opacity */
66
+ padding: 0.1em 0.3em; border-radius: 3px;
67
+ }
68
+
69
+ /* Flip Card Styles */
70
+ .flip-card {
71
+ background-color: transparent; width: 100%; min-height: 170px; perspective: 1000px; display: flex;
72
+ }
73
+ .flip-card-inner {
74
+ position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1); border-radius: 0.5rem; display: flex; flex-direction: column;
75
+ }
76
+ /* Add focus-within for accessibility */
77
+ .flip-card:hover .flip-card-inner,
78
+ .flip-card:focus-within .flip-card-inner {
79
+ transform: rotateY(180deg);
80
+ }
81
+ .flip-card-front, .flip-card-back {
82
+ position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1rem; border-radius: 0.5rem;
83
+ }
84
+ .flip-card-front {
85
+ background-color: #ffffff; color: black;
86
+ }
87
+ .flip-card-back {
88
+ background-color: #0d9488; /* teal-600 */ color: white; transform: rotateY(180deg); overflow-y: auto; /* Scroll for long definitions */
89
+ }
90
+ .flip-card-back p { font-size: 0.875rem; } /* text-sm */
91
+
92
+ /* Fade-in Animation */
93
+ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
94
+ .fade-in { animation: fadeIn 0.8s ease-out forwards; }
95
+
96
+ /* Style for axis-specific concepts */
97
+ .axis-concept-card {
98
+ background-color: #f9fafb; border: 1px solid #e5e7eb; border-right: 3px solid; padding: 1rem; border-radius: 0.375rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
99
+ }
100
+
101
+ /* Style for Quiz Sections */
102
+ .quiz-section {
103
+ background-color: #ffffff; padding: 2rem; border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); margin-bottom: 2rem;
104
+ }
105
+ .quiz-title {
106
+ font-size: 1.5rem; font-weight: 700; color: #1f2937; margin-bottom: 1.5rem; text-align: center; border-bottom: 2px solid #5eead4; /* teal-300 */ padding-bottom: 0.5rem;
107
+ }
108
+ .quiz-question {
109
+ border-bottom: 1px solid #e5e7eb; padding-bottom: 1rem; margin-bottom: 1.5rem;
110
+ }
111
+ .quiz-question:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
112
+
113
+ </style>
114
+ </head>
115
+ <body class="bg-gray-50">
116
+
117
+ <div class="container mx-auto px-4 py-8">
118
+
119
+ <header class="text-center mb-12">
120
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
121
+ <i class="fas fa-flask text-teal-600"></i> درس النظرية والتجريب <i class="fas fa-microscope text-teal-600"></i>
122
+ </h1>
123
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">
124
+ استكشاف العلاقة الجدلية بين النظرية والتجربة في بناء المعرفة العلمية، ودور العقل والخيال، ومعايير الحكم على علمية النظريات.
125
+ </p>
126
+ </header>
127
+
128
+ <section class="mb-16" id="main-concepts-overview">
129
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center axis-header">نظرة عامة على المفاهيم</h2>
130
+ <p class="text-center text-gray-600 mb-8">
131
+ تُعد العلاقة بين البناء النظري والاختبار التجريبي حجر الزاوية في المنهج العلمي. يتناول هذا الدرس دور كل من التجربة والتجريب، طبيعة العقلانية العلمية المعاصرة، والمعايير التي تميز النظريات العلمية.
132
+ </p>
133
+ <div class="flex justify-center space-x-8 space-x-reverse text-center text-gray-700">
134
+ <div class="flex flex-col items-center">
135
+ <i class="fas fa-binoculars text-3xl text-blue-500 mb-2"></i> / <i class="fas fa-vial text-3xl text-blue-500 mb-2"></i>
136
+ <span>التجربة والتجريب</span>
137
+ </div>
138
+ <div class="flex flex-col items-center">
139
+ <i class="fas fa-brain text-3xl text-purple-500 mb-2"></i>
140
+ <span>العقلانية العلمية</span>
141
+ </div>
142
+ <div class="flex flex-col items-center">
143
+ <i class="fas fa-balance-scale text-3xl text-orange-500 mb-2"></i>
144
+ <span>معايير علمية النظريات</span>
145
+ </div>
146
+ </div>
147
+ </section>
148
+
149
+ <section class="mb-16">
150
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 axis-header">المحور الأول: التجربة والتجريب</h2>
151
+ <div class="bg-blue-50 border-r-4 border-blue-400 p-4 rounded-lg shadow-sm mb-8">
152
+ <h3 class="font-bold text-blue-800 mb-2 flex items-center"><i class="fas fa-question-circle ml-2"></i> الإشكالية المحورية</h3>
153
+ <p class="text-blue-700">ما دور التجربة والتجريب في بناء المعرفة العلمية؟ ما الفرق بين التجربة والتجريب؟ وهل يمكن للمنهج التجريبي الاستغناء عن الخيال العقلي؟ وما هي الخصائص والشروط التي يجب أن تتوفر في العالم التجريبي؟</p>
154
+ </div>
155
+ <div class="mb-8">
156
+ <h3 class="font-bold text-xl text-gray-700 mb-4">مفاهيم أساسية للمحور:</h3>
157
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
158
+ <div class="axis-concept-card border-blue-500 p-4 rounded-md shadow-sm">
159
+ <h4 class="font-semibold text-blue-700 flex items-center mb-1"><i class="fas fa-binoculars ml-2"></i> التجربة (Experience)</h4>
160
+ <p class="text-sm text-gray-600">الملاحظة العامة للواقع كما يدرك بالحواس، قد تكون عفوية أو غير منهجية. تمثل المعرفة الخام الأولية.</p>
161
+ </div>
162
+ <div class="axis-concept-card border-green-500 p-4 rounded-md shadow-sm">
163
+ <h4 class="font-semibold text-green-700 flex items-center mb-1"><i class="fas fa-vial ml-2"></i> التجريب (Experimentation)</h4>
164
+ <p class="text-sm text-gray-600">إعادة بناء الظاهرة المدروسة في ظروف اصطناعية ومراقَبة، بهدف التحقق من فرضية معينة. هو مساءلة منهجية للطبيعة.</p>
165
+ </div>
166
+ <div class="axis-concept-card border-teal-500 p-4 rounded-md shadow-sm">
167
+ <h4 class="font-semibold text-teal-700 flex items-center mb-1"><i class="fas fa-cogs ml-2"></i> المنهج التجريبي</h4>
168
+ <p class="text-sm text-gray-600">منهج يعتمد الاستقراء والتحليل والتجريب للبحث عن علا��ات ثابتة بين الظواهر، بخطوات مثل الملاحظة والفرضية والتجربة والقانون.</p>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ <h3 class="font-bold text-xl text-gray-700 mb-6">مواقف الفلاسفة:</h3>
173
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
174
+ <div class="philosopher-card border-green-500 bg-white p-6 rounded-lg shadow-md">
175
+ <h4 class="font-bold text-lg text-green-700 mb-2 flex items-center"><i class="fas fa-user-md ml-2"></i> كلود برنارد: أهمية المنهج التجريبي الكلاسيكي</h4>
176
+ <p class="text-gray-600 mb-2 text-sm">يؤكد على ضرورة المنهج التجريبي الصارم لبلوغ المعرفة العلمية، مميزاً بين الملاحظة الأولية والتجريب الفعّال.</p>
177
+ <ul class="list-disc pr-4 text-sm text-gray-500 space-y-1">
178
+ <li>يميز بين الملاحظ (يسجل الواقع) والمجرب (يسائل الطبيعة بنشاط عبر الفرضية).</li>
179
+ <li>على المستوى العملي، الباحث يجب أن يكون <span class="highlight">ملاحظاً ومجرباً</span> في آن واحد.</li>
180
+ <li>يدافع عن الخطوات الكلاسيكية: <strong class="text-green-600">الملاحظة، الفرضية، التجربة، القانون</strong>.</li>
181
+ <li>يعتبر التجريب العلمي وحده الكفيل ببناء نظرية علمية (تصور كلاسيكي).</li>
182
+ </ul>
183
+ </div>
184
+ <div class="philosopher-card border-purple-500 bg-white p-6 rounded-lg shadow-md">
185
+ <h4 class="font-bold text-lg text-purple-700 mb-2 flex items-center"><i class="fas fa-lightbulb ml-2"></i> روني طوم: دور الخيال العقلي والتجربة الذهنية</h4>
186
+ <p class="text-gray-600 mb-2 text-sm">ينتقد الاقتصار على التجريب المخبري، ويشدد على أهمية <span class="highlight">العقل والخيال والتجربة الذهنية</span> في العلم المعاصر.</p>
187
+ <ul class="list-disc pr-4 text-sm text-gray-500 space-y-1">
188
+ <li>العقل أساس صياغة الفرضيات وتطوير التجريب.</li>
189
+ <li><strong class="text-purple-600">التجربة الذهنية الخيالية</strong> ضرورية، خاصة مع الظواهر الميكروسكوبية.</li>
190
+ <li>التجريب لا ينفصل فيه ما هو اختباري عما هو فكري وخيالي.</li>
191
+ <li>الخيال والعقل حاضران في كل مراحل المنهج التجريبي، وليس فقط في الفرضية.</li>
192
+ </ul>
193
+ </div>
194
+ </div>
195
+ <div class="mt-8">
196
+ <h3 class="font-bold text-lg text-gray-700 mb-4">مقارنة سريعة:</h3>
197
+ <div class="comparison-card p-6 rounded-lg shadow-sm grid grid-cols-1 md:grid-cols-2 gap-6">
198
+ <div>
199
+ <h5 class="font-semibold text-green-700 mb-2 flex items-center"><i class="fas fa-user-md ml-2"></i> كلود برنارد</h5>
200
+ <ul class="list-disc pr-4 text-sm text-gray-700 space-y-1">
201
+ <li>مصدر المعرفة الأساسي: التجريب المخبري المنظم.</li>
202
+ <li>دور العقل: أساسي في وضع الفرضية وتفسير النتائج.</li>
203
+ <li>نظرة للمنهج: كلاسيكي، خطي (ملاحظة، فرضية، تجربة، قانون).</li>
204
+ </ul>
205
+ </div>
206
+ <div>
207
+ <h5 class="font-semibold text-purple-700 mb-2 flex items-center"><i class="fas fa-lightbulb ml-2"></i> روني طوم</h5>
208
+ <ul class="list-disc pr-4 text-sm text-gray-700 space-y-1">
209
+ <li>مصدر المعرفة: حوار بين التجريب المخبري والتجربة الذهنية/الخيال.</li>
210
+ <li>دور العقل/الخيال: أساسي وممتد عبر كل مراحل المنهج.</li>
211
+ <li>نظرة للمنهج: أكثر تكاملاً، يدمج ما هو فكري بما هو اختباري.</li>
212
+ </ul>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ <div class="bg-gray-100 border border-gray-200 p-4 rounded-lg shadow-inner mt-8">
217
+ <h3 class="font-bold text-gray-800 mb-2 flex items-center"><i class="fas fa-link ml-2 text-teal-500"></i> تركيب المحور الأول</h3>
218
+ <p class="text-gray-700 text-sm">
219
+ يتضح أن بناء المعرفة العلمية يعتمد على علاقة جدلية بين التجربة والتجريب. فبينما يؤكد التصور الكلاسيكي (برنارد) على مركزية التجريب المخبري المنظم، يبرز الفكر الإبستيمولوجي المعاصر (طوم) أهمية التكامل بين هذا التجريب والنشاط العقلي الخلاق (التجربة الذهنية والخيال)، خاصة في ظل تعقيدات العلم الحديث. لا يمكن فصل الواقعي الملموس عن النشاط الرياضي الحر للعقل.
220
+ </p>
221
+ </div>
222
+ </section>
223
+
224
+ <section class="mb-16">
225
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 axis-header">المحور الثاني: العقلانية العلمية</h2>
226
+ <div class="bg-purple-50 border-r-4 border-purple-400 p-4 rounded-lg shadow-sm mb-8">
227
+ <h3 class="font-bold text-purple-800 mb-2 flex items-center"><i class="fas fa-question-circle ml-2"></i> الإشكالية المحورية</h3>
228
+ <p class="text-purple-700">ما طبيعة العقلانية العلمية المعاصرة؟ هل هي عقلانية رياضية مجردة أم عقلانية تطبيقية منفتحة على التجربة؟ وما هو المسار الأنسب للفيزياء المعاصرة: الاتجاه النظري الرياضي البحت أم الاتجاه الذي يدمج الإبداع العقلي بالممارسة التجريبية؟</p>
229
+ </div>
230
+ <div class="mb-8">
231
+ <h3 class="font-bold text-xl text-gray-700 mb-4">مفاهيم أساسية للمحور:</h3>
232
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
233
+ <div class="axis-concept-card border-purple-500 p-3 rounded-md shadow-sm">
234
+ <h4 class="font-semibold text-purple-700 text-center mb-1"><i class="fas fa-brain mr-1"></i> العقلانية العلمية</h4>
235
+ <p class="text-xs text-gray-600 text-center">منظومة الفكر التي تحكم الممارسة العلمية، وتتميز في العصر المعاصر بالانفتاح والنقد الذاتي وتجاوز العقلانية الكلاسيكية المنغلقة.</p>
236
+ </div>
237
+ <div class="axis-concept-card border-indigo-500 p-3 rounded-md shadow-sm">
238
+ <h4 class="font-semibold text-indigo-700 text-center mb-1"><i class="fas fa-infinity mr-1"></i> العقلانية الرياضية (المجردة)</h4>
239
+ <p class="text-xs text-gray-600 text-center">توجه يرى أن العقل الرياضي المبدع هو المصدر الأساسي للمعرفة والقوانين العلمية، مع دور ثانوي للتجربة (أينشتاين).</p>
240
+ </div>
241
+ <div class="axis-concept-card border-teal-500 p-3 rounded-md shadow-sm">
242
+ <h4 class="font-semibold text-teal-700 text-center mb-1"><i class="fas fa-people-arrows mr-1"></i> العقلانية المطبقة (المنفتحة)</h4>
243
+ <p class="text-xs text-gray-600 text-center">توجه يؤكد على ضرورة الحوار والتكامل بين العقل (بما فيه الرياضي) والتجربة في بناء المعرفة العلمية (باشلار).</p>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ <h3 class="font-bold text-xl text-gray-700 mb-6">مواقف الفلاسفة:</h3>
248
+ <div class="space-y-8">
249
+ <div class="philosopher-card border-indigo-500 bg-white p-6 rounded-lg shadow-md">
250
+ <h4 class="font-bold text-lg text-indigo-700 mb-3 flex items-center"><i class="fas fa-atom ml-2"></i> ألبرت أينشتاين: أولوية العقل الرياضي المبدع</h4>
251
+ <p class="text-gray-600 text-sm">يرى أن مستقبل الفيزياء يكمن في <span class="highlight">العقل الرياضي الخلاق</span> القادر على إبداع المفاهيم والقوانين التي تفسر الطبيعة بعمق.</p>
252
+ <ul class="list-disc pr-4 text-sm text-gray-500 space-y-1">
253
+ <li>المبدأ الخلاق في العلم هو العقل الرياضي.</li>
254
+ <li>التجربة دورها ثانوي: <strong class="text-indigo-600">إما مطابقة نتائج العقل أو توجيهه لمسارات نظرية أخرى</strong>.</li>
255
+ <li>العقل يمنح البنية للعالم، وليس مستمداً من التجربة فقط.</li>
256
+ </ul>
257
+ </div>
258
+ <div class="philosopher-card border-teal-500 bg-white p-6 rounded-lg shadow-md">
259
+ <h4 class="font-bold text-lg text-teal-700 mb-3 flex items-center"><i class="fas fa-comments ml-2"></i> غاستون باشلار: ضرورة الحوار بين العقل والتجربة</h4>
260
+ <p class="text-gray-600 text-sm">ينتقد العقلانية الرياضية المنعزلة، ويشدد على أن المعرفة العلمية تُبنى عبر <span class="highlight">حوار مستمر بين العقل والتجربة</span>.</p>
261
+ <ul class="list-disc pr-4 text-sm text-gray-500 space-y-1">
262
+ <li>العقلانية الرياضية المبدعة وحدها "فارغة" بدون تطبيق واقعي.</li>
263
+ <li>الحجج العقلية المرتبطة بالتجربة هي جزء أساسي من العلم.</li>
264
+ <li>مستقبل الفيزياء يكمن في <strong class="text-teal-600">اليقين المزدوج</strong> الناتج عن هذا الحوار.</li>
265
+ <li>العقلانية العلمية المعاصرة هي عقلانية مطبقة ومنفتحة.</li>
266
+ </ul>
267
+ </div>
268
+ </div>
269
+ <div class="mt-8">
270
+ <h3 class="font-bold text-lg text-gray-700 mb-4">مقارنة سريعة:</h3>
271
+ <div class="comparison-card p-6 rounded-lg shadow-sm grid grid-cols-1 md:grid-cols-2 gap-6">
272
+ <div>
273
+ <h5 class="font-semibold text-indigo-700 mb-2 flex items-center"><i class="fas fa-atom ml-2"></i> أينشتاين</h5>
274
+ <ul class="list-disc pr-4 text-sm text-gray-700 space-y-1">
275
+ <li>طبيعة العقلانية: رياضية، مبدعة، مجردة.</li>
276
+ <li>العلاقة عقل/تجربة: العقل أولاً، التجربة تتبع.</li>
277
+ <li>مصدر القوانين: إبداع عقلي رياضي.</li>
278
+ </ul>
279
+ </div>
280
+ <div>
281
+ <h5 class="font-semibold text-teal-700 mb-2 flex items-center"><i class="fas fa-comments ml-2"></i> باشلار</h5>
282
+ <ul class="list-disc pr-4 text-sm text-gray-700 space-y-1">
283
+ <li>طبيعة العقلانية: مطبقة، منفتحة، حوارية.</li>
284
+ <li>العلاقة عقل/تجربة: حوار وتكامل ضروري.</li>
285
+ <li>مصدر القوانين: بناء مشترك بين العقل والتجربة.</li>
286
+ </ul>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ <div class="bg-gray-100 border border-gray-200 p-4 rounded-lg shadow-inner mt-8">
291
+ <h3 class="font-bold text-gray-800 mb-2 flex items-center"><i class="fas fa-link ml-2 text-teal-500"></i> تركيب المحور الثاني</h3>
292
+ <p class="text-gray-700 text-sm">
293
+ تعكس مواقف أينشتاين وباشلار وجهي العقلانية العلمية المعاصرة. فبينما يبرز أينشتاين القوة الإبداعية للعقل الرياضي وقدرته على كشف بنى الواقع العميقة، يؤكد باشلار على أن هذه العقلانية لا تكتمل وتصبح "علمية" فعلاً إلا من خلال الحوار الدائم مع الواقع التجريبي وتطبيقاته. يبدو أن العلم المعاصر، وخاصة الفيزياء، يتأرجح ويتطور في هذا الفضاء الجدلي بين التجريد النظري والتطبيق التجريبي.
294
+ </p>
295
+ </div>
296
+ </section>
297
+
298
+ <section class="mb-16">
299
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 axis-header">المحور الثالث: معايير علمية النظريات العلمية</h2>
300
+ <div class="bg-orange-50 border-r-4 border-orange-400 p-4 rounded-lg shadow-sm mb-8">
301
+ <h3 class="font-bold text-orange-800 mb-2 flex items-center"><i class="fas fa-question-circle ml-2"></i> الإشكالية المحورية</h3>
302
+ <p class="text-orange-700">بما أن النظريات العلمية تتغير وتتطور، وتكشف عن أخطاء سابقة، فما هي المعايير التي يمكن من خلالها الحكم على نظرية ما بأنها "علمية"؟ ما الفائدة من معياري القابلية للتكذيب وتعدد الاختبارات في ضمان علمية النظريات وصلاحيتها؟</p>
303
+ </div>
304
+ <div class="mb-8">
305
+ <h3 class="font-bold text-xl text-gray-700 mb-4">مفاهيم أساسية للمحور:</h3>
306
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
307
+ <div class="axis-concept-card border-red-500 p-4 rounded-md shadow-sm">
308
+ <h4 class="font-semibold text-red-700 flex items-center mb-1"><i class="fas fa-times-circle ml-2"></i> القابلية للتكذيب (Falsifiability)</h4>
309
+ <p class="text-sm text-gray-600">معيار يقترحه بوبر لتمييز العلم عن غيره؛ النظرية تكون علمية إذا كانت قابلة للاختبار بحيث يمكن تصور موقف أو نتيجة تدحضها أو تكذبها.</p>
310
+ </div>
311
+ <div class="axis-concept-card border-blue-500 p-4 rounded-md shadow-sm">
312
+ <h4 class="font-semibold text-blue-700 flex items-center mb-1"><i class="fas fa-redo-alt ml-2"></i> تعدد الاختبارات</h4>
313
+ <p class="text-sm text-gray-600">معيار يؤكد على ضرورة إخضاع النظرية لاختبارات متكررة ومتنوعة، ومواجهتها بفرضيات إضافية، لضمان تماسكها ومواكبتها للتطور (تويليي).</p>
314
+ </div>
315
+ <div class="axis-concept-card border-yellow-500 p-4 rounded-md shadow-sm">
316
+ <h4 class="font-semibold text-yellow-700 flex items-center mb-1"><i class="fas fa-check-double ml-2"></i> التحقق التجريبي (Verification)</h4>
317
+ <p class="text-sm text-gray-600">مبدأ (غالباً ما ينتقده بوبر) يرى أن صدق النظرية يتحدد بمدى تطابقها مع الواقع التجريبي وإمكانية إثباتها عبر التجربة.</p>
318
+ </div>
319
+ </div>
320
+ </div>
321
+ <h3 class="font-bold text-xl text-gray-700 mb-6">مواقف الفلاسفة:</h3>
322
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
323
+ <div class="philosopher-card border-red-500 bg-white p-6 rounded-lg shadow-md">
324
+ <h4 class="font-bold text-lg text-red-700 mb-2 flex items-center"><i class="fas fa-search-minus ml-2"></i> كارل بوبر: القابلية للتكذيب كمعيار للعلمية</h4>
325
+ <p class="text-gray-600 mb-2 text-sm">يرى أن ما يميز النظرية العلمية ليس قابليتها للتحقق (الذي قد يكون سهلاً)، بل <span class="highlight">قابليتها للتكذيب أو التفنيد</span>.</p>
326
+ <ul class="list-disc pr-4 text-sm text-gray-500 space-y-1">
327
+ <li>العلم يتقدم بتفنيد النظريات الخاطئة وليس بتأكيد النظريات الصحيحة فقط.</li>
328
+ <li>النظرية العلمية الجيدة هي التي تخاطر بأن تُكذَّب.</li>
329
+ <li><strong class="text-red-600">القابلية للتكذيب</strong> تضمن أن النظرية إخبارية عن الواقع ويمكن اختبارها.</li>
330
+ <li>الجرأة على نقد وتفنيد النظرية هو ما يضمن تطور العلم.</li>
331
+ </ul>
332
+ </div>
333
+ <div class="philosopher-card border-blue-500 bg-white p-6 rounded-lg shadow-md">
334
+ <h4 class="font-bold text-lg text-blue-700 mb-2 flex items-center"><i class="fas fa-vials ml-2"></i> بيير تويليي: تعدد الاختبارات لضمان التماسك</h4>
335
+ <p class="text-gray-600 mb-2 text-sm">يؤكد على أن علمية النظرية تكمن في قدرتها على الصمود أمام <span class="highlight">الاختبارات المتعددة والمتنوعة</span> ومواجهة فرضيات جديدة.</p>
336
+ <ul class="list-disc pr-4 text-sm text-gray-500 space-y-1">
337
+ <li>لا يكفي اختبار النظرية مرة واحدة.</li>
338
+ <li><strong class="text-blue-600">تعدد الاختبارات ومواجهة فروض إضافية</strong> يضمن تماسكها المنطقي وقدرتها على المواكبة.</li>
339
+ <li>يجب إخراج النظرية من عزلتها التجريبية وفتحها على تحديات جديدة.</li>
340
+ <li>هذا يضمن أجوبة علمية أكثر تماسكاً ومواكبة للحركة العلمية.</li>
341
+ </ul>
342
+ </div>
343
+ </div>
344
+ <div class="mt-8">
345
+ <h3 class="font-bold text-lg text-gray-700 mb-4">مقارنة سريعة:</h3>
346
+ <div class="comparison-card p-6 rounded-lg shadow-sm grid grid-cols-1 md:grid-cols-2 gap-6">
347
+ <div>
348
+ <h5 class="font-semibold text-red-700 mb-2 flex items-center"><i class="fas fa-search-minus ml-2"></i> كارل بوبر</h5>
349
+ <ul class="list-disc pr-4 text-sm text-gray-700 space-y-1">
350
+ <li>المعيار الأساسي: القابلية للتكذيب (منطقياً).</li>
351
+ <li>الهدف: تمييز العلم عن اللاعلم، ضمان قابلية الاختبار.</li>
352
+ <li>التركيز: على بنية النظرية المنطقية وقابليتها للدحض.</li>
353
+ </ul>
354
+ </div>
355
+ <div>
356
+ <h5 class="font-semibold text-blue-700 mb-2 flex items-center"><i class="fas fa-vials ml-2"></i> بيير تويليي</h5>
357
+ <ul class="list-disc pr-4 text-sm text-gray-700 space-y-1">
358
+ <li>المعيار الأساسي: الصمود أمام تعدد الاختبارات (عملياً).</li>
359
+ <li>الهدف: ضمان تماسك النظرية وقدرتها على مواكبة التطور.</li>
360
+ <li>التركيز: على الممارسة الاختبارية المستمرة والمتنوعة.</li>
361
+ </ul>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ <div class="bg-gray-100 border border-gray-200 p-4 rounded-lg shadow-inner mt-8">
366
+ <h3 class="font-bold text-gray-800 mb-2 flex items-center"><i class="fas fa-link ml-2 text-teal-500"></i> تركيب المحور الثالث</h3>
367
+ <p class="text-gray-700 text-sm">
368
+ يتفق بوبر وتويليي على أن علمية النظريات لا تكمن في يقينها المطلق أو تحققها النهائي، بل في قابليتها للاختبار والنقد والتطور. يقدم بوبر معياراً منطقياً (القابلية للتكذيب) لتمييز العلم، بينما يركز تويليي على معيار عملي (تعدد الاختبارات) لضمان تماسك النظرية ومواكبتها. كلا المعيارين يهدفان إلى ضمان بقاء العلم نشاطاً نقدياً ديناميكياً قادراً على تصحيح نفسه باستمرار وتجاوز أخطائه.
369
+ </p>
370
+ </div>
371
+ </section>
372
+
373
+ <section class="mb-16">
374
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center axis-header">خلاصة واستنتاجات</h2>
375
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
376
+ <div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-teal-500">
377
+ <h3 class="font-semibold text-lg text-teal-800 mb-2 flex items-center"><i class="fas fa-sync-alt ml-2"></i> العلم كحوار وتطور</h3>
378
+ <p class="text-gray-700 text-sm">يكشف درس النظرية والتجريب أن المعرفة العلمية ليست بناءً نهائياً، بل هي عملية مستمرة من الحوار الجدلي بين العقل النظري (بما فيه الخيال) والواقع التجريبي. العلم يتقدم من خلال هذا الحوار، ومن خلال النقد المستمر لأدواته ونظرياته.</p>
379
+ </div>
380
+ <div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-purple-500">
381
+ <h3 class="font-semibold text-lg text-purple-800 mb-2 flex items-center"><i class="fas fa-interrogation ml-2"></i> لا يقين مطلق</h3>
382
+ <p class="text-gray-700 text-sm">تُظهر لنا الإبستيمولوجيا المعاصرة أن السعي ليس وراء اليقين المطلق، بل وراء بناء نظريات أكثر تماسكاً وقدرة على تفسير الواقع ومواجهة الاختبار. معايير كالقابلية للتكذيب وتعدد الاختبارات تعكس هذه الروح النقدية للعلم.</p>
383
+ </div>
384
+ </div>
385
+ <div class="bg-sky-100 border border-sky-300 p-6 rounded-lg shadow">
386
+ <h3 class="font-bold text-sky-800 mb-2 flex items-center"><i class="fas fa-lightbulb-on ml-2"></i> أهمية الفكر النقدي</h3>
387
+ <p class="text-sky-700">
388
+ يدعونا هذا الدرس إلى تقدير أهمية الفكر النقدي في الممارسة العلمية، وتقدير دور كل من العقل والتجربة، وإدراك أن النظريات العلمية هي أدوات قابلة للتطور والتجاوز، وليست حقائق نهائية.
389
+ </p>
390
+ </div>
391
+ </section>
392
+
393
+ <section class="mb-16">
394
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center axis-header">مراجعة المفاهيم الأساسية (انقر للتعريف)</h2>
395
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-5">
396
+ <div class="flip-card" tabindex="0"> <div class="flip-card-inner"> <div class="flip-card-front"> <i class="fas fa-binoculars text-4xl text-blue-500 mb-2"></i> <h4 class="font-bold">التجربة</h4> </div> <div class="flip-card-back"> <p>الملاحظة العامة للواقع كما يدرك بالحواس، قد تكون عفوية وغير منهجية.</p> </div> </div> </div>
397
+ <div class="flip-card" tabindex="0"> <div class="flip-card-inner"> <div class="flip-card-front"> <i class="fas fa-vial text-4xl text-green-500 mb-2"></i> <h4 class="font-bold">التجريب</h4> </div> <div class="flip-card-back"> <p>إعادة بناء الظاهرة في ظروف اصطناعية ومراقَبة للتحقق من فرضية. مساءلة منهجية للطبيعة.</p> </div> </div> </div>
398
+ <div class="flip-card" tabindex="0"> <div class="flip-card-inner"> <div class="flip-card-front"> <i class="fas fa-cogs text-4xl text-teal-500 mb-2"></i> <h4 class="font-bold">المنهج التجريبي</h4> </div> <div class="flip-card-back"> <p>يعتمد الاستقراء والتحليل والتجريب (ملاحظة، فرضية، تجربة، قانون) للبحث عن علاقات ثابتة بين الظواهر.</p> </div> </div> </div>
399
+ <div class="flip-card" tabindex="0"> <div class="flip-card-inner"> <div class="flip-card-front"> <i class="fas fa-lightbulb text-4xl text-purple-500 mb-2"></i> <h4 class="font-bold">الخيال العلمي / التجربة الذهنية</h4> </div> <div class="flip-card-back"> <p>دور العقل في تصور سيناريوهات أو تجارب غير منفذة واقعياً، للمساعدة في بناء الفرضيات أو استكشاف نتائج نظرية (روني طوم).</p> </div> </div> </div>
400
+ <div class="flip-card" tabindex="0"> <div class="flip-card-inner"> <div class="flip-card-front"> <i class="fas fa-brain text-4xl text-purple-600 mb-2"></i> <h4 class="font-bold">العقلانية العلمية</h4> </div> <div class="flip-card-back"> <p>منظومة الفكر التي تحكم العلم، تتميز بالانفتاح والنقد والجدل بين العقل والتجربة (عكس الكلاسيكية المنغلقة).</p> </div> </div> </div>
401
+ <div class="flip-card" tabindex="0"> <div class="flip-card-inner"> <div class="flip-card-front"> <i class="fas fa-infinity text-4xl text-indigo-500 mb-2"></i> <h4 class="font-bold">العقلانية الرياضية</h4> </div> <div class="flip-card-back"> <p>ترى العقل الرياضي المبدع هو المصدر الأساسي للمعرفة العلمية (أينشتاين).</p> </div> </div> </div>
402
+ <div class="flip-card" tabindex="0"> <div class="flip-card-inner"> <div class="flip-card-front"> <i class="fas fa-people-arrows text-4xl text-teal-600 mb-2"></i> <h4 class="font-bold">العقلانية المطبقة</h4> </div> <div class="flip-card-back"> <p>تؤكد على الحوار والتكامل بين العقل الرياضي والتجربة (باشلار).</p> </div> </div> </div>
403
+ <div class="flip-card" tabindex="0"> <div class="flip-card-inner"> <div class="flip-card-front"> <i class="fas fa-times-circle text-4xl text-red-500 mb-2"></i> <h4 class="font-bold">القابلية للتكذيب</h4> </div> <div class="flip-card-back"> <p>معيار بوبر للعلمية: النظرية علمية إذا أمكن تصور نتيجة تجريبية تدحضها.</p> </div> </div> </div>
404
+ <div class="flip-card" tabindex="0"> <div class="flip-card-inner"> <div class="flip-card-front"> <i class="fas fa-redo-alt text-4xl text-blue-600 mb-2"></i> <h4 class="font-bold">تعدد الاختبارات</h4> </div> <div class="flip-card-back"> <p>معيار تويليي للعلمية: ضرورة إخضاع النظرية لاختبارات متكررة ومتنوعة لضمان تماسكها.</p> </div> </div> </div>
405
+ <div class="flip-card" tabindex="0"> <div class="flip-card-inner"> <div class="flip-card-front"> <i class="fas fa-check-double text-4xl text-yellow-500 mb-2"></i> <h4 class="font-bold">التحقق التجريبي</h4> </div> <div class="flip-card-back"> <p>مبدأ (وضعي) يرى صدق النظرية في تطابقها مع الواقع التجريبي وقابليتها للإثبات (ينتقده بوبر).</p> </div> </div> </div>
406
+ <div class="flip-card" tabindex="0"> <div class="flip-card-inner"> <div class="flip-card-front"> <i class="fas fa-puzzle-piece text-4xl text-gray-500 mb-2"></i> <h4 class="font-bold">الباراديغم</h4> </div> <div class="flip-card-back"> <p>إطار نظري ومنهجي ومفاهيمي شامل يسود في فترة زمنية معينة داخل حقل علمي محدد (توماس كون).</p> </div> </div> </div>
407
+ </div>
408
+ </section>
409
+
410
+ <section class="mb-16">
411
+ <h2 class="text-3xl font-bold text-gray-800 mb-12 text-center axis-header">اختبر فهمك (أقسام منفصلة)</h2>
412
+
413
+ <div id="problematicsQuizSection" class="quiz-section">
414
+ <h3 class="quiz-title"><i class="fas fa-question-circle text-blue-500 mr-2"></i> اختبار الإشكاليات الفلسفية</h3>
415
+ <div class="space-y-6">
416
+ <div class="quiz-question">
417
+ <h4 class="font-semibold text-lg mb-3">س1: الإشكالية المحورية للمحور الأول (التجربة والتجريب) تدور حول:</h4>
418
+ <div class="space-y-2">
419
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qp1" value="a" data-correct="true" class="ml-2"> دور وطبيعة التجربة والتجريب وعلاقتهما بالعقل في بناء العلم.</label>
420
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qp1" value="b" class="ml-2"> البحث عن معيار التمييز بين النظريات العلمية.</label>
421
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qp1" value="c" class="ml-2"> تحديد هل العقلانية العلمية رياضية أم تطبيقية.</label>
422
+ </div>
423
+ </div>
424
+ <div class="quiz-question">
425
+ <h4 class="font-semibold text-lg mb-3">س2: المحور الثاني (العقلانية العلمية) يطرح إشكاليات حول:</h4>
426
+ <div class="space-y-2">
427
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qp2" value="a" class="ml-2"> الفرق بين الملاحظة والتجربة.</label>
428
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qp2" value="b" data-correct="true" class="ml-2"> طبيعة العقلانية في العلم المعاصر (رياضية مجردة أم تطبيقية حوارية).</label>
429
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qp2" value="c" class="ml-2"> معايير قبول أو رفض النظريات العلمية.</label>
430
+ </div>
431
+ </div>
432
+ <div class="quiz-question">
433
+ <h4 class="font-semibold text-lg mb-3">س3: الإشكالية الأساسية للمحور الثالث (معايير علمية النظريات) تتمحور حول:</h4>
434
+ <div class="space-y-2">
435
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qp3" value="a" class="ml-2"> دور الخيال في صياغة الفرضيات.</label>
436
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qp3" value="b" class="ml-2"> أهمية الحوار بين العقل والتجربة.</label>
437
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qp3" value="c" data-correct="true" class="ml-2"> تحديد المقاييس التي تجعل نظرية ما "علمية" في ظل تطور العلم.</label>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ <button id="submitProblematicsQuiz" class="mt-8 w-full bg-blue-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-blue-700 transition duration-300 text-lg">
442
+ إرسال إجابات الإشكاليات <i class="fas fa-paper-plane mr-2"></i>
443
+ </button>
444
+ <div id="problematicsResult" class="mt-6"></div>
445
+ </div>
446
+
447
+ <div id="conceptsQuizSection" class="quiz-section">
448
+ <h3 class="quiz-title"><i class="fas fa-book-open text-green-500 mr-2"></i> اختبار المفاهيم الفلسفية</h3>
449
+ <div class="space-y-6">
450
+ <div class="quiz-question">
451
+ <h4 class="font-semibold text-lg mb-3">س1: مفهوم <span class="text-green-600 font-bold">"التجريب"</span> يتميز عن "التجربة" بكونه:</h4>
452
+ <div class="space-y-2">
453
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qc1" value="a" data-correct="true" class="ml-2"> إعادة بناء الظاهرة في ظروف مراقبة بهدف التحقق من فرضية.</label>
454
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qc1" value="b" class="ml-2"> ملاحظة عفوية للواقع دون تدخل.</label>
455
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qc1" value="c" class="ml-2"> نشاطاً عقلياً خيالياً بحتاً.</label>
456
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qc1" value="d" class="ml-2"> مرادفاً للقانون العلمي النهائي.</label>
457
+ </div>
458
+ </div>
459
+ <div class="quiz-question">
460
+ <h4 class="font-semibold text-lg mb-3">س2: <span class="text-teal-600 font-bold">"العقلانية المطبقة"</span> عند باشلار تعني:</h4>
461
+ <div class="space-y-2">
462
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qc2" value="a" class="ml-2"> الاعتماد الكلي على العقل الرياضي المجرد.</label>
463
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qc2" value="b" data-correct="true" class="ml-2"> ضرورة الحوار والتكامل بين العقل والتجربة.</label>
464
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qc2" value="c" class="ml-2"> رفض دور التجربة في العلم.</label>
465
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qc2" value="d" class="ml-2"> اتباع المنهج التجريبي الكلاسيكي حرفياً.</label>
466
+ </div>
467
+ </div>
468
+ <div class="quiz-question">
469
+ <h4 class="font-semibold text-lg mb-3">س3: معيار <span class="text-red-600 font-bold">"القابلية للتكذيب"</span> الذي قدمه بوبر يعني أن النظرية العلمية يجب أن تكون:</h4>
470
+ <div class="space-y-2">
471
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qc3" value="a" class="ml-2"> قابلة للإثبات والتحقق بشكل قاطع.</label>
472
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qc3" value="b" class="ml-2"> متوافقة مع جميع النظريات الأخرى.</label>
473
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qc3" value="c" data-correct="true" class="ml-2"> قابلة للاختبار بحيث يمكن تصور نتيجة تدحضها.</label>
474
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qc3" value="d" class="ml-2"> مستمدة من الخيال العقلي فقط.</label>
475
+ </div>
476
+ </div>
477
+ <div class="quiz-question">
478
+ <h4 class="font-semibold text-lg mb-3">س4: <span class="text-blue-600 font-bold">"تعدد الاختبارات"</span> كمعيار لعلمية النظرية (عند تويليي) يؤكد على أهمية:</h4>
479
+ <div class="space-y-2">
480
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qc4" value="a" data-correct="true" class="ml-2"> إخضاع النظرية لاختبارات متكررة ومتنوعة لمواجهة تحديات جديدة.</label>
481
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qc4" value="b" class="ml-2"> الاكتفاء باختبار واحد ناجح للنظرية.</label>
482
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qc4" value="c" class="ml-2"> البحث عن التكذيب المنطقي للنظرية فقط.</label>
483
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qc4" value="d" class="ml-2"> بناء النظريات على أساس رياضي بحت.</label>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ <button id="submitConceptsQuiz" class="mt-8 w-full bg-green-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-green-700 transition duration-300 text-lg">
488
+ إرسال إجابات المفاهيم <i class="fas fa-paper-plane mr-2"></i>
489
+ </button>
490
+ <div id="conceptsResult" class="mt-6"></div>
491
+ </div>
492
+
493
+ <div id="stancesQuizSection" class="quiz-section">
494
+ <h3 class="quiz-title"><i class="fas fa-users text-purple-500 mr-2"></i> اختبار المواقف الفلسفية</h3>
495
+ <div class="space-y-6">
496
+ <div class="quiz-question">
497
+ <h4 class="font-semibold text-lg mb-3">س1: يرى <span class="text-green-700 font-bold">كلود برنارد</span> أن الباحث العلمي يجب أن يجمع بين:</h4>
498
+ <div class="space-y-2">
499
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qs1" value="a" data-correct="true" class="ml-2"> الملاحظة الدقيقة والتجريب الفعال القائم على الفرضية.</label>
500
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qs1" value="b" class="ml-2"> الخيال العلمي والتأمل الفلسفي فقط.</label>
501
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qs1" value="c" class="ml-2"> الاعتماد على التجربة الذهنية وحدها.</label>
502
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qs1" value="d" class="ml-2"> تكذيب النظريات الموجودة باستمرار.</label>
503
+ </div>
504
+ </div>
505
+ <div class="quiz-question">
506
+ <h4 class="font-semibold text-lg mb-3">س2: يؤكد <span class="text-purple-700 font-bold">روني طوم</span> على أن التجريب العلمي المعاصر، خاصة في الفيزياء، يتطلب:</h3>
507
+ <div class="space-y-2">
508
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qs2" value="a" class="ml-2"> العودة إلى المنهج التجريبي الكلاسيكي البحت.</label>
509
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qs2" value="b" data-correct="true" class="ml-2"> دمج التجربة المخبرية مع الخيال العقلي والتجربة الذهنية.</label>
510
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qs2" value="c" class="ml-2"> التركيز على الملاحظة الحسية المباشرة فقط.</label>
511
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qs2" value="d" class="ml-2"> البحث عن التحقق الإيجابي للنظريات.</label>
512
+ </div>
513
+ </div>
514
+ <div class="quiz-question">
515
+ <h4 class="font-semibold text-lg mb-3">س3: حسب <span class="text-indigo-700 font-bold">أينشتاين</span>، المبدأ الخلاق الأساسي في العلم يكمن في:</h3>
516
+ <div class="space-y-2">
517
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qs3" value="a" class="ml-2"> التجربة المخبرية الدقيقة.</label>
518
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qs3" value="b" data-correct="true" class="ml-2"> العقل الرياضي المبدع القادر على بناء المفاهيم والقوانين.</label>
519
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qs3" value="c" class="ml-2"> الحوار المستمر بين العلماء.</label>
520
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qs3" value="d" class="ml-2"> القدرة على تكذيب النظريات.</label>
521
+ </div>
522
+ </div>
523
+ <div class="quiz-question">
524
+ <h4 class="font-semibold text-lg mb-3">س4: يرى <span class="text-teal-700 font-bold">باشلار</span> أن العقلانية العلمية المعاصرة يجب أن تكون:</h3>
525
+ <div class="space-y-2">
526
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qs4" value="a" class="ml-2"> عقلانية رياضية مجردة ومنعزلة عن الواقع.</label>
527
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qs4" value="b" class="ml-2"> عقلانية كلاسيكية تتبع خطوات ديكارت.</label>
528
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qs4" value="c" data-correct="true" class="ml-2"> عقلانية مطبقة ومنفتحة، قائمة على الحوار بين العقل والتجربة.</label>
529
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qs4" value="d" class="ml-2"> عقلانية تركز على التحقق التجريبي فقط.</label>
530
+ </div>
531
+ </div>
532
+ <div class="quiz-question">
533
+ <h4 class="font-semibold text-lg mb-3">س5: المعيار الأساسي للحكم على علمية نظرية ما عند <span class="text-red-600 font-bold">كارل بوبر</span> هو:</h3>
534
+ <div class="space-y-2">
535
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qs5" value="a" class="ml-2"> مدى اتفاقها مع الحس السليم.</label>
536
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qs5" value="b" data-correct="true" class="ml-2"> قابليتها المنطقية للتكذيب أو التفنيد.</label>
537
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qs5" value="c" class="ml-2"> عدد العلماء الذين يؤمنون بها.</label>
538
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qs5" value="d" class="ml-2"> قدرتها على الصمود أمام اختبارات متعددة.</label>
539
+ </div>
540
+ </div>
541
+ <div class="quiz-question">
542
+ <h4 class="font-semibold text-lg mb-3">س6: يؤكد <span class="text-blue-600 font-bold">بيير تويليي</span> على أن ضمان تماسك النظرية ومواكبتها للتطور يتطلب:</h3>
543
+ <div class="space-y-2">
544
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qs6" value="a" class="ml-2"> البحث عن طريقة لتكذيبها منطقياً.</label>
545
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qs6" value="b" data-correct="true" class="ml-2"> إخضاعها المستمر لاختبارات متعددة ومتنوعة ومواجهتها بفروض جديدة.</label>
546
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qs6" value="c" class="ml-2"> عزل النظرية عن أي فرضيات جديدة قد تتحدىها.</label>
547
+ <label class="flex items-center cursor-pointer"><input type="radio" name="qs6" value="d" class="ml-2"> الاعتماد على بداهة النظرية العقلية.</label>
548
+ </div>
549
+ </div>
550
+ </div>
551
+ <button id="submitStancesQuiz" class="mt-8 w-full bg-purple-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-purple-700 transition duration-300 text-lg">
552
+ إرسال إجابات المواقف <i class="fas fa-paper-plane mr-2"></i>
553
+ </button>
554
+ <div id="stancesResult" class="mt-6"></div>
555
+ </div>
556
+
557
+ </section>
558
+ </div>
559
+
560
+ <a href="#main-concepts-overview" onclick="event.preventDefault(); scrollToElement('#main-concepts-overview');"
561
+ 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">
562
+ <i class="fas fa-arrow-up text-xl" aria-hidden="true"></i>
563
+ <span class="sr-only">الصعود للأعلى</span> <!-- Added for screen readers -->
564
+ </a>
565
+
566
+ <script>
567
+ document.addEventListener('DOMContentLoaded', () => {
568
+ // Add fade-in animation to body
569
+ document.body.classList.add('fade-in');
570
+
571
+ // Attach event listeners to respective submit buttons
572
+ document.getElementById('submitProblematicsQuiz')?.addEventListener('click', () => submitSpecificQuiz('problematics'));
573
+ document.getElementById('submitConceptsQuiz')?.addEventListener('click', () => submitSpecificQuiz('concepts'));
574
+ document.getElementById('submitStancesQuiz')?.addEventListener('click', () => submitSpecificQuiz('stances'));
575
+
576
+ // Make flip cards accessible via keyboard
577
+ const flipCards = document.querySelectorAll('.flip-card');
578
+ flipCards.forEach(card => {
579
+ card.addEventListener('keypress', function (e) {
580
+ if (e.key === 'Enter' || e.key === ' ') {
581
+ // Toggle flip or simply trigger hover/focus styles if using focus-within
582
+ // For simplicity with current CSS, just ensure focus triggers it
583
+ card.focus(); // Ensure it's focused
584
+ }
585
+ });
586
+ });
587
+ });
588
+
589
+ // Generic function to handle submission for any quiz type
590
+ function submitSpecificQuiz(quizType) {
591
+ const quizSection = document.getElementById(`${quizType}QuizSection`);
592
+ if (!quizSection) {
593
+ console.error(`Quiz section not found for type: ${quizType}`);
594
+ return;
595
+ }
596
+
597
+ const questions = quizSection.querySelectorAll(':scope > .space-y-6 > .quiz-question');
598
+ const totalQuestions = questions.length;
599
+ const resultDiv = document.getElementById(`${quizType}Result`);
600
+ let score = 0;
601
+
602
+ // Define question prefixes for radio button names
603
+ let namePrefix = '';
604
+ if (quizType === 'problematics') namePrefix = 'qp';
605
+ else if (quizType === 'concepts') namePrefix = 'qc';
606
+ else if (quizType === 'stances') namePrefix = 'qs';
607
+ else {
608
+ console.error(`Unknown quiz type: ${quizType}`);
609
+ return;
610
+ }
611
+
612
+ resultDiv.innerHTML = ''; // Clear previous results
613
+ clearQuizFormatting(quizSection); // Clear previous formatting
614
+
615
+ questions.forEach((questionDiv, index) => {
616
+ const questionNumber = index + 1;
617
+ const inputName = `${namePrefix}${questionNumber}`;
618
+ const selectedAnswer = questionDiv.querySelector(`input[name="${inputName}"]:checked`);
619
+ const correctAnswerInput = questionDiv.querySelector(`input[name="${inputName}"][data-correct="true"]`);
620
+
621
+ // Always highlight the correct answer's label in green
622
+ if (correctAnswerInput) {
623
+ correctAnswerInput.parentElement.classList.add('text-green-600', 'font-semibold');
624
+ // Add a small check icon next to the correct answer
625
+ // let checkIcon = correctAnswerInput.parentElement.querySelector('.correct-icon');
626
+ // if (!checkIcon) {
627
+ // checkIcon = document.createElement('i');
628
+ // checkIcon.className = 'fas fa-check ml-2 text-green-600 correct-icon';
629
+ // correctAnswerInput.parentElement.appendChild(checkIcon);
630
+ // }
631
+ }
632
+
633
+ if (selectedAnswer) {
634
+ if (selectedAnswer.hasAttribute('data-correct')) {
635
+ score++;
636
+ // Already highlighted green above
637
+ } else {
638
+ // Highlight the selected incorrect answer in red
639
+ selectedAnswer.parentElement.classList.add('text-red-600', 'font-semibold');
640
+ // Add a small times icon next to the incorrect answer
641
+ // let timesIcon = selectedAnswer.parentElement.querySelector('.incorrect-icon');
642
+ // if (!timesIcon) {
643
+ // timesIcon = document.createElement('i');
644
+ // timesIcon.className = 'fas fa-times ml-2 text-red-600 incorrect-icon';
645
+ // selectedAnswer.parentElement.appendChild(timesIcon);
646
+ // }
647
+ }
648
+ } else {
649
+ // Optional: Highlight unanswered questions' titles
650
+ const questionTitle = questionDiv.querySelector('h4');
651
+ if(questionTitle) questionTitle.classList.add('text-yellow-600', 'font-bold');
652
+ }
653
+ });
654
+
655
+ const percentage = totalQuestions > 0 ? Math.round((score / totalQuestions) * 100) : 0;
656
+
657
+ let feedbackMessage = '';
658
+ let resultClass = '';
659
+ let buttonClass = '';
660
+ // Determine button color based on quiz type
661
+ if (quizType === 'problematics') buttonClass = 'bg-blue-600 hover:bg-blue-700';
662
+ else if (quizType === 'concepts') buttonClass = 'bg-green-600 hover:bg-green-700';
663
+ else if (quizType === 'stances') buttonClass = 'bg-purple-600 hover:bg-purple-700';
664
+ else buttonClass = 'bg-gray-600 hover:bg-gray-700'; // Fallback
665
+
666
+ // Generate feedback message and result div class based on score
667
+ if (percentage >= 80) {
668
+ feedbackMessage = `ممتاز! (${score}/${totalQuestions}) إجابات صحيحة.`;
669
+ resultClass = 'bg-green-100 text-green-800 border border-green-200';
670
+ } else if (percentage >= 50) {
671
+ feedbackMessage = `جيد! (${score}/${totalQuestions}) إجابات صحيحة. تحتاج لمراجعة بسيطة.`;
672
+ resultClass = 'bg-yellow-100 text-yellow-800 border border-yellow-200';
673
+ } else {
674
+ feedbackMessage = `تحتاج إلى مراجعة هذا القسم. (${score}/${totalQuestions}) إجابات صحيحة.`;
675
+ resultClass = 'bg-red-100 text-red-800 border border-red-200';
676
+ }
677
+
678
+ // Display the result with feedback and retry button
679
+ resultDiv.className = `mt-6 p-4 rounded-lg shadow ${resultClass}`;
680
+ resultDiv.innerHTML = `
681
+ <h4 class="font-bold text-lg mb-2">النتيجة: ${percentage}%</h4>
682
+ <p class="mb-4">${feedbackMessage}</p>
683
+ <button onclick="retryQuiz('${quizType}')" class="w-full md:w-auto ${buttonClass} text-white py-2 px-5 rounded-lg font-medium transition duration-300 text-base">
684
+ أعد المحاولة <i class="fas fa-redo mr-1"></i>
685
+ </button>
686
+ `;
687
+
688
+ // Scroll result into view smoothly
689
+ resultDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
690
+ }
691
+
692
+ // Function to clear quiz formatting for a specific section
693
+ function clearQuizFormatting(quizSection) {
694
+ if (!quizSection) return;
695
+ const quizContent = quizSection.querySelector(':scope > .space-y-6');
696
+ if (!quizContent) return;
697
+
698
+ // Remove feedback styles from labels
699
+ const labels = quizContent.querySelectorAll('label');
700
+ labels.forEach(label => {
701
+ label.classList.remove('text-green-600', 'text-red-600', 'font-semibold');
702
+ // Remove any icons added during grading
703
+ // const icons = label.querySelectorAll('.correct-icon, .incorrect-icon');
704
+ // icons.forEach(icon => icon.remove());
705
+ });
706
+ // Remove highlight from unanswered question titles
707
+ const questionTitles = quizContent.querySelectorAll('.quiz-question h4');
708
+ questionTitles.forEach(title => title.classList.remove('text-yellow-600', 'font-bold'));
709
+ }
710
+
711
+ // Retry function for a specific quiz
712
+ function retryQuiz(quizType) {
713
+ const quizSection = document.getElementById(`${quizType}QuizSection`);
714
+ const resultDiv = document.getElementById(`${quizType}Result`);
715
+
716
+ if(quizSection && resultDiv) {
717
+ // Clear radio buttons
718
+ const radioButtons = quizSection.querySelectorAll('input[type="radio"]');
719
+ radioButtons.forEach(rb => rb.checked = false);
720
+
721
+ // Clear result div
722
+ resultDiv.innerHTML = '';
723
+ resultDiv.className = 'mt-6'; // Reset result div style
724
+
725
+ // Clear formatting
726
+ clearQuizFormatting(quizSection);
727
+
728
+ // Scroll to the top of that specific quiz section
729
+ quizSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
730
+ } else {
731
+ console.error(`Could not find section or result div for quiz type: ${quizType}`);
732
+ // Fallback: scroll to top of page if quiz section not found
733
+ scrollToElement('body'); // Ensure this function exists or use window.scrollTo
734
+ }
735
+ }
736
+
737
+ // Generic smooth scroll function
738
+ function scrollToElement(selector) {
739
+ const element = document.querySelector(selector);
740
+ if (element) {
741
+ element.scrollIntoView({ behavior: 'smooth', block: 'start' });
742
+ } else {
743
+ // Fallback for 'body' or other top-level elements
744
+ window.scrollTo({ top: 0, behavior: 'smooth' });
745
+ }
746
+ }
747
+ </script>
748
+
749
+ <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/theory-experiment" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
750
+ </html>