Wie starte ich eine Quiz-Website in Blogger?

Das Erstellen einer Quiz-Website auf Blogger ist ein unkomplizierter Vorgang, für den keine Programmierkenntnisse erforderlich sind. Blogger ist eine kostenlose Blogging-Plattform von Google, mit der Sie Ihre Website erstellen und anpassen können.

In diesem Blogbeitrag führe ich Sie durch die Schritte, mit denen Sie ganz einfach eine Quiz-Website auf Blogger starten können.

Das Erstellen einer Website in Blogger ist ganz einfach. Sie benötigen lediglich ein Google-Konto und melden sich für eine neue Website auf der Blogger-Plattform an. Wenn Sie den vollständigen Einrichtungsprozess überprüfen möchten, können Sie unserem Artikel zum Starten eines Blogs auf Blogger folgen.

Nachdem Sie nun ein kostenloses Blog auf Blogger erstellt haben, müssen Sie Quizfragen als Blog-Beiträge auf Ihrer Website veröffentlichen. Sie können eine beliebige Nische auswählen und verschiedene Quizze in verschiedenen Kategorien veröffentlichen. Auf der Website können Sie die Fragen des Vorjahres zu verschiedenen Prüfungen, Probetests und Fähigkeitstests abdecken.

Auf diese Weise können Sie Ihren Lesern einen Mehrwert bieten und sobald Sie auf der Website ausreichend Traffic verzeichnen, können Sie die Genehmigung von Google Adsense beantragen. Es wird Ihnen helfen, Ihren Traffic mit gesponserten Anzeigen zu monetarisieren.

Schauen wir uns nun an, wie Sie MCQ-Quiz auf Ihrer Blogger-Website anzeigen können.

Dazu müssen Sie den folgenden Code im Abschnitt „ HTML bearbeiten “ Ihres Blog-Beitrags verwenden. Sie können den folgenden Code kostenlos verwenden.

Hinweis: Der kommerzielle Zweck dieses Codes ist nicht gestattet. Sie können den Code nicht als Ihren eigenen teilen.

Hier ist das einfache MCQ-Quizskript für die Blogger- Website.

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

Sie können diesen Code mit anderen CMS-Plattformen wie Wix, WordPress usw. verwenden.

Um nun weitere MCQ-Quiz dazu hinzuzufügen, müssen Sie diesen Abschnitt kopieren und die unten hervorgehobene ID ersetzen.

 <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=" questions5 " data-correct=" WAHR ">A) Blauwal</div>
        <div class="option" data-question=" Frage5 " data-correct="false">B) Afrikanischer Elefant</div>
        <div class="option" data-question=" Frage5 " data-correct="false">C) Giraffe</div>
        <div class="option" data-question=" Frage5 " data-correct="false">D) Löwe</div>
        <div class="explanation" data-question=" Frage5 ">Erklärung: Der Blauwal ist das größte Säugetier der Welt.</div>

Jetzt müssen Sie die richtige Option als Antwort zuweisen, indem Sie das Tag data-correct=“true“ zuweisen.

Stellen Sie sicher, dass alle anderen Optionen auf „false“ belassen werden.

Sie können sich das folgende Video ansehen, um zu erfahren, wie Sie es zu Blogger hinzufügen und weiter anpassen.

Wenn Sie irgendwelche Zweifel haben, fragen Sie mich gerne im Kommentarbereich.

Hinweis: Ich werde die erweiterte Version von Quiz Script veröffentlichen, sobald das Video 2.000 Aufrufe oder 50 Likes erhält. Vergessen Sie also nicht, das Video bis zum Ende anzuschauen und das Video zu liken.

Ich hoffe, dieser Artikel hilft Ihnen dabei , einen MCQ-Bereich in Blogger hinzuzufügen und ganz einfach Ihre eigene Quiz-Website zu starten. Wenn Sie möchten, dass ich weitere Tutorials beschreibe, fragen Sie einfach im Kommentarbereich danach.