Informations générales :


Exercice n°2 :

FlashCard


Objectifs

L’objectif de cet exercice est de créer des flashcards en utilisant HTML5, CSS et Java Script. Ces flashcards permettront aux étudiants du master MALTT de s’entraîner de manière autonome sur les notions abordées durant les cours. Différentes catégories de cartes seront élaborées en lien avec les matières. Ex. pour STIC : « Comment définir la taille et l’écriture dans HTML ? » « style : font-size ; et style : font-family » Pour les cartes "Théorie" :« Que dit la théorie cognitive de l'apprentissage multimédia de Mayer ? ? » Le public cible de ce dispositif est donc composé d’étudiants du MALTT mais reste ouvert aux autres étudiants qui souhaitent alimenter leur culture générale.

Design

Le design de la carte est aéré mais avec des couleurs vives. L’image incorporée représente un questionnaire avec un personnage à côté. Les questions sont écrites au centre du questionnaire sur la face recto de la carte. Les réponses sont au verso de la carte et sont disposées sur l’entièreté de l’image questionnaire. L’étudiant doit cliquer sur la face de la carte pour la retourner et avoir accès à la réponse. Par la suite la couleur des cheveux des personnages ainsi que la couleur du contour de la carte permettront de différencier les matières entres elles. (ex. couleur rose pour le cours STIC- couleur verte pour le cours ERGO).

Production

J’ai dû suivre à la lettre le tuto « Java Script » pour comprendre le fonctionnement de l’interaction entre les cartes. La mise en place des div sur HTML5 et les modifications de formes de la carte avec CSS m’ont paru plus intuitive cette fois-ci.

Auto-évaluation

Ayant effectué cet exercice une seule fois, je ne suis pas certaine de pouvoir le refaire sans modèle. Le fonctionnement global est compris mais reste encore assez vague, notamment dans les termes de JS « addEventListener » « appel function » La modification des parties du SVG m’a semblé beaucoup plus fluide que la première fois pour la page perso. Toutefois il me reste quelques points de compréhension à affiner concernant la modification des tailles du svg tel que "comment faire en sorte que l’image reste dans la carte et n’en dépasse pas".

Bibliographie & Ressources