Cómo agregar una sección MCQ QUIZ con paginación en Blogger y Wordpress

Si está buscando un guión de prueba de MCQ, ha venido al lugar correcto. En este artículo, le mostraré cómo puede agregar una sección de cuestionarios MCQ responsivos a sus sitios web de Blogger y Wordpress.

Cuando ejecuta un sitio web de cuestionarios, desea que su cuestionario sea atractivo y brinde valor a sus lectores. Es por eso que he diseñado un bloque de prueba simple usando HTML, CSS y Javascript y aquí también obtendrás funciones de paginación. Así, el Usuario puede navegar entre varias páginas con los botones anterior y siguiente.

De esta manera, puede alojar muchas preguntas en una sola publicación de blog sin alargar tanto la página y podrá cargar más cuestionarios con solo hacer clic en un botón. También implementé una función donde puedes mostrar una explicación detallada de la respuesta una vez que el usuario hace clic en cualquiera de las opciones.

Entonces, veamos cómo puedes agregar la sección Cuestionario en tus sitios web de Blogger y Wordpress.

Pasos para agregar la sección MCQ Quiz con paginación

Para ello, debe utilizar el siguiente fragmento de código en su sitio web. Si está utilizando la plataforma Blogger CMS, edite la publicación en la vista HTML y si está utilizando Wordpress, puede usar el bloque HTML personalizado en su editor Gutenberg.

Le recomiendo que vea primero el video sobre cómo editar el código y cómo agregar más preguntas y respuestas de MCQ a su sitio 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>

Código CSS y 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>

Tenga en cuenta que si desea utilizar el script en todas las páginas, puede utilizar directamente el código CSS y javascript en el código de su tema y cargarlo en todo el sitio y utilizar únicamente el código HTML en la publicación del blog.

Pero recomiendo usarlo directamente en la publicación del blog, si está utilizando el cuestionario solo en páginas limitadas.

Espero que haya agregado con éxito una sección de MCQ Quiz con paginación en sus sitios web de Blogger y Wordpress. Si tienes alguna duda, no dudes en preguntar en la sección de comentarios.

También te recomiendo que consultes otros bloques de preguntas de MCQ aquí.

• Cómo iniciar un sitio web de cuestionarios en Blogger
• Cómo agregar preguntas frecuentes en el sitio web de WordPress