Cette page recense le rapport de l'exercice 3 effectué pour le cours STIC. Vous pourrez y trouver le lien de l'exercice et des informations complémentaires concernant les objectifs, le design, la production, l’auto-évaluation, la bibliographie et les ressources utilisées.
L’objectif de cette activité était de créer un dispositif interactif sous forme de flashcards permettant de travailler la reconnaissance d’exercices sportifs à partir d’une description. Les cartes présentent un exercice, et l’utilisateur doit deviner lequel il s’agit avant de retourner la carte. L’activité inclut également des boutons de réponses, un feedback immédiat, ainsi que des feedbacks explicatifs visant une compréhension plus profonde du mouvement.
Le public cible est constitué des étudiants en première année en étude sport, ce dispositif peut être utilisé après une lecture d'introduction aux exercices du poids du corps afin de consolider les informations apprises, j'avais un cours au collège nommé biologie du sport et on avait ces cartes mais pas sous forme digitale plutôt sous forme tangible et l'exercice était de deviner l'exercice après la lecture d'un article.
Mon dispositif a été conçu pour associer une tâche simple (deviner l’exercice décrit) à une interface visuelle attrayante et fluide. Le design repose sur trois cartes interactives qui se retournent en 3D grâce aux propriétés CSS, permettant d’afficher au verso le nom de l’exercice ainsi qu’une image de référence.
Chaque carte comporte également un mini QCM avec deux boutons : une bonne réponse et une mauvaise. L’utilisateur reçoit un feedback immédiat, mais également un feedback explicatif détaillé selon la carte. Cela permet de renforcer l’apprentissage en soulignant pourquoi la réponse est correcte ou incorrecte, ce qui contribue au développement d’une compréhension plus fine.
Le dispositif inclut également une carte d’instruction retournable, un avatar cliquable déclenchant une consigne audio, une vidéo de fond immersive et un lien de rapport placé en bas de page.
Pour la production, j’ai utilisé des images SVG et PNG libres de droit représentant les mouvements sportifs (tractions, dips, squats). Je les ai intégrées dans la carte arrière afin d’offrir un support visuel renforçant la mémorisation de l’exercice. J’ai également ajusté les dimensions, les ombres et le style afin que ces images s’intègrent harmonieusement dans les cartes.
Le cœur technique du dispositif repose sur trois éléments : - le CSS pour les animations 3D (rotateY, backface-visibility, perspective), - le JavaScript pour la gestion du flip, du feedback, du retour automatique, et du bouton musical, - le HTML pour l’organisation et la sémantique des cartes.
Une partie importante du travail a consisté à gérer les superpositions, les comportements par défaut ainsi que les ajustements de position dans les versions mobiles. Chaque carte contient des couches (faces) positionnées en absolute, contrôlées par un conteneur en relative (inner-card) afin d’assurer la rotation correcte autour de son axe.
Je suis particulièrement satisfait du rendu final des cartes, tant visuellement qu’au niveau de l’interaction. Le système de flip 3D, qui était au départ assez complexe, fonctionne désormais de façon fluide et intuitive. Le feedback explicatif rend l’activité réellement pédagogique, et pas seulement ludique.
ce travail me passionne et j'avais comme projet de faire des tutoriels pour les volées à venir mais avec la surcharge des autres cours et également le cours base qui vient de commencer je n'ai pas vraiment le temps de faire cela maintenant, mais je n'abandonne pas le projet, je vais essayer de faire cela pendant les vacances de Noël et les vacances d'été
J’ai également rencontré des difficultés pour faire disparaître le feedback après un délai précis. J’ai dû utiliser des timers JavaScript (setTimeout) et des classes CSS avec transitions d’opacité pour obtenir un rendu propre.
La version mobile a été l’une des parties les plus longues à stabiliser, car les cartes ne se comportaient pas correctement selon la taille de l’écran. Les media queries m’ont aidé, mais j’ai dû effectuer de nombreux essais pour obtenir un résultat cohérent. je me concentre sur la partie mobile également afin de montrer mon travail à mes proches et que les cartes soient utilisable , car dans le quotidien lorsqu'on envoi un lien à quelqu'un la personne va souvent l'ouvrir sur son téléphone et non pas sur l'ordinateur.
Au final, cet exercice m’a beaucoup appris, tant au niveau du JavaScript que du design interactif. J’ai pris plaisir à concevoir ces flashcards sportives,
J’ai utilisé ChatGPT pour convertir certaines valeurs en unités relatives (vh, vw), restructurer mon code et obtenir des pistes pour changer la duré de l'apparition du feedback visuel. J'ai également démandé à chatgpt si ma page au niveau pédagogique est ok , car à la base j'ai eu l'idée de faire ce mini qcm car il est assez connu dans le monde du sport sur internet mais je ne savait pas s'il était vraiement pértinant.
ChatGPT m’a également m’a permis d’identifier mes erreurs dans mon code plus rapidement très souvent je me trompe au niveau de l'orthographe et donc le javascript ne marche pas ou le css ne s'applique pas.
Les images des exercices proviennent de banques libres de droit (Freepik, Pixabay). Les icônes ont été récupérées sur Flaticon. Les backgrounds vidéo et musiques utilisées sont sans copyright. Les tutoriels YouTube de programmation notamment les tutoriels concenrant la partie javascript ( comment changer la couleur d'un bouton) m’ont également aidé à gérer les détails plus techniques.
Designed by studiogstock / Freepik.png)