أمثلة وتطبيقات

ملف HTML:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>اختبار سريع</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>اختبار سريع</h1>
  <p id="question"></p>
  <div id="choices"></div>
  <p id="result"></p>
  <script src="script.js"></script>
</body>
</html>

ملف JavaScript:

const questions = [
  { text: "ما عاصمة مصر؟", choices: ["الإسكندرية", "القاهرة", "أسوان"], answer: 1 },
  { text: "كم عدد البتات في البايت؟", choices: ["4", "8", "16"], answer: 1 },
  { text: "أي لغة تبني هيكل صفحة الويب؟", choices: ["HTML", "CSS", "Python"], answer: 0 }
];
let current = 0;
let score = 0;

const questionEl = document.getElementById("question");
const choicesEl = document.getElementById("choices");
const resultEl = document.getElementById("result");

function showQuestion() {
  const q = questions[current];
  questionEl.textContent = q.text;
  choicesEl.innerHTML = "";
  q.choices.forEach((choice, i) => {
    const btn = document.createElement("button");
    btn.textContent = choice;
    btn.className = "choice";
    btn.addEventListener("click", () => checkAnswer(i));
    choicesEl.appendChild(btn);
  });
}

function checkAnswer(i) {
  if (i === questions[current].answer) {
    score = score + 1;
    resultEl.textContent = "إجابة صحيحة!";
    resultEl.style.color = "green";
  } else {
    resultEl.textContent = "إجابة خاطئة";
    resultEl.style.color = "red";
  }
  current = current + 1;
  if (current < questions.length) {
    showQuestion();
  } else {
    questionEl.textContent = "انتهى الاختبار";
    choicesEl.innerHTML = "";
    const percent = Math.round(score / questions.length * 100);
    resultEl.textContent = "نتيجتك: " + score + " من " + questions.length + " (" + percent + "%)";
    resultEl.style.color = "black";
  }
}

showQuestion();

تتبع التنفيذ: إذا أجاب الطالب “القاهرة” ثم “16” ثم “HTML”:

في النهاية: “نتيجتك: 2 من 3 (67%)”؛ لأن $\frac{2}{3} \times 100 \approx 66.7$ وتقريبها بالدالة Math.round يعطي 67.

أفكار للفهم:

• questions.length عدد الأسئلة (3)، فالشرط current < questions.length يعني “ما زالت هناك أسئلة”.
• document.createElement("button") تنشئ زرًّا جديدًا، وappendChild تضيفه إلى الصفحة.
• choicesEl.innerHTML = "" تمسح أزرار السؤال السابق.
• الترتيب العشوائي: يمكن خلط الأسئلة قبل عرضها باستخدام الدالة Math.random() التي تولد عددًا عشوائيًّا من 0 إلى أقل من 1، مثل الدالة RAND في جداول البيانات.

مراجعة تطبيق الاختبارات (الموضوع 13-8)

لخّص ما فهمته من تطبيقك وفق النقاط الآتية:

1. موضوع الاختبار: مثل “اختبار عن الفضاء” أو “اختبار عن الحيوانات”.
2. ما تعلمته في HTML: مثل تحديد عنوان التطبيق بالوسم <title>، وتعيين class للعنصر للإشارة إليه في CSS.
3. ما تعلمته في CSS: مثل تحديد لون الخلفية والخط للمحدد body، وتنسيق حجم أزرار الخيارات ولونها بالمحدد .choice.
4. ما تعلمته في JavaScript: مثل التعامل مع الخيارات بمصفوفة اسمها choices، وتغيير لون النص للإجابة الصحيحة أو الخاطئة بعبارة if ~ else.

ثم صنّف ما لخصته إلى “أشياء كنت أعرفها” و”أشياء لم أكن أعرفها”، واسأل الذكاء الاصطناعي عن الثانية، مثل: “ماذا يفعل الكود <p id="result"></p>؟” أو “ماذا يعني background: #f5f5f5;؟”.