كيفية تضمين أسئلة اختبار الاختيار من متعدد التفاعلية في مقالاتك التقنية

مقدمة: تعزيز التفاعل التعليمي بالمقالات التقنية

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

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

إضافة الأكواد البرمجية إلى مقالاتك: دليل شامل

تتيح معظم منصات تحرير المحتوى، مثل محرر Ghost الذي أشار إليه الكاتب الأصلي، إمكانية تضمين كتل من الأكواد البرمجية مباشرة داخل المقال. هذه الميزة حيوية لإضافة عناصر تفاعلية مثل الاختبارات.

خطوات إدراج محرر الأكواد

1. للوصول إلى محرر الأكواد، ابحث عن الزر الدائري الذي يحمل علامة زائد (+) والذي يُستخدم عادةً لإضافة الصور ومقاطع فيديو YouTube وغيرها من العناصر.
2. بعد النقر على الزر، ستظهر لك قائمة خيارات. اختر زر "HTML" لإضافة محرر أكواد إلى مقالك. يدعم هذا المحرر لغات مثل HTML و CSS وحتى JavaScript، مما يمنحك مرونة كبيرة في تصميم العناصر التفاعلية.

معاينة الأكواد والتعديل عليها

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

اختبار وظائف الكود قبل النشر

للتأكد من أن وظائف الكود تعمل بشكل صحيح، احفظ المقال بالضغط على Ctrl/⌘ + S، ثم انقر على زر "View Preview" الذي يظهر في الزاوية السفلية اليسرى. سيتم فتح مقالك في علامة تبويب منفصلة، حيث يمكنك رؤية كيفية عرض الكود بمجرد نشر مقالك. خذ وقتك للتحقق من التنسيق والوظائف الخاصة باختبار الاختيار من متعدد.

آلية عمل اختبار الاختيار من متعدد

يمكنك إضافة أي عدد تريده من الأسئلة المختلفة. ومع ذلك، على الرغم من أن مقالك قد يحتوي على اختبارات متعددة، إلا أنها جميعاً تقع ضمن بنية HTML واحدة في الخلفية. يتكون كل عنصر سؤال من الأكواد التالية:

<div style='transform: scale(0.65); position: relative; top: -100px;'>
    <h3>اكتب سؤالك هنا</h3>
    <p>اختر إجابة واحدة</p>
    <hr />
    <!-- هنا تضاف خيارات الإجابات -->
</div>

بنية خيارات الإجابات

يحتوي كل عنصر <div> على إجابة محتملة. إليك مثال على كيفية هيكلة خيارات الإجابات:

<div id='block-11' style='padding: 10px;'>
    <label for='option-11' style=' padding: 5px; font-size: 2.5rem;'>
        <input type='radio' name='option' value='6/24' id='option-11' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
        الإجابة 1
    </label>
    <span id='result-11'></span>
</div>
<hr />
<div id='block-12' style='padding: 10px;'>
    <label for='option-12' style=' padding: 5px; font-size: 2.5rem;'>
        <input type='radio' name='option' value='6' id='option-12' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
        الإجابة 2
    </label>
    <span id='result-12'></span>
</div>
<hr />

فهم اصطلاحات الترقيم (Indexing Convention)

في وقت كتابة المقال الأصلي، لم يكن محرر الأكواد المضمن في Ghost يدعم template literals، لذا يجب ترميز بعض الأمور يدوياً. تذكر أن جميع الأسئلة تُحمّل معاً في الخلفية، لذا فإن الأرقام المكونة من رقمين في كل id تمثل ما يلي:

• الرقم الأول يشير إلى ترتيب سؤال الاختيار من متعدد في المقال (1 هو السؤال الأول، 2 هو السؤال الثاني، وهكذا).
• الرقم الثاني يشير إلى ترتيب كل إجابة محتملة ضمن كتلة السؤال الخاصة بها (1 هو خيار الإجابة الأول، 2 هو خيار الإجابة الثاني، إلخ).

على سبيل المثال، يمثل block-12 السؤال الأول / خيار الإجابة الثاني، بينما block-43 هو السؤال الرابع / خيار الإجابة الثالث. هذا الاصطلاح في الترقيم ضروري لكي تعمل كتل الأسئلة المختلفة بشكل مستقل عن بعضها البعض.

