كيفية إضافة قسم اختبار MCQ مع ترقيم الصفحات في Blogger وWordpress

إذا كنت تبحث عن برنامج نصي لاختبار MCQ، فقد وصلت إلى المكان الصحيح. في هذه المقالة، سأوضح لك كيف يمكنك إضافة قسم اختبار MCQ سريع الاستجابة إلى مواقع الويب الخاصة بـ Blogger وWordpress.

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

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

لذلك، دعونا نتحقق من كيفية إضافة قسم الاختبار إلى مواقع الويب الخاصة بـ Blogger وWordpress.

خطوات إضافة قسم اختبار MCQ مع ترقيم الصفحات

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

أنصحك بمشاهدة الفيديو أولاً حول كيفية تعديل الكود وكيفية إضافة المزيد من أسئلة وأجوبة MCQ إلى موقع الويب الخاص بك.

 <div id="quiz-container"> <div class="question-container" data-page="1"> <h2 class="question">What is the capital of France?</h2> <div class="quiz-form"> <div class="option" data-answer="true">Paris</div> <!-- Correct Answer --> <div class="option" data-answer="false">Rome</div> <div class="option" data-answer="false">Berlin</div> <div class="option" data-answer="false">Madrid</div> </div> <div class="result"></div> <div class="explanation">Paris is the capital of France.</div> </div> <div class="question-container" data-page="1"> <h2 class="question">Who wrote "Romeo and Juliet"?</h2> <div class="quiz-form"> <div class="option" data-answer="false">Charles Dickens</div> <div class="option" data-answer="true">William Shakespeare</div> <!-- Correct Answer --> <div class="option" data-answer="false">Jane Austen</div> <div class="option" data-answer="false">Mark Twain</div> </div> <div class="result"></div> <div class="explanation">William Shakespeare wrote "Romeo and Juliet".</div> </div> <div class="question-container" data-page="2"> <h2 class="question">What does the abbreviation HTML stand for?</h2> <div class="quiz-form"> <div class="option" data-answer="false">HyperText Markup Language.</div> <div class="option" data-answer="true">HighText Markup Language.</div> <!-- Correct Answer --> <div class="option" data-answer="false">HyperText Markdown Language.</div> <div class="option" data-answer="false">None of the above.</div> </div> <div class="result"></div> <div class="explanation">HTML stands for HighText Markup Language.</div> </div> <!-- Add more Questions here --> </div> <div class="pagination"> <button id="prevButton">Previous</button> <button class="pageButton" data-page="1">1</button> <button class="pageButton" data-page="2">2</button> <!-- Add more page buttons as needed --> <button id="nextButton">Next</button> </div>

كود CSS وجافا سكريبت

 <style> .question-container { width: 100%; margin: auto; text-align: left; border: 1px solid #ccc; padding: 20px; border-radius: 10px; background-color: #f9f9f9; margin-bottom: 20px; } .quiz-form { display: flex; flex-direction: column; align-items: center; } .option { margin-bottom: 10px; padding: 10px; cursor: pointer; border: 1px solid #ccc; background: #f3f3f3; width:95%; } .option:hover { background-color: #fff; } .result { font-weight: bold; margin-top: 20px; } .explanation { margin-top: 10px; display: none; } /* Pagination button styling */ .pagination { margin-top: 20px; text-align: center; } .pagination button { background-color: #007bff; color: #fff; border: none; padding: 10px 20px; margin: 0 5px; border-radius: 5px; cursor: pointer; } .pagination button:hover { background-color: #0056b3; } </style> <script> document.addEventListener('DOMContentLoaded', function() { const questionContainers = document.querySelectorAll('.question-container'); questionContainers.forEach(function(container) { const options = container.querySelectorAll('.option'); const resultDisplay = container.querySelector('.result'); const explanationDisplay = container.querySelector('.explanation'); options.forEach(function(option) { option.addEventListener('click', function() { const selectedAnswer = option.getAttribute('data-answer'); const isCorrect = selectedAnswer === "true"; options.forEach(function(opt) { opt.style.border = '1px solid #ccc'; }); option.style.border = isCorrect ? '1px solid #28a745' : '1px solid #dc3545'; option.style.background = isCorrect ? '#d8ffe1' : '#ffdbde'; resultDisplay.textContent = isCorrect ? "Correct!" : "Wrong!"; explanationDisplay.style.display = "block"; }); }); }); }); document.addEventListener('DOMContentLoaded', function() { const questionContainers = document.querySelectorAll('.question-container'); let currentPageIndex = 1; // Track the current page index function showQuestionsForPage(pageIndex) { questionContainers.forEach(function(container, index) { if (container.dataset.page === pageIndex.toString()) { container.style.display = "block"; } else { container.style.display = "none"; } }); } showQuestionsForPage(currentPageIndex); const prevButton = document.getElementById('prevButton'); const nextButton = document.getElementById('nextButton'); const pageButtons = document.querySelectorAll('.pageButton'); prevButton.addEventListener('click', function() { if (currentPageIndex > 1) { currentPageIndex--; showQuestionsForPage(currentPageIndex); } }); nextButton.addEventListener('click', function() { if (currentPageIndex < questionContainers.length - 1) { currentPageIndex++; showQuestionsForPage(currentPageIndex); } }); pageButtons.forEach(function(button) { button.addEventListener('click', function() { currentPageIndex = parseInt(button.dataset.page); showQuestionsForPage(currentPageIndex); }); }); }); </script>

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

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

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

أنصحك أيضًا بمراجعة كتل اختبار MCQ الأخرى هنا.

• كيفية بدء موقع مسابقة في مدون
• كيفية إضافة أسئلة MCQs في موقع ووردبريس