Islamic quiz
<!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>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
margin: 20px;
background-color: #f4f4f4;
color: #333;
}
.quiz-container {
background-color: #fff;
padding: 25px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
max-width: 800px;
margin: 30px auto;
}
h1, h2 {
text-align: center;
color: #006400; /* Dark Green */
border-bottom: 2px solid #90EE90; /* Light Green */
padding-bottom: 10px;
margin-bottom: 20px;
}
.page-section h2 {
color: #555;
border-bottom: 1px dashed #ccc;
font-size: 1.4em;
}
.question-container {
margin-bottom: 25px;
padding: 15px;
border: 1px solid #eee;
border-radius: 5px;
background-color: #fdfdfd;
}
.question-text {
font-weight: bold;
margin-bottom: 10px;
font-size: 1.1em;
color: #333;
}
.options label {
display: block;
margin-bottom: 8px;
padding: 8px 12px;
border-radius: 4px;
border: 1px solid #ddd;
background-color: #fff;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
.options label:hover {
background-color: #e9e9e9;
}
.options input[type="radio"] {
margin-left: 10px; /* Adjusted for RTL */
margin-right: 0;
position: relative;
top: 2px;
}
button {
display: block;
width: 100%;
padding: 12px;
background-color: #008000; /* Green */
color: white;
border: none;
border-radius: 5px;
font-size: 1.2em;
cursor: pointer;
margin-top: 30px;
transition: background-color 0.3s;
}
button:hover {
background-color: #006400; /* Darker Green */
}
#results {
margin-top: 30px;
padding: 15px;
border-radius: 5px;
text-align: center;
font-size: 1.2em;
font-weight: bold;
}
.correct {
border-left: 5px solid #34A853; /* Green indicator for correct - adjusted for RTL */
border-right: none;
}
.incorrect {
border-left: 5px solid #EA4335; /* Red indicator for incorrect - adjusted for RTL */
border-right: none;
}
.feedback {
font-size: 0.9em;
margin-top: 5px;
padding-right: 10px; /* Adjusted for RTL */
}
.correct-feedback {
color: #34A853; /* Green */
}
.incorrect-feedback {
color: #EA4335; /* Red */
}
/* Style for correct answer label when checked */
.options label.correct-answer-reveal {
background-color: #d4edda; /* Light green */
border-color: #c3e6cb;
}
</style>
</head>
<body>
<div class="quiz-container">
<h1>اختبار إسلامي شامل</h1>
<form id="quiz-form">
<!-- Page 1 Questions -->
<div class="page-section">
<h2>أسئلة من الصفحة الأولى (أسماء الله الحسنى والتسمية)</h2>
<div class="question-container" id="q1-container">
<p class="question-text">1. كيف تثبت أسماء الله تعالى وصفاته؟</p>
<div class="options">
<label><input type="radio" name="q1" value="a"> بالعقل والتفكير العميق</label>
<label><input type="radio" name="q1" value="b"> بالكتاب والسنة (توقيفية)</label>
<label><input type="radio" name="q1" value="c"> بإجماع الصالحين فقط</label>
<label><input type="radio" name="q1" value="d"> بالقياس على صفات المخلوقين</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q2-container">
<p class="question-text">2. ما معنى "الإلحاد" في أسماء الله تعالى المنهي عنه؟</p>
<div class="options">
<label><input type="radio" name="q2" value="a"> إنكار وجود الله تعالى</label>
<label><input type="radio" name="q2" value="b"> الميل بها عن الحق، كتحريف معانيها أو تسمية غير الله بها</label>
<label><input type="radio" name="q2" value="c"> الإكثار من الدعاء بأسماء الله الحسنى</label>
<label><input type="radio" name="q2" value="d"> كتابة أسماء الله الحسنى على الجدران</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q3-container">
<p class="question-text">3. أي مما يلي يعتبر من طرق التوسل المشروعة بأسماء الله؟</p>
<div class="options">
<label><input type="radio" name="q3" value="a"> دعاء الله باسم عام يشمل كل الحاجات</label>
<label><input type="radio" name="q3" value="b"> دعاء الله باسم يتناسب مع الحاجة المطلوبة (مثل يا رزاق ارزقني)</label>
<label><input type="radio" name="q3" value="c"> التوسل بجاه النبي عند الدعاء بأسماء الله</label>
<label><input type="radio" name="q3" value="d"> القسم بأسماء الله على تحقيق أمر دنيوي</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q4-container">
<p class="question-text">4. ما معنى اسم الله "الرحمن"؟</p>
<div class="options">
<label><input type="radio" name="q4" value="a"> الذي يستر الذنب ويتجاوز عنه</label>
<label><input type="radio" name="q4" value="b"> الكثير الخير والنفع والعطاء</label>
<label><input type="radio" name="q4" value="c"> ذو الرحمة الواسعة التي شملت جميع المخلوقات</label>
<label><input type="radio" name="q4" value="d"> الذي له الأمر والنهي والتصرف المطلق في خلقه</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q5-container">
<p class="question-text">5. ما معنى اسم الله "الغفور"؟</p>
<div class="options">
<label><input type="radio" name="q5" value="a"> الذي يستر الذنب على صاحبه ولا يفضحه ولا يحاسبه عليه</label>
<label><input type="radio" name="q5" value="b"> المالك المتصرف</label>
<label><input type="radio" name="q5" value="c"> واسع الرحمة</label>
<label><input type="radio" name="q5" value="d"> المعطي الكريم</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q6-container">
<p class="question-text">6. ما معنى اسم الله "الكريم"؟</p>
<div class="options">
<label><input type="radio" name="q6" value="a"> شديد العقاب</label>
<label><input type="radio" name="q6" value="b"> الكثير الخير، الجواد المعطي الذي لا ينفد عطاؤه</label>
<label><input type="radio" name="q6" value="c"> الملك المطلق</label>
<label><input type="radio" name="q6" value="d"> غافر الذنوب</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q7-container">
<p class="question-text">7. ما معنى اسم الله "الملك"؟</p>
<div class="options">
<label><input type="radio" name="q7" value="a"> ذو الرحمة الواسعة</label>
<label><input type="radio" name="q7" value="b"> الغفور للذنوب</label>
<label><input type="radio" name="q7" value="c"> الذي له الأمر والنهي والتصرف المطلق في خلقه بأمره ونهيه</label>
<label><input type="radio" name="q7" value="d"> كثير العطاء</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q8-container">
<p class="question-text">8. أي نوع من التسمي بالله المذكور يشير إلى الأسماء المختصة بالله تعالى وحده مثل (الله، الرحمن)؟</p>
<div class="options">
<label><input type="radio" name="q8" value="a"> أسماء يجوز التسمي بها والتعبيد لها</label>
<label><input type="radio" name="q8" value="b"> أسماء خاصة بالله لا يجوز التسمي بها ولا التعبيد لغير الله بها</label>
<label><input type="radio" name="q8" value="c"> أسماء مشتركة يمكن أن يوصف بها البشر</label>
<label><input type="radio" name="q8" value="d"> أسماء الملائكة</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q9-container">
<p class="question-text">9. ما أهمية معرفة أسماء الله الحسنى؟</p>
<div class="options">
<label><input type="radio" name="q9" value="a"> هي أساس العبادة ومعرفة الله تزيد الإيمان والمحبة</label>
<label><input type="radio" name="q9" value="b"> فقط لحفظها وترديدها دون فهم</label>
<label><input type="radio" name="q9" value="c"> لمعرفة الغيب والمستقبل</label>
<label><input type="radio" name="q9" value="d"> للتفاخر بها على الآخرين</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q10-container">
<p class="question-text">10. أي الأسماء التالية لا يجوز التسمية بها أو التعبيد لغير الله بها قطعاً؟</p>
<div class="options">
<label><input type="radio" name="q10" value="a"> عبد العزيز</label>
<label><input type="radio" name="q10" value="b"> عبد الكريم</label>
<label><input type="radio" name="q10" value="c"> عبد الله</label>
<label><input type="radio" name="q10" value="d"> الرحمن (التسمية بالاسم نفسه دون تعبيد)</label>
</div>
<div class="feedback"></div>
</div>
</div>
<!-- Page 2 Questions -->
<div class="page-section">
<h2>أسئلة من الصفحة الثانية (التسمية وحسن الظن بالله)</h2>
<div class="question-container" id="q11-container">
<p class="question-text">11. ما حكم التسمية بـ "عبد النبي" أو "عبد الرسول"؟</p>
<div class="options">
<label><input type="radio" name="q11" value="a"> مستحب</label>
<label><input type="radio" name="q11" value="b"> مباح</label>
<label><input type="radio" name="q11" value="c"> مكروه</label>
<label><input type="radio" name="q11" value="d"> محرم (شرك)</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q12-container">
<p class="question-text">12. ما حكم التسمية بـ "عبد الشمس" أو "عبد الكعبة"؟</p>
<div class="options">
<label><input type="radio" name="q12" value="a"> جائز لأنهما من مخلوقات الله العظيمة</label>
<label><input type="radio" name="q12" value="b"> مستحب لتعظيم شعائر الله</label>
<label><input type="radio" name="q12" value="c"> محرم لأنه تعبيد لغير الله تعالى</label>
<label><input type="radio" name="q12" value="d"> مكروه فقط</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q13-container">
<p class="question-text">13. أي من الأسماء التالية يجوز التعبيد له (أي أن يقال "عبد فلان")؟</p>
<div class="options">
<label><input type="radio" name="q13" value="a"> عبد العزيز</label>
<label><input type="radio" name="q13" value="b"> عبد العزى</label>
<label><input type="radio" name="q13" value="c"> عبد مناف</label>
<label><input type="radio" name="q13" value="d"> عبد الحارث</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q14-container">
<p class="question-text">14. ما هو المراد بـ "حسن الظن بالله تعالى"؟</p>
<div class="options">
<label><input type="radio" name="q14" value="a"> توقع الخير من الله مع ترك العمل</label>
<label><input type="radio" name="q14" value="b"> اعتقاد ما يليق بالله من الجود والكرم والرحمة مع فعل الأسباب</label>
<label><input type="radio" name="q14" value="c"> اليقين بأن الله لن يعذب أحداً</label>
<label><input type="radio" name="q14" value="d"> مجرد التمني دون يقين أو عمل</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q15-container">
<p class="question-text">15. ما هي أركان حسن الظن بالله؟</p>
<div class="options">
<label><input type="radio" name="q15" value="a"> الثقة بالله فقط</label>
<label><input type="radio" name="q15" value="b"> فعل الأسباب المأمور بها مع الثقة والاعتماد على الله</label>
<label><input type="radio" name="q15" value="c"> ترك الأسباب والتوكل فقط</label>
<label><input type="radio" name="q15" value="d"> الدعاء المستمر دون عمل</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q16-container">
<p class="question-text">16. ما حكم "حسن الظن بالله تعالى"؟</p>
<div class="options">
<label><input type="radio" name="q16" value="a"> سنة مؤكدة</label>
<label><input type="radio" name="q16" value="b"> واجب</label>
<label><input type="radio" name="q16" value="c"> مستحب</label>
<label><input type="radio" name="q16" value="d"> مباح</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q17-container">
<p class="question-text">17. ما الحكمة من وجوب حسن الظن بالله؟</p>
<div class="options">
<label><input type="radio" name="q17" value="a"> لأنه أدب مع الله تعالى ويؤدي إلى الطمأنينة</label>
<label><input type="radio" name="q17" value="b"> للحصول على الرزق السريع</label>
<label><input type="radio" name="q17" value="c"> لتجنب غضب الناس</label>
<label><input type="radio" name="q17" value="d"> لأنه عادة حسنة فقط</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q18-container">
<p class="question-text">18. أي مما يلي يعد من أسباب حسن الظن بالله؟</p>
<div class="options">
<label><input type="radio" name="q18" value="a"> الجهل بأسماء الله وصفاته</label>
<label><input type="radio" name="q18" value="b"> تدبر القرآن الكريم ومعرفة سعة رحمة الله</label>
<label><input type="radio" name="q18" value="c"> اليأس من رحمة الله</label>
<label><input type="radio" name="q18" value="d"> اتباع هوى النفس</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q19-container">
<p class="question-text">19. سبب آخر لحسن الظن بالله هو:</p>
<div class="options">
<label><input type="radio" name="q19" value="a"> النظر إلى كثرة المعاصي</label>
<label><input type="radio" name="q19" value="b"> معرفة حلم الله وعفوه وصبره على عباده</label>
<label><input type="radio" name="q19" value="c"> تذكر الموت فقط</label>
<label><input type="radio" name="q19" value="d"> مقارنة النفس بالصالحين</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q20-container">
<p class="question-text">20. حسن الظن بالله يتطلب:</p>
<div class="options">
<label><input type="radio" name="q20" value="a"> ترك الذنوب والمعاصي وفعل الطاعات</label>
<label><input type="radio" name="q20" value="b"> الاعتقاد بأن الله سيغفر مهما فعل العبد</label>
<label><input type="radio" name="q20" value="c"> الأمن من مكر الله</label>
<label><input type="radio" name="q20" value="d"> عدم الخوف من الله أبداً</label>
</div>
<div class="feedback"></div>
</div>
</div>
<!-- Page 3 Questions -->
<div class="page-section">
<h2>أسئلة من الصفحة الثالثة (نواقض حسن الظن وتفسير سورة الملك)</h2>
<div class="question-container" id="q21-container">
<p class="question-text">21. أي مما يلي يُعتبر من نواقض ومبطلات حسن الظن بالله؟</p>
<div class="options">
<label><input type="radio" name="q21" value="a"> التوبة الصادقة</label>
<label><input type="radio" name="q21" value="b"> اتباع خطوات الشيطان ووساوسه</label>
<label><input type="radio" name="q21" value="c"> الدعاء بيقين</label>
<label><input type="radio" name="q21" value="d"> ذكر الله كثيراً</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q22-container">
<p class="question-text">22. ما هو أثر "القنوط واليأس من رحمة الله" على حسن الظن؟</p>
<div class="options">
<label><input type="radio" name="q22" value="a"> يقويه ويزيده</label>
<label><input type="radio" name="q22" value="b"> لا يؤثر عليه</label>
<label><input type="radio" name="q22" value="c"> ينقضه ويضعفه وهو من كبائر الذنوب</label>
<label><input type="radio" name="q22" value="d"> يجعله أمراً مستحباً</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q23-container">
<p class="question-text">23. ضعف الإيمان واليقين يؤدي إلى:</p>
<div class="options">
<label><input type="radio" name="q23" value="a"> زيادة حسن الظن بالله</label>
<label><input type="radio" name="q23" value="b"> ضعف حسن الظن بالله وسوء الظن به</label>
<label><input type="radio" name="q23" value="c"> الثبات على الطاعة</label>
<label><input type="radio" name="q23" value="d"> عدم الحاجة إلى الدعاء</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q24-container">
<p class="question-text">24. ما هو الموضوع الرئيسي الذي تتناوله بداية سورة الملك؟</p>
<div class="options">
<label><input type="radio" name="q24" value="a"> أحكام الزكاة</label>
<label><input type="radio" name="q24" value="b"> قصة موسى عليه السلام مع فرعون</label>
<label><input type="radio" name="q24" value="c"> بيان عظمة ملك الله وقدرته وإتقان خلقه</label>
<label><input type="radio" name="q24" value="d"> وصف الجنة والنار بالتفصيل</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q25-container">
<p class="question-text">25. ما معنى كلمة "تبارك" في قوله تعالى {تَبَارَكَ الَّذِي بِيَدِهِ الْمُلْكُ}؟</p>
<div class="options">
<label><input type="radio" name="q25" value="a"> تقدس وتعالى وكثر خيره</label>
<label><input type="radio" name="q25" value="b"> أهلك ودمر</label>
<label><input type="radio" name="q25" value="c"> خلق وأوجد</label>
<label><input type="radio" name="q25" value="d"> نسي وترك</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q26-container">
<p class="question-text">26. ما معنى قوله تعالى {وَهُوَ عَلَى كُلِّ شَيْءٍ قَدِيرٌ}؟</p>
<div class="options">
<label><input type="radio" name="q26" value="a"> الله عالم بكل شيء</label>
<label><input type="radio" name="q26" value="b"> الله مالك كل شيء</label>
<label><input type="radio" name="q26" value="c"> الله قادر على كل شيء لا يعجزه شيء</label>
<label><input type="radio" name="q26" value="d"> الله خالق كل شيء</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q27-container">
<p class="question-text">27. ما الحكمة من خلق الموت والحياة كما ذكرت السورة؟</p>
<div class="options">
<label><input type="radio" name="q27" value="a"> لمجرد التنوع في الكون</label>
<label><input type="radio" name="q27" value="b"> ليختبر الله الناس أيهم أحسن عملاً</label>
<label><input type="radio" name="q27" value="c"> ليعرف الأقوى من الأضعف</label>
<label><input type="radio" name="q27" value="d"> ليتم تعمير الأرض فقط</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q28-container">
<p class="question-text">28. ما معنى كلمة "فُطُور" في قوله تعالى {فَارْجِعِ الْبَصَرَ هَلْ تَرَى مِنْ فُطُورٍ}؟</p>
<div class="options">
<label><input type="radio" name="q28" value="a"> نجوم لامعة</label>
<label><input type="radio" name="q28" value="b"> شقوق أو عيوب أو خلل</label>
<label><input type="radio" name="q28" value="c"> أبواب مفتوحة</label>
<label><input type="radio" name="q28" value="d"> ألوان زاهية</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q29-container">
<p class="question-text">29. إلى أي شيء تدعو الآيات في بداية سورة الملك للنظر والتفكر؟</p>
<div class="options">
<label><input type="radio" name="q29" value="a"> النظر في أحوال الأمم السابقة</label>
<label><input type="radio" name="q29" value="b"> التفكر في خلق السماوات بإتقان</label>
<label><input type="radio" name="q29" value="c"> التأمل في قصص الأنبياء</label>
<label><input type="radio" name="q29" value="d"> البحث عن الكنوز في الأرض</label>
</div>
<div class="feedback"></div>
</div>
<div class="question-container" id="q30-container">
<p class="question-text">30. ما معنى كلمة "يَحُورَ" كما وردت في معاني الكلمات (تشير إلى الرجوع)؟</p>
<div class="options">
<label><input type="radio" name="q30" value="a"> يهلك</label>
<label><input type="radio" name="q30" value="b"> يرجع (إلى الحياة أو إلى الله)</label>
<label><input type="radio" name="q30" value="c"> يطير</label>
<label><input type="radio" name="q30" value="d"> ينسى</label>
</div>
<div class="feedback"></div>
</div>
</div>
<button type="button" onclick="checkAnswers()">عرض النتائج</button>
<div id="results"></div>
</form>
</div>
<script>
const correctAnswers = {
// Page 1
q1: 'b', q2: 'b', q3: 'b', q4: 'c', q5: 'a',
q6: 'b', q7: 'c', q8: 'b', q9: 'a', q10: 'd',
// Page 2
q11: 'd', q12: 'c', q13: 'a', q14: 'b', q15: 'b',
q16: 'b', q17: 'a', q18: 'b', q19: 'b', q20: 'a',
// Page 3
q21: 'b', q22: 'c', q23: 'b', q24: 'c', q25: 'a',
q26: 'c', q27: 'b', q28: 'b', q29: 'b', q30: 'b'
};
function checkAnswers() {
let score = 0;
const totalQuestions = Object.keys(correctAnswers).length;
const form = document.getElementById('quiz-form');
for (let i = 1; i <= totalQuestions; i++) {
const questionKey = 'q' + i;
const container = document.getElementById(questionKey + '-container');
const feedbackEl = container.querySelector('.feedback');
const selectedOption = form.elements[questionKey].value;
const radios = form.elements[questionKey];
let answered = false;
let userAnswer = null;
// Clear previous feedback and styles
feedbackEl.textContent = '';
feedbackEl.className = 'feedback'; // Reset class
container.classList.remove('correct', 'incorrect');
// Remove correct answer reveal style from all labels in this question
const labels = container.querySelectorAll('.options label');
labels.forEach(label => label.classList.remove('correct-answer-reveal'));
// Find the selected answer
for (const radio of radios) {
if (radio.checked) {
answered = true;
userAnswer = radio.value;
break;
}
}
if (answered) {
const correctAnswer = correctAnswers[questionKey];
const correctAnswerLabel = container.querySelector(`input[value="${correctAnswer}"]`).parentElement;
if (userAnswer === correctAnswer) {
score++;
container.classList.add('correct');
feedbackEl.textContent = 'إجابة صحيحة!';
feedbackEl.classList.add('correct-feedback');
} else {
container.classList.add('incorrect');
feedbackEl.textContent = `إجابة خاطئة. الصحيح هو الخيار الموافق لـ: ${correctAnswerLabel.textContent.trim().split('. ')[1]}`; // Show text of correct answer
feedbackEl.classList.add('incorrect-feedback');
// Highlight the correct answer label
correctAnswerLabel.classList.add('correct-answer-reveal');
}
} else {
// Handle unanswered questions
container.classList.add('incorrect'); // Mark as incorrect if unanswered
feedbackEl.textContent = 'لم يتم الإجابة على هذا السؤال.';
feedbackEl.classList.add('incorrect-feedback');
// Highlight the correct answer label even if unanswered
const correctAnswer = correctAnswers[questionKey];
const correctAnswerLabel = container.querySelector(`input[value="${correctAnswer}"]`).parentElement;
correctAnswerLabel.classList.add('correct-answer-reveal');
}
}
const resultsEl = document.getElementById('results');
const percentage = ((score / totalQuestions) * 100).toFixed(2);
resultsEl.innerHTML = `لقد حصلت على ${score} من ${totalQuestions} (${percentage}%)`;
resultsEl.style.backgroundColor = percentage >= 50 ? '#d4edda' : '#f8d7da'; // Green for pass, Red for fail (e.g., 50%)
resultsEl.style.color = percentage >= 50 ? '#155724' : '#721c24';
resultsEl.style.borderColor = percentage >= 50 ? '#c3e6cb' : '#f5c6cb';
resultsEl.style.border = '1px solid';
// Scroll to results for better visibility
resultsEl.scrollIntoView({ behavior: 'smooth' });
}
</script>