158- دروس جافا سكربت – تدريب على امثله – JS Examples For Quiz

# أمثلة JavaScript للاختبارات

JavaScript هي واحدة من أكثر لغات البرمجة شيوعًا في تطوير الويب، وتُستخدم لإنشاء صفحات ويب [شركة برمجة مصرية] تفاعلية وديناميكية. يُعتبر إعداد اختبارات أو مسابقات تفاعلية أحد التطبيقات الشهيرة لـ JavaScript، حيث يمكن للمطورين استخدام هذه اللغة لتقديم تجارب تعليمية ممتعة للمستخدمين. سنقوم في هذا المقال بشرح كيفية إنشاء اختبارات تفاعلية [شركة برمجة مصرية] باستخدام JavaScript مع تقديم أمثلة متعددة.

## 1. بدء التحضير للاختبار

لبدء إنشاء اختبار بسيط، نحتاج إلى تحديد الأساسيات مثل الأسئلة، الخيارات، والإجابات الصحيحة. يمكننا تخزين هذه المعلومات في مصفوفة كائنات:

const quizQuestions = [
  {
    question: "ما هي لغة البرمجة التي تُستخدم لتطوير الويب التفاعلي؟",
    options: ["Python", "Java", "JavaScript", "C++"],
    correctAnswer: "JavaScript"
  },
  {
    question: "ما هو الرمز الذي يُستخدم لإنهاء جملة في JavaScript؟",
    options: [".", ":", ";", ","],
    correctAnswer: ";"
  }
];

## 2. عرض الأسئلة على المستخدم

يمكننا استخدام JavaScript لعرض الأسئلة والخيارات على صفحة الويب، ولنجعل الأمور بسيطة سنستخدم HTML مع JavaScript:

“`html

اختبار JavaScript

“`

وفي ملف `quiz.js`:

let currentQuestionIndex = 0;

function loadQuestion() {
  const currentQuestion = quizQuestions[currentQuestionIndex];
  document.getElementById('question').innerText = currentQuestion.question;
  const optionsDiv = document.getElementById('options');
  optionsDiv.innerHTML = '';

  currentQuestion.options.forEach(option => {
    const button = document.createElement('button');
    button.innerText = option;
    button.onclick = () => selectAnswer(option);
    optionsDiv.appendChild(button);
  });
}

function selectAnswer(selectedOption) {
  const currentQuestion = quizQuestions[currentQuestionIndex];
  if (selectedOption === currentQuestion.correctAnswer) {
    alert("إجابة صحيحة!");
  } else {
    alert("إجابة خاطئة!");
  }
}

function nextQuestion() {
  currentQuestionIndex++;
  if (currentQuestionIndex < quizQuestions.length) {
    loadQuestion();
  } else {
    alert("لقد أكملت الاختبار!");
  }
}

loadQuestion();

## 3. تحسين التجربة باستخدام CSS

لجعل الاختبار أكثر جاذبية، يمكننا إضافة بعض التنسيقات باستخدام CSS:

“`css
body {
font-family: Arial, sans-serif;
}

#quiz-container {
width: 50%;
margin: auto;
text-align: center;
}

button {
margin: 5px;
padding: 10px 20px;
font-size: 16px;
}
“`

## 4. إضافة ميزات متقدمة

### 4.1 تتبع الدرجات

يمكننا تحسين الاختبار عن طريق إضافة ميزة تتبع الدرجات، حيث يتم احتساب عدد الإجابات الصحيحة:

let score = 0;

function selectAnswer(selectedOption) {
  const currentQuestion = quizQuestions[currentQuestionIndex];
  if (selectedOption === currentQuestion.correctAnswer) {
    score++;
    alert("إجابة صحيحة!");
  } else {
    alert("إجابة خاطئة!");
  }
}

function nextQuestion() {
  currentQuestionIndex++;
  if (currentQuestionIndex < quizQuestions.length) {
    loadQuestion();
  } else {
    alert(`لقد أكملت الاختبار! درجتك: ${score}/${quizQuestions.length}`);
  }
}

### 4.2 إضافة مؤقت للوقت

يمكننا إضافة مؤقت زمني لتحدي المستخدمين أكثر:

let timeLeft = 30;

function startTimer() {
  const timerInterval = setInterval(() => {
    timeLeft--;
    document.getElementById('timer').innerText = `الوقت المتبقي: ${timeLeft} ثانية`;
    if (timeLeft <= 0) {
      clearInterval(timerInterval);
      alert("انتهى الوقت!");
      nextQuestion();
    }
  }, 1000);
}

function loadQuestion() {
  timeLeft = 30;
  startTimer();
  // باقي الكود كما كان
}

## الخلاصة

يعتبر إنشاء اختبار باستخدام JavaScript مشروعًا تعليميًا ممتعًا يمكن من خلاله تعلم العديد من أساسيات البرمجة. من خلال هذا المقال، قمنا بإنشاء اختبار بسيط وتعلمنا كيفية إضافة ميزات مثل تتبع الدرجات والمؤقت الزمني. هناك الكثير من التحسينات التي يمكن إضافتها مثل استخدام مكتبات حديثة أو تطوير واجهة مستخدم متقدمة باستخدام React أو Vue.js.

مايو 28, 2025