Comment démarrer un site Web de quiz dans Blogger ?

Créer un site Web de quiz sur Blogger est un processus simple qui ne nécessite aucune compétence en codage. Blogger est une plateforme de blogs gratuite de Google qui vous permet de créer et de personnaliser votre site Web.

Dans cet article de blog, je vais vous guider à travers les étapes pour démarrer très facilement un site Web de quiz sur Blogger.

Créer un site Web dans Blogger est assez simple. Tout ce dont vous avez besoin est d'un compte Google et de vous inscrire à un nouveau site Web sur la plateforme Blogger. Si vous souhaitez vérifier le processus de configuration complet, vous pouvez suivre notre article sur Comment créer un blog sur Blogger .

Maintenant que vous avez créé un blog gratuit sur Blogger, vous devez publier des quiz sur votre site Web en tant qu'articles de blog. Vous pouvez choisir n'importe quel créneau et publier divers quiz dans différentes catégories. Vous pouvez couvrir les questions de l'année précédente de divers examens, tests simulés et tests de compétences sur le site.

De cette façon, vous pouvez apporter de la valeur à vos lecteurs et une fois que vous commencez à recevoir une bonne quantité de trafic sur le site Web, vous pouvez demander l'approbation de Google Adsense. Cela vous aidera à monétiser votre trafic avec des publicités sponsorisées.

Voyons maintenant comment vous pouvez afficher des quiz QCM sur votre site Web Blogger.

Pour cela, vous devez utiliser le code ci-dessous dans la section « Modifier le HTML » de votre article de blog. Vous pouvez utiliser le code ci-dessous gratuitement.

Remarque : tout objectif commercial de ce code n'est pas autorisé. Vous ne pouvez pas partager le code comme le vôtre.

Voici le simple script MCQ Quiz pour le site Web 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>

Vous pouvez utiliser ce code avec d'autres plateformes CMS comme Wix, WordPress, etc.

Maintenant, pour ajouter plus de quiz MCQ à ce sujet, vous devez copier cette section et remplacer l'identifiant mis en évidence ci-dessous.

 <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=" question5 " données-correctes = " vrai ">A) Baleine bleue</div>
        <div class="option" data-question=" question5 " data-correct="false">B) Éléphant d'Afrique</div>
        <div class="option" data-question=" question5 " data-correct="false">C) Girafe</div>
        <div class="option" data-question=" question5 " data-correct="false">D) Lion</div>
        <div class="explication" data-question=" question5 ">Explication : La baleine bleue est le plus grand mammifère du monde.</div>

Vous devez maintenant attribuer la bonne option comme réponse en attribuant la balise data-correct="true" .

Assurez-vous de conserver toutes les autres options comme fausses.

Vous pouvez regarder la vidéo ci-dessous pour savoir comment l'ajouter à Blogger et la personnaliser davantage.

Si vous avez des doutes, n'hésitez pas à me le demander dans la section commentaires.

Remarque : je publierai la version avancée de Quiz Script une fois que la vidéo aura été vue 2 000 fois ou 50 J'aime. Alors n'oubliez pas de regarder la vidéo jusqu'à la fin et d'aimer la vidéo.

J'espère que cet article vous aidera à ajouter une section QCM dans Blogger et à démarrer facilement votre propre site Web Quiz. Si vous souhaitez que je couvre d'autres tutoriels, n'hésitez pas à le demander dans la section commentaires.