Cum să adăugați o secțiune MCQ QUIZ cu paginare în Blogger și Wordpress

Dacă sunteți în căutarea unui script de test MCQ, atunci ați ajuns la locul potrivit. În acest articol, vă voi arăta cum puteți adăuga o secțiune de test MCQ receptivă pe site-urile dvs. Web Blogger și Wordpress.

Când rulați un site web cu test, doriți ca testul să fie captivant și să ofere valoare cititorilor dvs. De aceea, am proiectat un bloc simplu Test folosind HTML, CSS și Javascript și aici veți obține și funcții de paginare. Deci, utilizatorul poate naviga între mai multe pagini cu butoanele precedent și următor.

În acest fel, puteți găzdui o mulțime de întrebări pe o singură postare de blog fără a face pagina atât de lungă și veți putea încărca mai multe chestionare cu un clic pe buton. De asemenea, am implementat o caracteristică în care puteți afișa o explicație detaliată a răspunsului odată ce utilizatorul face clic pe oricare dintre opțiuni.

Deci, haideți să verificăm cum puteți adăuga secțiunea Test pe site-urile dvs. Blogger și Wordpress.

Pași pentru adăugarea secțiunii de test MCQ cu paginare

Pentru aceasta, trebuie să utilizați fragmentul de cod de mai jos pe site-ul dvs. web. Dacă utilizați platforma CMS Blogger, atunci editați postarea în vizualizarea HTML și dacă utilizați Wordpress, atunci puteți utiliza blocul HTML personalizat în editorul Gutenberg.

Vă recomand să vizionați mai întâi videoclipul despre cum să editați codul și Cum să adăugați mai multe întrebări și răspunsuri MCQ pe site-ul dvs.

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

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

Rețineți că, dacă doriți să utilizați scriptul pe toate paginile, atunci puteți utiliza direct codul CSS și javascript în codul temei și îl puteți încărca la nivelul întregului site și utilizați numai codul HTML din postarea de blog.

Dar, vă recomand să îl folosiți direct pe postarea de pe blog, dacă utilizați testul doar pe pagini limitate.

Sper că ați adăugat cu succes o secțiune MCQ Quiz cu paginare pe site-urile dvs. Blogger și Wordpress. Dacă aveți vreo îndoială, nu ezitați să întrebați în secțiunea de comentarii.

De asemenea, vă recomand să consultați și alte blocuri de test MCQ aici.

• Cum să porniți un site web cu test în Blogger
• Cum să adăugați MCQ-uri pe site-ul WordPress