من بين الأسئلة الشائعة في تطوير الويب هو: “كيف يمكنني إنشاء تطبيق اختبار (Quiz Application) تفاعلي باستخدام JavaScript، HTML، وCSS؟”

في هذا الدليل، سنقوم ببناء تطبيق اختبار بسيط يحتوي على مجموعة من الأسئلة متعددة الخيارات (Multiple Choice Questions). سيتعلم المستخدم كيفية التنقل بين الأسئلة، تقييم الإجابات، وعرض النتيجة النهائية عند الانتهاء من الاختبار. هذا المشروع يتطلب استخدام تقنيات الـ JavaScript للتفاعل مع عناصر HTML وتحديث محتوى الصفحة بشكل ديناميكي.

المتطلبات الأساسية

معرفة أساسية بـ HTML، CSS، وJavaScript.
محرر نصوص مثل Visual Studio Code أو Sublime Text.
متصفح حديث لاختبار تطبيق الاختبار.

الخطوة 1: إعداد هيكل HTML لتطبيق الاختبار

افتح محرر النصوص وأنشئ ملفًا جديدًا باسم <index.html>، وأضف الكود التالي:


<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="تطبيق اختبار تفاعلي باستخدام JavaScript، HTML، و CSS.">
    <title>تطبيق اختبار تفاعلي</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="quiz-container">
        <h1>اختبار البرمجة</h1>
        <div id="quiz"></div>
        <button id="next-button">التالي</button>
        <button id="submit-button" class="hidden">إرسال</button>
        <div id="result" class="hidden"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

الخطوة 2: تصميم واجهة تطبيق الاختبار باستخدام CSS

قم بإنشاء ملف جديد باسم <styles.css> بجانب <index.html>، وأضف الكود التالي لتصميم الواجهة:


/* إعدادات عامة للصفحة */
body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    text-align: center;
}

/* تنسيق الحاوية الرئيسية */
#quiz-container {
    width: 50%;
    margin: 50px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* تنسيق العنوان */
h1 {
    margin-bottom: 20px;
    color: #333;
}

/* تنسيق عرض الأسئلة */
#quiz {
    margin-bottom: 20px;
}

/* تنسيق الأزرار */
button {
    padding: 10px 20px;
    margin: 10px;
    border: none;
    border-radius: 5px;
    background-color: #333;
    color: #fff;
    cursor: pointer;
}

button:hover {
    background-color: #555;
}

.hidden {
    display: none;
}

الخطوة 3: إضافة الوظائف باستخدام JavaScript

قم بإنشاء ملف جديد باسم <script.js> بجانب الملفات الأخرى، وأضف الكود التالي:


const quizData = [
    {
        question: "ما هي لغة البرمجة المستخدمة لبناء تطبيقات الويب في المتصفح؟",
        a: "Python",
        b: "C++",
        c: "JavaScript",
        d: "Java",
        correct: "c"
    },
    {
        question: "ما هو اختصار HTML؟",
        a: "Hyper Trainer Markup Language",
        b: "Hyper Text Markup Language",
        c: "Hyper Text Marketing Language",
        d: "Hyper Text Markup Leveler",
        correct: "b"
    },
    {
        question: "ما هو CSS؟",
        a: "لغة برمجة",
        b: "نظام إدارة قواعد بيانات",
        c: "لغة تنسيق صفحات الويب",
        d: "نوع من أنواع الشبكات",
        correct: "c"
    }
];

let currentQuestionIndex = 0;
let score = 0;

const quizContainer = document.getElementById('quiz');
const nextButton = document.getElementById('next-button');
const submitButton = document.getElementById('submit-button');
const resultContainer = document.getElementById('result');

// عرض السؤال الأول
loadQuestion();

function loadQuestion() {
    const currentQuestion = quizData[currentQuestionIndex];
    quizContainer.innerHTML = `
        <h2>${currentQuestion.question}</h2>
        <label><input type="radio" name="answer" value="a"> ${currentQuestion.a}</label><br>
        <label><input type="radio" name="answer" value="b"> ${currentQuestion.b}</label><br>
        <label><input type="radio" name="answer" value="c"> ${currentQuestion.c}</label><br>
        <label><input type="radio" name="answer" value="d"> ${currentQuestion.d}</label><br>
    `;
}

function getSelectedAnswer() {
    const options = document.getElementsByName('answer');
    let selected = '';
    options.forEach(option => {
        if (option.checked) {
            selected = option.value;
        }
    });
    return selected;
}

function showResult() {
    resultContainer.innerHTML = `<h2>نتيجتك: ${score} من ${quizData.length}</h2>`;
    resultContainer.classList.remove('hidden');
}

// الانتقال إلى السؤال التالي
nextButton.addEventListener('click', () => {
    const selectedAnswer = getSelectedAnswer();
    if (selectedAnswer === quizData[currentQuestionIndex].correct) {
        score++;
    }

    currentQuestionIndex++;
    if (currentQuestionIndex < quizData.length) {
        loadQuestion();
    } else {
        quizContainer.classList.add('hidden');
        nextButton.classList.add('hidden');
        submitButton.classList.remove('hidden');
    }
});

// عرض النتيجة النهائية
submitButton.addEventListener('click', showResult);

الخطوة 4: اختبار تطبيق الاختبار

افتح الملف <index.html> في المتصفح، وجرب الإجابة على الأسئلة. بعد الإجابة على كل سؤال، اضغط على “التالي” حتى تنتهي من جميع الأسئلة، ثم اضغط على “إرسال” لعرض النتيجة النهائية.

خاتمة

تهانينا! لقد قمت ببناء تطبيق اختبار تفاعلي باستخدام JavaScript، HTML، و CSS. يمكنك الآن إضافة المزيد من الأسئلة، تحسين التصميم، أو حتى تخزين النتيجة في قاعدة بيانات. جرب تحسين التطبيق بإضافة ميزات إضافية مثل مؤقت (Timer) أو حفظ النتيجة في Local Storage.

إذا كانت لديك أي استفسارات أو ترغب في معرفة المزيد، اترك تعليقًا في الأسفل، وشارك هذا المقال إذا وجدته مفيدًا!

القائمة

التصنيفات

كيفية إنشاء تطبيق اختبار تفاعلي باستخدام JavaScript، HTML، و CSS: خطوة بخطوة

المتطلبات الأساسية

الخطوة 1: إعداد هيكل HTML لتطبيق الاختبار

الخطوة 2: تصميم واجهة تطبيق الاختبار باستخدام CSS

الخطوة 3: إضافة الوظائف باستخدام JavaScript

الخطوة 4: اختبار تطبيق الاختبار

خاتمة

التعليقات

اترك تعليقاً

إلغاء الرد