EXERCICE 3, RAPPORT
Développement de page/application web interactives avec JavaScript

Auteur : Renda Elena
Date de publication : 23-11-2025

Liens

Objectifs

Le dispositif que j’ai créé a comme objectif principal l’apprentissage des étapes principales de la photosynthèse chlorophyllienne à travers une interaction (quiz). Le public principal de ce dispositif sont des élèves de fin de primaire (vu la simplification des étapes). Il peut donc être utilisé en situation scolaire avec le guidage d’un enseignant, mais aussi à la maison en autonomie, pour tester ses connaissances avant un test. Les seules connaissances préalables nécessaires sont une connaissance basique du processus de photosynthèse et des composantes d’une plante (feuilles, racines…). Après l’utilisation du dispositif, les élèves/utilisateurs sont censés identifier les étapes principales de la photosynthèse, les éléments impliqués dans le processus et leurs rôles et être capables de répondre à des questions simples pour renforcer la mémorisation.

Design

Le dispositif est composé d'une image/schéma et d'un petit quiz à choix multiples avec une seule réponse correcte. L’interface est assez simple et conçue pour aider la clarté de l’utilisateur. L’image SVG se trouve au centre de l’écran, lisible et avec une taille adaptée. L’image reste toujours présente pendant le quiz, permettant à l’utilisateur de la regarder avant de répondre. De plus, les flèches colorées sont reprises dans les questions, avec des parenthèses à la fin, pour aider encore plus à comprendre de quelle étape du processus on parle dans chaque question. Les réponses sont interactives, donnant un feedback immédiat (correct/incorrect), ce qui favorise l’apprentissage actif. Concernant les couleurs de la page, j’ai gardé un style similaire aux autres travaux que j’ai faits pour montrer une certaine clarté et continuité dans mon travail pour ce cours.

Production

Pour le développement de ce dispositif, je me suis servie de la même thématique de l’exercice 2 du cours. Par rapport à cet exercice, j’ai décidé de garder la première image du dispositif flash card, celle avec les flèches mais sans texte, que j’avais créée à l’aide de Inkscape. J’ai gardé aussi la même structure de base pour les fichiers .html et .css, avec des modifications nécessaires vu la modification de contenu. Ce qui a été complètement modifié, c’est le fichier .js, vu que dans le dispositif flash card il y avait un seul bouton sans feedback.

Auto-évaluation

Je trouve que le dispositif que j’ai créé présente plusieurs points forts : comme la clarté et la simplicité de l’interface, le feedback immédiat qui aide à comprendre le propre niveau de compréhension du sujet et l’adaptabilité du quiz à plusieurs sujets et thématiques. Par contre l’animation pourrait présenter des animations plus intéressantes, une quantité de questions plus ample et riche ou encore un feedback personnalisé à chaque question plutôt que générique. De plus je suis consciente d’avoir suivi un tutoriel et de ne pas avoir trop exploré et expérimenté avec mes fichiers JavaScript, et cela m’a peut-être empêché de développer un dispositif plus intéressant.

Bibliographie

Ressources