Liens
Les groupes de la phraseObjectifs
Ce dispositif a pour objectif de vérifier la compréhension d'élève de 5P harmos (voir 6P pour de la révision) concernant les groupes de la phrase. Dans le cadre d'un scénario pédagogique, des élèves de 5P vont découvrir et travailler la notion de groupe de la phrase en classe durant une leçon. Lors d'une leçon suivante, pour vérifier si les élèves ont bien compris (ou encore pour s'entraîner), ils peuvent utiliser le dispositif.
Pour réaliser l'exercice, les élèves devront prendre, à l'aide de la souris, des parties de la phrase préalablement regroupées sous forme d'étiquette, et les placer dans le bon groupe grammaticale.
Design
Afin que les élèves ne se concentrent que sur l'exercice à réaliser, j'ai choisi un désign sobre et clair. À part le titre et la zone droppable, seules les étiquettes ont été colorés. Cela dans le but d'attirer le regard sur elles et de rendre évident les éléments à déplacer, d'autant plus que si l'on passe la souris dessus, elle se change en main, pour attraper.
J'ai également choisi de colorer les zones droppable avec les couleurs associés à chaque groupe de la phrase. Par exemple, rouge pour le groupe verbal.
Ainsi, grâce aux couleurs, l'élève saura rapidement ce qui est attendu de lui, peut-être même avant de lire la consigne. Enfin, lorsque les élèves place la bonne étiquettes au bon endroit, cette dernière devient verte afin de lui signifer que c'est le bon endroit (en plus du faite que l'étiquette reste en place).
Production
J'ai commencé par créer une nouvelle page internet différente des précédents exercice que je réalisais. Lors d'un cours en bachelor de développement web, j'avais découvert le framework Bulma et j'ai eu envie de le réutiliser pour convoir ma page. Ainsi, j'ai dû me raffraichir la mémoire avant de concevoir les éléments visé par l'objectif de l'exercice.Ensuite, j'ai réalisé le squellete de mon dispositif, que j'ai stylisé. Enfin, je me suis attaqué à la partie logique de mon dispositif avec la prise en main de jQuery UI. J'ai longtemps hésité à essayer une autre librairie javascript mais finalement je suis resté sur jQuery. Je me suis basé sur les exercices que l'on a effectué durant le cours STIC I de la période 3 car je l'avais bien réussi.
J'ai modifié le code jQuery et je l'ai complété afin d'avoir le rendu que je visais. J'ai fait en sorte que les étiquettes changent de couleur lorsqu'elles sont placé au bon endroit et qu'elle ne puisse pas retourné à leur place. Aussi, j'ai fait en sorte qu'on ne puisse pas placé des étiquettes de la phrase 1 dans les zones droppable des groupes de la phrase 2.
J'ai voulu rajouter une fonctionnalité pour changer la couleur de toutes les zones droppable lorsque les 4 étquettes ont été correctement placé mais j'étais perturbé entre ce que je devais écrire en jQuery ou en javascript dans mon fichier annexe.
Aussi, j'ai pensé à obliger l'élève à placer toutes les étiquettes avant d'avoir un retour mais je n'ai pas réussi, alors je suis resté à la version plus simple du dispositif.
Auto-évaluation
Je suis assez satisfait du rendu final de mon dispositif. Toutefois, je me rend compte que je suis loin d'avoir suffisament pris en main jQuery pour réaliser ce que j'aurai aimé faire. En effet, le point faible de mon dispositif c'est que l'élève peut simplement prendre les étiquettes une à une et essayer de les placer au bon endroit sans réfléchir à l'exercice. Ainsi, mes compétences ne sont pas encore assez développés pour que je puisse produire des dispositif de meilleur qualité. Néanmoins, je reste satisfait pour une première prise en main.
Bibliographie
Je n'ai pas utilisé de bibliographie pour cette exercice.