Bagaimana Memulai Situs Kuis di Blogger?

Membuat situs kuis di Blogger adalah proses mudah yang tidak memerlukan keahlian pengkodean. Blogger adalah platform blog gratis dari Google yang memungkinkan Anda membuat dan menyesuaikan situs web Anda.

Dalam postingan blog ini, saya akan memandu Anda melalui langkah-langkah memulai situs kuis di Blogger dengan sangat mudah.

Membuat Website di Blogger cukup mudah. Yang Anda butuhkan hanyalah Akun Google dan mendaftar ke situs web baru di Platform Blogger. Jika Anda ingin memeriksa Proses Penyiapan selengkapnya, Anda dapat mengikuti Artikel kami tentang Cara memulai blog di Blogger .

Sekarang Anda telah membuat Blog Gratis di Blogger, Anda perlu Memposting Kuis di situs web Anda sebagai Postingan Blog. Anda dapat memilih niche apa pun dan menerbitkan berbagai kuis dalam berbagai kategori. Anda dapat meliput Soal-soal tahun sebelumnya dari berbagai Ujian, Tes Mock, dan Tes Keterampilan di situs.

Dengan cara ini, Anda dapat memberikan nilai kepada pembaca Anda dan setelah Anda mulai menerima jumlah lalu lintas yang bagus di situs web Anda dapat mengajukan permohonan persetujuan Google Adsense. Ini akan membantu Anda memonetisasi Lalu Lintas Anda dengan iklan bersponsor.

Sekarang mari kita periksa bagaimana Anda dapat menampilkan Kuis MCQ di situs Blogger Anda.

Untuk ini, Anda perlu menggunakan kode di bawah ini pada postingan Blog Anda di bagian " Edit HTML ". Anda dapat menggunakan kode di bawah ini secara gratis.

Catatan: Tujuan komersial apa pun dari kode ini tidak diperbolehkan. Anda tidak dapat membagikan kode sebagai milik Anda.

