Concevoir une application de QCM sur mobile avec MIT App Inventor

Plan de tutoriel

1- Principe de QCM

2- Objective de l'application mobile QCM

3- Interface graphique de l'application mobile

4- Programme de l'application mobile

Principe de QCM

Le principe d’un QCM (Questionnaire à Choix Multiples) repose sur une méthode d’évaluation ou d’apprentissage où une question est posée, et plusieurs réponses sont proposées. Parmi ces réponses, une ou plusieurs peuvent être correctes.

1. Structure d’un QCM

Un QCM est généralement composé de :

- Une question

- Plusieurs choix de réponses (généralement entre 3 et 5)

- Une ou plusieurs bonnes réponses

- Un système de validation et de score (facultatif)

2. Fonctionnement général

1- L’utilisateur lit la question.

2- Il choisit une ou plusieurs réponses parmi celles proposées.

3- Il clique sur un bouton pour valider sa réponse.

4- Le système indique si la réponse est correcte ou non (facultatif).

5- L’utilisateur peut passer à la question suivante.

6- À la fin, le score ou le résultat final est affiché (facultatif).

Objective de l'application mobile QCM

L’application affiche une question, accompagnée de trois choix de réponses, parmi lesquels l’utilisateur doit sélectionner la bonne réponse.

Objectifs pédagogiques et techniques :

1- Afficher des questions dynamiques

Chaque question est extraite d’une liste de questions.

L’utilisateur visualise une question à la fois avec une image associée (facultatif).

2- Proposer trois choix de réponses

L’utilisateur peut cocher un seul choix parmi trois.

Les autres choix sont automatiquement décochés (logique de sélection unique).

3- Valider la réponse et donner un retour immédiat

Grâce à un bouton "Valider", l’application vérifie si la réponse est correcte.

Un composant Notificateur affiche un message de succès ou d’erreur.

4- Passer à la question suivante

Un bouton "Suivant" permet d’accéder à la prochaine question.

5- Afficher le score final

À la fin du quiz, l’application affiche le nombre de réponses justes.

6- Redémarrer le QCM

Un bouton "Reset" permet de réinitialiser le quiz pour recommencer.

En résumé L'application mobile QCM permet d’apprendre en s’amusant, de tester ses connaissances via une interface simple, interactive et intuitive, le tout, créé sans écrire une seule ligne de code, grâce à MIT App Inventor.

Interface graphique de l'application mobile

L’interface graphique (ou interface utilisateur) joue un rôle essentiel dans l’application mobile QCM. Elle permet à l’utilisateur de voir, comprendre et interagir facilement avec les éléments du quiz.

Les composants de l'interface de l'application

- un Label affiche le texte de la question en cours.

- une Image peut être affichée si la question est accompagnée d’un support visuel.

- urois Cases à cocher (Checkbox) permettent à l’utilisateur de sélectionner une seule réponse parmi trois.

- un bouton Valider : pour envoyer la réponse.

- un bouton Suivant : pour passer à la question suivante.

- un bouton Reset : pour recommencer le QCM depuis le début.

- un composant Notificateur affiche des messages (Bonne réponse, Mauvaise réponse, Score final…).

Programme de l'application mobile

La partie Bloc dans MIT App Inventor permet de programmer le comportement logique de l’application mobile QCM. Elle fonctionne avec un langage visuel basé sur des blocs que l’on assemble pour créer les instructions du programme.

Programme de l'application QCM

Explication du programme

1- Initialisation des variables

a) Variable Score

La variable score sert à compter le nombre de bonnes réponses données par l’utilisateur au cours du quiz.

b) Variable numero_question

La variable numero_question sert à suivre la progression du quiz en indiquant le numéro de la question en cours.

c) Variable liste_questions

La variable liste_questions contient toutes les questions du QCM, stockées dans une liste.

Chaque élément de la liste représente une question textuelle.

d) Variable liste_reponses

La variable liste_reponses contient les bonnes réponses correspondant à chaque question du QCM.

Elle est utilisée pour vérifier si la réponse choisie par l'utilisateur est correcte.

d) Variable liste_images

