วิธีเพิ่มส่วนแบบทดสอบ MCQ ด้วยการแบ่งหน้าใน Blogger และ Wordpress

เผยแพร่แล้ว: 2024-03-23

หากคุณกำลังมองหาสคริปต์ตอบคำถาม MCQ คุณมาถูกที่แล้ว ในบทความนี้ ฉันจะแสดงให้คุณเห็นว่าคุณสามารถเพิ่มส่วนแบบทดสอบ MCQ แบบตอบสนองลงในเว็บไซต์ Blogger และ Wordpress ของคุณได้อย่างไร

เมื่อคุณใช้งานเว็บไซต์ Quiz คุณต้องการให้แบบทดสอบของคุณมีส่วนร่วมและให้คุณค่าแก่ผู้อ่านของคุณ นั่นเป็นเหตุผลที่ฉันออกแบบบล็อก Quiz ง่ายๆ โดยใช้ 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 Quiz พร้อมการแบ่งหน้า บนเว็บไซต์ Blogger และ Wordpress ของคุณได้สำเร็จ หากคุณมีข้อสงสัยใด ๆ อย่าลังเลที่จะถามในส่วนความคิดเห็น

ฉันขอแนะนำให้คุณตรวจสอบ MCQ Quiz Blocks อื่นๆ ที่นี่

  • วิธีเริ่มเว็บไซต์แบบทดสอบใน Blogger
  • วิธีเพิ่ม MCQ ในเว็บไซต์ WordPress