السؤال رقم 1
سؤال تجريبي...
ملخص الأسئلة
]" alt="مخطط بيولوجي" style="max-width: 80%; height: auto; margin: 15px auto; display: block; border-radius: 5px; border: 1px solid #373a52;">',
answers: {
a: "خيار أول",
b: "خيار ثاني (الإجابة الصحيحة)",
c: "خيار ثالث"
},
correctAnswer: "b",
userAnswer: null
},
// ======================================================
{
question: "كم عدد الكواكب في المجموعة الشمسية؟",
answers: { a: "سبعة", b: "ثمانية", c: "تسعة" },
correctAnswer: "b",
userAnswer: null
},
{
question: "ماذا يمثل الرمز الكيميائي H2O؟",
answers: { a: "الأكسجين", b: "النيتروجين", c: "الماء", d: "الهواء" },
correctAnswer: "c",
userAnswer: null
}
];
// ===================================================
// كود منطق الاختبار المتقدم (لا تعدله)
// ===================================================
let currentQuestionIndex = 0;
const qDisplay = document.getElementById('quiz-question-display');
const qNumElement = document.getElementById('current-q-num');
const qTextElement = document.getElementById('q-text');
const qOptionsElement = document.getElementById('q-options');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const finishBtn = document.getElementById('finish-quiz');
const qMapContainer = document.getElementById('q-map-container');
const resultsContainer = document.getElementById('quiz-results');
// 1. وظيفة عرض السؤال الحالي
function displayQuestion() {
const qData = myQuestions[currentQuestionIndex];
// تحديث رقم السؤال ونص السؤال
qNumElement.textContent = `السؤال رقم ${currentQuestionIndex + 1}`;
// **ملاحظة:** تم استخدام innerHTML هنا لأنه يحتوي على وسم الصورة
![]()
qTextElement.innerHTML = qData.question;
// بناء الخيارات
const answersHtml = [];
for (let letter in qData.answers) {
const isChecked = qData.userAnswer === letter ? 'checked' : '';
answersHtml.push(
`
`
);
}
qOptionsElement.innerHTML = answersHtml.join('');
// ربط مستمع الحدث لحفظ الإجابة
qOptionsElement.querySelectorAll('input[type="radio"]').forEach(input => {
input.addEventListener('change', saveAnswer);
});
// تحديث حالة أزرار التنقل
prevBtn.disabled = currentQuestionIndex === 0;
nextBtn.disabled = currentQuestionIndex === myQuestions.length - 1;
// تحديث خريطة الأسئلة (الهاش)
updateQuestionMap();
}
// 2. وظيفة حفظ إجابة المستخدم
function saveAnswer(event) {
const userAnswer = event.target.value;
myQuestions[currentQuestionIndex].userAnswer = userAnswer;
updateQuestionMap(); // تحديث الخريطة فوراً
}
// 3. وظيفة التنقل
function changeQuestion(delta) {
const newIndex = currentQuestionIndex + delta;
if (newIndex >= 0 && newIndex < myQuestions.length) {
currentQuestionIndex = newIndex;
displayQuestion();
}
}
// 4. بناء خريطة الأسئلة (الهاش)
function buildQuestionMap() {
qMapContainer.innerHTML = '';
myQuestions.forEach((q, index) => {
const btn = document.createElement('div');
btn.classList.add('q-map-btn');
btn.textContent = index + 1;
btn.dataset.index = index;
btn.addEventListener('click', () => {
currentQuestionIndex = index;
displayQuestion();
});
qMapContainer.appendChild(btn);
});
updateQuestionMap();
}
// 5. تحديث ألوان الخريطة
function updateQuestionMap() {
qMapContainer.querySelectorAll('.q-map-btn').forEach(btn => {
const index = parseInt(btn.dataset.index);
btn.classList.remove('q-answered', 'q-current');
if (myQuestions[index].userAnswer) {
btn.classList.add('q-answered');
}
if (index === currentQuestionIndex) {
btn.classList.add('q-current');
}
});
}
// 6. وظيفة عرض النتائج النهائية
function showResults() {
let numCorrect = 0;
myQuestions.forEach(q => {
if (q.userAnswer === q.correctAnswer) {
numCorrect++;
}
});
qDisplay.style.display = 'none';
resultsContainer.style.display = 'block';
resultsContainer.innerHTML = `
تم إنهاء الاختبار
لقد حصلت على: ${numCorrect} من أصل ${myQuestions.length} سؤال.
عدد الأسئلة التي تم الإجابة عليها: ${myQuestions.filter(q => q.userAnswer !== null).length}
الأسئلة غير المجاب عنها: ${myQuestions.length - myQuestions.filter(q => q.userAnswer !== null).length}
`;
// تعطيل الأزرار لمنع التعديل بعد الإنهاء
prevBtn.disabled = nextBtn.disabled = finishBtn.disabled = true;
}
// 7. وظيفة عرض الإجابات الصحيحة (ميزة إضافية)
document.getElementById('show-answers').addEventListener('click', () => {
alert('ميزة عرض الإجابات تتطلب تطوير إضافي لتلوين الخيارات بشكل دائم.');
});
document.getElementById('resume-quiz').addEventListener('click', () => {
alert('ميزة استكمال الاختبار تتطلب تخزين الإجابات في ذاكرة المتصفح (localStorage) وهي تطوير إضافي.');
});
// ربط الأحداث
prevBtn.addEventListener('click', () => changeQuestion(-1));
nextBtn.addEventListener('click', () => changeQuestion(1));
finishBtn.addEventListener('click', showResults);
// بدء الاختبار
if(myQuestions.length > 0) {
buildQuestionMap();
displayQuestion();
} else {
qDisplay.innerHTML = '
لم يتم إضافة أسئلة بعد في الكود.
';
}