Como adicionar uma seção MCQ QUIZ com paginação no Blogger e Wordpress

Se você está procurando um roteiro de teste MCQ, você veio ao lugar certo. Neste artigo, mostrarei como você pode adicionar uma seção de teste MCQ responsiva aos seus sites Blogger e Wordpress.

Ao administrar um site de questionário, você deseja que seu questionário seja envolvente e agregue valor aos seus leitores. É por isso que projetei um bloco de teste simples usando HTML, CSS e Javascript e aqui você também obterá recursos de paginação. Assim, o usuário pode navegar entre múltiplas páginas com os botões anterior e seguinte.

Dessa forma, você pode hospedar muitas perguntas em uma única postagem do blog sem tornar a página tão longa e poderá carregar mais questionários com um clique de botão. Também implementei um recurso onde você pode exibir uma explicação detalhada da resposta assim que o usuário clicar em qualquer uma das opções.

Então, vamos verificar como você pode adicionar a seção Quiz em seus sites Blogger e Wordpress.

Etapas para adicionar seção de questionário MCQ com paginação

Para isso, você precisa utilizar o trecho de código abaixo em seu site. Se você estiver usando a plataforma Blogger CMS, edite a postagem na visualização HTML e se estiver usando Wordpress, poderá usar o bloco HTML personalizado em seu editor Gutenberg.

Recomendo que você assista primeiro ao vídeo sobre como editar o código e como adicionar mais perguntas e respostas MCQ ao seu site.

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

Observe que se quiser usar o script em todas as páginas, você pode usar diretamente o código CSS e javascript no código do seu tema e carregá-lo em todo o site e usar apenas o código HTML na postagem do blog.

Porém, recomendo usá-lo diretamente na postagem do blog, se você estiver usando o questionário apenas em páginas limitadas.

Espero que você tenha adicionado com sucesso uma seção MCQ Quiz com paginação em seus sites Blogger e Wordpress. Se você tiver alguma dúvida, fique à vontade para perguntar na seção de comentários.

Eu também recomendo que você verifique outros blocos de questionário MCQ aqui.

• Como iniciar um site de teste no Blogger
• Como adicionar MCQs no site WordPress