Guide 2026 : Générer un Quiz Interactif par IA (Gemini) à la fin de vos articles Blogger

 

Bonjour à tous, ici Lucas Martin sur Cash Astuce. Comment transformer un simple lecteur passif en un utilisateur engagé ? La réponse du SEO moderne en 2026 est la Gamification. Si vous ajoutez un test de connaissances à la fin de vos tutoriels, l'engagement explose.

Mais créer des QCM manuellement prend un temps fou. C'est là que l'IA intervient ! Nous allons concevoir un bouton "Générer un Quiz" qui va lire le contenu de votre article, demander à l'API Gemini de fabriquer un QCM de 3 questions avec les bonnes et mauvaises réponses, et générer une interface interactive en Vanilla JS. Le tout, de manière 100% autonome !

Pourquoi Google adore les quiz interactifs ?

L'intégration de micro-interactions en bas de page est le Saint Graal pour les Core Web Vitals :

• Le lecteur scrolle jusqu'en bas (taux de lecture de 100%).
• Il interagit avec la page (clics sur les réponses), ce qui envoie des signaux positifs au moteur de recherche (Interaction to Next Paint - INP).
• Le contenu généré est pertinent, gardant le lecteur captivé.

Tutoriel : Créer le Widget Quiz IA sur Blogger

Comme d'habitude : Mettez votre thème en sécurité (Thème > Sauvegarder) avant de coder.

Étape 1 : Le CSS du Quiz UI

Ajoutez ce CSS pour rendre le QCM attrayant et compatible avec le Dark Mode :

/* Quiz IA Gemini - Cash Astuce */
#ca-quiz-container {
  margin: 30px 0; padding: 20px;
  background-color: #fcfcfc; border: 2px dashed #0056b3;
  border-radius: 8px; text-align: center;
}
.ca-quiz-btn {
  background: linear-gradient(135deg, #0056b3, #004494);
  color: white; padding: 10px 20px;
  border: none; border-radius: 5px; font-weight: bold;
  cursor: pointer; transition: 0.3s;
}
.ca-quiz-btn:hover { opacity: 0.9; transform: translateY(-2px); }
.ca-quiz-question { font-weight: bold; margin: 15px 0 10px; color: #222; text-align: left;}
.ca-quiz-option {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; margin-bottom: 5px;
  background: #fff; border: 1px solid #ccc;
  border-radius: 4px; cursor: pointer; transition: 0.2s;
}
.ca-quiz-option:hover { background: #f0f7ff; border-color: #0056b3; }
.ca-quiz-correct { background: #d4edda !important; border-color: #28a745 !important; }
.ca-quiz-wrong { background: #f8d7da !important; border-color: #dc3545 !important; }

/* Dark Mode */
[data-theme="dark"] #ca-quiz-container { background-color: #1a1a1a; border-color: #4da3ff; }
[data-theme="dark"] .ca-quiz-question { color: #eee; }
[data-theme="dark"] .ca-quiz-option { background: #2a2a2a; border-color: #444; color: #ccc; }
[data-theme="dark"] .ca-quiz-option:hover { background: #333; }

Étape 2 : L'Algorithme JSON par Vanilla JS

Insérez ce script au-dessus de </body>. L'astuce magique ici est notre Prompt (requête) : nous forçons Gemini à répondre avec un format JSON strict pour pouvoir l'afficher en HTML.

<!-- Script Quiz IA par Cash Astuce -->
<b:if cond='data:view.isPost'>
<script>
//<![CDATA[
document.addEventListener('DOMContentLoaded', function() {
  const postBody = document.querySelector('.post-body');
  if (!postBody) return;

  const quizBox = document.createElement('div');
  quizBox.id = 'ca-quiz-container';
  quizBox.innerHTML = `
🧠 Avez-vous bien compris l'article ?
    
L'IA va générer un quiz sur mesure basé sur ce que vous venez de lire.
    
    
`;
  
  postBody.appendChild(quizBox); // Ajout à la fin de l'article

  document.getElementById('ca-quiz-trigger').addEventListener('click', async function() {
    const contentDiv = document.getElementById('ca-quiz-content');
    this.style.display = 'none';
    contentDiv.innerHTML = '
Fabrication du quiz par Gemini en cours...
';

    const apiKey = 'VOTRE_CLE_API_GEMINI_ICI';
    const textContent = postBody.innerText.substring(0, 2500);
    // Prompt strict pour forcer le JSON
    const prompt = `Génère un quiz QCM de 2 questions basées strictement sur ce texte. Réponds UNIQUEMENT avec un tableau JSON valide au format exact suivant, sans aucun autre texte ni balise Markdown : [{"q":"Question 1?", "options":["Rep A", "Rep B", "Rep C"], "answer":0}, {"q":"Question 2?", "options":["Rep A", "Rep B", "Rep C"], "answer":2}]. Voici le texte : ` + textContent;

    try {
      const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${apiKey}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ contents: [{ parts: [{ text: prompt }] }] })
      });
      const data = await response.json();
      let aiResponse = data.candidates[0].content.parts[0].text;
      
      // Nettoyage de la réponse IA (suppression des potentiels ```json)
      aiResponse = aiResponse.replace(/```json/g, '').replace(/```/g, '').trim();
      
      const questions = JSON.parse(aiResponse);
      let html = '';
      
      questions.forEach((item, qIndex) => {
        html += `
${item.q}
`;
        item.options.forEach((opt, oIndex) => {
          html += ``;
        });
      });
      contentDiv.innerHTML = html;

    } catch (err) {
      contentDiv.innerHTML = '
Erreur lors de la génération du Quiz.
';
      console.error(err);
    }
  });
});

function checkAnswer(btn, isCorrect) {
  if (isCorrect) {
    btn.classList.add('ca-quiz-correct');
    btn.innerHTML += ' ✅';
  } else {
    btn.classList.add('ca-quiz-wrong');
    btn.innerHTML += ' ❌';
  }
  // Désactiver les boutons frères
  const siblings = btn.parentElement.querySelectorAll('.ca-quiz-option');
  siblings.forEach(s => s.disabled = true);
}
//]]>
</script>
</b:if>

Conclusion

C'est fait ! La puissance de l'IA transforme désormais votre blog en une plateforme de e-learning interactive. Le visiteur lit votre tutoriel, teste ses connaissances en fin de page, et retient votre blog comme une ressource premium.

Remarquez comment cet outil complète parfaitement notre création précédente : l'Infobulle IA "Explique-moi". Pendant la lecture, l'Infobulle aide à comprendre le texte. À la fin, le Quiz vérifie l'apprentissage. Vous venez de créer un tunnel de rétention parfait ! Partagez votre avis sur cette fonctionnalité en commentaire !