如何在 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