So fügen Sie einen MCQ-QUIZ-Abschnitt mit Paginierung in Blogger und Wordpress hinzu

Wenn Sie nach einem MCQ-Quizskript suchen, dann sind Sie hier genau richtig. In diesem Artikel zeige ich Ihnen, wie Sie Ihren Blogger- und Wordpress-Websites einen responsiven MCQ-Quizbereich hinzufügen können.

Wenn Sie eine Quiz-Website betreiben, möchten Sie, dass Ihr Quiz ansprechend ist und Ihren Lesern einen Mehrwert bietet. Deshalb habe ich einen einfachen Quizblock mit HTML, CSS und Javascript entworfen und hier erhalten Sie auch Paginierungsfunktionen. So kann der Benutzer mit den Schaltflächen „Zurück“ und „Weiter“ zwischen mehreren Seiten navigieren.

Auf diese Weise können Sie viele Fragen in einem einzigen Blog-Beitrag hosten, ohne dass die Seite so lang wird, und Sie können mit einem Klick weitere Quizze laden. Ich habe außerdem eine Funktion implementiert, mit der Sie eine detaillierte Erklärung der Antwort anzeigen können, sobald der Benutzer auf eine der Optionen klickt.

Schauen wir uns also an, wie Sie den Quiz-Bereich auf Ihren Blogger- und Wordpress-Websites hinzufügen können.

Schritte zum Hinzufügen eines MCQ-Quizabschnitts mit Paginierung

Dazu müssen Sie das folgende Code-Snippet auf Ihrer Website verwenden. Wenn Sie die CMS-Plattform Blogger verwenden, bearbeiten Sie den Beitrag in der HTML-Ansicht . Wenn Sie Wordpress verwenden, können Sie den benutzerdefinierten HTML-Block in Ihrem Gutenberg-Editor verwenden.

Ich empfehle Ihnen, sich zuerst das Video anzusehen, in dem erläutert wird, wie Sie den Code bearbeiten und Ihrer Website weitere MCQ-Fragen und -Antworten hinzufügen.

 <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- und Javascript-Code

 <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>

Beachten Sie: Wenn Sie das Skript auf allen Seiten verwenden möchten, können Sie den CSS- und Javascript-Code direkt in Ihrem Theme-Code verwenden und ihn auf der gesamten Website laden und nur den HTML-Code im Blog-Beitrag verwenden.

Ich empfehle jedoch, es direkt im Blogbeitrag zu verwenden, wenn Sie das Quiz nur auf begrenzten Seiten verwenden.

Ich hoffe, Sie haben erfolgreich einen MCQ-Quizbereich mit Paginierung auf Ihren Blogger- und Wordpress-Websites hinzugefügt. Wenn Sie Zweifel haben, können Sie diese gerne im Kommentarbereich stellen.

Ich empfehle Ihnen auch, sich hier andere MCQ-Quizblöcke anzusehen.

• So starten Sie eine Quiz-Website in Blogger
• So fügen Sie MCQs zu einer WordPress-Website hinzu