La variable liste_images contient les images à afficher avec chaque question du QCM.

Chaque élément de la liste correspond à l’image liée à une question spécifique.

e) Variable liste_choix

La variable liste_choix contient les propositions de réponses pour chaque question, organisées sous forme de liste de listes.

Chaque élément de liste_choix est une liste contenant 3 choix correspondant à une question.

2- Procédure charger_quiz

Cette procédure sert à afficher la question, les choix de réponses et l’image associée correspondant au numéro de question en cours.

Elle prend en paramètre le numéro de la question (exemple : 1, 2, 3…).

Elle met à jour le texte du label question avec l’élément correspondant de la variable liste_questions.

Elle décocher toutes les cases à cocher (Choix_1, Choix_2, Choix_3) pour que l’utilisateur reparte avec une interface propre.

Elle met à jour le composant image avec l’image correspondante dans liste_images.

3- Procédure valider_question

Cette procédure sert à vérifier si la réponse choisie par l’utilisateur est correcte, mettre à jour le score, et afficher un message de retour (avec le composant Notificateur).

1- Elle détecte quelle case (Choix_1, Choix_2 ou Choix_3) est cochée.

2- Elle compare le texte du choix sélectionné avec la bonne réponse dans la variable liste_reponses_justes pour la question en cours.

Si la réponse est correcte : Incrémenter la variable score et afficher un message de réussite.

Sinon : Afficher un message d’erreur.

Si c’est la dernière question, afficher le score final.

4- Evènement Screen1.initialise

Cet événement se déclenche automatiquement au lancement de l’application, c’est-à-dire quand l’écran principal (Screen1) s’ouvre.

Il appele la procédure charger_quiz avec le numéro de la première question (1) pour afficher la première question et ses choix.

5- Evènement quand choix.changé

Cet événement se déclenche lorsque l’utilisateur coche ou décoche une case à cocher parmi les choix de réponses (exemple : Choix_1, Choix_2, Choix_3).

Il assurer qu’une seule case soit cochée à la fois, même si on utilise des cases à cocher (checkbox) au lieu de boutons radio.

Quand une case (Choix_X) est cochée, les deux autres cases sont automatiquement décochées.

5- Evènement valider.Clic

Cet événement se déclenche lorsque l’utilisateur clique sur le bouton "Valider" pour soumettre sa réponse à la question actuelle.

- Il désactiver le bouton Valider pour éviter que l’utilisateur valide plusieurs fois la même réponse.

- Si le numéro de la question est inférieur à 5 (par exemple, pour un quiz de 5 questions) :

on active le bouton Suivant pour permettre à l’utilisateur de passer à la question suivante et appeler la procédure valider_question qui vérifie la réponse donnée et met à jour le score.

On incrémente la variable numero_question pour préparer la prochaine question.

- Si le numéro de la question est égal à 5 (dernière question) :

On afficher un message avec le composant Notificateur indiquant le nombre total de bonnes réponses obtenues.

Le bouton Suivant peut rester désactivé ou être désactivé pour empêcher de passer à une question inexistante.

6- Evènement suivant.Clic

Cet événement se déclenche lorsque l’utilisateur clique sur le bouton "Suivant" pour passer à la question suivante du quiz.

Il permet de mettre à jour l’affichage avec la prochaine question et de préparer l’interface pour que l’utilisateur puisse y répondre :

a) Désactiver le bouton Suivant pour éviter plusieurs clics consécutifs sur ce bouton.

b) Activer le bouton Valider pour permettre à l’utilisateur de valider la nouvelle question affichée.

c) Appeler la procédure charger_quiz avec le numéro de la question courante pour afficher la prochaine question, ses choix, et son image associée.

6- Evènement reset.Clic

Cet événement se déclenche lorsque l’utilisateur clique sur le bouton "Reset" pour réinitialiser complètement le quiz et recommencer depuis la première question :

a) Remettre le score à 0.

b) Remettre le numero_question à 1.

c) Activer le bouton Valider.

d) Désactiver le bouton Suivant.

e) Appeler la procédure charger_quiz pour afficher la première question et ses choix.