Blogger と Wordpress でページネーションを使用して MCQ QUIZ セクションを追加する方法

MCQ クイズのスクリプトをお探しなら、ここが正しい場所です。 この記事では、Blogger および Wordpress の Web サイトに応答性の高い MCQ クイズ セクションを追加する方法を説明します。

クイズ Web サイトを運営しているときは、クイズが魅力的で、読者に価値を提供できるようにしたいと考えています。 そのため、HTML、CSS、JavaScript を使用してシンプルなクイズ ブロックを設計しました。ここではページネーション機能も利用できます。 したがって、ユーザーは前ボタンと次ボタンを使用して複数のページ間を移動できます。

この方法では、ページをそれほど長くすることなく、1 つのブログ投稿に多くの質問をホストでき、ボタンをクリックするだけでさらに多くのクイズを読み込むことができます。 また、ユーザーがいずれかの選択肢をクリックすると、回答の詳細な説明を表示できる機能も実装しました。

それでは、Blogger や Wordpress の Web サイトにクイズ セクションを追加する方法を確認してみましょう。

ページネーションを使用して MCQ クイズ セクションを追加する手順

このためには、Web サイトで以下のコード スニペットを使用する必要があります。 Blogger CMS プラットフォームを使用している場合はHTML ビューで投稿を編集し、Wordpress を使用している場合は Gutenberg エディターでカスタム HTML ブロックを使用できます。

コードを編集する方法と、Web サイトに 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 の Web サイトにページネーション付きの MCQ クイズ セクションが正常に追加されたことを願っています。 ご不明な点がございましたら、お気軽にコメント欄にご質問ください。

ここで他の MCQ クイズ ブロックもチェックすることをお勧めします。

• Blogger でクイズ Web サイトを始める方法
• WordPress ウェブサイトに MCQ を追加する方法