Objectif
Créer une carte mentale contenant des liens et que ces liens soient cliquables. Pouvoir ensuite déposer cette carte mentale cliquable sur la plateforme Moodle.
Outil utilisés
Principe
Grace à des logiciels tiers (voir ci-dessus), on crée une carte mentale. Celle-ci est ensuite exportée au format HTML.
L'astuce consiste à extraire de cet export, l'image et le code HTML à réutiliser dans la page Moodle.
Mode opératoire
Création de la carte
Dans Freeplane créer la carte.
Y ajouter les liens ([ctrl]+[k]).
Exporter la carte sous forme d'un fichier : XHTML image cliquable (.html)
Extraction du code html utile
Ouvrir le fichier .html exporté, avec Notepad++ (par exemple), pour copier le code source HTML, contenu dans la balise map
<map name="fm_imagemap" id="fm_imagemap"> ... </map>
Dans le code copié, supprimer toutes les sous-balises area inutiles, c'est-à-dire correspondant à des noeuds de la carte mentale sur lesquels on ne veut pas de lien. En effet, Freeplane créer des liens internes ('href=“#…'), dans la page exportée, pour tous les noeuds de la carte, qu'ils portent ou non un lien dans la carte d'origine.
Une balise area a cette tête :
<area shape="rect" .../>
Remplacer le contenu de l'attribut href des balises restantes (celles où l'on veut vraiment un lien), avec les liens qui nous intéressent (à la place des liens internes créés par Freeplane) :
(ci-dessus : le code source avant, puis après “nettoyage”)
target="_blank"
dans chaque balise <area… si on veut que les liens s'ouvrent dans une nouvelle page.
Dépôt sur la plateforme
- Dans un cours Moodle, ajouter une activité étiquette.
- Déposer sur la plateforme l'image incluse dans la page web exportée par Freeplane au départ (cette image se trouve dans le dossier qui accompagne la page web exportée).
- Dans le corps de cette étiquette insérer cette image. Bien noter son nom.
- Ouvrir le code source HTML de l'étiquette.
- Dans la balise <img…/> de l'image ajoutée, ajouter l'attribut :
usemap="#fm_imagemap"
- Coller la balise <map…>…</map> copiée précédemment.
Et voilà :