1. Liens

Portfolio
Dispositif interactif – Flashcards
Page EduTechWiki
Profil LinkedIn

2. Objectifs

Cet exercice avait pour objectif de concevoir une petite application interactive illustrant les bases de la pensée computationnelle et de la programmation en JavaScript. J’ai choisi un jeu de flashcards pour travailler le vocabulaire des outils numériques utilisés en classe avec mes élèves (Blue-Bot, Thymio, tablette, TBI, etc.). L’activité vise à associer une image à un mot afin de soutenir la mémorisation et la compréhension du lexique lié aux technologies éducatives. Elle s’adresse principalement à des élèves du Cycle 1 (4–8 ans) dans le cadre d’un enseignement du numérique de base (Moyen d’enseignement Décodage, VD). L’objectif principal est d’offrir un outil simple, intuitif et motivant, utilisable en autonomie ou en atelier accompagné.

3. Design

Le dispositif reprend le principe des cartes recto-verso : face avant (illustration SVG d’un outil numérique) et face arrière (nom de l’outil). Le design est sobre et coloré (violet/turquoise) pour rester cohérent avec ma page personnelle. Lisibilité privilégiée : typographie large, contrastes suffisants, pictogrammes clairs. Des boutons en haut de la page (« Tout retourner », « Tout remettre ») permettent de gérer l’activité. La page s’adapte automatiquement aux tailles d’écran (tablette, ordinateur, TBI).

4. Production

J’ai structuré la page en HTML, stylé en CSS (effet de rotation 3D), puis ajouté un script JavaScript pour gérer le retournement individuel et collectif (clic et touche Espace). Les images ont été réalisées au format SVG à partir de ressources libres. Développement dans Visual Studio Code avec Live Server pour l’aperçu en direct. Organisation des fichiers finalisée avant publication sur le serveur TECFA.

5. Auto-évaluation

Cet exercice m’a fait pratiquer la programmation événementielle et l’articulation HTML/CSS/JS. J’ai apprécié la partie créative (pictogrammes, animation). Quelques difficultés de chemins de fichiers et de transformations 3D m’ont aidée à renforcer la rigueur. Le résultat est esthétique, fonctionnel et adapté à l’usage pédagogique. Pour la suite, j’aimerais ajouter un score ou un mode aléatoire.

6. Bibliographie

EduTechWiki – Computation avec JavaScript
EduTechWiki – Premiers pas avec JavaScript
EduTechWiki – JavaScript
EduTechWiki – SVG avec JavaScript

7. Ressources

Illustrations SVG créées avec Canva (selon conditions d’utilisation). Palette et typographie inspirées de ma page personnelle. Outils : Visual Studio Code, Chrome, Live Server. J'ai utilisé différents tutos vidéo, ainsi que les pages EduTechWiki et l'intelligence artificelle (ChatGPT OpenAI) pour m'aider à vulgariser les blocs de codes pour comprendre leurs effets. Cette aide m’a permis de mieux comprendre la logique du code et d’affiner la présentation visuelle de ma page personnelle.