Aller au contenu principal
NUKOE

Créer un quiz interactif avec JavaScript et Canvas : guide débutant

• 8 min •
Exemple de quiz interactif créé avec JavaScript et l'API Canvas

Créer votre premier quiz interactif avec JavaScript et Canvas : guide complet pour débutants

Imaginez un quiz qui ne se contente pas de poser des questions, mais qui les rend visuellement captivantes avec des animations, des interactions fluides et un design personnalisé. C'est exactement ce que permet la combinaison de JavaScript et de l'API Canvas. Contrairement à ce que beaucoup pensent, vous n'avez pas besoin d'être un expert pour commencer. En suivant cette approche structurée, vous pourrez créer votre première application interactive en quelques heures seulement.

Pourquoi s'intéresser à cette technologie maintenant ? Les interfaces utilisateur évoluent vers plus d'interactivité et de personnalisation. Un quiz basique avec des boutons radio semble désormais daté. Avec Canvas, vous pouvez dessiner des éléments graphiques directement dans le navigateur, créer des animations personnalisées et offrir une expérience utilisateur bien plus engageante. Cet article vous guide pas à pas, en partant des concepts fondamentaux jusqu'à la création d'un quiz fonctionnel, en évitant les pièges classiques que rencontrent les débutants.

Pourquoi commencer par Canvas plutôt que par des frameworks ?

La plupart des tutoriels recommandent d'apprendre React, Vue.js ou d'autres frameworks avant de se lancer dans des projets interactifs. Mais cette approche a un défaut majeur : elle vous éloigne des mécanismes fondamentaux du web. Comme le souligne un développeur sur Reddit, "j'ai appris React en utilisant l'API League of Legends pour construire une application de recherche de joueurs". Cette méthode fonctionne, mais elle vous enferme dans l'écosystème d'un framework spécifique.

Canvas, au contraire, vous donne un contrôle total sur chaque pixel de votre application. Vous apprenez comment fonctionnent réellement les animations et les interactions, sans couches d'abstraction. Cette connaissance fondamentale vous servira quel que soit le framework que vous utiliserez plus tard. De plus, comme le mentionne un tutoriel sur FreeCodeCamp, "si vous connaissez les bases de JavaScript, je pourrais préparer quelque chose sur les animations avec Canvas". C'est exactement ce que nous allons faire ici.

Les trois piliers d'un quiz Canvas réussi

Avant de coder, il faut comprendre l'architecture de base. Un quiz interactif avec Canvas repose sur trois composants essentiels :

  1. Le contexte de dessin - C'est votre zone de travail où tout sera dessiné
  2. La logique d'état - Comment suivre les questions, réponses et scores
  3. Le système d'événements - Comment réagir aux clics et autres interactions

Voici comment ces éléments s'articulent dans une structure typique :

| Composant | Rôle | Exemple d'implémentation |

|-----------|------|--------------------------|

| Contexte Canvas | Zone de dessin principale | `const ctx = canvas.getContext('2d')` |

| État du quiz | Stocke questions/réponses | Objet JavaScript avec score et index |

| Gestionnaire d'événements | Capture les interactions | `canvas.addEventListener('click', ...)` |

| Boucle de rendu | Met à jour l'affichage | Fonction appelée à chaque frame |

Étape par étape : construire votre premier quiz

Étape 1 : Configuration de base du Canvas

Commencez par créer un fichier HTML simple avec un élément Canvas. La taille importe : choisissez des dimensions qui s'adapteront bien sur mobile et desktop. Initialisez le contexte 2D, c'est votre porte d'entrée vers toutes les fonctionnalités de dessin.

const canvas = document.getElementById('quizCanvas');
const ctx = canvas.getContext('2d');

Étape 2 : Structure des données du quiz

Vos questions et réponses doivent être organisées de manière logique. Un tableau d'objets fonctionne parfaitement :

const quizData = [
  {
    question: "Quelle est la capitale de la France ?",
    options: ["Londres", "Berlin", "Paris", "Madrid"],
    correct: 2,
    explanation: "Paris est la capitale depuis 508."
  }
  // Ajoutez d'autres questions ici
];

Étape 3 : Dessiner les éléments interactifs

C'est là que Canvas brille. Au lieu d'utiliser des boutons HTML standards, vous dessinez vos propres boutons :

function drawButton(x, y, width, height, text) {
  // Dessiner le rectangle du bouton
  ctx.fillStyle = '#3498db';
  ctx.fillRect(x, y, width, height);
  
  // Ajouter le texte
  ctx.fillStyle = 'white';
  ctx.font = '16px Arial';
  ctx.fillText(text, x + 10, y + 25);
}

Étape 4 : Gérer les interactions utilisateur

La détection des clics sur Canvas nécessite un calcul de position. Quand l'utilisateur clique, vous devez déterminer sur quel élément il a cliqué :

canvas.addEventListener('click', (event) => {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  
  // Vérifier si le clic est sur un bouton de réponse
  checkAnswerClick(x, y);
});

Étape 5 : Animer les transitions

Les animations rendent votre quiz plus vivant. Pour faire apparaître une question progressivement :

function fadeInQuestion(questionIndex) {
  let opacity = 0;
  
  function animate() {
    opacity += 0.05;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.globalAlpha = opacity;
    drawQuestion(questionIndex);
    
    if (opacity < 1) {
      requestAnimationFrame(animate);
    }
  }
  
  animate();
}

Les erreurs à éviter absolument (et comment les corriger)

Erreur 1 : Oublier de vider le Canvas entre les frames

Sans `clearRect()`, vos dessins s'accumulent et créent un effet de "fantôme". Solution : toujours effacer la zone avant de redessiner.

Erreur 2 : Gestion incorrecte des événements sur mobile

Les coordonnées de toucher diffèrent des coordonnées de clic. Utilisez `event.touches[0]` pour mobile et normalisez les positions.

Erreur 3 : Ne pas optimiser les performances

Dessiner tout le Canvas à chaque frame est coûteux. Dessinez seulement ce qui change, ou utilisez des techniques de mise en cache.

Erreur 4 : Ignorer l'accessibilité

Canvas est moins accessible par défaut que le HTML. Ajoutez des attributs ARIA et prévoyez un fallback pour les lecteurs d'écran.

Comment tester et améliorer votre quiz

Comme le mentionne un guide sur la création de GPT personnalisés, "vous pouvez tester votre GPT pendant que vous travaillez dessus". Appliquez ce principe à votre quiz : testez chaque fonctionnalité immédiatement après l'avoir implémentée. Demandez à des amis de l'essayer et observez où ils rencontrent des difficultés.

Pour des fonctionnalités avancées, envisagez d'ajouter :

  • Un chronomètre pour chaque question
  • Des effets visuels pour les bonnes/mauvaises réponses
  • Un système de progression avec sauvegarde locale
  • La possibilité de créer ses propres questions

Quelle est la prochaine étape après ce quiz ?

Vous avez maintenant les bases pour créer des applications interactives avec Canvas. Mais pourquoi s'arrêter là ? Comme le montre la plateforme d'apprentissage en ligne Travitor mentionnée sur FreeCodeCamp, vous pourriez créer "une leçon complète" avec des éléments interactifs complexes. Imaginez un cours de géographie où l'utilisateur doit placer les pays sur une carte, ou un quiz scientifique avec des simulations animées.

La vraie question n'est pas "pouvez-vous créer un quiz avec Canvas ?", mais "quelles expériences d'apprentissage interactives allez-vous inventer maintenant que vous maîtrisez ces outils ?"

Pour aller plus loin