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.

Le technique décrite ci-après n'est probablement pas la seule. Il aurait été intéressant de pouvoir exporter la carte sous forme d'un pdf cliquable, mais seul MindJet le permet. Malheureusement ce dernier ne permet pas toujours d'arranger la disposition des noeuds comme on le souhaite (j'ai trouver comment le faire pour les noeuds de premier niveau, mais pas pour les autres, qui restent agglutinés les uns aux autres) !

Outil utilisés

Freeplane logiciel de carte mentale (libre)

Notepad++ editeur texte orienté développement (libre)

Principe

Grace à des logiciels tiers (voir ci-dessus), on créer 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]).

S'arranger pour mettre dans le texte des liens du texte reconnaissable permettant d'identifier de façon non ambiguë chacun des liens plus tard, lors de la modification du code source. Par exemple pour une carte portail vers des rapports personnalisés, indiquer le numéro du rapport dans le texte du lien “r.55”…

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, de la balise

<map name="fm_imagemap" id="fm_imagemap">...</map>

Supprimer toutes les sous-balises

<area shape="rect" .../>

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.

Mettre à jour l'attribut href des balises restantes, avec les liens qui nous intéressent :

(ci-dessus : le code source avant, puis après “nettoyage”)

On peut ajouter l'attribut 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à :