اختبار ديني تفاعلي
الدين والروحانياتar
<!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>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
color: #fff;
min-height: 100vh;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.container {
width: 100%;
max-width: 800px;
background: rgba(0, 0, 0, 0.7);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
overflow: hidden;
padding: 30px;
position: relative;
}
.header {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #c9a145;
}
.header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
color: #c9a145;
text-shadow: 0 0 10px rgba(201, 161, 69, 0.5);
}
.header p {
font-size: 1.2rem;
color: #ddd;
}
.progress-container {
width: 100%;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
height: 20px;
margin: 20px 0;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, #c9a145, #e6c56f);
width: 0%;
transition: width 0.5s ease;
border-radius: 10px;
}
.question-container {
margin: 20px 0;
padding: 20px;
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
border: 1px solid rgba(201, 161, 69, 0.3);
}
.question-number {
font-size: 1.2rem;
color: #c9a145;
margin-bottom: 10px;
}
.question-text {
font-size: 1.5rem;
margin-bottom: 25px;
line-height: 1.6;
font-weight: bold;
}
.options-container {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.option {
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(201, 161, 69, 0.3);
border-radius: 12px;
padding: 15px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
font-size: 1.2rem;
}
.option:hover {
background: rgba(201, 161, 69, 0.2);
transform: translateY(-3px);
}
.option.correct {
background: rgba(40, 167, 69, 0.3);
border-color: #28a745;
animation: pulse 0.5s;
}
.option.incorrect {
background: rgba(220, 53, 69, 0.3);
border-color: #dc3545;
}
.option-letter {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(201, 161, 69, 0.3);
text-align: center;
line-height: 40px;
margin-left: 15px;
font-weight: bold;
flex-shrink: 0;
}
.result-container {
text-align: center;
display: none;
padding: 30px;
}
.result-container h2 {
font-size: 2.5rem;
color: #c9a145;
margin-bottom: 20px;
}
.result-container p {
font-size: 1.8rem;
margin: 20px 0;
color: #fff;
}
.score {
font-size: 3rem;
color: #c9a145;
margin: 20px 0;
font-weight: bold;
}
.celebration {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
z-index: 10;
}
.firework {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
background: #c9a145;
box-shadow: 0 0 10px #c9a145;
animation: firework 1.5s forwards;
}
.restart-btn {
background: linear-gradient(to right, #c9a145, #e6c56f);
color: #1a2a6c;
border: none;
padding: 15px 40px;
font-size: 1.2rem;
border-radius: 50px;
cursor: pointer;
margin-top: 30px;
font-weight: bold;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.restart-btn:hover {
transform: scale(1.05);
box-shadow: 0 7px 20px rgba(0, 0, 0, 0.4);
}
.celebration-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4rem;
color: #c9a145;
text-align: center;
text-shadow: 0 0 20px rgba(201, 161, 69, 0.8);
font-weight: bold;
animation: celebration 2s infinite;
z-index: 20;
display: none;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes firework {
0% { transform: translateY(0) rotate(0); opacity: 1; }
100% { transform: translateY(-200px) rotate(360deg); opacity: 0; }
}
@keyframes celebration {
0% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.1); }
100% { transform: translate(-50%, -50%) scale(1); }
}
@media (max-width: 768px) {
.container {
padding: 15px;
}
.header h1 {
font-size: 2rem;
}
.question-text {
font-size: 1.3rem;
}
.option {
padding: 12px;
font-size: 1.1rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>اختبار ديني تفاعلي</h1>
<p>أسئلة عن العنصرة وصيام الرسل</p>
</div>
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>
<div class="question-container" id="questionContainer">
<div class="question-number" id="questionNumber">السؤال ١ من ١٢</div>
<div class="question-text" id="questionText"></div>
<div class="options-container" id="optionsContainer"></div>
</div>
<div class="result-container" id="resultContainer">
<h2>تهانينا! لقد أكملت الاختبار</h2>
<p>درجتك: <span class="score" id="score">0</span> من 12</p>
<p>كل سنة وأنتم طيبين!</p>
<button class="restart-btn" id="restartBtn">إعادة الاختبار</button>
</div>
</div>
<div class="celebration" id="celebration"></div>
<div class="celebration-text" id="celebrationText">كل سنة وأنتم طيبين!</div>
<audio id="correctSound" preload="auto">
<source src="https://assets.mixkit.co/sfx/preview/mixkit-winning-chimes-2015.mp3" type="audio/mpeg">
</audio>
<audio id="wrongSound" preload="auto">
<source src="https://assets.mixkit.co/sfx/preview/mixkit-wrong-answer-fail-notification-946.mp3" type="audio/mpeg">
</audio>
<audio id="celebrationSound" preload="auto">
<source src="https://assets.mixkit.co/sfx/preview/mixkit-happy-bells-notification-937.mp3" type="audio/mpeg">
</audio>
<script>
// بيانات الأسئلة
const questions = [
{
question: "كيف حل الروح القدس على التلاميذ يوم العنصرة؟",
options: [
"في نسمة هواء خفيفة",
"في نور قوي وألسنة نار متوزعة عليهم",
"في صوت بوق"
],
correctAnswer: 1
},
{
question: "ماذا فعل الروح القدس للتلاميذ عندما نزل عليهم؟",
options: [
"جعلهم يريدون النوم",
"جعلهم يتكلمون بلغات مختلفة وأصبحوا شجعاناً",
"جعلهم ينزلون للخدمة بسرعة"
],
correctAnswer: 1
},
{
question: "لماذا نحتفل بعيد العنصرة كل سنة؟",
options: [
"لنتذكر صلب المسيح",
"لأن الروح القدس نزل على التلاميذ",
"لنحتفل برأس السنة الميلادية"
],
correctAnswer: 1
},
{
question: "متى بالضبط حل الروح القدس على التلاميذ؟",
options: [
"يوم عيد الميلاد",
"في يوم عيد الخمسين (العنصرة)",
"يوم خميس العهد"
],
correctAnswer: 1
},
{
question: "صيام الرسل هذا نصومه إكراماً لمن؟",
options: [
"في صيام يونان",
"في الرسل الأطهار تلاميذ المسيح",
"في الأنبياء القدامى"
],
correctAnswer: 1
},
{
question: "لماذا صام الرسل أنفسهم في البداية؟",
options: [
"لكي يتشبهوا بالمسيح في صومه",
"ليأخذوا قوة من الله لخدمة الكرازة",
"لكي يكفروا عن خطايا الشعب"
],
correctAnswer: 1
},
{
question: "متى يبدأ صيام الرسل عادةً؟",
options: [
"أول يوم في السنة القبطية",
"بعد عيد العنصرة مباشرةً",
"قبل الصوم الكبير"
],
correctAnswer: 1
},
{
question: "لماذا صام الرسل بعد حلول الروح القدس عليهم وليس قبل؟",
options: [
"لأنهم لم يكونوا يعرفون أهمية الصوم",
"ليستعدوا جيداً لخدمة التبشير بالإنجيل",
"لأنهم كانوا مشغولين بالبشارة بعد القيامة"
],
correctAnswer: 1
},
{
question: "كم كان عدد الرسل الذين اختارهم المسيح؟",
options: [
"١٢ رسولاً",
"٧٠ رسولاً",
"١٠٠ رسول"
],
correctAnswer: 1
},
{
question: "اذكر اسم واحد من الرسل (السبعين) المشهورين؟",
options: [
"بطرس",
"لوقا (الإنجيلي)",
"بولس"
],
correctAnswer: 1
},
{
question: "ما هي مدة صيام الرسل بالضبط؟",
options: [
"٥٥ يوماً ثابتاً",
"مدته غير ثابتة وتتغير كل سنة حسب تاريخ عيد القيامة",
"٣ أيام فقط"
],
correctAnswer: 1
},
{
question: "في أي يوم من أيام الأسبوع يبدأ صيام الرسل غالباً؟",
options: [
"يوم الجمعة العظيمة",
"يوم الاثنين الذي يلي أحد العنصرة",
"يوم أحد عيد الميلاد"
],
correctAnswer: 1
}
];
// العناصر الرئيسية في الصفحة
const questionNumberEl = document.getElementById('questionNumber');
const questionTextEl = document.getElementById('questionText');
const optionsContainerEl = document.getElementById('optionsContainer');
const progressBarEl = document.getElementById('progressBar');
const questionContainerEl = document.getElementById('questionContainer');
const resultContainerEl = document.getElementById('resultContainer');
const scoreEl = document.getElementById('score');
const restartBtn = document.getElementById('restartBtn');
const celebrationEl = document.getElementById('celebration');
const celebrationTextEl = document.getElementById('celebrationText');
// العناصر الصوتية
const correctSound = document.getElementById('correctSound');
const wrongSound = document.getElementById('wrongSound');
const celebrationSound = document.getElementById('celebrationSound');
// متغيرات حالة الاختبار
let currentQuestionIndex = 0;
let score = 0;
let answered = false;
// تهيئة الاختبار
function initQuiz() {
currentQuestionIndex = 0;
score = 0;
showQuestion();
resultContainerEl.style.display = 'none';
questionContainerEl.style.display = 'block';
celebrationEl.style.display = 'none';
celebrationTextEl.style.display = 'none';
}
// عرض السؤال الحالي
function showQuestion() {
answered = false;
const question = questions[currentQuestionIndex];
const progress = ((currentQuestionIndex) / questions.length) * 100;
questionNumberEl.textContent = `السؤال ${currentQuestionIndex + 1} من ${questions.length}`;
questionTextEl.textContent = question.question;
progressBarEl.style.width = `${progress}%`;
// إنشاء خيارات الإجابة
optionsContainerEl.innerHTML = '';
question.options.forEach((option, index) => {
const optionElement = document.createElement('div');
optionElement.classList.add('option');
optionElement.innerHTML = `
${option}
<div class="option-letter">${String.fromCharCode(1633 + index)}</div>
`;
optionElement.addEventListener('click', () => selectOption(optionElement, index));
optionsContainerEl.appendChild(optionElement);
});
}
// معالجة اختيار إجابة
function selectOption(optionElement, selectedIndex) {
if (answered) return;
answered = true;
const question = questions[currentQuestionIndex];
const options = optionsContainerEl.querySelectorAll('.option');
// تعطيل جميع الخيارات
options.forEach(option => {
option.style.pointerEvents = 'none';
});
if (selectedIndex === question.correctAnswer) {
// الإجابة صحيحة
optionElement.classList.add('correct');
correctSound.currentTime = 0;
correctSound.play();
score++;
setTimeout(() => {
nextQuestion();
}, 1500);
} else {
// الإجابة خاطئة
optionElement.classList.add('incorrect');
wrongSound.currentTime = 0;
wrongSound.play();
// إظهار الإجابة الصحيحة
setTimeout(() => {
options[question.correctAnswer].classList.add('correct');
}, 1000);
// إعادة تمكين الخيارات بعد التأخير
setTimeout(() => {
options.forEach(option => {
option.style.pointerEvents = 'auto';
option.classList.remove('incorrect');
});
answered = false;
}, 2500);
}
}
// الانتقال للسؤال التالي
function nextQuestion() {
currentQuestionIndex++;
if (currentQuestionIndex < questions.length) {
showQuestion();
} else {
showResults();
}
}
// عرض النتائج النهائية
function showResults() {
questionContainerEl.style.display = 'none';
resultContainerEl.style.display = 'block';
scoreEl.textContent = score;
// عرض رسالة التهنئة مع المؤثرات
setTimeout(() => {
celebrationEl.style.display = 'block';
celebrationTextEl.style.display = 'block';
celebrationSound.play();
// إطلاق الألعاب النارية
createFireworks();
}, 500);
}
// إنشاء تأثير الألعاب النارية
function createFireworks() {
for (let i = 0; i < 50; i++) {
setTimeout(() => {
const firework = document.createElement('div');
firework.classList.add('firework');
// وضع عشوائي
const left = Math.random() * 100;
const delay = Math.random() * 2;
firework.style.left = `${left}%`;
firework.style.animationDelay = `${delay}s`;
celebrationEl.appendChild(firework);
// إزالة العنصر بعد انتهاء الرسوم المتحركة
setTimeout(() => {
firework.remove();
}, 1500);
}, i * 150);
}
}
// إعادة تشغيل الاختبار
restartBtn.addEventListener('click', initQuiz);
// بدء الاختبار عند تحميل الصفحة
window.addEventListener('load', initQuiz);
</script>
</body>
</html>
اختبار دينيالعنصرةصيام الرسل6/19/2025
