Comment ajouter une section MCQ QUIZ avec pagination dans Blogger et Wordpress

Si vous recherchez un script de quiz QCM, alors vous êtes au bon endroit. Dans cet article, je vais vous montrer comment ajouter une section de quiz QCM réactif à vos sites Web Blogger et Wordpress.

Lorsque vous gérez un site Web Quiz, vous souhaitez que votre quiz soit attrayant et apporte de la valeur à vos lecteurs. C'est pourquoi j'ai conçu un simple bloc Quiz utilisant HTML, CSS et Javascript et vous obtiendrez également ici des fonctionnalités de pagination. Ainsi, l'utilisateur peut naviguer entre plusieurs pages avec les boutons précédent et suivant.

De cette façon, vous pouvez héberger de nombreuses questions sur un seul article de blog sans allonger la page et pourrez charger plus de quiz en un seul clic. J'ai également implémenté une fonctionnalité permettant d'afficher une explication détaillée de la réponse une fois que l'utilisateur clique sur l'une des options.

Voyons donc comment vous pouvez ajouter la section Quiz sur vos sites Web Blogger et Wordpress.

Étapes pour ajouter une section de quiz MCQ avec pagination

Pour cela, vous devez utiliser l'extrait de code ci-dessous sur votre site Web. Si vous utilisez la plate-forme Blogger CMS, modifiez la publication en mode HTML et si vous utilisez Wordpress, vous pouvez utiliser le bloc HTML personnalisé dans votre éditeur Gutenberg.

Je vous recommande de regarder d'abord la vidéo expliquant comment modifier le code et comment ajouter plus de questions et réponses QCM à votre site 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>

Codes CSS et 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>

Notez que si vous souhaitez utiliser le script sur toutes les pages, vous pouvez utiliser directement le code CSS et javascript dans votre code de thème, le charger sur l'ensemble du site et utiliser uniquement le code HTML dans l'article de blog.

Mais je recommande de l'utiliser directement sur l'article de blog, si vous utilisez le quiz sur des pages limitées uniquement.

J'espère que vous avez ajouté avec succès une section QCM Quiz avec pagination sur vos sites Web Blogger et Wordpress. Si vous avez un doute, n'hésitez pas à le demander dans la section commentaires.

Je vous recommande également de consulter d'autres blocs de quiz MCQ ici.

• Comment démarrer un site Web de quiz dans Blogger
• Comment ajouter des QCM sur un site Web WordPress