Informations générales :


Exercice n°5 :

Drag & drop avec AstroSon


Objectifs

Cet exercice est réalisé pour des élèves en cours d'apprentissage de la lecture. Il permet de travailler la discrimination et l'identification de différents phonèmes de la langue française et de les associer à leurs corespondances graphiques. Plus précisément, le joueur s'entraîne à reconnaître un son précis dans un mot entendu et à le classer correctement. Les sons travaillés sont : [wa], [ɔ̃], [ʃ], [u]. Le joueur doit classer en tout 20 images, soit 5 images par sons.

Selon le niveau de lecture, cette page peut être utilisée de manière indépendante ou en continuité du module "AstroSon" réalisé dans le cadre du cours VIP. Elle peut également être pensée comme une activité de consolidation et être intégrée ultérieurement au module, permettant de clore la phase d'apprentissage.

Design

Le design reprend la même mise en page que le module "AstroSon" en ce qui concerne l'arrière plan, les couleurs, les sons travaillés et le personnage Astro qui suit le joueur.

Les images sont réparties aléatoirement dans un bloc central. Les blocs de rangements ont tous le même modèle et sont espacés de sorte à offir une vue d'ensemble à l'apprenant.

Production

Une voix off proposée par le système est intégrée dans le jeu offrant une plus grande autonomie pour l'écoute des consignes, la ré-écoute des sons ou du nom des images.

La flèche de la souris se change en l'image d'une main lorsqu'il est possible de déplacer les objets. Les objets déplacés dans les bonnes catégories peuvent être déposés, le cas échéant ils sont renvoyés à leur place.

Un message de félicitations apparaît en fin de jeu lorsque le joueur est parvenu à tout classer. Un lien est alors affiché permettant au joueur d'aller sur le module AstroSon

Auto-évaluation

Concernant les éléments d'interactions "drag&drop" je me suis servie des codes mis à disposition sur STIC que j'ai adapté au jeu et aux consignes souhaitées. Cet exercice m'a parru accessible et rapidement compréhensible.

Concenrnant l'ordre aléatoire des images : après avoir cherché dans différentes librairies, je me suis tournée vers chat Gpt. J'ai encore du mal à comprendre le fonctionnement des librairies et savoir comment l'adapter à ce que je souhaite. Bien que j'ai compris le but des étapes indiquées pour cet ordre aléatoire, je suis encore absolument incapable de le refaire par moi même sans modèle.

Concernant l'intégration de la voix off, j'ai trouvé comment faire sur des recherches google puis l'ia. Je pense qu'une boucle JS permettrait de réaliser cette voix off pour tous les éléments sans avoir à répéter à chaque fois le code à l'intérieur de chaque image. Mais ce processus m'a semblé facile d'accès et m'a permis de comprendre pleinement ce que je faisais, avec cette sensation de "reprendre le lead" donc j'ai préféré laisser ainsi pour cette fois.

De manière générale, je constate d'importants progrès pour ce qui est de html et css. Mon point faible avec css reste encore l'agencement des grilles : j'ai du mal sans aide à mémoriser et à associer et ne pas mélanger les différents attributs qui permettent l'agencement souhaité.

Bibliographie & Ressources