Blogger'da Sınav Web Sitesi Nasıl Başlatılır?

Blogger'da bir test web sitesi oluşturmak, kodlama becerisi gerektirmeyen basit bir işlemdir. Blogger, Google'ın web sitenizi oluşturmanıza ve özelleştirmenize olanak tanıyan ücretsiz bir blog platformudur.

Bu blog yazısında, Blogger'da çok kolay bir şekilde bir test web sitesi başlatma adımları konusunda size rehberlik edeceğim.

Blogger'da Web Sitesi oluşturmak oldukça kolaydır. Tek ihtiyacınız olan bir Google Hesabı ve Blogger Platformunda Yeni bir web sitesine kaydolmaktır. Kurulum Sürecinin tamamını kontrol etmek istiyorsanız Blogger'da blog nasıl başlatılır başlıklı Makalemizi takip edebilirsiniz.

Artık Blogger'da Ücretsiz bir Blog oluşturdunuz, web sitenize Blog Gönderileri olarak Sınavlar göndermeniz gerekiyor. Herhangi bir niş alanı seçebilir ve farklı kategorilerde çeşitli testler yayınlayabilirsiniz. Çeşitli Sınavların, Deneme Testlerinin ve Beceri testlerinin Önceki yılın Sorularını sitede bulabilirsiniz.

Bu şekilde okuyucularınıza değer katabilir ve web sitesinde iyi miktarda trafik almaya başladığınızda Google Adsense onayına başvurabilirsiniz. Sponsorlu reklamlarla Trafiğinizden para kazanmanıza yardımcı olacaktır.

Şimdi Blogger web sitenizde MCQ Sınavlarını nasıl gösterebileceğinizi kontrol edelim.

Bunun için Blog yazınızın “ HTML Düzenle ” kısmında aşağıdaki kodu kullanmanız gerekmektedir. Aşağıdaki kodu ücretsiz olarak kullanabilirsiniz.

Not: Bu kodun herhangi bir ticari amaca yönelik olmasına izin verilmez. Kodu kendinize aitmiş gibi paylaşamazsınız.

İşte Blogger web sitesi için basit MCQ Sınav Komut Dosyası .

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

Bu kodu Wix, WordPress vb. gibi diğer CMS platformlarıyla kullanabilirsiniz.

Şimdi buna daha fazla MCQ Testi eklemek için bu bölümü kopyalamanız ve aşağıda vurgulanan Kimliği değiştirmeniz gerekir.

 <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=" soru5 " veri doğru = " doğru ">A) Mavi balina</div>
        <div class = "seçenek" veri sorusu = " soru5 " data-correct="false">B) Afrika fili</div>
        <div class = "seçenek" veri sorusu = " soru5 " data-correct="false">C) Zürafa</div>
        <div class = "seçenek" veri sorusu = " soru5 " data-correct="false">D) Aslan</div>
        <div class = "açıklama" data-soru = " soru5 ">Açıklama: Mavi balina dünyadaki en büyük memelidir.</div>

Şimdi data-correct=”true” etiketini atayarak doğru seçeneği cevap olarak atamanız gerekiyor.

Diğer tüm seçenekleri false olarak tuttuğunuzdan emin olun.

Blogger'a nasıl ekleyeceğinizi ve daha da özelleştireceğinizi öğrenmek için aşağıdaki videoyu izleyebilirsiniz.

Herhangi bir şüpheniz varsa, yorum bölümünde bana sormaya çekinmeyin.

Not: Video 2k görüntüleme veya 50 Beğeni aldığında Quiz Script'in Gelişmiş sürümünü yayınlayacağım. Bu yüzden videoyu sonuna kadar izlemeyi ve videoyu beğenmeyi unutmayın.

Umarım bu Makale , Blogger'a bir ÇSS bölümü eklemenize ve kendi Sınav web sitenizi kolayca başlatmanıza yardımcı olur. Daha fazla ders anlatmamı istiyorsanız, yorum bölümünde sormaya çekinmeyin.