Come aggiungere una sezione MCQ QUIZ con impaginazione in Blogger e Wordpress

Se stai cercando uno script per un quiz MCQ, sei nel posto giusto. In questo articolo, ti mostrerò come aggiungere una sezione di quiz MCQ reattiva ai tuoi siti Web Blogger e Wordpress.

Quando gestisci un sito Web di quiz, desideri che il tuo quiz sia coinvolgente e fornisca valore ai tuoi lettori. Ecco perché ho progettato un semplice blocco Quiz utilizzando HTML, CSS e Javascript e qui otterrai anche funzionalità di impaginazione. Pertanto, l'utente può navigare tra più pagine con i pulsanti precedente e successivo.

In questo modo, potrai ospitare tante domande in un unico post del blog senza allungare troppo la pagina e potrai caricare più quiz con un semplice clic. Ho anche implementato una funzionalità in cui è possibile visualizzare una spiegazione dettagliata della risposta una volta che l'utente fa clic su una delle opzioni.

Quindi, controlliamo come puoi aggiungere la sezione Quiz sui tuoi siti Web Blogger e Wordpress.

Passaggi per aggiungere la sezione Quiz MCQ con impaginazione

Per questo, devi utilizzare lo snippet di codice seguente sul tuo sito web. Se stai utilizzando la piattaforma CMS Blogger, modifica il post in visualizzazione HTML e se stai utilizzando Wordpress puoi utilizzare il blocco HTML personalizzato nel tuo editor Gutenberg.

Ti consiglio di guardare prima il video su come modificare il codice e come aggiungere altre domande e risposte MCQ al tuo sito web.

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

Codice CSS e 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>

Tieni presente che se desideri utilizzare lo script su tutte le pagine, puoi utilizzare direttamente il codice CSS e Javascript nel codice del tema e caricarlo in tutto il sito e utilizzare solo il codice HTML nel post del blog.

Tuttavia, ti consiglio di utilizzarlo direttamente nel post del blog, se utilizzi il quiz solo su pagine limitate.

Spero che tu abbia aggiunto con successo una sezione MCQ Quiz con Paginazione sui tuoi siti Web Blogger e Wordpress. Se hai qualche dubbio, non esitare a chiedere nella sezione commenti.

Ti consiglio anche di dare un'occhiata agli altri blocchi quiz MCQ qui.

• Come avviare un sito Web di quiz in Blogger
• Come aggiungere MCQ nel sito Web WordPress