وظائف JavaScript للتفاعل

تُطبق منطق مماثل على أسماء الدوال المسؤولة عن التفاعل. يوضع الكود الذي يتعامل مع تفاعل المستخدم ضمن وسوم <script> ويتكون من جزأين رئيسيين:

الجزء الأول: تقييم الإجابات وعرض النتائج

هذه الدالة تقوم بتقييم إجابة المستخدم وعرض النتيجة بشكل فوري:

function displayAnswer1() {
    if (document.getElementById('option-11').checked) {
        document.getElementById('block-11').style.border = '3px solid limegreen'
        document.getElementById('result-11').style.color = 'limegreen'
        document.getElementById('result-11').innerHTML = 'Correct!'
    }
    if (document.getElementById('option-12').checked) {
        document.getElementById('block-12').style.border = '3px solid red'
        document.getElementById('result-12').style.color = 'red'
        document.getElementById('result-12').innerHTML = 'Incorrect!'
        showCorrectAnswer1()
    }
    if (document.getElementById('option-13').checked) {
        document.getElementById('block-13').style.border = '3px solid red'
        document.getElementById('result-13').style.color = 'red'
        document.getElementById('result-13').innerHTML = 'Incorrect!'
        showCorrectAnswer1()
    }
    if (document.getElementById('option-14').checked) {
        document.getElementById('block-14').style.border = '3px solid red'
        document.getElementById('result-14').style.color = 'red'
        document.getElementById('result-14').innerHTML = 'Incorrect!'
        showCorrectAnswer1()
    }
}

كما يوحي الاسم، تتعامل الدالة displayAnswer1 مع السؤال الأول ضمن المقال. إذا كان هناك سؤال ثالث في مقالك، فستتعامل معه الدالة displayAnswer3. في المثال أعلاه، option-11 هي الإجابة الصحيحة، ويتم تحديث التنسيق في كتلة if الأولى لإظهار أن الإجابة الصحيحة قد تم اختيارها. إذا تم اختيار أي من الإجابات الخاطئة الأخرى، يتم تحديث التنسيق ليعكس ذلك. لا تتردد في التلاعب بدوال displayAnswer_ في مقالك الخاص. فقط تذكر أن تربط التنسيق المناسب بالإجابات الصحيحة والخاطئة.

الجزء الثاني: عرض الإجابة الصحيحة عند الطلب

هذا الجزء من الكود يعالج تفاعل المستخدم لعرض الإجابة الصحيحة عند الحاجة:

function showCorrectAnswer1() {
    let showAnswer1 = document.createElement('p')
    showAnswer1.innerHTML = 'Show Correct Answer'
    showAnswer1.style.position = 'relative'
    showAnswer1.style.top = '-180px'
    showAnswer1.style.fontSize = '1.75rem'
    document.getElementById('showanswer1').appendChild(showAnswer1)
    showAnswer1.addEventListener('click', () => {
        document.getElementById('block-11').style.border = '3px solid limegreen'
        document.getElementById('result-11').style.color = 'limegreen'
        document.getElementById('result-11').innerHTML = 'Correct!'
        document.getElementById('showanswer1').removeChild(showAnswer1)
    })
}

تُسمى هذه الدالة showCorrectAnswer1 لأنها تتعامل مع سؤال الاختيار من متعدد الأول في المقال. سيتعين عليك إضافة showCorrectAnswer2 و showCorrectAnswer3 والمزيد إذا كان مقالك يحتوي على أكثر من سؤال واحد. لا تتردد في تجربة التنسيقات والأبعاد المستخدمة في جميع أنحاء الكود، وقم بتخصيصها حسب ذوقك.

مثال عملي متكامل لاختبار الاختيار من متعدد

إليكم الكود الكامل والمثال العملي الذي يوضح كيفية دمج جميع الأجزاء لإنشاء اختبار تفاعلي:

