Blogger ve Wordpress'te Sayfalandırmayla MCQ QUIZ Bölümü Nasıl Eklenir?

Bir MCQ sınav senaryosu arıyorsanız, o zaman doğru yere geldiniz. Bu makalede, Blogger ve Wordpress web sitelerinize duyarlı bir MCQ sınav bölümünü nasıl ekleyebileceğinizi göstereceğim.

Bir Sınav web sitesi işlettiğinizde, sınavınızın ilgi çekici olmasını ve okuyucularınıza değer katmasını istersiniz. Bu yüzden HTML, CSS ve Javascript kullanarak basit bir Sınav bloğu tasarladım ve burada sayfalandırma özelliklerine de sahip olacaksınız. Böylece Kullanıcı önceki ve sonraki düğmeleriyle birden fazla sayfa arasında gezinebilir.

Bu sayede sayfayı fazla uzatmadan tek bir blog yazısında birçok soruyu barındırabilir ve bir tuşla daha fazla test yükleyebileceksiniz. Ayrıca, kullanıcı seçeneklerden herhangi birine tıkladığında cevabın ayrıntılı açıklamasını görüntüleyebileceğiniz bir özellik de uyguladım.

Şimdi Blogger ve Wordpress web sitelerinize Sınav bölümünü nasıl ekleyebileceğinizi kontrol edelim.

Sayfalandırmayla ÇSS Sınav Bölümü Ekleme Adımları

Bunun için aşağıdaki kod parçasını Web Sitenizde kullanmanız gerekmektedir. Blogger CMS platformunu kullanıyorsanız gönderiyi HTML görünümünde düzenleyin ve Wordpress kullanıyorsanız Gutenberg düzenleyicinizdeki özel HTML bloğunu kullanabilirsiniz.

Öncelikle kodun nasıl düzenleneceğini ve web sitenize daha fazla MCQ sorusu ve cevabını nasıl ekleyeceğinizi anlatan videoyu izlemenizi öneririm.

 <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 ve Javascript kodu

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

Komut dosyasını tüm sayfalarda kullanmak istiyorsanız tema kodunuzda doğrudan CSS ve javascript kodunu kullanabileceğinizi, site genelinde yükleyebileceğinizi ve yalnızca Blog yazısında HTML kodunu kullanabileceğinizi unutmayın.

Ancak testi yalnızca sınırlı sayfalarda kullanıyorsanız, doğrudan blog yazısında kullanmanızı öneririm.

Umarım Blogger ve Wordpress web sitelerinize Pagination ile bir MCQ Quiz bölümünü başarıyla eklemişsinizdir. Herhangi bir şüpheniz varsa, yorum bölümünde sormaya çekinmeyin.

Ayrıca buradaki diğer MCQ Sınav Bloklarına da göz atmanızı öneririm.

• Blogger'da Sınav Web Sitesi Nasıl Başlatılır
• WordPress Web Sitesine ÇSS Nasıl Eklenir?