Exercice
2.3 — Exercice 1 : votre premier artifact
Durée : 25 min (dont 5 min de partage) | Type : Pratique | Slides : ~1-2
Consigne
Ouvrez votre IA préférée — Claude, ChatGPT, Gemini, ou autre. Créez un contenu interactif directement dans le navigateur (artifact, canvas, ou équivalent).
La marche à suivre :
- Présentez-vous (30 secondes) — qui vous êtes, ce que vous enseignez/gérez, votre niveau
- Brainstormez avec l'IA (2-3 min) — décrivez votre besoin, explorez les possibilités
- Lancez la création — demandez à l'IA de produire l'artifact
- Testez et itérez — appliquez le cycle : dites ce qui ne va pas, demandez des corrections
- Partagez votre meilleur résultat sur Teams
Vous avez 20 minutes pour créer, puis 5 minutes pour partager les meilleures créations.
⚠️ Rappel : ce que les artifacts peuvent et ne peuvent PAS faire
| ✅ Ce qui marche | ❌ Ce qui ne marche pas |
|---|---|
| HTML, CSS, JavaScript complet | fetch — pas d'appel API, pas de connexion internet |
| React avec hooks et state | localStorage — pas de persistance entre sessions |
| SVG et animations CSS/JS | Backend / serveur — tout tourne côté client |
| Three.js (3D) via CDN intégré | Accès aux fichiers de votre ordinateur |
| Tone.js (audio/musique) via CDN | Bases de données |
| D3.js (visualisations) via CDN | Authentification / login |
| Recharts, Plotly (graphiques) | |
| Canvas 2D (dessin, jeux) | |
| Claudeception (appel API Claude) |
💡 Les données persistent pendant la session (state React, variables JS). Si vous fermez l'onglet, tout est perdu — sauf si vous téléchargez l'artifact en .html. Une fois téléchargé, localStorage et fetch redeviennent disponibles.
Bibliothèques disponibles en CDN dans les artifacts Claude : React, Lucide React (icônes), Recharts, D3.js, Plotly, Three.js (3D), Tone.js (audio), Papaparse (CSV), SheetJS (Excel), Chart.js, Lodash, MathJS, shadcn/ui.
Idées par profil
Pas d'inspiration ? Voici des idées testées et réalisables en 20 minutes. Choisissez celle qui vous parle — ou inventez la vôtre.
🎓 Profs — toutes matières
Ces idées fonctionnent quelle que soit votre discipline.
| Idée | Description | Difficulté |
|---|---|---|
| Générateur de QCM | Encodez vos questions/réponses → quiz jouable avec score, correction, feedback | ⭐ Facile |
| Flashcards interactives | Paquets de cartes recto-verso, algorithme de répétition espacée, stats | ⭐ Facile |
| Cours interactif multi-sections | Slides + exercices intégrés + quiz de fin, tout dans un seul artifact | ⭐ Facile |
| Générateur de groupes aléatoires | Liste d'élèves → répartition en groupes avec contraintes | ⭐ Facile |
| Grille d'évaluation dynamique | Critères, pondération, encoder les points par élève, calcul auto, export impression | ⭐⭐ Moyen |
| Diagramme de Venn interactif | Drag & drop d'éléments dans les zones, vérification automatique | ⭐⭐ Moyen |
| Ligne du temps interactive | Scroll horizontal, zoom par époque, fiches descriptives au clic | ⭐⭐ Moyen |
| Carte géo quiz | Carte SVG du monde/Europe cliquable, "trouve ce pays", score + chrono | ⭐⭐ Moyen |
Exemples de prompts :
Je suis prof de [matière]. Crée un doodle interactif pour illustrer [concept]. L'élève doit pouvoir manipuler des éléments (déplacer des points, changer des valeurs, voir le résultat en temps réel).
Crée un mini-jeu éducatif sur [sujet] : quiz, pendu, memory, ou autre idée créative.
Voici ma grille d'évaluation [coller la grille]. Crée une application web pour encoder les points des étudiants et calculer les totaux.
🔬 Profs de sciences & maths
| Idée | Description | Difficulté |
|---|---|---|
| Grapheur de fonctions | Taper f(x), courbe interactive, zoom/pan, dérivée, tangente animée | ⭐⭐ Moyen |
| Tableau périodique interactif | Clic sur un élément → propriétés, couches électroniques en SVG animé | ⭐⭐ Moyen |
| Simulateur de gravité | Lancer des sphères qui s'attirent mutuellement, trajectoires colorées (Three.js 3D) | ⭐⭐⭐ Ambitieux |
| Système solaire 3D | Planètes en orbite, rotation, zoom, infos au clic, textures (Three.js) | ⭐⭐⭐ Ambitieux |
| Simulateur de circuit électrique | Drag & drop composants, calcul loi d'Ohm en temps réel | ⭐⭐⭐ Ambitieux |
| Visualiseur de molécules 3D | Atomes et liaisons en 3D, rotation libre, modèles H₂O, CO₂, ADN (Three.js) | ⭐⭐⭐ Ambitieux |
💻 Profs d'informatique
| Idée | Description | Difficulté |
|---|---|---|
| Convertisseur de bases | Décimal ↔ binaire ↔ hexa ↔ octal avec décomposition visuelle bit par bit | ⭐⭐ Moyen |
| Encodage/décodage interactif | ASCII, UTF-8, Base64, César — transformation caractère par caractère | ⭐⭐ Moyen |
| Visualiseur de pile et file | Push/pop/enqueue/dequeue animés, code correspondant affiché à côté | ⭐⭐ Moyen |
| Visualiseur d'algorithmes de tri | Bubble, quick, merge animés avec barres colorées, contrôle vitesse et pas à pas | ⭐⭐⭐ Ambitieux |
| Playground SQL visuel | Tables affichées, écrire des requêtes SELECT/JOIN, résultat en temps réel (mini DB en mémoire) | ⭐⭐⭐ Ambitieux |
| Visualiseur de pathfinding | Grille éditable, obstacles, A*, Dijkstra, BFS animés | ⭐⭐⭐ Ambitieux |
| Simulateur de Git | Visualiser commits, branches, merge comme un graphe, commandes interactives | ⭐⭐⭐ Ambitieux |
| SQL Murder Mystery | Résoudre un meurtre en écrivant des requêtes SQL sur une DB d'indices | ⭐⭐⭐ Ambitieux |
🏢 Direction & administratifs
| Idée | Description | Difficulté |
|---|---|---|
| Minuteur de réunion | Ordre du jour temporisé, alertes par point, barre de progression | ⭐ Facile |
| Calculateur de moyennes pondérées | Saisie des cotes + coefficients, histogramme, stats de classe | ⭐ Facile |
| Générateur de certificats | Template personnalisable, liste de noms, preview et impression | ⭐⭐ Moyen |
| Kanban board | Colonnes drag & drop (À faire / En cours / Fait), cartes éditables | ⭐⭐ Moyen |
| Diagramme de Gantt interactif | Planification de projet avec dépendances et timeline | ⭐⭐⭐ Ambitieux |
Exemples de prompts :
Je suis [rôle] dans une école d’enseignement pour adulte. Crée un outil interactif pour [besoin] : formulaire d'encodage, tableau de bord, planificateur visuel...
🎨 Créatif & visuels
| Idée | Description | Difficulté |
|---|---|---|
| Pixel art editor | Grille cliquable, palette, outils crayon/seau/gomme, export PNG | ⭐⭐ Moyen |
| Générateur d'art génératif | Sliders pour paramètres → formes, couleurs, patterns procéduraux en canvas/SVG | ⭐⭐ Moyen |
| Infographie SVG animée | Diagrammes, graphiques, icônes — tout en SVG avec animations au scroll/clic | ⭐⭐ Moyen |
| Éditeur de memes | Charger une image (base64), ajouter du texte, repositionner, export | ⭐⭐ Moyen |
| Synthétiseur musical | Clavier jouable avec Tone.js, instruments, enregistrement de séquences | ⭐⭐⭐ Ambitieux |
| Globe terrestre interactif | Sphère texturée 3D, clic sur pays → infos, rotation douce (Three.js) | ⭐⭐⭐ Ambitieux |
🎮 Jeux
| Idée | Description | Difficulté |
|---|---|---|
| 2048 | Glisser les tuiles, fusion, score — faisable en 2 prompts | ⭐ Facile |
| Snake | Le classique, toujours efficace | ⭐ Facile |
| Démineur | Grille configurable, drapeaux, timer | ⭐⭐ Moyen |
| Tetris | Rotation, score, niveaux de vitesse | ⭐⭐ Moyen |
| Casse-briques | Paddle, briques, power-ups, niveaux | ⭐⭐ Moyen |
| Game of Life | Conway, patterns pré-chargés, vitesse réglable, dessiner ses propres patterns | ⭐⭐ Moyen |
| Pac-Man simplifié | Labyrinthe, fantômes avec IA basique, power pellets | ⭐⭐⭐ Ambitieux |
| Tower Defense | Placer des tours, vagues d'ennemis, upgrades, économie | ⭐⭐⭐ Ambitieux |
| Platformer 2D | Perso qui saute, gravité, plateformes, ennemis, niveaux (canvas 2D) | ⭐⭐⭐ Ambitieux |
| Labyrinthe 3D first-person | Se déplacer en vue FPS dans un labyrinthe généré (Three.js) | ⭐⭐⭐⭐ Très ambitieux |
| Mini Minecraft | Placer/supprimer des blocs en 3D, caméra libre (Three.js) | ⭐⭐⭐⭐ Très ambitieux |
🧠 Claudeception (Claude uniquement)
| Idée | Description | Difficulté |
|---|---|---|
| Chatbot thématique | Claude joue un personnage historique, un expert, un prof de maths | ⭐⭐ Moyen |
| Correcteur de texte IA | Coller un texte → Claude corrige grammaire et style, diff affiché | ⭐⭐ Moyen |
| Traducteur avec explication | Texte → traduction + explication des choix linguistiques | ⭐⭐ Moyen |
| Générateur de QCM par IA | Donner un sujet → Claude génère les questions, on les joue direct | ⭐⭐⭐ Ambitieux |
| Jeu d'aventure textuel IA | Claude génère l'histoire, le joueur fait des choix, inventaire, stats | ⭐⭐⭐ Ambitieux |
| Débat IA vs IA | Deux Claude débattent, un troisième juge — spectacle garanti | ⭐⭐⭐ Ambitieux |
Tips pendant l'exercice
Stratégie
- Brainstormez d'abord 2-3 min avec l'IA avant de coder. Décrivez votre besoin, demandez des suggestions.
- Soyez ambitieux : SVG, animations, Canvas 2D, 3D avec Three.js, audio avec Tone.js — les IA gèrent bien tout ça.
- Commencez simple, itérez ensuite. Un artifact qui marche > un artifact ambitieux qui plante.
- Si l'IA patine sur un truc (ça arrive), simplifiez : "Oublie cette fonctionnalité, concentre-toi sur X."
Debug
- Écran blanc ? →
F12(ouFn+F12) → Console → copier l'erreur rouge → coller dans le chat - L'IA explique au lieu de corriger ? → "Non, corrige le code toi-même" / "Modifie l'artifact"
- Dans le doute → screenshot de ce que vous voyez + tout copier de la console
- Ça marche toujours pas ? → "Repars de zéro avec une approche différente"
Pour aller plus loin
- SVG : demandez des illustrations en SVG plutôt que des images — c'est net à toute taille et ça s'anime
- Print / PDF : demandez d'ajouter
@media printau CSS pour "imprimer" la page en PDF depuis le navigateur - Testez plusieurs IA : le même prompt sur Claude et ChatGPT donne des résultats différents — c'est intéressant de comparer
- Téléchargez votre artifact : en
.html, il tourne en local et retrouve l'accès àlocalStorageetfetch
Partage (5 dernières minutes)
Envoyez le lien de votre meilleur artifact sur Teams. On regarde ensemble 2-3 créations.
Pour partager :
- Claude : bouton "Partager" → copier le lien public
- ChatGPT : bouton "Partager" sur le Canvas
- Gemini : exporter en HTML et partager le fichier
Ce qui nous intéresse : pas la perfection technique, mais le potentiel. "Regardez ce que j'ai obtenu en 15 minutes — imaginez avec une heure."