Cara Menambahkan Bagian MCQ QUIZ Dengan Pagination di Blogger & Wordpress

Jika Anda mencari skrip kuis MCQ, Anda datang ke tempat yang tepat. Pada artikel ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat menambahkan bagian kuis MCQ responsif ke situs web Blogger dan Wordpress Anda.

Saat Anda menjalankan situs web Kuis, Anda ingin kuis Anda menarik dan memberikan nilai kepada pembaca Anda. Itu sebabnya saya merancang blok Kuis sederhana menggunakan HTML, CSS & Javascript dan di sini Anda akan mendapatkan fitur pagination juga. Jadi, Pengguna dapat menavigasi antara beberapa halaman dengan tombol sebelumnya dan berikutnya.

Dengan cara ini, Anda dapat menghosting banyak pertanyaan dalam satu postingan blog tanpa membuat halamannya terlalu panjang dan Anda dapat memuat lebih banyak kuis dengan satu klik tombol. Saya juga menerapkan fitur di mana Anda dapat menampilkan penjelasan rinci tentang jawabannya setelah pengguna mengklik salah satu opsi.

Jadi, mari kita periksa bagaimana Anda dapat menambahkan bagian Kuis di situs Blogger dan Wordpress Anda.

Langkah-langkah Menambahkan Bagian Kuis MCQ dengan Pagination

Untuk ini, Anda perlu menggunakan cuplikan kode di bawah ini di Situs Web Anda. Jika Anda menggunakan platform CMS Blogger maka edit postingan dalam tampilan HTML dan jika Anda menggunakan Wordpress maka Anda dapat menggunakan blok HTML khusus di editor Gutenberg Anda.

Saya sarankan Anda menonton video terlebih dahulu tentang cara mengedit kode dan Cara menambahkan lebih banyak pertanyaan dan jawaban MCQ ke situs web Anda.

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

Kode CSS & 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>

Perhatikan bahwa jika Anda ingin menggunakan skrip di semua halaman maka Anda dapat langsung menggunakan kode CSS dan javascript di kode tema Anda dan memuatnya di seluruh situs dan hanya menggunakan kode HTML di postingan Blog.

Tapi, saya sarankan untuk menggunakannya langsung di postingan blog, jika Anda menggunakan kuis di halaman terbatas saja.

Saya harap Anda telah berhasil menambahkan bagian Kuis MCQ Dengan Pagination di situs Blogger dan Wordpress Anda. Jika Anda ragu, silakan bertanya di bagian komentar.

Saya juga menyarankan Anda melihat Blok Kuis MCQ lainnya di sini.

• Cara Memulai Situs Kuis di Blogger
• Cara Menambahkan soal pilihan ganda di Situs WordPress