<div style='transform: scale(0.65); position: relative; top: -100px;'>
    <h3>ما هو الكسر الذي يمثل 6 ساعات من اليوم؟</h3>
    <p>اختر إجابة واحدة</p>
    <hr />
    <div id='block-11' style='padding: 10px;'>
        <label for='option-11' style=' padding: 5px; font-size: 2.5rem;'>
            <input type='radio' name='option' value='6/24' id='option-11' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
            6/24
        </label>
        <span id='result-11'></span>
    </div>
    <hr />
    <div id='block-12' style='padding: 10px;'>
        <label for='option-12' style=' padding: 5px; font-size: 2.5rem;'>
            <input type='radio' name='option' value='6' id='option-12' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
            6
        </label>
        <span id='result-12'></span>
    </div>
    <hr />
    <div id='block-13' style='padding: 10px;'>
        <label for='option-13' style=' padding: 5px; font-size: 2.5rem;'>
            <input type='radio' name='option' value='1/3' id='option-13' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
            1/3
        </label>
        <span id='result-13'></span>
    </div>
    <hr />
    <div id='block-14' style='padding: 10px;'>
        <label for='option-14' style=' padding: 5px; font-size: 2.5rem;'>
            <input type='radio' name='option' value='1/6' id='option-14' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
            1/6
        </label>
        <span id='result-14'></span>
    </div>
    <hr />
    <button type='button' onclick='displayAnswer1()' style='width: 100px; height: 40px; border-radius: 3px; background-color: lightblue; font-weight: 700;'>إرسال</button>
</div>
<a id='showanswer1'></a>
<script>
    // The function evaluates the answer and displays result
    function displayAnswer1() {
        if (document.getElementById('option-11').checked) {
            document.getElementById('block-11').style.border = '3px solid limegreen'
            document.getElementById('result-11').style.color = 'limegreen'
            document.getElementById('result-11').innerHTML = 'Correct!'
        }
        if (document.getElementById('option-12').checked) {
            document.getElementById('block-12').style.border = '3px solid red'
            document.getElementById('result-12').style.color = 'red'
            document.getElementById('result-12').innerHTML = 'Incorrect!'
            showCorrectAnswer1()
        }
        if (document.getElementById('option-13').checked) {
            document.getElementById('block-13').style.border = '3px solid red'
            document.getElementById('result-13').style.color = 'red'
            document.getElementById('result-13').innerHTML = 'Incorrect!'
            showCorrectAnswer1()
        }
        if (document.getElementById('option-14').checked) {
            document.getElementById('block-14').style.border = '3px solid red'
            document.getElementById('result-14').style.color = 'red'
            document.getElementById('result-14').innerHTML = 'Incorrect!'
            showCorrectAnswer1()
        }
    }

    // the function displays the link to the correct answer
    function showCorrectAnswer1() {
        let showAnswer1 = document.createElement('p')
        showAnswer1.innerHTML = 'Show Correct Answer'
        showAnswer1.style.position = 'relative'
        showAnswer1.style.top = '-180px'
        showAnswer1.style.fontSize = '1.75rem'
        document.getElementById('showanswer1').appendChild(showAnswer1)
        showAnswer1.addEventListener('click', () => {
            document.getElementById('block-11').style.border = '3px solid limegreen'
            document.getElementById('result-11').style.color = 'limegreen'
            document.getElementById('result-11').innerHTML = 'Correct!'
            document.getElementById('showanswer1').removeChild(showAnswer1)
        })
    }
</script>

يمكنك العثور على الكود الكامل الجاهز للاستخدام (boilerplate code) على GitHub إذا كنت تفضل ذلك.

الخلاصة التقنية

يُعد تضمين اختبارات الاختيار من متعدد في المقالات التقنية استراتيجية ممتازة لتعزيز التفاعل وتحسين تجربة التعلم للمستخدمين. من خلال الاستفادة من قوة HTML و JavaScript، يمكن للمؤلفين إنشاء محتوى ديناميكي لا يكتفي بتقديم المعلومات فحسب، بل يختبر فهم القارئ لها أيضاً. على الرغم من أن الطريقة الموضحة هنا قد تتطلب بعض الجهد اليدوي في الترقيم وإدارة الدوال لكل سؤال (خاصة في غياب دعم template literals في بعض المحررات)، إلا أن القيمة المضافة من حيث التفاعل والمشاركة تستحق العناء. إن القدرة على تقديم تغذية راجعة فورية تساهم بشكل كبير في ترسيخ المفاهيم، مما يجعل المقال أكثر فائدة وجاذبية. يُنصح دائماً بتخصيص التنسيق والأبعاد لضمان التوافق مع الهوية البصرية للمنصة وتحقيق أفضل تجربة للمستخدم.