如何在 Blogger 和 Wordpress 中新增帶有分頁的 MCQ 測驗部分

如果您正在尋找 MCQ 測驗腳本，那麼您來對地方了。 在本文中，我將向您展示如何將響應式 MCQ 測驗部分新增至您的 Blogger 和 Wordpress 網站。

當您執行測驗網站時，您希望測驗具有吸引力並為讀者提供價值。 這就是為什麼我使用 HTML、CSS 和 Javascript 設計了一個簡單的測驗區塊，在這裡您還將獲得分頁功能。 因此，使用者可以使用上一個和下一個按鈕在多個頁面之間導航。

透過這種方式，您可以在一篇部落格文章上提出很多問題，而無需使頁面太長，並且只需單擊按鈕即可加載更多測驗。 我還實現了一項功能，一旦用戶單擊任何選項，您就可以顯示答案的詳細說明。

那麼，讓我們看看如何在 Blogger 和 Wordpress 網站上新增測驗部分。

新增帶分頁的 MCQ 測驗部分的步驟

為此，您需要在您的網站上使用以下程式碼片段。 如果您使用的是 Blogger CMS 平台，則可以在HTML 視圖中編輯貼文；如果您使用的是 Wordpress，則可以在古騰堡編輯器中使用自訂 HTML 區塊。

我建議您先觀看有關如何編輯程式碼以及如何為您的網站添加更多 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 和 JavaScript 程式碼

<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 和 javascript 程式碼，並在網站範圍內載入它，並且僅在部落格文章中使用 HTML 程式碼。

但是，如果您僅在有限的頁面上使用測驗，我建議直接在部落格文章上使用它。

我希望您已成功在您的 Blogger 和 Wordpress 網站上新增了帶有分頁的 MCQ 測驗部分。 如果您有任何疑問，請隨時在評論部分提問。

我還建議您在此處查看其他 MCQ 測驗區塊。

• 如何在 Blogger 啟動測驗網站
• 如何在 WordPress 網站中新增 MCQ