CoddyRun
Créer un quiz efficace ne se résume pas à afficher des questions.
C’est un véritable travail de structure, de design, d’ergonomie et de gestion des interactions.
Voici un exemple concret de mise en œuvre : un quiz EduCode complet, animé, structuré et entièrement interactif.
Structurer les questions : la base du quiz
Tout commence par une procédure simple et robuste permettant d’ajouter une question :
- un énoncé
- quatre propositions
- un index de bonne réponse
Chaque question est stockée dans un enregistrement, ce qui garantit :
- une organisation claire
- une manipulation facile
- une extensibilité immédiate (ajout, modification, réutilisation)
Cette approche permet de gérer 20 questions sans complexité supplémentaire.
Construire une interface intuitive
Un quiz doit être agréable à parcourir.
L’interface repose sur plusieurs éléments visuels :
- une barre d’en-tête avec le titre et le score
- une barre de progression dynamique
- un cadre d’énoncé
- quatre boutons de réponse
- un bouton "Suivant" affiché uniquement après validation
Les couleurs jouent un rôle essentiel :
- Bleu pour les éléments interactifs
- Gris foncé pour le fond
- Vert pour une bonne réponse
- Rouge pour une mauvaise réponse sélectionnée
Cette palette crée une ambiance moderne, proche des applications éducatives actuelles.
Gérer les interactions utilisateur
Le cœur du quiz repose sur la gestion du clic :
- détection de la zone cliquée
- identification de la réponse choisie
- validation
- mise à jour du score
- affichage de la correction
- passage à la question suivante
Chaque étape est pensée pour être fluide, sans temps mort, avec un retour visuel immédiat.
Une boucle de jeu simple et efficace
Pour chaque question :
- Affichage de l’interface
- Attente du clic utilisateur
- Vérification de la réponse
- Mise à jour du score
- Affichage de la correction
- Clic sur "Suivant" pour continuer
Cette boucle crée un rythme naturel, proche des applications de quiz professionnelles.
Un écran final motivant
À la fin des 20 questions, un écran de bilan affiche :
- le score
- le pourcentage de réussite
- un message personnalisé selon le niveau
Trois niveaux :
- Excellent (= 80 %)
- Bon travail (= 50 %)
- À revoir (< 50 %)
Un bouton REJOUER permet de recommencer immédiatement, favorisant l’apprentissage par répétition.
Programme :
@ Initialisation des procédures et structures de questions
procédure ajouterQ(tab, txt, o1, o2, o3, o4, r)
item est un enregistrement
item.enonce vaut txt
item.opt1 vaut o1
item.opt2 vaut o2
item.opt3 vaut o3
item.opt4 vaut o4
item.rep vaut r
tab ajoute item
fin procédure
procédure dessinerBouton(t, x, y, l, h, txt, numOpt, repOpt, choixOpt, valide)
couleurBouton est un texte
couleurBouton vaut #393E46
si valide alors
si numOpt = repOpt alors
couleurBouton vaut #2E7D32 // Vert si bonne réponse
sinon si numOpt = choixOpt alors
couleurBouton vaut #C62828 // Rouge si mauvaise réponse choisie
sinon
couleurBouton vaut #252A34 // Assombri sinon
fin si
fin si
rectangle_arrondi(t, x, y, l, h, 8, couleurBouton)
label(t, x + 20, y + 30, txt, #FFFFFF, 14)
fin procédure
procédure dessinerQuiz(t, q, numQ, totalQ, score, choixUtilisateur, validationAffichee)
effacer(t)
remplir(t, #1A1D24)
// Barre d'en-tête
rectangle(t, 0, 0, 640, 50, #252A34)
label(t, 20, 32, "QUIZ EDUCODE", #00ADB5, 20)
label(t, 210, 32, "Question " + convertir_texte(numQ) + " / " + convertir_texte(totalQ), #EEEEEE, 16)
label(t, 480, 32, "Score : " + convertir_texte(score), #FFD700, 16)
// Barre de progression
rectangle(t, 0, 50, 640, 6, #393E46)
largeurBarre est un nombre
largeurBarre vaut arrondi((numQ / totalQ) * 640)
rectangle(t, 0, 50, largeurBarre, 6, #00ADB5)
// Cadre de l'énoncé
rectangle_arrondi(t, 30, 75, 580, 50, 8, #252A34)
label(t, 45, 106, q.enonce, #FFFFFF, 14)
// Boutons de réponses
appelle dessinerBouton(t, 30, 140, 580, 48, q.opt1, 1, q.rep, choixUtilisateur, validationAffichee)
appelle dessinerBouton(t, 30, 200, 580, 48, q.opt2, 2, q.rep, choixUtilisateur, validationAffichee)
appelle dessinerBouton(t, 30, 260, 580, 48, q.opt3, 3, q.rep, choixUtilisateur, validationAffichee)
appelle dessinerBouton(t, 30, 320, 580, 48, q.opt4, 4, q.rep, choixUtilisateur, validationAffichee)
// Bouton Suivant / Info
si validationAffichee alors
rectangle_arrondi(t, 220, 380, 200, 40, 20, #00ADB5)
label(t, 290, 405, "SUIVANT", #FFFFFF, 14)
sinon
label(t, 200, 405, "Clique sur la bonne réponse...", #AAAAAA, 13)
fin si
affiche t
fin procédure
@ Chargement des 20 questions
questions est un tableau
appelle ajouterQ(questions, "1. Quel est le séparateur décimal en EduCode ?", "A) La virgule (,)", "B) Le point (.)", "C) Deux-points (:)", "D) L'espace", 2)
appelle ajouterQ(questions, "2. Comment ferme-t-on une condition si ?", "A) finsi", "B) fin si", "C) fin", "D) }", 2)
appelle ajouterQ(questions, "3. À quel index commence un tableau ?", "A) Index 0", "B) Index 1", "C) Index -1", "D) Index 0.5", 1)
appelle ajouterQ(questions, "4. À quel index commence un texte ?", "A) Index 0", "B) Index 1", "C) Index 2", "D) Index 0.5", 2)
appelle ajouterQ(questions, "5. Quel mot-clé sert à exécuter une procédure ?", "A) lancer", "B) executer", "C) appelle", "D) fonction", 3)
appelle ajouterQ(questions, "6. Écriture correcte d'une couleur hexadécimale ?", "A) '#FF0000'", "B) #FF0000", "C) rouge", "D) rgb(rouge)", 2)
appelle ajouterQ(questions, "7. Déclaration correcte d'un nombre ?", "A) x = 0", "B) x est un nombre", "C) nombre x", "D) var x : nombre", 2)
appelle ajouterQ(questions, "8. Comment affecter une valeur à une variable ?", "A) x = 10", "B) x vaut 10", "C) x est 10", "D) x <- 10", 2)
appelle ajouterQ(questions, "9. Quelle syntaxe crée un dictionnaire vide ?", "A) []", "B) {}", "C) [:]", "D) dict()", 3)
appelle ajouterQ(questions, "10. Quel mot-clé permet de sortir d'une boucle ?", "A) arrete", "B) break", "C) stopper", "D) fin", 1)
appelle ajouterQ(questions, "11. Quelle fonction calcule la racine carrée ?", "A) sqrt(x)", "B) racine(x)", "C) rad(x)", "D) sqr(x)", 2)
appelle ajouterQ(questions, "12. Quel mot-clé arrête le programme ?", "A) stopper", "B) fin", "C) quitter", "D) terminer", 4)
appelle ajouterQ(questions, "13. Comment s'écrit un commentaire d'une ligne ?", "A) //", "B) #", "C) --", "D) /*", 1)
appelle ajouterQ(questions, "14. Fonction pour tester la zone d'un clic ?", "A) cliquer()", "B) clique()", "C) zone()", "D) collision()", 2)
appelle ajouterQ(questions, "15. Comment ajouter un élément à un tableau t ?", "A) t.push(x)", "B) t ajoute x", "C) t + x", "D) t insere x", 2)
appelle ajouterQ(questions, "16. Quel est le type pour une chaîne de caractères ?", "A) string", "B) texte", "C) char", "D) message", 2)
appelle ajouterQ(questions, "17. Comment se termine une boucle tant que ?", "A) fin tant que", "B) fintantque", "C) wend", "D) fin tantque", 1)
appelle ajouterQ(questions, "18. Fonction pour mesurer un temps en ms ?", "A) temps()", "B) horloge()", "C) chrono()", "D) timer()", 3)
appelle ajouterQ(questions, "19. Opérateur pour le reste d'une division ?", "A) %", "B) mod", "C) rem", "D) div", 2)
appelle ajouterQ(questions, "20. Fonction pour effacer le dessin d'une toile ?", "A) nettoyer(t)", "B) effacer(t)", "C) raz(t)", "D) vider(t)", 2)
@ Boucle principale du jeu
maToile est une toile
dimension(maToile, 640, 440)
rejouer est un booléen
rejouer vaut vrai
tant que rejouer
score est un nombre
score vaut 0
i est un nombre
pour i de 0 à 19
actuelle est un enregistrement
actuelle vaut questions[i]
choix est un nombre
choix vaut 0
// 1. Afficher l'énoncé de la question
appelle dessinerQuiz(maToile, actuelle, i + 1, 20, score, 0, faux)
// 2. Attente de la sélection utilisateur
attenteClic est un booléen
attenteClic vaut vrai
clicX, clicY est un nombre
tant que attenteClic
cliquer maToile dans clicX, clicY
si clique(clicX, clicY, 30, 140, 580, 48) alors
choix vaut 1
attenteClic vaut faux
sinon si clique(clicX, clicY, 30, 200, 580, 48) alors
choix vaut 2
attenteClic vaut faux
sinon si clique(clicX, clicY, 30, 260, 580, 48) alors
choix vaut 3
attenteClic vaut faux
sinon si clique(clicX, clicY, 30, 320, 580, 48) alors
choix vaut 4
attenteClic vaut faux
fin si
fin tant que
// Mise à jour du score
si choix = actuelle.rep alors
score ajoute 1
fin si
// 3. Afficher la correction
appelle dessinerQuiz(maToile, actuelle, i + 1, 20, score, choix, vrai)
// 4. Attente du clic sur "SUIVANT"
attenteSuivant est un booléen
attenteSuivant vaut vrai
tant que attenteSuivant
cliquer maToile dans clicX, clicY
si clique(clicX, clicY, 220, 380, 200, 40) alors
attenteSuivant vaut faux
fin si
fin tant que
fin pour
// Écran final de bilan
effacer(maToile)
remplir(maToile, #1A1D24)
rectangle_arrondi(maToile, 70, 40, 500, 360, 12, #252A34)
label(maToile, 220, 90, "QUIZ TERMINÉ !", #00ADB5, 24)
pct est un nombre
pct vaut arrondi(pourcentage(score, 20))
label(maToile, 180, 160, "Votre score : " + convertir_texte(score) + " / 20", #EEEEEE, 20)
label(maToile, 210, 210, "Réussite : " + convertir_texte(pct) + " %", #FFD700, 20)
msg est un texte
si pct >= 80 alors
msg vaut "Excellent ! Vous maîtrisez EduCode !"
sinon si pct >= 50 alors
msg vaut "Bon travail ! Encore un petit effort."
sinon
msg vaut "Revoyez la spécification EduCode !"
fin si
label(maToile, 140, 270, msg, #FFFFFF, 15)
// Bouton Rejouer
rectangle_arrondi(maToile, 220, 320, 200, 50, 25, #00ADB5)
label(maToile, 275, 352, "REJOUER", #FFFFFF, 16)
affiche maToile
// Attente du clic sur "REJOUER"
attenteRejouer est un booléen
attenteRejouer vaut vrai
tant que attenteRejouer
cliquer maToile dans clicX, clicY
si clique(clicX, clicY, 220, 320, 200, 50) alors
attenteRejouer vaut faux
fin si
fin tant que
fin tant que
