Jak dodać sekcję QUIZ MCQ z paginacją w Bloggerze i Wordpressie

Jeśli szukasz skryptu quizu MCQ, to trafiłeś we właściwe miejsce. W tym artykule pokażę, jak dodać responsywną sekcję quizów MCQ do swoich witryn Blogger i Wordpress.

Prowadząc witrynę z quizami, chcesz, aby quiz był wciągający i zapewniał wartość czytelnikom. Dlatego zaprojektowałem prosty blok quizu, używając HTML, CSS i JavaScript, a tutaj znajdziesz także funkcje paginacji. Użytkownik może więc poruszać się pomiędzy wieloma stronami za pomocą przycisków Poprzedni i Następny.

W ten sposób możesz umieścić wiele pytań w jednym poście na blogu, nie wydłużając strony i będziesz mógł załadować więcej quizów jednym kliknięciem przycisku. Zaimplementowałem także funkcję umożliwiającą wyświetlenie szczegółowego wyjaśnienia odpowiedzi, gdy użytkownik kliknie dowolną opcję.

Sprawdźmy więc, jak dodać sekcję Quiz na swoich stronach Bloggera i Wordpressa.

Kroki, aby dodać sekcję quizu MCQ z paginacją

W tym celu musisz użyć poniższego fragmentu kodu w swojej witrynie. Jeśli korzystasz z platformy CMS Bloggera, edytuj post w widoku HTML , a jeśli używasz Wordpress, możesz użyć niestandardowego bloku HTML w swoim edytorze Gutenberga.

Polecam najpierw obejrzeć film o tym, jak edytować kod i jak dodać więcej pytań i odpowiedzi MCQ do swojej witryny.

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

Kod CSS i 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>

Pamiętaj, że jeśli chcesz używać skryptu na wszystkich stronach, możesz bezpośrednio użyć kodu CSS i JavaScript w kodzie motywu, załadować go w całej witrynie i używać tylko kodu HTML z posta na blogu.

Zalecam jednak użycie go bezpośrednio w poście na blogu, jeśli używasz quizu tylko na ograniczonych stronach.

Mam nadzieję, że pomyślnie dodałeś sekcję MCQ Quiz z paginacją na swoich stronach Bloggera i Wordpressa. Jeśli masz jakiekolwiek wątpliwości, możesz zadać je w sekcji komentarzy.

Polecam również sprawdzić inne bloki quizów MCQ tutaj.

• Jak założyć witrynę z quizami w Bloggerze
• Jak dodać MCQ w witrynie WordPress