Rapport – STIC I Exercice 2

Le lien suivant mène au dispositif "flashcard" développé pour cet exercice :

• Dispositif: Flashcard "Les 3 Zones d'Apprentissage"

Ce dispositif "flashcard" vise à résoudre une problématique pédagogique simple : la difficulté des étudiants à concrétiser la théorie des zones d'apprentissage.

Le public cible est constitué des étudiants en sciences de l'éducation, notamment ceux du Master MALTT, qui découvrent ce concept.

Le dispositif est conçu pour l'auto-apprentissage (auto-évaluation formative). Il permet à l'étudiant de tester rapidement sa compréhension d'un modèle théorique (basé sur la ZPD de Vygotsky et formalisé par Senninger) en associant des exemples concrets à chaque zone.

La solution à la problématique repose sur une interaction simple de type "question/réponse", fondamentale au principe de la flashcard.

L'utilisateur est d'abord confronté à la version "question" (`image1.svg`), qui montre les trois zones (Confort, Apprentissage, Panique) sans exemples. Cela l'incite à un effort de rappel actif.

En cliquant sur le bouton "Afficher les exemples", l'utilisateur active la version "réponse" (`image2.svg`), qui affiche des exemples concrets pour chaque zone. L'activité pédagogique réside dans ce clic : il permet à l'étudiant d'obtenir un feedback immédiat et de corriger ou valider sa propre réflexion.

Le dispositif a été développé en respectant le principe de séparation des responsabilités : HTML pour la structure, CSS pour le style, et JavaScript pour l'interactivité.

Conformément aux contraintes, deux images vectorielles (`.svg`) ont été créées à l'aide du logiciel CorelDRAW 21.2.0.706. Le fichier `image2.svg` est une modification du `image1.svg`, auquel j'ai ajouté des exemples textuels pour chaque zone. Le CSS utilise des unités `vw` (`width: 90vw`) pour assurer l'adaptabilité de l'image.

Le code JavaScript, basé sur le tutoriel, utilise la méthode `getElementById` pour trouver les éléments et modifie la propriété `src` de l'image et le `textContent` du bouton lors d'un événement `onclick`.

Défis techniques rencontrés :

Plusieurs défis techniques sont apparus lors de l'introduction à JavaScript :

• SyntaxError (Apostrophe) : L'interaction ne fonctionnait pas initialement. La console du navigateur (F12) a révélé une `Uncaught SyntaxError` causée par l'apostrophe dans `alt="Zones d'apprentissage"`. La solution a été de remplacer les guillemets simples externes par des guillemets doubles (`alt="..."`).
• Ordre des calques SVG : Le texte des exemples (`image2.svg`) était masqué par les cercles. Le problème venait de l'ordre des éléments dans le code SVG. La solution a été de redéfinir la structure du SVG : d'abord dessiner tous les cercles, puis dessiner tous les textes, afin que ces derniers apparaissent au-dessus.

Le résultat final est fonctionnel et respecte l'intégralité des contraintes techniques et pédagogiques de l'exercice (SVG externe, modification, `vw`, scénarisation).

Initialement, cet exercice m'a semblé intimidant. La comparaison avec le tutoriel vidéo, qui plaçait tout le code dans un seul fichier HTML, a créé une confusion : j'ai cru que notre approche (fichiers séparés) était incorrecte. J'ai compris par la suite que la séparation des fichiers était au contraire une meilleure pratique professionnelle.

Les erreurs de syntaxe (l'apostrophe) и les erreurs de rendu (les calques SVG) ont été frustrantes, mais extrêmement formatrices. Elles m'ont forcée à utiliser la console de débogage, ce qui est une compétence essentielle.

• Senninger, T. (2000). Abenteuer leiten, in Abenteuern lernen. Münster: Ökotopia. (Pour le modèle des zones d'apprentissage).
• Vygotsky, L. S. (1978). Mind in society: The development of higher psychological processes. Cambridge, MA: Harvard University Press. (Pour la base théorique de la ZPD).
• Supports de cours STIC I – Tutoriel "Premiers pas avec JavaScript".

• Documentation MDN Web Docs (pour les syntaxes `getElementById` et `.src`).
• Gabarit et `style.css` de mon rapport de l'Exercice 1 (pour la cohérence visuelle).
• Assistant IA (Google, modèle Gemini) : Consultation pour l'orientation sur la structure SVG et l'identification des erreurs (SyntaxError de l'apostrophe et ordre des calques), ainsi que pour un soutien à la rédaction (reformulation, vérification de l'orthographe et grammaire).