1 - Liens
2 - Objectifs
L'objectif de cette page est d'aider jeune public, à savoir des enfants (entre 8 à 10 ans appartenant au cycle moyen 5P à 8P) à mémoriser et réviser la différence entre ce qu'est un nom, un adjectif et un verbe
3 - Design
Lorsque l'utilisateur arrive sur la page, il lit le titre, le but et le fonctionnement des boutons de la page. Une explication sur ces trois notions est donnée lorsque la page est lancé et disparaît une fois que l'on clique sur "Commencer l'exercice".
Lorsque l'utilisateur clique sur "Commencer l'exercice", un petit texte explique comment il faut procéder pour faire l'exercice et juste en dessous, je propose un audio avec la lecture du texte. En effet, cet aspect e été pensé surtout pour les enfants qui ont des problèmes de compréhension lors de la lecture, l'audio peut ainsi les aider à mieux comprendre les mots et "l'histoire". J'ai décidé de ne pas rajouter des icônes pour l'audio, car tel qu'il est présenté, on peut directement mettre pause, revenir 3s en arrière ou encore même changer la vitesse de lecture en 2 clics de manière très simple.
Concernant les items que l'on peut bouger ("draggable"), je les ai entouré en rouge et changé leur couleur de fond, afin de bien différencier les mots que l'on peut bouger de ceux qu'on ne peut pas bouger. Les éléments "draggable" ici permettent à l'enfant de suivre le mot qu'elle choisi avec son regard jusqu'à dans la boîte choisie. Si c'est une mauvaise réponse, il voit le mot se replacer dans la phrase, ce qui lui permet de relire la phrase, de la remettre dans son contexte. Une fois tous les items dans leurs bonnes boîtes, l'enfant reçoit un feedback. J'ai ajouté trois conteneurs de couleurs bien différentes, afin que l'enfant puisse faire la différence entre les trois notions qu'il révise.
Finalement, pendant tout l'exercice l'enfant dispose d'un bouton "recommencer" en bas de l'exercice.
Il est important de savoir que pour utiliser au mieux cet page, je conseille qu'un adulte lance l'exercice pour l'enfant et qu'il reste à proximité pour l'aider avec celui-ci.
4 - Production
Phase de lecture et de réflexion sur l'exercice
Tout d'abord, j'ai commencé par la lecture de la page Wiki de l'exercice 5, la page Bibliothèques JavaScript et la page JQuery sur EduTechWiki.
Phase de création
J'ai d'abord créé ma page HTML avec les explications et le texte que je voulais mettre en drag and drop Une fois cette partie faite, j'ai suivi les explications sur la page JQuery pour rajouter les codes sur mes pages. Ensuite, j'ai créé mon fichier JS où j'ai écrit mon code Jquery + JavaScript. Une fois que j'ai vu que mon code fonctionnait, j'ai créé mon fichier CSS. Lorsque j'ai terminé de créer ma page, je me suis aperçue qu'il fallait peut-être rajouter un support audio pour des enfants avec plus de difficulté et j'ai donc à nouveau utilisé Murf.
5 - Auto-évaluation
Il s'agit d'un exercice qui m'a demandé une certaine refléxion à propos du sujet. Je voulais créer une page qui pourrait avoir une utilité au niveau de l'apprentissage avec le drag and drop. Je pense qu'il serait intéressant pour cet exercice d'ajouter d'autres histoires lorsqu'on clique sur recommencer. De plus, je remarque un certain manque d'adaptabilité pour les enfants dans cet exercice. En effet, j'aurai aimé ajouter une aide plus visuelle (avec des images/gifs) et non textuelle pour les enfants lorsqu'elles cliquent sur "J'ai besoin d'aide". Cependant je n'ai malheureusement rien trouvé sur internet, donc j'ai gardé ma petite explication qui s'affiche en début de page, ce qui sert plutôt comme rappel et pas vraiment "aide". Pour cette raison je préconise une utilisation avec un adulte.
6 - Bibliographie
Liée à la programmation
- W3Schools - Pour le CSS
Liée au contenu
- Français Facile - Explications des notions
- Murf - Voix-off (payant)