Presque tout sur… les « visites guidées » dans Moodle

E-Learning Facile
Licence Créative Common

But des visites guidées

Accompagner les apprenants ou les enseignants dans la découverte de certains éléments situés sur
la page, ou sur des pages successives, qu’ils sont en train de visiter ou d’éditer.

Présentation
Les visites guidées apparaissent en principe uniquement lors du premier passage sur la page
concernée. Mais on peut relancer la visite par une commande située tout en bas de page : « Relancer
la visite guidée pour cette page ».

Il s’agit de simples fenêtres se superposant à la page actuelle qui passe alors discrètement en
arrière-plan.

Ces fenêtres peuvent se situer dans trois emplacements possibles :

1. En milieu de page. Le plus simple. Par exemple pour débuter la visite. Cas représenté ci-
dessous.
2. Sur un bloc défini : Dans ce cas la liste complète des blocs installés dans Moodle sera
affichée dans une liste déroulante.1
3. Sur un élément précis de la page : C’est le « sélecteur ». Solution techniquement plus
avancée et par conséquent un peu plus difficile à mettre en œuvre.

Mise en œuvre
Pour l’instant, seuls les administrateurs peuvent mettre en place ces visites ou les enseignants ayant
ce droit dans un contexte « système ». 2

Accès : Administration/Présentation/Visites guidées

Sous la liste éventuelle existante, on trouve au centre un ensemble de trois icônes à cliquer.

1 Vérifier que le bloc que vous sélectionnez se trouve bien sur la page en question.
2 Espérons que cette obligation évoluera pour permettre aux enseignants de les créer dans leurs propres cours.

E-Learning Facile Page 1/4 Version du 21/06/18

 Presque tout sur… les « visites guidées » dans Moodle
E-Learning Facile
Licence Créative Common

1. Créer une visite guidée : C’est en cliquant ici que vous pourrez créer toutes vos visites
guidées.
2. Vous pourrez importer une visite guidée que vous avez précédemment téléchargée sur
votre ordinateur. Soit depuis le dépôt des visites soit depuis un autre Moodle.
3. Accéder au dépôt des visites déjà créées et déposées par les contributeurs sur Moodle.org.

Créer une visite

Cliquez sur le bouton de gauche de l’image ci-dessus.
Paramétrage de la visite :
• Nom de la visite.
• Description sommaire.
• URL de la page concernée par la visite : Les visites guidées seront affichées sur toutes les
pages dont l'URL correspond à cette valeur. (liste de certains codes en fin de document)
Le caractère % peut être utilisé comme joker pour remplacer une chaîne de caractères quelconque. Voici quelques
exemples :
/my/% correspond au Tableau de bord
/course/view.php?id=2 correspond à un cours spécifique. Le cours id=2
/mod/forum/view.php% correspond à tous les forums de discussion
/user/profile.php% correspond au profil des utilisateurs
Pour afficher une visite guidée sur la page d'accueil, il faut utiliser la valeur « FRONTPAGE ».
• Activation ou non de la visite.
• Position par défaut: Au dessus, au dessous, à droite ou à gauche de l’élément sélectionné.
• Afficher ou non si la cible précisée n’est pas atteinte sur la page.
• Avec une image de fond ou non (pour faire ressortir la fenêtre).
• Passer à l’étape suivante par un clic sur la cible. En général inutile car on dispose du bouton
« suivant ».
• Filtre sur les rôles et les thèmes graphiques.

A ce stade la visite est créée mais toutes les étapes de cette visite sont à présent à définir.

Créer les différentes étapes de la visite

Dans la page de la liste des visites :

E-Learning Facile Page 2/4 Version du 21/06/18

 Presque tout sur… les « visites guidées » dans Moodle
E-Learning Facile
Licence Créative Common

• Si vous cliquez sur le nom de la visite (colonne « nom ») vous en programmez les étapes.
• Si vous cliquez sur l’engrenage (colonne « actions ») vous entrez à nouveau dans la
configuration de cette visite (vu au chapitre précédent).

Première étape de votre visite.

