Blogger 및 Wordpress에서 페이지 매김을 사용하여 MCQ 퀴즈 섹션을 추가하는 방법

MCQ 퀴즈 스크립트를 찾고 계시다면 제대로 찾아오셨습니다. 이 기사에서는 Blogger 및 Wordpress 웹 사이트에 반응형 MCQ 퀴즈 섹션을 추가하는 방법을 보여 드리겠습니다.

퀴즈 웹사이트를 운영할 때 퀴즈가 흥미를 유발하고 독자에게 가치를 제공하기를 원합니다. 이것이 제가 HTML, CSS 및 Javascript를 사용하여 간단한 퀴즈 블록을 디자인한 이유이며 여기에서는 페이지 매김 기능도 얻을 수 있습니다. 따라서 사용자는 이전 및 다음 버튼을 사용하여 여러 페이지 사이를 탐색할 수 있습니다.

이런 방식으로 페이지를 너무 길게 만들지 않고도 단일 블로그 게시물에 많은 질문을 호스팅할 수 있으며 버튼 클릭으로 더 많은 퀴즈를 로드할 수 있습니다. 또한 사용자가 옵션 중 하나를 클릭하면 답변에 대한 자세한 설명을 표시할 수 있는 기능도 구현했습니다.

이제 Blogger 및 Wordpress 웹사이트에 퀴즈 섹션을 추가하는 방법을 확인해 보겠습니다.

페이지 매김을 사용하여 MCQ 퀴즈 섹션을 추가하는 단계

이를 위해서는 웹사이트에서 아래 코드 조각을 사용해야 합니다. Blogger CMS 플랫폼을 사용하는 경우 HTML 보기 에서 게시물을 편집하고, Wordpress를 사용하는 경우 Gutenberg 편집기에서 사용자 정의 HTML 블록을 사용할 수 있습니다.

코드 편집 방법과 웹 사이트에 MCQ 질문과 답변을 더 추가하는 방법에 대한 비디오를 먼저 시청하는 것이 좋습니다.

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

CSS 및 자바스크립트 코드

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

모든 페이지에서 스크립트를 사용하려면 테마 코드에서 CSS 및 자바스크립트 코드를 직접 사용하고 사이트 전체에 로드하고 블로그 게시물에서는 HTML 코드만 사용할 수 있습니다.

하지만 제한된 페이지에서만 퀴즈를 사용하는 경우 블로그 게시물에 직접 사용하는 것이 좋습니다.

귀하의 Blogger 및 Wordpress 웹사이트에 페이지 매김 기능이 포함된 MCQ 퀴즈 섹션을 성공적으로 추가하셨기를 바랍니다. 궁금한 점이 있으면 댓글 섹션에서 자유롭게 질문하세요.

여기에서 다른 MCQ 퀴즈 블록도 확인해 보시기 바랍니다.

• Blogger에서 퀴즈 웹 사이트를 시작하는 방법
• WordPress 웹사이트에 MCQ를 추가하는 방법