Exercice 5 - Application JavaScript/JQuery "drag and drop"
Liens
Application Javascript/Jquery: construction de mots avec des syllabes simples.
Objectifs
Cette application s'adresse à des enfants entrant dans le monde de l'écrit soit en 2P-3P (5 à 7 ans). Elle a été réfléchie en lien avec le Plan d'Etude Romand et plus spécifiquement, l'objectif de français L1 11-12 dans lequel il est question de développer la conscience phonologique ainsi que le lien entre l'oral et l'écrit. Cet objectif général travaille différents objectifs spécifiques:
- ségmenter un mot en syllabe
- construire des mots en respectant le sens de l'écriture
- repérer une correspondance phonème-graphème
Différents prérequis sont nécessaires afin d'utiliser cette application. Concernant l'acquisition de la langue, les élèves doivent connaître les graphèmes simples (a, o, i, u, p, m, n, etc.). De plus, ils doivent être capables d'effectuer la fusion syllabique. D'un point de vue des compétences techniques, les élèves doivent savoir manipuler une souris d'ordinateur.
L'application est pensée pour être utilisée seul. Tout d'abord, l'enseignant montre à l'ensemble des élèves le fonctionnement de la page (dont l'écoute des consignes et des mots c.f. explications) et le principe du "cliquer & glisser". Ensuite, chaque élève peut effectuer l'activité en solo. Lorsqu'il a fini, l'enseignant raffraichit la page pour le prochain élève.
Design
Description
Le dispositif se consulte sur une page internet. En haut à droite, des icônes "haut-parleur" permettent, au clic, de lancer les audios de la consigne ou de les mettre sur pause. Cette dernière est également écrite succinctement en gras sur la page. Sous la consigne, 8 syllabes entourées de orange sont éparpillées. Lorsque l'élève passe la souris sur une syllabe, celle-ci devient rouge et le curseur change. Sous les syllabes, trois images sont allignées. Chacune d'entre-elle possède deux grands carrés orange où déposer les syllabes ainsi qu'un icône "haut-parleur". En cliquant sur l'icône, l'utilisateur peut entendre le mot à retranscrire. Si une syllabe est déposée dans le mauvais carré, elle retourne à sa place d'origine. Enfin, sous les images, un décompte des clics sur les étiquettes est inscrit sur la page HTML.
Explications
Le design a été pensé pour être facilement utilisable par le public concerné. Tout d'abord, les élèves n'étant pas lecteur, les icônes "haut-parleur" en haut à droite facilitent l'accès à la consigne qui peut être écoutée et stopée autant de fois que nécessaire. La consigne étant longue, celle-ci est divisée en trois parties. En effet, le public concerné peut avoir de la difficulté à mémoriser une consigne longue. Cette ségmentation favorise une meilleure compréhension et mémorisation. Concernant l'écrit, seule la première consigne est retranscrite afin d'éviter une surcharge visuelle pour l'élève. Ensuite, la couleur orange est utilisée pour les étiquettes et les carrés de dépot. Ceci favorise le lien entre ces deux éléments et encourage à les glisser les uns dans les autres. Enfin, le hover a été réfléchi pour être particulièrement voyant. Ainsi, l'utilisateur voit des changements à l'écran en utilisant la souris, ce qui devrait l'encourager à essayer de cliquer sur l'étiquette et les icônes "haut-parleur".
Afin d'éviter de pouvoir trop facilement résoudre l'activité au hasard, j'ai décidé d'ajoute 2 syllabes inutilisées. Celles-ci sont proches d'une autre syllabe soit par le phonème (vé-fé) ou par le graphème (mo-ma)
Dans ce dispositif, le "drag and drop" est particulièrement intéressant car il laisse l'élève manipuler les syllabes. De plus, le fait qu'une syllabe, en cas d'erreur, retourne à son emplacement initial représente un feedback direct. L'élève gagne en autonomie et peut ainsi corriger son action. Il peut donc essayer et explorer autant de fois qu'il le souhaite sans avoir peur de se tromper. Pour finir, le "drag and drop" développe l'utilisation de la souris, objectif présent dans le Plan d'Etude Romand pour le public concerné.
Pour finir, le décompte de clic a été réfléchi pour l'enseignant. En effet, avec la fonction reverse, il est difficle pour le professeur d'avoir un réel retour sur le travail de l'élève. Cette interactivité permet donc également au professeur d'avoir un feedback sur le travail de l'élève. A noter que ce décompte pourrait également être utilisé par l'enseignant pour encourager ses élèves à réfléchir et à anticiper leurs actions dans le but d'éviter le hasard.
Production
Une fois les liens javascript correctement placés dans la page HTML, la production a été aisée. Dans un premier temps, je me suis concentrée sur la mécanique du "drag and drop" avec une seule image et deux syllabes. J'ai créé les étiquettes, les zones de dépot et j'ai ajouté l'interactivité avec Jquery. Ensuite, j'ai passé du temps sur la mise en page dans le but d'avoir une image et deux carrés de dépot correctement centré. Pour ce faire, j'ai utilisé le "Grid Layout". Afin de finaliser l'exercice, j'ai ajouté deux autres images que j'ai mis en ligne en utilisant une flexbox. Pour finir, j'ai ajouté les audios ainsi que le décompte de clics.
Autoévaluation
En écrivant ce rapport, j'ai pu améliorer différents éléments du dispositf. En effet, dans un premier temps, aucun son n'était disponible. Ceci a été ajouté en prenant en compte le public cible. L'ajout des sons est une réelle plus value concernant l'autonomie de l'élève. Toutefois, le dispositif peut s'avérer difficile à utiliser pour des élèves de 2P-3P. Une démonstration est selon moi nécessaire. En tant qu'enseignante, j'utiliserai une telle application uniquement s'il était possible de réitérer l'exercice avec d'autres mots. Ainsi, les élèves déveloperaient des automatismes pour utiliser le dispositf de manière autonome sur le long terme.
Ceci amène à une deuxième réflexion concernant l'utilisabilité du dispositif. Je pense en effet qu'il serait nécessaire de tester le dispositif afin de savoir si certains carrés de dépot sont trop éloignés de l'étiquette. En effet, ceci est facilement utilisable pour un adulte habitué à l'utilisation de la souris. Toutefois, les élèves de 2P à 3P n'ont pas tous développé cette dextérité.
D'un point de vue pédagogique, l'utilisation du revert ne laisse pas l'opportunité à l'élève de constater son erreur par lui-même. Une solution serait d'enlever le "revert" et de laisser les élèves construire les mots sans feedback direct. Dans un deuxième temps, l'élève pourrait cliquer sur un bouton de correction qui appellerait une fonction permettant de lire les mots construits. Ainsi, l'élève pourrait s'auto-corriger et apprendre davantage de ses actions.
Bibliographie
W3school pour le Grid Layout
Validateurs CSS et HTML et Java Script.
Ressources
Images téléchargées depuis Pixabay