Berikut adalah Script Kuis MCQ sederhana untuk website Blogger .

 <style> body { font-family: Arial, sans-serif; } .quiz-container { max-width: 800px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } .question { font-weight: bold; margin-bottom: 10px; } .option { margin: 5px 0; padding: 10px; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; } .option:not(.selected):hover { background-color: #f0f0f0; } .selected { background-color: #007acc; color: white; } .correct { background-color: green; color: white; } .wrong { background-color: red; color: white; } .explanation { margin-top: 10px; display: none; } .report-card { margin-top: 20px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; background-color: #f0f0f0; } .report-card h2{ margin: 0px!important; } .report-card p{ margin: 0.5em 0!important; } </style> <div class="quiz-container"> <div class="question">Question 1: What is 2 + 2?</div> <div class="option" data-question="question1" data-correct="true">A) 4</div> <div class="option" data-question="question1" data-correct="false">B) 5</div> <div class="option" data-question="question1" data-correct="false">C) 6</div> <div class="option" data-question="question1" data-correct="false">D) 7</div> <div class="explanation" data-question="question1">Explanation: 2 + 2 equals 4.</div> <div class="question">Question 2: What is the capital of France?</div> <div class="option" data-question="question2" data-correct="true">A) Paris</div> <div class="option" data-question="question2" data-correct="false">B) London</div> <div class="option" data-question="question2" data-correct="false">C) Berlin</div> <div class="option" data-question="question2" data-correct="false">D) Madrid</div> <div class="explanation" data-question="question2">Explanation: The capital of France is Paris.</div> <div class="question">Question 3: What is the largest planet in our solar system?</div> <div class="option" data-question="question3" data-correct="true">A) Jupiter</div> <div class="option" data-question="question3" data-correct="false">B) Earth</div> <div class="option" data-question="question3" data-correct="false">C) Mars</div> <div class="option" data-question="question3" data-correct="false">D) Venus</div> <div class="explanation" data-question="question3">Explanation: Jupiter is the largest planet in our solar system.</div> <div class="question">Question 4: Which gas do plants absorb from the atmosphere?</div> <div class="option" data-question="question4" data-correct="true">A) Carbon dioxide</div> <div class="option" data-question="question4" data-correct="false">B) Oxygen</div> <div class="option" data-question="question4" data-correct="false">C) Nitrogen</div> <div class="option" data-question="question4" data-correct="false">D) Hydrogen</div> <div class="explanation" data-question="question4">Explanation: Plants absorb carbon dioxide from the atmosphere.</div> <div class="question">Question 5: What is the largest mammal in the world?</div> <div class="option" data-question="question5" data-correct="true">A) Blue whale</div> <div class="option" data-question="question5" data-correct="false">B) African elephant</div> <div class="option" data-question="question5" data-correct="false">C) Giraffe</div> <div class="option" data-question="question5" data-correct="false">D) Lion</div> <div class="explanation" data-question="question5">Explanation: The blue whale is the largest mammal in the world.</div> <div class="report-card"> <h2>Report Card</h2> <p>Total Questions Attempted: <span>0</span></p> <p>Correct Answers: <span>0</span></p> <p>Wrong Answers: <span>0</span></p> <p>Percentage: <span>0%</span></p> </div> </div> <script> const options = document.querySelectorAll('.option'); const attemptedCount = document.getElementById('attemptedCount'); const correctCount = document.getElementById('correctCount'); const wrongCount = document.getElementById('wrongCount'); const percentage = document.getElementById('percentage'); let totalQuestions = 0; let correctAnswers = 0; options.forEach(option => { option.addEventListener('click', () => { const questionId = option.getAttribute('data-question'); const isCorrect = option.getAttribute('data-correct') === 'true'; options.forEach(o => { if (o.getAttribute('data-question') === questionId) { o.classList.remove('selected', 'correct', 'wrong'); if (o === option) { o.classList.add('selected'); if (isCorrect) { o.classList.add('correct'); correctAnswers++; } else { o.classList.add('wrong'); // Highlight the correct answer options.forEach(correctOption => { if ( correctOption.getAttribute('data-question') === questionId && correctOption.getAttribute('data-correct') === 'true' ) { correctOption.classList.add('correct'); } }); } totalQuestions++; } } }); // Show explanation const explanation = document.querySelector(`.explanation[data-question="${questionId}"]`); if (explanation) { explanation.style.display = 'block'; } // Update report card attemptedCount.textContent = totalQuestions; correctCount.textContent = correctAnswers; wrongCount.textContent = totalQuestions - correctAnswers; percentage.textContent = ((correctAnswers / totalQuestions) * 100).toFixed(2) + '%'; }); }); </script>

Anda dapat menggunakan kode ini dengan platform CMS lain seperti Wix, WordPress, dll.

Sekarang untuk menambahkan lebih banyak Kuis MCQ pada ini, Anda perlu menyalin bagian ini dan mengganti Id yang disorot di bawah.

 <div class="question"has-inline-color has-theme-palette-2-color">question5 ">Question 5: What is the largest mammal in the world?</div> <div class="option" data-question=" <div class="question"has-inline-color has-theme-palette-2-color">question5 ">Question 5: What is the largest mammal in the world?</div> <div class="option" data-question=" pertanyaan5 " data-benar=" BENAR ">A) Paus biru</div>
        <div class="pilihan" data-pertanyaan=" pertanyaan5 " data-true="false">B) Gajah Afrika</div>
        <div class="pilihan" data-pertanyaan=" pertanyaan5 " data-true="false">C) Jerapah</div>
        <div class="pilihan" data-pertanyaan=" pertanyaan5 " data-true="false">D) Singa</div>
        <div class="penjelasan" data-pertanyaan=" pertanyaan5 ">Penjelasan: Paus biru adalah mamalia terbesar di dunia.</div>

Sekarang Anda perlu menetapkan opsi yang tepat sebagai jawaban dengan menetapkan tag data-true=”true” .

Pastikan semua opsi lain tetap salah.

Anda dapat menonton video di bawah ini untuk mempelajari Cara menambahkannya ke Blogger dan menyesuaikannya lebih lanjut.

Jika Anda ragu, silakan bertanya kepada saya di bagian komentar.

Catatan: Saya akan merilis Skrip Kuis versi Lanjutan setelah video mendapat 2 ribu penayangan atau 50 Suka. Jadi, jangan lupa tonton videonya sampai selesai dan Like videonya.

Saya harap Artikel ini membantu Anda menambahkan bagian MCQ di Blogger dan memulai situs Kuis Anda sendiri dengan mudah. Jika Anda ingin saya membahas tutorial lainnya, silakan bertanya di bagian komentar.