Résumé de section

    • resource icon
      MediaM@tch Fichier

      Application full web développée avec Claude.ai

    • 🎯
      Introduction
      Qu'est-ce que MediaMatch ?
      Présentation générale de l'outil et de ses possibilités.

      MediaMatch est un outil de création d'activités pédagogiques interactives. Il vous permet de fabriquer des exercices où vos apprenants doivent faire glisser des éléments (images, textes, vidéos) vers les bonnes zones de réponse — un peu comme assembler un puzzle.

      📝
      Textes
      Créez des étiquettes ou des descriptions à associer
      🖼️
      Images
      Importez vos photos depuis votre ordinateur
      🎬
      Vidéos
      YouTube, Vimeo ou fichiers locaux MP4
      ✂️
      Extraits
      Découpez des passages précis d'une vidéo
      💬
      Sous-titres
      Associez un fichier SRT à chaque vidéo
      📤
      Export
      HTML autonome ou package Moodle/SCORM
      ✅
      Aucune installation requise — MediaMatch fonctionne directement dans votre navigateur web. Pas besoin de compte, de connexion internet permanente, ni de connaissances techniques.

      Comment fonctionne une activité ?

      Une activité MediaMatch se compose de deux types d'éléments :

      Type Rôle Exemple
      🟦 Draggable L'élément que l'apprenant saisit et dépose Photo d'un animal
      🟩 Zone cible L'emplacement où déposer l'élément Le nom de cet animal
      ⬜ Les deux Peut être déposé ET recevoir d'autres éléments —
      ⬛ Statique Affiché sans interaction, sert de contexte Titre d'une section
      🚀
      Tutoriel · Démarrage rapide
      Créer votre première activité en 5 minutes
      Suivez ces étapes pour comprendre la logique générale de l'outil.
      1. 1
        Ouvrez le fichier dans votre navigateur
        Double-cliquez sur le fichier mediamatch-v3.html. Il s'ouvre dans votre navigateur (Chrome, Firefox, Edge, Safari). Vous voyez apparaître l'interface avec quatre onglets en haut.
      2. 2
        Explorez l'interface
        Vous êtes dans l'onglet ✏️ Édition par défaut. À gauche : la médiathèque. À droite : le canvas (la zone de travail).
         
        ✏️ Édition
        ✂️ Découpage vidéo
        ▶️ Aperçu
        ⚙️ Réglages
        📚 Médiathèque
        ＋ Ajouter un élément
        + Zone cible vide
        🖱️ Canvas vide — glissez des éléments ici
      3. 3
        Ajoutez vos premiers éléments
        Cliquez sur « ＋ Ajouter un élément ». Choisissez le type (texte, image, vidéo), remplissez les champs et cliquez sur Ajouter. L'élément apparaît dans la médiathèque ET sur le canvas.
      4. 4
        Créez les zones cibles
        Cliquez sur « + Zone cible vide » pour chaque emplacement de réponse. Ou bien, lors de l'ajout d'un élément, choisissez le rôle « Zone cible ».
      5. 5
        Définissez les bonnes réponses
        Cliquez sur « 🔗 Gérer les associations » en bas de la médiathèque. Activez les interrupteurs pour indiquer quels éléments correspondent à quelles zones.
      6. 6
        Testez l'activité
        Cliquez sur « ▶ Tester » ou sur l'onglet ▶️ Aperçu. L'activité s'affiche telle que vos apprenants la verront. Essayez de déposer des éléments dans les zones et cliquez sur « ✔ Vérifier les réponses ».
      💡
      Astuce : une démonstration se charge automatiquement au démarrage pour vous montrer un exemple concret. Elle est entièrement modifiable.
      📚
      Partie 1 · Fonctions de base
      La médiathèque
      Gérez tous vos éléments depuis ce panneau latéral gauche.

      La médiathèque est la liste de tous les éléments que vous créez pour votre activité. Elle se trouve dans la colonne de gauche de l'onglet Édition.

      Ajouter un élément texte

      1. 1
        Cliquez sur « ＋ Ajouter un élément »
        Le bouton se trouve en bas du panneau médiathèque.
      2. 2
        Sélectionnez le type « Texte »
        Le bouton 📝 Texte est sélectionné par défaut (fond coloré).
      3. 3
        Remplissez les champs
        Étiquette = le nom interne de l'élément (ex : « Définition photosynthèse »). Texte alternatif = description pour les lecteurs d'écran (accessibilité). Contenu = le texte qui sera affiché.
      4. 4
        Choisissez le rôle
        🟦 Draggable si l'apprenant doit déplacer cet élément, ou 🟩 Zone cible si c'est une zone où déposer d'autres éléments.
      5. 5
        Cliquez sur « Ajouter »
        L'élément apparaît dans la médiathèque et se place automatiquement sur le canvas.

      Ajouter une image

      Suivez les mêmes étapes, mais sélectionnez le type 🖼️ Image. Vous avez deux façons d'ajouter l'image :

      Méthode Comment faire Avantage
      Depuis votre ordinateur Cliquez sur la zone pointillée ou glissez-déposez votre fichier image dessus Fonctionne hors-ligne, l'image est intégrée dans l'activité
      Depuis une adresse web Collez l'adresse URL (https://…) dans le champ en dessous Pratique pour les images déjà en ligne
      ⚠️
      Formats acceptés : JPG, PNG, GIF, WebP, SVG. Pour les fichiers importés depuis votre ordinateur, ils sont convertis et intégrés directement — votre activité fonctionnera même sans connexion internet.

      Ajouter une vidéo

      Sélectionnez le type 🎬 Vidéo. Trois sources possibles :

      Source Comment
      Fichier local Glissez votre fichier MP4, WebM ou MOV dans la zone
      YouTube Collez l'adresse de la vidéo (ex : https://youtube.com/watch?v=…)
      Vimeo Collez l'adresse Vimeo (ex : https://vimeo.com/123456)

      Modifier ou supprimer un élément

      Dans la médiathèque, chaque élément affiche deux boutons lorsque vous passez la souris dessus :

      ✏️ Modifier
      → change le nom, le contenu ou le rôle
      🗑 Supprimer
      → retire l'élément de l'activité (demande confirmation)

      Choisir le nombre de paires

      En haut de la médiathèque, le champ « Nombre de paires » vous permet de définir combien d'associations votre activité doit comporter. Cela vous aide à garder une structure cohérente.

      💡
      Cliquez sur une carte dans la médiathèque pour afficher ou masquer un aperçu rapide de son contenu.
      🎨
      Partie 1 · Mise en page
      Le canvas de composition
      Arrangez visuellement vos éléments sur la scène de l'activité.

      Le canvas est la grande zone à droite où vous disposez vos éléments. C'est exactement ce que verront vos apprenants (en plus des éléments à déposer qui apparaissent dans le bac du bas).

      Déplacer un élément

      Cliquez et maintenez le bouton gauche de la souris sur la barre de titre d'un élément (là où vous voyez les petits points ⠿⠿), puis faites-le glisser où vous souhaitez. Relâchez pour le poser.

      ⌨️
      Au clavier : cliquez sur un élément pour le sélectionner, puis utilisez les flèches ↑ ↓ ← → pour le déplacer. Maintenez Maj pour des déplacements plus grands.

      Redimensionner un élément

      Lorsque vous survolez un élément, une petite poignée bleue apparaît dans son coin inférieur droit. Cliquez dessus et faites glisser pour changer la largeur.

      Les boutons de la barre d'outils du canvas

      🔲 Auto-disposition
      🗑 Effacer
      ▶ Tester
      Bouton Ce qu'il fait
      🔲 Auto-disposition Range automatiquement tous les éléments en grille bien ordonnée
      🗑 Effacer Retire tous les éléments du canvas (les éléments restent dans la médiathèque)
      ▶ Tester Passe directement en mode aperçu pour essayer l'activité

      Ajouter un élément depuis la médiathèque vers le canvas

      Deux méthodes :

      1. A
        Par glisser-déposer
        Cliquez sur une carte de la médiathèque et faites-la glisser vers le canvas. Relâchez à l'endroit souhaité.
      2. B
        Automatiquement
        Chaque nouvel élément créé est automatiquement placé sur le canvas. Vous pouvez ensuite le repositionner.
      🟩
      Partie 1 · Structure de l'activité
      Les zones cibles
      Les emplacements où vos apprenants déposeront leurs réponses.

      Les zones cibles sont les emplacements de réponse. Sur le canvas, elles sont entourées d'une bordure verte en pointillés et affichent « Déposez ici ».

      Créer une zone cible

      Deux façons :

      + Zone cible vide
      → crée une zone texte vide en un clic

      Ou bien, lors de l'ajout d'un élément (texte, image…), choisissez le rôle « 🟩 Zone cible » dans le sélecteur en bas de la fenêtre.

      Apparence des zones sur le canvas

      🟦 Élément draggable
      image Photo océan
      🖼 [aperçu]
      🟩 Zone cible
      zone Eau
      déposer ici
      ℹ️
      Une zone peut contenir plusieurs réponses correctes si vous activez l'option « Plusieurs items par zone » dans les Réglages. Utile pour les activités de classification.
      🔗
      Partie 1 · Correction automatique
      Définir les bonnes réponses
      Indiquez à MediaMatch quelles associations sont correctes pour la correction automatique.

      Pour que MediaMatch puisse corriger automatiquement l'activité, vous devez lui indiquer quels éléments vont avec quelles zones.

      1. 1
        Cliquez sur « 🔗 Gérer les associations »
        Ce bouton se trouve en bas du panneau médiathèque. Une fenêtre s'ouvre.
      2. 2
        Pour chaque zone cible, activez les bons éléments
        Chaque zone est présentée dans un encadré. En face de chaque élément possible, il y a un interrupteur. Activez-le (il devient bleu) pour indiquer que cet élément est une bonne réponse pour cette zone.
      3. 3
        Cliquez sur « Fermer »
        Les associations sont enregistrées. Sur le canvas, des courbes bleues relient visuellement les éléments associés.
      💡
      Vous pouvez aussi cliquer sur le bouton 🔗 directement sur un élément dans le canvas pour accéder rapidement à la gestion de ses associations.
      ⚠️
      Important : si vous ne définissez pas d'associations, l'activité fonctionnera mais ne pourra pas être corrigée automatiquement. La vérification affichera tout comme incorrect.
      ✂️
      Partie 2 · Outil vidéo
      Découper une vidéo en extraits
      Sélectionnez des passages précis d'une vidéo pour les utiliser comme éléments de l'activité.

      L'onglet ✂️ Découpage vidéo vous permet de sélectionner des passages précis d'une vidéo et de les sauvegarder comme extraits réutilisables dans votre activité.

      Charger une vidéo

      1. 1
        Cliquez sur l'onglet « ✂️ Découpage vidéo »
        Vous voyez un lecteur vidéo vide à gauche et la liste des extraits à droite.
      2. 2
        Cliquez sur « 📂 Charger une vidéo »
        Une fenêtre de sélection de fichier s'ouvre. Choisissez votre fichier vidéo (MP4, WebM ou MOV).
      3. 3
        La vidéo apparaît dans le lecteur
        La timeline (barre de progression) s'affiche en dessous. La vidéo est prête à être découpée.

      Utiliser la timeline

      ⏱ 0:05.200 / 1:23.000
      Extrait sélectionné
       
      0:000:200:411:021:23
      Élément visuel À quoi ça sert Comment l'utiliser
      Barre grise Toute la durée de la vidéo Cliquez n'importe où pour sauter à ce moment
      Zone bleue Le passage sélectionné pour l'extrait Faites glisser ses bords pour ajuster
      Trait rouge La position actuelle de lecture Se déplace automatiquement pendant la lecture

      Sélectionner un passage

      1. 1
        Naviguez jusqu'au début du passage
        Cliquez dans la timeline pour positionner la lecture, ou utilisez les boutons ◀ 0.1s et 0.1s ▶ pour une navigation image par image.
      2. 2
        Cliquez sur « ⬅ Entrée »
        Ce bouton marque le début de votre extrait au moment actuel de la vidéo.
      3. 3
        Naviguez jusqu'à la fin du passage
        Avancez dans la vidéo jusqu'à l'endroit où vous souhaitez que l'extrait se termine.
      4. 4
        Cliquez sur « Sortie ➡ »
        Ce bouton marque la fin de l'extrait. La zone bleue sur la timeline s'ajuste automatiquement.
      5. 5
        Vérifiez avec « 👁 Prévisualiser »
        Ce bouton lit uniquement le passage sélectionné — pratique pour vérifier avant de sauvegarder.

      Ajuster les timecodes à la main

      Si vous connaissez les temps précis, vous pouvez les saisir directement dans les champs Entrée et Sortie au format minutes:secondes.millièmes. Par exemple : 0:05.500 signifie 5 secondes et demi.

      Sauvegarder l'extrait

      1. 1
        Cliquez sur « 💾 Enregistrer l'extrait »
        La fenêtre de sauvegarde s'ouvre avec tous les paramètres.
      2. 2
        Donnez un nom à l'extrait
        Ce nom apparaîtra dans la médiathèque et dans l'activité. Soyez descriptif (ex : « Scène 3 — dialogue »).
      3. 3
        Vérifiez et ajustez les timecodes si besoin
        Dans la section « ⏱ Durée de l'extrait », vous pouvez modifier les timecodes directement, puis cliquer sur « ↕ Appliquer à l'éditeur » pour voir le résultat.
      4. 4
        Cliquez sur « Enregistrer »
        L'extrait apparaît dans la colonne de droite sous « Extraits sauvegardés ».
      5. 5
        Ajoutez l'extrait à l'activité
        Cliquez sur « + Activité » sur la carte de l'extrait. Il est ajouté à la médiathèque comme un élément de type Extrait et se place sur le canvas.
      💬
      Partie 2 · Accessibilité vidéo
      Ajouter des sous-titres SRT
      Associez un fichier de sous-titres à votre vidéo pour un meilleur accès au contenu.

      Un fichier SRT (ou VTT) est un fichier texte contenant les sous-titres d'une vidéo avec leurs timecodes. MediaMatch l'utilise pour afficher les sous-titres en temps réel pendant la lecture et pour les découper automatiquement avec l'extrait.

      Qu'est-ce qu'un fichier SRT ?

       
      sous-titres.srt
      1
      00:00:01,200 --> 00:00:03,500
      Bonjour et bienvenue dans ce cours.

      2
      00:00:04,000 --> 00:00:06,800
      Aujourd'hui, nous allons voir...

      Vous pouvez créer ou obtenir des fichiers SRT via des outils comme Subtitle Edit (gratuit), YouTube (téléchargez les sous-titres d'une vidéo), ou des services de transcription automatique.

      Charger le fichier SRT

      1. 1
        Assurez-vous qu'une vidéo est chargée
        Le fichier SRT doit correspondre à la vidéo affichée dans le lecteur.
      2. 2
        Cliquez sur « 💬 Charger SRT »
        Ce bouton se trouve dans la barre d'outils de l'onglet Découpage vidéo. Sélectionnez votre fichier .srt ou .vtt.
      3. 3
        Les sous-titres apparaissent
        Un panneau s'affiche sous la timeline avec la liste de toutes les entrées. Pendant la lecture, le sous-titre actif est surligné en bleu dans la liste et s'affiche directement sur la vidéo.

      Visualisation en temps réel

      🎬 [Vidéo en lecture]
      Bonjour et bienvenue dans ce cours.
      0:01.2
      0:03.5      Bonjour et bienvenue dans ce cours.
      0:04.0
      0:06.8      Aujourd'hui, nous allons voir...
      0:07.1
      0:09.2      ...les bases de la photosynthèse.

      Les sous-titres en fond vert clair sont ceux qui tombent dans la sélection (entre les points Entrée et Sortie).

      Découpage automatique des sous-titres

      Quand vous sauvegardez un extrait, MediaMatch découpe automatiquement les sous-titres correspondants et recale les timecodes à zéro. Vous obtenez un fichier SRT parfaitement synchronisé avec votre extrait.

      ✅
      Télécharger le SRT découpé : sur chaque carte d'extrait, le bouton ⬇ SRT vous permet de télécharger le fichier de sous-titres découpé et recalé — utile pour le réutiliser ailleurs.
      ✏️
      Partie 2 · Gestion des extraits
      Modifier un extrait sauvegardé
      Retouchez n'importe quel paramètre d'un extrait existant, y compris sa durée.

      Vous pouvez à tout moment revenir sur un extrait pour modifier son nom, sa durée, ou ses sous-titres.

      Ouvrir un extrait pour modification

      1. 1
        Trouvez la carte de l'extrait
        Dans la colonne de droite de l'onglet Découpage vidéo, sous « Extraits sauvegardés ».
      2. 2
        Cliquez sur « ✏️ Modifier »
        La vidéo source se recharge (ou reprend si c'est la même), les poignées de la timeline se repositionnent sur les timecodes originaux, et la fenêtre de modification s'ouvre.

      Ce que vous pouvez modifier

      Paramètre Comment
      Nom Modifiez directement le champ « Nom de l'extrait »
      Texte alternatif Modifiez le champ d'accessibilité
      Timecode d'entrée Tapez la nouvelle valeur dans le champ « Entrée » (format m:ss.mmm)
      Timecode de sortie Tapez la nouvelle valeur dans le champ « Sortie »
      Sous-titres Chargez un nouveau SRT, redécoupez selon les nouveaux timecodes, ou retirez les sous-titres

      Les trois boutons de synchronisation

      ↕ Appliquer à l'éditeur
      👁 Prévisualiser
      ↓ Depuis l'éditeur
      Bouton Ce qu'il fait
      ↕ Appliquer à l'éditeur Envoie les timecodes saisis dans la fenêtre vers la timeline — les poignées se déplacent
      👁 Prévisualiser Ferme temporairement la fenêtre, joue le passage dans le lecteur, puis rouvre la fenêtre
      ↓ Depuis l'éditeur Récupère la position actuelle des poignées de la timeline et la recopie dans les champs
      💡
      Méthode recommandée pour modifier la durée : Fermez la fenêtre → ajustez les poignées dans la timeline → cliquez sur « 💾 Enregistrer l'extrait » → la fenêtre de modification s'ouvre avec les nouvelles valeurs préremplies → cliquez sur Mettre à jour.
      📄
      Partie 3 · Personnalisation
      Rédiger l'énoncé de l'activité
      Ajoutez un texte d'introduction mis en forme, avec images et liens.

      L'énoncé est le texte affiché au-dessus de l'activité. C'est ici que vous donnez les consignes détaillées, le contexte, ou tout document utile à vos apprenants.

      Accéder à l'éditeur d'énoncé

      Cliquez sur l'onglet ⚙️ Réglages, puis descendez jusqu'à la section « Énoncé personnalisé ».

      La barre d'outils de mise en forme

      G
      I
      S
      •≡
      1≡
      🔗
      🖼
      📦
      Cliquez ici pour taper votre énoncé…
      Outil Raccourci Effet
      G (Gras) Ctrl+B Met en gras le texte sélectionné
      I (Italique) Ctrl+I Met en italique
      S (Souligné) Ctrl+U Souligne le texte
      •≡ Liste — Crée une liste à puces
      1≡ Numérotée — Crée une liste numérotée
      🔗 Lien — Ajoute un lien cliquable
      🖼 Image — Insère une image (URL ou fichier)
      📦 Encadré — Ajoute un bloc coloré pour mettre en valeur
      Couleur — Change la couleur du texte sélectionné
      Style — Titres H2, H3, code, paragraphe
      💡
      Le contenu de l'énoncé est sauvegardé automatiquement à chaque modification. Il sera inclus dans les exports HTML et SCORM.
      ⚙️
      Partie 3 · Configuration
      Les réglages de l'activité
      Personnalisez le comportement et l'apparence de l'activité.

      L'onglet ⚙️ Réglages regroupe toutes les options de configuration.

      Informations de l'activité

      Champ Description
      Titre Le titre principal affiché en haut de l'activité
      Consigne courte Une phrase d'instruction rapide sous le titre (ex : « Faites glisser… »)
      Auteur Votre nom, pour les métadonnées du fichier exporté

      Options de comportement

      Option Activé Désactivé
      Afficher le score Un panneau de résultats s'affiche après vérification Pas de score affiché
      Mélanger les éléments Ordre aléatoire dans le bac à chaque démarrage Ordre fixe (l'ordre de création)
      Retour immédiat Dès qu'un élément est déposé, la couleur indique si c'est juste ou faux Pas d'indication avant la vérification finale
      Plusieurs items par zone Une zone peut accepter plusieurs éléments Une zone = un seul élément
      ▶️
      Partie 3 · Test
      Tester l'activité en mode Aperçu
      Visualisez l'activité telle que la verront vos apprenants.

      L'onglet ▶️ Aperçu affiche l'activité en mode joueur — exactement comme vos apprenants la verront.

      Fonctionnement de l'activité pour l'apprenant

      Faites glisser chaque élément vers la zone qui lui correspond.
      Zone : Eau
      déposer ici
      Zone : Forêt
      déposer ici
      Zone : Désert
      déposer ici
      🖼 Océan pacifique
      🖼 Forêt tropicale
      🖼 Sahara
      1. 1
        Les éléments à placer sont dans le bac en bas
        Le bac « Éléments à placer » contient tous les draggables, dans un ordre aléatoire (si l'option est activée).
      2. 2
        L'apprenant glisse les éléments vers les zones
        Il clique et maintient un élément, puis le déplace vers une zone cible. Si la zone est compatible, l'élément s'y fixe. Il peut aussi retirer un élément d'une zone en cliquant sur le ✕ à côté de son nom.
      3. 3
        Il clique sur « ✔ Vérifier les réponses »
        Les zones correctes passent en vert, les incorrectes en rouge. Un score s'affiche si l'option est activée.
      4. 4
        Il peut recommencer avec « ↺ Recommencer »
        Tout est remis à zéro, les éléments retournent dans le bac.

      Navigation clavier dans l'aperçu

      Touche Action
      Tab Passer d'un élément à l'autre
      Espace Saisir / relâcher un élément
      Tab puis Entrée Déposer l'élément dans la zone sélectionnée
      📄
      Partie 4 · Distribution
      Exporter en page HTML autonome
      Créez un fichier HTML que n'importe qui peut ouvrir dans un navigateur.

      L'export HTML génère un fichier entièrement autonome : toutes les images, vidéos et sous-titres sont intégrés dedans. Il n'a besoin d'aucune connexion internet ni d'aucun logiciel particulier.

      Comment exporter

      1. 1
        Allez dans l'onglet ⚙️ Réglages
         
      2. 2
        Section « Export HTML autonome » → cliquez sur « ⬇ Télécharger »
        Le fichier mediamatch-player.html se télécharge dans votre dossier Téléchargements.
      3. 3
        Partagez ce fichier
        Envoyez-le par email, déposez-le sur un ENT, une clé USB, ou hébergez-le sur un serveur web. Vos apprenants double-cliquent dessus et l'activité s'ouvre.
      ✅
      Ce fichier contient : l'énoncé mis en forme, toutes les images et vidéos intégrées, les sous-titres en WebVTT, la correction automatique avec score, et la navigation clavier complète.
      🎓
      Partie 4 · Intégration LMS
      Intégrer dans Moodle (SCORM)
      Publiez votre activité directement dans Moodle avec remontée du score.

      Le format SCORM 1.2 est le standard d'interopérabilité des plateformes e-learning. MediaMatch peut générer un package prêt à importer dans Moodle (et la plupart des autres LMS).

      Générer le package SCORM

      1. 1
        Allez dans ⚙️ Réglages → « Export Moodle / SCORM 1.2 »
         
      2. 2
        Cliquez sur « 📦 Exporter SCORM »
        Le fichier mediamatch-scorm.zip se télécharge.

      Importer dans Moodle

      1. 1
        Dans Moodle, activez le mode édition
        Bouton « Activer le mode édition » en haut à droite de votre cours.
      2. 2
        Cliquez sur « Ajouter une activité ou ressource »
        Dans la section où vous souhaitez placer l'activité.
      3. 3
        Choisissez « SCORM »
        Dans la liste des activités Moodle.
      4. 4
        Importez le fichier .zip
        Dans le champ « Fichier », glissez ou sélectionnez le mediamatch-scorm.zip téléchargé.
      5. 5
        Enregistrez et affichez
        Cliquez sur « Enregistrer et revenir au cours ». L'activité apparaît dans votre cours.
      📊
      Remontée du score : le score de l'apprenant (nombre de bonnes réponses / total) est transmis automatiquement au carnet de notes Moodle. Le seuil de réussite est fixé à 70 %.
      💾
      Partie 4 · Sauvegarde
      Sauvegarder et reprendre votre travail
      MediaMatch ne sauvegarde pas automatiquement — pensez à exporter régulièrement.
      ⚠️
      Important : MediaMatch fonctionne entièrement dans le navigateur. Si vous fermez l'onglet sans sauvegarder, votre travail sera perdu. Sauvegardez régulièrement.

      Exporter en JSON (sauvegarde)

      1. 1
        Cliquez sur « 📄 Exporter JSON »
        Ce bouton se trouve dans ⚙️ Réglages → section « Export HTML autonome ». Ou via le bouton « 📥 Importer » en haut à droite.
      2. 2
        Le fichier mediamatch-activity.json se télécharge
        Rangez-le dans un dossier de votre ordinateur.

      Reprendre une activité sauvegardée

      1. 1
        Cliquez sur « 📥 Importer »
        Ce bouton se trouve en haut à droite de l'interface.
      2. 2
        Ouvrez votre fichier JSON
        Ouvrez votre fichier .json dans un éditeur de texte (Bloc-notes, TextEdit), sélectionnez tout (Ctrl+A), copiez (Ctrl+C), puis collez dans la fenêtre d'import.
      3. 3
        Cliquez sur « Importer »
        Votre activité se recharge intégralement.
      ♿
      Annexe A
      Accessibilité
      MediaMatch est conçu pour être utilisable par tous, y compris les personnes en situation de handicap.

      MediaMatch respecte les normes WCAG 2.1 AA (Web Content Accessibility Guidelines) du W3C. Voici les fonctionnalités d'accessibilité intégrées :

      Fonctionnalité Pour qui Comment l'utiliser
      Navigation clavier complète Personnes ne pouvant pas utiliser une souris Tab pour naviguer, Espace/Entrée pour interagir
      Lecteur d'écran Personnes malvoyantes ou non-voyantes Toutes les actions sont annoncées vocalement
      Texte alternatif Personnes malvoyantes Remplissez le champ « Texte alternatif » pour chaque image/vidéo
      Sous-titres vidéo Personnes malentendantes Chargez un fichier SRT, les sous-titres s'affichent sur la vidéo
      Mode contraste élevé Personnes malvoyantes ⚙️ Réglages → Accessibilité → activer « Contraste élevé »
      Indicateur de focus visible Navigation clavier Un cadre bleu apparaît sur l'élément actif
      Lien d'évitement Navigation clavier Appuyez sur Tab dès l'ouverture pour accéder directement au contenu
      ♿
      Bonne pratique : remplissez toujours le champ « Texte alternatif » pour les images et vidéos. C'est indispensable pour les apprenants qui utilisent un lecteur d'écran.
      🎓
      Annexe B
      Conseils pédagogiques
      Idées d'activités et bonnes pratiques pour maximiser l'impact pédagogique.

      Idées d'activités

      Type d'activité Configuration suggérée
      Vocabulaire image/mot Images en draggables + définitions en zones cibles
      Classement en catégories Éléments divers en draggables + catégories en zones cibles · Activer « Plusieurs items par zone »
      Compréhension vidéo Extraits vidéo en draggables + descriptions en zones cibles
      Chronologie Événements en draggables + dates en zones cibles
      Association langue Textes dans la langue source en draggables + traductions en zones cibles
      Analyse de document Extrait vidéo ou image en contexte statique + questions en zones + réponses en draggables

      Recommandations générales

      💡
      Limitez à 4–8 paires par activité. Au-delà, l'écran devient surchargé et la tâche cognitive trop lourde.
      💡
      Activez le mélange aléatoire pour éviter que les apprenants mémorisent la position des réponses plutôt que le contenu.
      💡
      Utilisez le retour immédiat pour les activités de découverte, désactivez-le pour les évaluations.
      💡
      Les extraits vidéo sont particulièrement efficaces pour la compréhension orale en langues étrangères ou l'analyse de gestes techniques.
      ❓
      Annexe C
      Questions fréquentes

      La vidéo que j'ai importée ne fonctionne pas dans l'export HTML.

      Vérifiez que le format est MP4 (H.264) ou WebM, qui sont les formats universellement supportés par les navigateurs. Les fichiers AVI, MKV ou MOV doivent d'abord être convertis (avec un outil gratuit comme HandBrake).

      Mon fichier SRT ne se charge pas correctement.

      Vérifiez que le fichier est enregistré en UTF-8 (et non en ANSI ou Latin-1). Ouvrez-le dans le Bloc-notes → Fichier → Enregistrer sous → choisissez UTF-8 dans le menu d'encodage.

      L'activité est trop lente à charger.

      Des images ou vidéos très lourdes intégrées en base64 peuvent alourdir le fichier HTML. Privilégiez des images compressées (moins de 500 Ko) et des vidéos en URL externe (YouTube/Vimeo) plutôt qu'en import local pour les fichiers volumineux.

      Le score n'apparaît pas dans Moodle.

      Assurez-vous d'avoir utilisé le bouton « ✔ Vérifier les réponses » dans l'activité SCORM avant de fermer la fenêtre. Le score n'est transmis qu'à ce moment-là.

      Je ne vois pas le bouton « ✔ Vérifier les réponses ».

      Ce bouton n'apparaît que si votre activité contient au moins une zone cible. Vérifiez que certains éléments ont bien le rôle « 🟩 Zone cible ».

      Comment partager l'activité avec mes collègues pour qu'ils puissent la modifier ?

      Exportez en JSON (bouton « 📄 Exporter JSON ») et partagez ce fichier. Vos collègues l'importent dans leur propre copie de MediaMatch avec le bouton « 📥 Importer ».

      Est-ce que MediaMatch fonctionne sur tablette ou téléphone ?

      MediaMatch fonctionne sur tablette (le glisser-déposer tactile est supporté sur la plupart des navigateurs modernes). Sur téléphone, l'écran peut être trop petit pour l'interface d'édition, mais l'activité exportée (mode joueur) fonctionne bien.

      MediaMatch v3
      Guide rédigé pour un usage pédagogique · Accessible selon les normes WCAG 2.1 AA