Table des matières

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 trouvé 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

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]).

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, 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”)

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

  1. Dans un cours Moodle, ajouter une activité étiquette.
  2. 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).
  3. Dans le corps de cette étiquette insérer cette image. Bien noter son nom.
  4. Ouvrir le code source HTML de l'étiquette.
  5. Dans la balise <img…/> de l'image ajoutée, ajouter l'attribut :
    usemap="#fm_imagemap"
  6. Coller la balise <map…>…</map> copiée précédemment.

Et voilà :