Cliquez sur le nom de cette visite. Puis sur le lien « nouvelle étape ».
Chaque étape est associée à une partie de la page : La cible.
Les types de cibles sont :
• Bloc – pour afficher l'étape suivante à proximité d'un bloc
indiqué. Simple et efficace.
• Sélecteur CSS – pour définir précisément la zone de la
cible au moyen de CSS. Puissant mais plus complexe.3
• Afficher au milieu de la page – pour une étape ne
nécessitant pas d'être associée à une partie spécifique de la
page. Par exemple le message d’accueil ou de fin de visite,
ou une explication générale.
Le titre sera affiché en haut de la fenêtre correspondant à cette étape.
Le contenu sera le texte que vous allez écrire dans cette fenêtre. On ne dispose pas d’éditeur. C’est
du texte brut.
Ainsi de suite vous créez toutes les étapes de votre visite guidée. Vous pourrez même en modifier
l’ordre d’apparition en déplaçant ces étapes.
Important : Toutes les étapes d’une visite ne s’appliquent pas forcément à la page sur laquelle vous
vous trouvez en début de visite. Par exemple quand vous décrivez un bloc, une icône, un lien …
dans votre étape, si votre texte enjoint de cliquer pour tester vous aboutissez alors sur une autre
page. Il faudra bien sûr que l’étape suivante de la visite corresponde à cette nouvelle page. Cette
procédure est obligatoire pour décrire un cheminement, une série d’actions se déroulant sur
plusieurs pages.
Multilangage : Si le filtre multilangages est activé dans Moodle et que vous écrivez vos textes en
utilisant la syntaxe multilangues, chaque utilisateur pourra suivre la visite avec des textes dans sa
propre langue. Exemple du titre d’une fenêtre intitulée : Ajoutez des blocs !
<span lang="en" class="multilang">Welcome</span><span lang="fr"
class="multilang">Bienvenue</span><span lang="es_mx"
class="multilang">Bienvenido</span>

Pour un français ceci donnera uniquement (au niveau du titre de la fenêtre) :

3 Un sélecteur CSS peut être utilisé pour cibler presque n'importe quel élément d'une page. Le sélecteur approprié
peut être trouvé à l'aide des outils de développement de votre navigateur. Nous verrons cela plus loin.

E-Learning Facile Page 3/4 Version du 21/06/18

 Presque tout sur… les « visites guidées » dans Moodle
E-Learning Facile
Licence Créative Common

Choix de l’option « blocs » : Il est

nécessaire que le bloc sélectionné dans la
liste (qui contient tous les blocs installés sur
la plate-forme) se trouve effectivement sur
la page. Selon sa position il peut être
pratique de sélectionner la position de la
fenêtre au-dessus, au-dessous, à côté….
Choix de l’option « sélecteur CSS » : Il n’est pas indispensable d’être un expert en programmation
pour utiliser cette potentialité assez intéressante. C’est l’objet du chapitre suivant.

Option : Sélecteur CSS

Cette option va vous permettre de positionner exactement la fenêtre sur une zone ciblée de la page.
Procédure :
1. Dans le choix des options choisir « Sélecteur ». Si le nom d’un bloc est affiché dans le
champ suivant cela n’a aucune importance puisque ce champ devient inactif. Il est en grisé.
2. Pour déterminer l’expression à placer dans le champ « Sélecteur CSS » procéder ainsi :
◦ Se positionner (par exemple sur un autre onglet de votre navigateur) sur la page
concernée.
◦ Sur l’élément qui vous intéresse, cliquer droit puis sur « Inspecter » (dans Chrome) ou
avec Firefox « Examiner l’élément ».
◦ Une fenêtre latérale s’ouvre et un texte apparaît surligné en bleu.
◦ Clic droit et menu « copy » puis « copy selector ». La zone concernée est présentée en
surligné sur la page. Cela permet de vérifier l’exactitude de votre copie.
◦ Collez-le dans le champ du sélecteur CSS. C’est l’expression que vous cherchiez pour
positionner votre fenêtre de visite à l’emplacement voulu.
Le reste de la description de votre étape s’effectue comme pour les cas décrits précédemment.

Quelques exemples de codes utiles

On pourra s’inspirer de ces codes pour créer de nouvelles visites guidées.

Description Code
Tableau de bord /my/ %
Page d’accueil de tous les cours /course/view.php %
Visites guidées /admin/tool/usertours/%
Page d’accueil du site FRONTPAGE
Edition d’un test /mod/quiz/edit.php %
Configuration d’une activité base de données %add/=data %
Configuration d’un forum %add=forum %
Page d’accueil d’un cours particulier (le vôtre?) /course/view.php?id=6

E-Learning Facile Page 4/4 Version du 21/06/18