ADOBE ELEARNING SUITE 2.5 User Manual

Extension CourseBuilder

ADOBE® eLEARNING SUITE 2.0 et 2.5

Informations juridiques

Pour consulter les informations juridiques, voir http://help.adobe.com/fr_FR/legalnotices/index.html.

Dernière mise à jour le 20/5/2011

Sommaire

Chapitre 1 : Prise en main

Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Nouveautés de cette version . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Fonctionnalités de CourseBuilder pour Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Apprentissage de CourseBuilder pour Adobe Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Chapitre 2 : Didacticiels Dreamweaver

Présentation du didacticiel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Configuration d'une structure de site pour le didacticiel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Définition d'un site local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Création d'une interaction CourseBuilder Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Définition de zones actives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Création de commentaires aux utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Création d'une interaction Glisser-déposer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Création de paires Glisser-déposer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Définition des paramètres du point d'accrochage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Création de commentaires aux utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Création d'un quiz à choix multiples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Définition d'une interaction Choix multiples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Création d'un calque pour les commentaires aux utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Création de commentaires aux utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Création d'une interaction Choix multiples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Définition d'une interaction Choix multiples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Définition des choix . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Définition de l'action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Test de l'interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

iii

Chapitre 3 : Instructions de base de CourseBuilder pour Dreamweaver

Présentation des fonctionnalités de base de CourseBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Copie des fichiers de support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Interactions CourseBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

Copie de fichiers vers un serveur Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

Dépannage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

Chapitre 4 : Interactions CourseBuilder Choix multiples

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Création d'une question vrai/faux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Questions à choix multiples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Création d'une question à réponses multiples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Options de l'interaction CourseBuilder Choix multiples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

Modification des interactions Choix multiples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Dernière mise à jour le 20/5/2011

UTILISATION DE L'EXTENSION COURSEBUILDER POUR ADOBE ELEARNING SUITE

Sommaire

Chapitre 5 : Interactions CourseBuilder Glisser-déposer

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

Les options de l'interaction CourseBuilder Glisser-déposer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Correspondance unilatérale et correspondance multilatérale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Création d'un exercice de mise en correspondance personnalisé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Création d'une procédure en deux étapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

Modification des procédures Glisser-déposer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

Chapitre 6 : Interactions Correspondance

Présentation des interactions Correspondance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Modèles de correspondance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Les options de l'interaction CourseBuilder Correspondance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Utilisation des interactions Correspondance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Chapitre 7 : Interactions Séquence

Présentation de l'interaction Séquence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Création d'une interaction CourseBuilder Séquence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Chapitre 8 : Interactions CourseBuilder Explorer

Aperçu des interactions Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

Création d'explorations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

Modification d'interactions Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

Chapitre 9 : Interactions CourseBuilder Entrée de texte

Présentation de l'interaction Entrée de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Les modèles d'interaction Entrée de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Création de champ d'entrée de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

Utilisation de l'interaction CourseBuilder Entrée de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

Chapitre 10 : Interactions Likert

Présentation de l'interaction Likert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

Options de l'interaction CourseBuilder Likert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

Ajout ou suppression d'un choix . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

Chapitre 11 : Améliorations et personnalisation

Amélioration et personnalisation des interactions CourseBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

Modification des interactions CourseBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

Couper, copier, coller et effacer des interactions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Personnalisation des commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Affichage des commentaires dans un cadre, un calque, une barre d'état ou un champ de texte . . . . . . . . . . . . . . . . . . . . . . . . . 70

Limitation du nombre de tentatives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

Limitation de la durée d'une interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

Définition des conditions d'évaluation d'une interaction CourseBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

Modification du nom du bouton Envoyer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

Réinitialisation d'une interaction CourseBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

Insertion d'une interaction CourseBuilder dans un calque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

Définition des préférences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

Gestion des modèles d'interaction CourseBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

Dernière mise à jour le 20/5/2011

UTILISATION DE L'EXTENSION COURSEBUILDER POUR ADOBE ELEARNING SUITE

Sommaire

Ajout d'un modèle d'interaction CourseBuilder à la Galerie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

Création d'une icône de modèle personnalisée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Utilisation des fichiers de la Galerie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Chapitre 12 : Commandes d'interaction CourseBuilder

Interactions CourseBuilder Bouton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

Interaction CourseBuilder Minuteur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

Interaction CourseBuilder Curseur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

Chapitre 13 : Gestionnaire d'actions

Interactions CourseBuilder Gestionnaire d'actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

Segments du Gestionnaire d'actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

Ajout d'un segment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

Ajout d'une condition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

Création d'expressions pour une condition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

Paramètres du champ Type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

Ajout d'une action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

Utilisation des segments, conditions et actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

Où créer des actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

Actions spécifiques d'apprentissage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

Définition des propriétés d'une interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

Propriétés des interactions CourseBuilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108

Définition des propriétés du Gestionnaire d'actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114

Définition de propriété JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

Ajout d'un comportement personnalisé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

Interactions CourseBuilder Gestionnaire d'actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

Modèle d'interaction Gestionnaire d'actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

Options de l'interaction CourseBuilder Gestionnaire d'actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

Chapitre 14 : Notation et suivi des données

Suivi des performances de l'utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

Marquage d'une réponse comme correcte ou incorrecte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

Notation d'une réponse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

Affichage des commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

Localisation de l'identificateur de l'interaction CourseBuilder dans un code source HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

Notation et suivi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

Dernière mise à jour le 20/5/2011

Chapitre 1 : Prise en main

Présentation

L'extension CourseBuilder pour Adobe Dreamweaver permet de créer des interactions Web d'apprentissage dans un environnement de conception visuel. Elle inclut un ensemble de modèles et d'outils conviviaux simplifiant et accélérant le développement de contenu pédagogique en ligne. Les interactions d'apprentissage créées à l'aide de cette extension sont intégralement prises en charge par le Web et compatibles avec plusieurs plates-formes et navigateurs pour une utilisation sans aucun module externe ou applet.

Nouveautés de cette version

Extension CourseBuilder pour Adobe Dreamweaver sur Mac OS

Vous pouvez utiliser l'extension CourseBuilder pour Adobe Dreamweaver dans un environnement Mac. Toutes les fonctionnalités prises en charge sous Windows sont disponibles sur Mac OS.

Prise en charge du navigateur Safari

En plus des autres navigateurs connus, l'extension CourseBuilder pour Adobe Dreamweaver prend en charge le navigateur Safari sous Windows et Macintosh.

Le tableau suivant fournit des informations spécifiques sur les navigateurs pris en charge :

Navigateur Plate-forme Versions

Internet Explorer Windows 6, 7 et 8

Mozilla Firefox Windows et Mac OS 3.0 et 3.5

Safari Windows et Mac OS 4

Fonctionnalités de CourseBuilder pour Dreamweaver

CourseBuilder pour Dreamweaver permet de concevoir rapidement des interactions d'apprentissage remarquables grâce à une assistance étape par étape. Seules quelques minutes sont nécessaires pour effectuer les actions suivantes :

• Création de quiz vrai/faux, à choix multiples et à réponses multiples

Pour en savoir plus, consultez « Interactions CourseBuilder Choix multiples » à la page 29.

• Création d'exercices de mise en correspondance par glisser-déposer

Pour en savoir plus, consultez « Interactions CourseBuilder Glisser-déposer » à la page 36.

• Création d'interactions Correspondance

Pour en savoir plus, consultez « Interactions Correspondance » à la page 47.

• Création d'nteractions Séquence

Pour en savoir plus, consultez « Interactions Séquence » à la page 51.

Dernière mise à jour le 20/5/2011

UTILISATION DE L'EXTENSION COURSEBUILDER POUR ADOBE ELEARNING SUITE

Prise en main

• Création d'interactions Explorer

Pour en savoir plus, consultez « Interactions CourseBuilder Explorer » à la page 54.

• Création d'interactions Entrée de texte

Pour en savoir plus, consultez « Interactions CourseBuilder Entrée de texte » à la page 59.

• Création d'interactions Likert

Pour en savoir plus, consultez « Interactions Likert » à la page 65.

• Création de boutons, minuteurs et curseurs

Pour en savoir plus, consultez « Commandes d'interaction CourseBuilder » à la page 77.

• Suivi des performances de l'utilisateur

Pour en savoir plus, consultez « Notation et suivi des données » à la page 118.

L'extension vous permet de définir une interaction Web d'apprentissage complète. Sélectionnez le type d'interaction que vous souhaitez créer dans la « Galerie d'interactions CourseBuilder » à la page 27. Vous pouvez modifier le contenu d'une interaction CourseBuilder, ce qui vous évite de devoir recommencer le processus de création depuis le début pour apporter des modifications. Vous pouvez développer la fonctionnalité intégrée de l'interaction CourseBuilder en créant vos propres modèles d'interaction.

CourseBuilder pour Dreamweaver inclut des interactions d'apprentissage classiques (interactions Choix multiples, Glisser-déposer, Explorer ou Entrée de texte) et des interactions fonctionnant sur le modèle des commandes informatiques (boutons, minuteurs et curseurs). Il est possible de combiner les interactions CourseBuilder. Par exemple, vous pouvez intégrer un minuteur à un objet Glisser-déposer pour enregistrer le temps nécessaire à l'utilisateur pour effectuer l'interaction Glisser-déposer. Vous pouvez utiliser une interaction CourseBuilder Gestionnaire d'actions pour contrôler les conditions et les actions d'une interaction ou de l'ensemble des interactions CourseBuilder d'une page.

Apprentissage de CourseBuilder pour Adobe Dreamweaver

Le kit CourseBuilder pour Dreamweaver contient un ensemble de ressources variées pour vous aider à maîtriser rapidement le programme et à créer vos propres interactions de pages Web.

Aide de CourseBuilder pour Dreamweaver

L'aide de CourseBuilder pour Dreamweaver offre des informations détaillées sur toutes les fonctionnalités des interactions CourseBuilder.

Didacticiels CourseBuilder

Les didacticiels CourseBuilder vous apprennent à créer des interactions d'apprentissage en utilisant CourseBuilder pour Adobe Dreamweaver.

Pour savoir plus, consultez les « Didacticiels Dreamweaver » à la page 3.

Dernière mise à jour le 20/5/2011

Chapitre 2 : Didacticiels Dreamweaver

Présentation du didacticiel

Ce didacticiel vous apprend à créer de nombreux types d'interactions d'apprentissage en utilisant CourseBuilder pour Adobe Dreamweaver.

Dans le cadre du développement d'un module Web de formation commerciale destiné aux représentants commerciaux de la société fictive Discovertoys.com, vous allez créer :

• une interaction Explorer (l'utilisateur clique sur différentes zones d'une page pour obtenir des informations

supplémentaires sur un objet) ;

• une interaction Choix multiples (l'utilisateur choisit la réponse correcte parmi une série de choix) ;

• une interaction Glisser-déposer (l'utilisateur prouve ses connaissances en déplaçant un objet vers un autre objet de

l'écran).

Voici les tâches que vous apprendrez à exécuter :

• Copier les fichiers de support vers un dossier du site local

• Insérer des interactions CourseBuilder dans un document

• Utiliser la boîte de dialogue Interaction CourseBuilder pour sélectionner un modèle d'interaction

• Personnaliser les modèles d'interaction CourseBuilder

• Utiliser le Gestionnaire d'actions pour joindre des actions à une interaction

• Modifier des interactions CourseBuilder

• Tester une interaction

Aperçu de l'interaction Discover Toys

Visionnez les fichiers complets CourseBuilder pour Dreamweaver pour avoir un aperçu des interactions que vous pourrez bientôt créer. Ouvrez le dossier cb_tutorial situé dans le répertoire d'installation de CourseBuilder pour Dreamweaver. Repérez ensuite le dossier discover_comp et cliquez deux fois sur le fichier discover_nav.htm.

Votre navigateur ouvre la page discover_nav. Cliquez sur les boutons qui s'y trouvent pour accéder aux autres pages du site.

Dans les pages de quiz, essayez toutes les combinaisons possibles de réponses correctes et incorrectes pour tester le fonctionnement des interactions. Utilisez la fonction Actualiser ou Recharger du navigateur pour redémarrer une interaction.

Quittez le navigateur lorsque vous avez fini de consulter les fichiers.

Organisation des fichiers du didacticiel

Le dossier cb_tutorial contient les fichiers HTML achevés ainsi que ceux inachevés intervenant dans ce didacticiel.

Dernière mise à jour le 20/5/2011

UTILISATION DE L'EXTENSION COURSEBUILDER POUR ADOBE ELEARNING SUITE

Didacticiels Dreamweaver

Les fichiers achevés se trouvent dans le dossier discover_comp, dont les sous-dossiers contiennent les images et les autres fichiers en rapport avec les fichiers achevés. Les fichiers inachevés, sur lesquels vous travaillerez, se trouvent dans le dossier cb_discover. Le chemin d'accès complet au dossier discover_comp varie en fonction du répertoire d'installation de CourseBuilder pour Dreamweaver.

Les fichiers portent des noms parlants. Le fichier HTML correspondant à la page de navigation du module se nomme discover_nav.htm. Les fichiers inachevés portent des noms similaires à leurs équivalents achevés, à ceci près qu'ils commencent par cb_ : la version inachevée de discover_nav.htm se nomme cb_nav.htm, par exemple.

Configuration d'une structure de site pour le didacticiel

Avant de démarrer le didacticiel, créez le dossier dans lequel vous transférerez les fichiers du didacticiel CourseBuilder pour Dreamweaver.

Si vous avez complété le didacticiel Adobe Dreamweaver et avez déjà créé un dossier Sites, ignorez l'étape 1.

1 A la racine de votre disque local, créez un dossier et nommez-le Sites (par exemple C:\Sites (Windows) ou Disque

dur:Sites (Macintosh).

2 Copiez tout le dossier cb_tutorial situé sous CourseBuilder\Tutorial dans le dossier Sites.

Définition d'un site local

Configurez un site local dans lequel vous pourrez développer une structure de fichiers pour votre site. Le site local contient tous les fichiers utilisés dans le cadre d'un site spécifique et regroupe des fichiers HTML, des images, des scripts ainsi que d'autres fichiers de ressources. Pour ce didacticiel, le dossier de site local sera le dossier cb_tutorial.

1 Démarrez Adobe Dreamweaver.

L'application ouvre sur un document vide.

2 Sélectionnez Site > Nouveau site.

3 Dans la boîte de dialogue Définition du site, veillez à ce que Infos locales soit sélectionné dans la liste Catégorie.

4 Dans le champ Nom du site, tapez mon_cours.

5 Cliquez sur l'icône de dossier située sur la droite du champ Dossier racine local, accédez au dossier Sites\cb_tutorial,

puis cliquez sur Sélectionner (Windows) ou Choisir (Macintosh).

Le champ Dossier racine local est mis à jour et affiche le chemin d'accès au site local.

Remarque : le chemin d'accès complet au dossier cb_tutorial varie en fonction de l'emplacement de votre dossier Sites.

6 Cliquez sur OK.

7 Cliquez sur Créer pour confirmer l'invite de création d'un fichier cache pour le site.

La mise en cache des fichiers dans le dossier cb_tutorial crée un historique des fichiers existants. Dreamweaver est ainsi en mesure de procéder rapidement à la mise à jour des liens en cas de déplacement, de modification du nom ou de suppression d'un fichier.

La fenêtre Site affiche à ce stade une liste des dossiers et des fichiers du site local mon_cours. Cette liste fait aussi fonction de gestionnaire de fichiers, étant donné qu'elle présente les mêmes fonctions (copier, coller, supprimer, déplacer et ouvrir des fichiers) que File finder ou l'Explorateur Windows.

Dernière mise à jour le 20/5/2011

UTILISATION DE L'EXTENSION COURSEBUILDER POUR ADOBE ELEARNING SUITE

Didacticiels Dreamweaver

8 Ne fermez pas la fenêtre Site.

9 Cliquez sur la fenêtre Document pour l'activer.

Création d'une interaction CourseBuilder Explorer

L'ajout d'interactions CourseBuilder à un document non sauvegardé n'est pas possible. Commencez donc par créer un document et l'enregistrer ou ouvrez un document existant.

Ce didacticiel vous apprend à ajouter des interactions CourseBuilder à des pages inachevées existantes et contenant toutes les mêmes éléments : une image d'arrière-plan et une bannière du service de formation.

Vous allez maintenant créer une interaction Explorer. Dans cette interaction, les utilisateurs cliquent sur des images de jouets pour obtenir des informations.

Ouvrez le fichier auquel vous souhaitez ajouter une interaction CourseBuilder Explorer.

1 Cliquez sur Fichier > Ouvrir.

2 Dans la boîte de dialogue qui s'affiche, accédez au dossier Sites/cb_tutorial/cb_discover, repérez le fichier

cb_explore.htm, puis cliquez sur Sélectionner (Windows) ou Ouvrir (Macintosh) pour ouvrir le fichier.

Copier les fichiers de support

CourseBuilder pour Dreamweaver nécessite des fichiers de support contenant des images et des scripts. Les interactions CourseBuilder ne peuvent fonctionner sans les fichiers de support.

Vous allez copier des fichiers de support dans le dossier cb_discover.

1 Cliquez sur Modifier > CourseBuilder > Copier les fichiers de support.

Un message s'affiche. Il spécifie l'emplacement dans lequel les fichiers de support vont être copiés.

2 Cliquez sur OK pour créer les dossiers requis et copier les fichiers.

Les fichiers sont copiés dans le dossier cb_discover.

Insertion d'une interaction CourseBuilder

1 Si la palette Objet n'est pas déjà ouverte, cliquez sur Fenêtre > Objets pour l'ouvrir.

2 Dans la fenêtre Document, cliquez au centre du document pour insérer l'interaction après les éléments de page

existants.

3 Dans le volet Apprentissage de la palette Objet, cliquez sur l'icône Interaction CourseBuilder pour ouvrir la boîte

de dialogue correspondante.

Sélection d'un type d'interaction

1 Sélectionnez Explorer dans la liste Catégorie.

Les icônes de la Galerie représentent les interactions CourseBuilder Explorer compatibles avec les navigateurs version 4 et ultérieure.

2 Cliquez sur l'icône du modèle Explore_Areas.

Dernière mise à jour le 20/5/2011

UTILISATION DE L'EXTENSION COURSEBUILDER POUR ADOBE ELEARNING SUITE

Didacticiels Dreamweaver

Définition de zones actives

Les paramètres par défaut de l'onglet Général ne devant pas être modifiés, vous commencerez par spécifier les éléments de zone active de l'interaction Explorer, c'est-à-dire les images graphiques des jouets sur lesquelles les utilisateurs devront cliquer.

Ajout de graphiques pour les zones actives

1 Cliquez sur l'onglet Zones actives.

Dans la liste Zones actives, "Zone active 1" est présélectionné.

2 Dans le champ Image, cliquez sur Parcourir. Dans la boîte de dialogue Sélectionner l'apparence, accédez au dossier

cb_graphics et sélectionnez le fichier toy_racer.gif.

Cliquez ensuite sur Sélectionner (Windows) ou Choisir (Macintosh) pour afficher l'image.

3 Dans la liste Zones actives, "Zone active 1" est présélectionné.

4 Dans le champ Image, cliquez sur Parcourir. Dans la boîte de dialogue Sélectionner l'apparence, accédez au dossier

cb_graphics, sélectionnez le fichier toy_racer.gif, puis cliquez sur Sélectionner (Windows) ou Choisir (Macintosh) pour afficher l'image.

Ajout de trois graphiques supplémentaires pour les zones actives

1 Dans la liste Zones actives, sélectionnez "Zone active 2".

2 Dans le champ Image, cliquez sur Parcourir. Dans la boîte de dialogue Sélectionner l'apparence, accédez au dossier

cb_graphics, sélectionnez le fichier toy_coldfusion.gif, puis cliquez sur Sélectionner (Windows) ou Choisir (Macintosh) pour afficher l'image.

3 Dans la liste Zones actives, sélectionnez "Zone active 3".

4 Dans le champ Image, cliquez sur Parcourir. Dans la boîte de dialogue Sélectionner l'apparence, accédez au dossier

cb_graphics, sélectionnez le fichier toy_satellite.gif, puis cliquez sur Sélectionner (Windows) ou Choisir (Macintosh) pour afficher l'image.

5 Dans la liste Zones actives, sélectionnez "Zone active 4".

6 Dans le champ Image, cliquez sur Parcourir. Dans la boîte de dialogue Sélectionner l'apparence, accédez au dossier

cb_graphics, sélectionnez le fichier toy_waverider.gif, puis cliquez sur Sélectionner (Windows) ou Choisir (Macintosh) pour afficher l'image.

7 Cliquez sur OK pour fermer la boîte de dialogue Interaction CourseBuilder.

8 Enregistrez le fichier.

Agencement des zones actives dans le document

Vous allez supprimer les textes d'instruction figurant sur la page et déplacer les éléments de zone active de manière à faire de la place pour un nouvel élément. Ce dernier sera utilisé pour transmettre des commentaires aux utilisateurs.

1 Dans la fenêtre Document, sélectionnez le texte "Cliquez sur une zone active" dans la partie supérieure de l'écran,

puis appuyez sur la touche Retour arrière (Windows) ou Supprimer (Macintosh) pour le supprimer.

2 Sélectionnez l'élément de zone active. Veuillez consulter la documentation de Dreamweaver pour en savoir plus sur

cette étape.

Dernière mise à jour le 20/5/2011

UTILISATION DE L'EXTENSION COURSEBUILDER POUR ADOBE ELEARNING SUITE

Didacticiels Dreamweaver

3 Cliquez sur la poignée de sélection de l'élément dans l'angle supérieur gauche. Déplacez maintenant l'élément vers

sa nouvelle position.

Déplacez chaque zone active pour positionner les éléments de la manière la plus appropriée.

4 Enregistrez vos modifications.

Ajout d'un élément de commentaire

Vous allez créer un élément permettant d'afficher sur la page à la fois les instructions destinées à l'utilisateur et les informations sur le produit.

1 Dans le panneau Insertion, cliquez sur Dessiner une balise AP DIV sous Mise en forme.

2 Déplacez le curseur vers la fenêtre Document, puis faites-le glisser de manière à dessiner une balise DIV dans la

partie droite du document.

3 Sélectionnez la balise DIV. Remplacez ensuite le texte par défaut "apDiv1" du champ ID de l'inspecteur Propriétés

par InfosProduit.

4 Dans la fenêtre Document, cliquez au centre de l'élément InfosProduit.

5 Insérez une image dans l'élément.

La boîte de dialogue Sélectionner la source d'image s'affiche.

6 Dans la boîte de dialogue, accédez au dossier cb_graphics, sélectionnez le fichier text_any.jpg, puis cliquez sur

Sélectionner (Windows) pour insérer l'image dans l'élément.

Les instructions destinées à l'utilisateur apparaissent dans l'élément InfosProduit, dans la fenêtre Document.

Modification d'une interaction CourseBuilder

Les éléments ont été configurés. Vous devez toutefois encore définir le comportement des zones actives lorsque l'utilisateur clique sur l'une d'entre elles. Pour garantir le fonctionnement correct des interactions, veillez à ne modifier les éléments d'une interaction CourseBuilder que dans la boîte de dialogue Interaction CourseBuilder. Ouvrez de nouveau la boîte de dialogue Interaction CourseBuilder.

1 Dans la fenêtre Document, sélectionnez l'interaction CourseBuilder en procédant de l'une des manières suivantes :

• Cliquez sur l'icône Interaction CourseBuilder dans la fenêtre Document.

• Cliquez sur l'un des éléments de zone active, puis sur <interaction> dans le sélecteur de balise.

2 Dans l'Inspecteur Propriétés, cliquez sur Modifier pour ouvrir la boîte de dialogue Interaction CourseBuilder.

Création de commentaires aux utilisateurs

Vous souhaitez que l'utilisateur qui clique sur une zone active obtienne également des informations sur le produit sélectionné. Pour ce faire, vous allez définir une image de substitution qui remplacera l'image affichée dans l'élément InfosProduit par une image contenant des informations sur le produit sélectionné.

Utilisez le Gestionnaire d'actions pour définir le comportement qui sera adopté à la sélection d'une zone active spécifique. Vous allez supprimer le commentaire d'action par défaut Message contextuel et ajouter une action Permuter une image à chaque zone active.

Dernière mise à jour le 20/5/2011

UTILISATION DE L'EXTENSION COURSEBUILDER POUR ADOBE ELEARNING SUITE

Didacticiels Dreamweaver

Affichage de l'onglet Gestionnaire d'actions

Cliquez sur l'onglet Gestionnaire d'actions.

L'onglet Gestionnaire d'actions affiche les segments et conditions par défaut en fonction du type d'interaction sélectionné. Les segments précédés d'un signe plus (+) sont réduits. Pour afficher les conditions et actions d'un segment réduit, cliquez sur Développer dans l'onglet Gestionnaire d'actions.

L'action est appliquée à partir du haut de la liste jusqu'à ce qu'une condition définie soit trouvée, par exemple si un utilisateur clique sur Zone active 1. Lorsqu'une condition définie est remplie, l'action est appliquée à l'élément suivant dans ce même segment, par exemple l'affichage d'un message contextuel lorsque la Zone active 1 est sélectionnée.

Les segments sont automatiquement ajoutés au Gestionnaire d'actions pour vérifier les limites de temps et de tentatives. Les actions de ces segments ne sont toutefois déclenchées qu'une fois ces options sélectionnées dans l'onglet Général.

Ajout d'une action de permutation d'image pour les informations sur le produit racer

1 Dans la liste Gestionnaire d'actions sous "si Zone active 1 sélectionnée", sélectionnez Message contextuel, puis

cliquez sur Couper.

2 Sélectionnez "si Zone active 1 sélectionnée", choisissez Permuter une image dans le menu contextuel Actions, puis

cliquez sur Ajouter.

La boîte de dialogue Permuter une image s'affiche :

Dans la boîte de dialogue Permuter une image, "<img> sans titre" est sélectionnée. Il s'agit de l'image que vous avez insérée dans l'élément InfosProduit. Vous allez la remplacer par une image décrivant celle située dans la Zone active 1, le racer.

3 Dans le champ "Définir la source", cliquez sur Parcourir.

4 Dans la boîte de dialogue Sélectionner la source d'image qui s'affiche, sélectionnez le fichier text_racer.jpg, puis

cliquez sur Sélectionner (Windows) ou Choisir (Macintosh) pour afficher l'image.

5 Cliquez sur OK pour fermer la boîte de dialogue.

Ajout d'une action de permutation d'image pour les informations sur le produit Cold Fusion

Remplacez les instructions pour l'utilisateur par le texte décrivant le kit cold fusion.

1 Dans la liste Gestionnaire d'actions sous "si Zone active 2 sélectionnée", sélectionnez Message contextuel, puis

cliquez sur Couper.

2 Sélectionnez "si Zone active 2 sélectionnée", choisissez Permuter une image dans le menu contextuel Actions, puis

cliquez sur Ajouter.

La boîte de dialogue Permuter une image s'affiche.

Dans la liste Images de la boîte de dialogue Permuter une image, "image 'Image 1' dans le calque InfosProduit" est déjà sélectionnée et est définie de manière à afficher text_racer.jpg. Vous allez définir l'image de sorte qu'elle affiche le texte correct pour la Zone active 2, le produit cold fusion.

3 Dans le champ "Définir la source", cliquez sur Parcourir.

4 Dans la boîte de dialogue Sélectionner la source d'image, sélectionnez le fichier text_coldfusion.jpg, puis cliquez sur

Sélectionner (Windows) ou Choisir (Macintosh) pour afficher l'image.

Dernière mise à jour le 20/5/2011

UTILISATION DE L'EXTENSION COURSEBUILDER POUR ADOBE ELEARNING SUITE

Didacticiels Dreamweaver

5 Cliquez sur OK pour fermer la boîte de dialogue.

Ajout d'une action de permutation d'image pour les informations sur le produit satellite

Remplacez les instructions pour l'utilisateur par le texte décrivant le satellite.

1 Dans la liste Gestionnaire d'actions sous "si Zone active 3 sélectionnée", sélectionnez Message contextuel, puis

cliquez sur Couper.

2 Sélectionnez "si Zone active 3 sélectionnée", choisissez Permuter une image dans le menu contextuel Actions, puis

cliquez sur Ajouter.

3 Dans la liste Images de la boîte de dialogue Permuter une image, "image 'Image 1' dans le calque InfosProduit" est

déjà sélectionnée. Dans le champ "Définir la source", cliquez sur Parcourir pour sélectionner l'image de substitution.

4 Dans la boîte de dialogue Sélectionner la source d'image, sélectionnez le fichier text_satellite.jpg, puis cliquez sur

Sélectionner (Windows) ou Choisir (Macintosh) pour afficher l'image.

5 Cliquez sur OK pour fermer la boîte de dialogue.

Ajout d'une action de permutation d'image pour les informations sur le produit wave-rider

Remplacez maintenant les instructions pour l'utilisateur par le texte décrivant le casque wave-rider.

1 Dans la liste Gestionnaire d'actions sous "si Zone active 4 sélectionnée", sélectionnez Message contextuel, puis

cliquez sur Couper.

2 Sélectionnez "si Zone active 4 sélectionnée", choisissez Permuter une image dans le menu contextuel Actions, puis

cliquez sur Ajouter.

3 Dans la liste Images de la boîte de dialogue Permuter une image, "image 'Image 1' dans le calque InfosProduit" est

déjà sélectionnée. Dans le champ "Définir la source", cliquez sur Parcourir pour sélectionner l'image de substitution.

4 Dans la boîte de dialogue Sélectionner la source d'image, sélectionnez le fichier text_waverider.jpg, puis cliquez sur

Sélectionner (Windows) ou Choisir (Macintosh) pour afficher l'image.

5 Cliquez sur OK pour fermer la boîte de dialogue.

6 Cliquez sur OK pour fermer la boîte de dialogue Interaction CourseBuilder.

Création d'un lien vers la page suivante

Créez un lien entre cette page et la page d'interaction suivante, le quiz Glisser-déposer.

1 Dans le panneau Insertion, sélectionnez Dessiner une balise AP DIV dans la liste Mise en forme. Déplacez le

curseur vers la page, puis faites-le glisser de manière à dessiner une balise DIV dans la zone située en dessous de l'élément InfosProduit.

2 Cliquez sur la balise DIV pour la sélectionner. Si besoin est, déplacez-la pour la positionner.

Pour ce faire, utilisez la poignée située dans l'angle supérieur gauche de l'élément :

3 Cliquez dans l'élément pour placer le point d'insertion. Insérez une image dans l'élément.

Dernière mise à jour le 20/5/2011

UTILISATION DE L'EXTENSION COURSEBUILDER POUR ADOBE ELEARNING SUITE

Didacticiels Dreamweaver

4 Dans la boîte de dialogue Sélectionner la source d'image, accédez au dossier cb_graphics (s'il n'est pas déjà ouvert),

sélectionnez le fichier Arrow_Sharp_Right.gif, puis cliquez sur Sélectionner (Windows) ou Choisir (Macintosh).

Une flèche apparaît dans l'élément.

5 Dans l'Inspecteur Propriétés, cliquez sur l'icône de dossier située à côté du champ Lien. Dans la boîte de dialogue

Sélectionner le fichier, accédez au dossier cb_discover, sélectionnez le fichier cb_drag_drop.htm et cliquez sur Sélectionner (Windows) ou Choisir (Macintosh) pour spécifier le fichier à ouvrir lorsque la flèche est sélectionnée.

6 Redimensionnez l'élément.

7 Enregistrez le document.

Test de l'interaction Explorer

Testez la page afin d'observer le fonctionnement de l'interaction.

1 Sélectionnez Fichier > Aperçu dans le navigateur et choisissez le navigateur que vous souhaitez utiliser.

Le navigateur s'ouvre et affiche la page.

2 Cliquez sur chacun des produits et vérifiez que les informations affichées sont correctes.

3 Cliquez sur la flèche pour vérifier qu'elle ouvre la page "Apprenez à connaître votre client cible".

Création d'une interaction Glisser-déposer

Vous allez créer un quiz avec mise en correspondance par glisser-déposer. Les utilisateurs vont tester leurs connaissances des produits en déplaçant un jouet vers le groupe cible auquel il est destiné.

Insertion d'une interaction CourseBuilder

1 Cliquez sur Fichier > Ouvrir. Dans la boîte de dialogue qui s'affiche, repérez le fichier cb_drag_drop.htm, puis

cliquez sur Sélectionner (Windows) ou Ouvrir (Macintosh) pour ouvrir le fichier.

2 Si la palette Objet n'est pas déjà ouverte, cliquez sur Fenêtre > Objets pour l'ouvrir.

3 Dans la fenêtre Document, cliquez au centre du document pour insérer l'interaction après les éléments de page

existants.

4 Dans le volet Commun de la palette Objet, cliquez sur l'icône Interaction CourseBuilder.

La boîte de dialogue Interaction CourseBuilder s'affiche.

Sélection d'un type d'interaction

1 Sélectionnez Glisser-déposer dans la liste Catégorie.

2 Cliquez sur l'icône du modèle de mise en correspondance à origines et destinations multiples.

Définition des options de l'onglet Général

Utilisez les onglets de la boîte de dialogue Interaction CourseBuilder pour définir cette interaction. Les options sélectionnées dans les onglets déterminent le comportement de l'interaction CourseBuilder.

Dernière mise à jour le 20/5/2011

UTILISATION DE L'EXTENSION COURSEBUILDER POUR ADOBE ELEARNING SUITE

Didacticiels Dreamweaver

Les paramètres par défaut des interactions CourseBuilder sont destinés à faciliter l'utilisation. La plupart d'entre eux correspondent à ceux que vous sélectionneriez pour vos interactions. Seuls quelques paramètres devront être modifiés pour personnaliser les informations des cours, des sondages ou des quiz que vous créez.

Dans l'onglet Général, utilisez les options pour définir le comportement d'une interaction lorsque l'utilisateur intervient.

1 Cliquez sur l'onglet Général.

2 Pour Evaluer l'interaction, sélectionnez "lorsque l'utilisateur dépose un élément Glisser".

Cette option a pour effet de déclencher l'affichage d'un commentaire à chaque déplacement d'un jouet vers un groupe cible, sans attendre que l'utilisateur ait tenté de faire correspondre chaque jouet à un groupe cible.

3 Pour Réinitialiser, conservez la valeur par défaut "Créer un bouton Réinitialiser pour cette interaction".

4 Pour Réaction, sélectionnez "Raccrocher à l'emplacement initial si incorrect".

Cette option provoque le retour du jouet à sa position d'origine s'il est déplacé vers la mauvaise réponse.

5 Pour Réaction, conservez la valeur par défaut "Raccrocher à l'emplacement initial si non déposé sur la cible".

Cette option provoque le retour du jouet à sa position d'origine s'il n'est pas déplacé vers une zone cible.

6 Pour DIV, sélectionnez "Insérer cette interaction dans une balise DIV" pour placer le texte de la question dans une

balise DIV et en faciliter le positionnement dans le document (chaque image glisser-déposer se trouve déjà dans sa propre balise DIV).

Les paramètres de l'onglet Général devraient correspondre à ceux indiqués ci-dessous.

Création de paires Glisser-déposer

Vous allez maintenant ajouter des éléments Glisser-déposer à l'interaction, et plus précisément trois images Glisser et trois images Cible.

Les exercices de mise en correspondance par glisser-déposer se composent de paires d'objets Glisser et Cible. Satellite est un objet Glisser, par exemple. L'objet Cible qui lui correspond est une image du groupe cible auquel il s'adresse : des enfants pleins d'imagination. Cette étape vous permet de remplacer les graphiques d'espace réservé du modèle Glisser-déposer par les images que vous souhaitez utiliser pour les objets Glisser et Cible.

Ajout d'images Glisser

1 Cliquez sur l'onglet Eléments.

Dans la liste Eléments, l'option Glisser 1 est déjà sélectionnée.

2 Dans le champ Nom, tapez satellite.

3 Cliquez sur le bouton Parcourir situé en regard du champ Fichier image. Dans le dossier cb_graphics, sélectionnez

le fichier toy_satellite_mini.gif, puis cliquez sur Sélectionner (Windows) ou Choisir (Macintosh) pour afficher l'image de cet objet Glisser.

4 Dans la liste Eléments, sélectionnez Glisser 2, puis tapez waverider dans le champ Nom.

5 Cliquez sur le bouton Parcourir. Dans le dossier cb_graphics, sélectionnez le fichier toy_waverider_mini.gif, puis

cliquez sur Sélectionner (Windows) ou Choisir (Macintosh) pour afficher l'image de cet objet Glisser.

6 Dans la liste Eléments, sélectionnez Glisser 3, puis tapez racer dans le champ Nom.

7 Cliquez sur le bouton Parcourir. Dans le dossier cb_graphics, sélectionnez le fichier toy_racer_mini.gif, puis cliquez

sur Sélectionner (Windows) ou Choisir (Macintosh) pour afficher l'image de cet objet Glisser.

Dernière mise à jour le 20/5/2011

UTILISATION DE L'EXTENSION COURSEBUILDER POUR ADOBE ELEARNING SUITE

Didacticiels Dreamweaver

Ajout d'images cibles

Ajoutez maintenant les images cibles correspondant aux objets Glisser :

1 Dans la liste Eléments, sélectionnez Target1, puis tapez correspondance satellite dans le champ Nom.

2 Cliquez sur le bouton Parcourir. Dans le dossier cb_graphics, sélectionnez le fichier kids_climbing.jpg, puis cliquez

sur Sélectionner (Windows) ou Choisir (Macintosh).

3 Dans la liste Eléments, sélectionnez Target2, puis tapez correspondance waverider dans le champ Nom.

4 Cliquez sur le bouton Parcourir. Dans le dossier cb_graphics, sélectionnez le fichier kids_bike.jpg, puis cliquez sur

Sélectionner (Windows) ou Choisir (Macintosh).

5 Dans la liste Eléments, sélectionnez Target3, puis tapez correspondance racer dans le champ Nom.

6 Cliquez sur le bouton Parcourir. Dans le dossier cb_graphics, sélectionnez le fichier kids_soccer.jpg, puis cliquez

sur Sélectionner (Windows) ou Choisir (Macintosh).

Votre écran devrait ressembler à ce qui suit.

7 Cliquez sur OK pour fermer la boîte de dialogue Interaction CourseBuilder.

Positionnement des images dans le document

Dans la fenêtre Document, vous allez maintenant agencer les balises DIV pour configurer l'interaction.

1 Dans la fenêtre Document, sélectionnez une balise DIV en cliquant sur sa bordure.

2 Déplacez les éléments de votre document afin d'obtenir cet écran.

3 Dans la fenêtre Document, utilisez le curseur pour sélectionner le texte par défaut "Faites glisser les objets de gauche

vers les cibles correctes à droite, puis appuyez sur le bouton 'Envoyer' pour vérifier la réponse". Remplacez-le par

Prêt à vendre ? Faites glisser chaque jouet vers le client cible qui lui correspond.

Création de paires Glisser-déposer

Vous allez maintenant ajouter des éléments Glisser-déposer à l'interaction, et plus précisément trois images Glisser et trois images Cible.

Ajout d'images Glisser

1 Cliquez sur l'onglet Eléments.

Dans la liste Eléments, l'option Glisser 1 est déjà sélectionnée.

2 Dans le champ Nom, tapez satellite.

3 Cliquez sur le bouton Parcourir situé en regard du champ Fichier image. Dans le dossier cb_graphics, sélectionnez

le fichier toy_satellite_mini.gif, puis cliquez sur Sélectionner (Windows) ou Choisir (Macintosh) pour afficher l'image de cet objet Glisser.

4 Dans la liste Eléments, sélectionnez Glisser 2, puis tapez waverider dans le champ Nom.

Dernière mise à jour le 20/5/2011

UTILISATION DE L'EXTENSION COURSEBUILDER POUR ADOBE ELEARNING SUITE

Didacticiels Dreamweaver

5 Cliquez sur le bouton Parcourir. Dans le dossier cb_graphics, sélectionnez le fichier toy_waverider_mini.gif, puis

cliquez sur Sélectionner (Windows) ou Choisir (Macintosh) pour afficher l'image de cet objet Glisser.

6 Dans la liste Eléments, sélectionnez Glisser 3, puis tapez racer dans le champ Nom.

7 Cliquez sur le bouton Parcourir. Dans le dossier cb_graphics, sélectionnez le fichier toy_racer_mini.gif, puis cliquez

sur Sélectionner (Windows) ou Choisir (Macintosh) pour afficher l'image de cet objet Glisser.

Ajout d'images cibles

Ajoutez maintenant les images cibles correspondant aux objets Glisser :

1 Dans la liste Eléments, sélectionnez Target1, puis tapez correspondance satellite dans le champ Nom.

2 Cliquez sur le bouton Parcourir. Dans le dossier cb_graphics, sélectionnez le fichier kids_climbing.jpg, puis cliquez

sur Sélectionner (Windows) ou Choisir (Macintosh).

3 Dans la liste Eléments, sélectionnez Target2, puis tapez correspondance waverider dans le champ Nom.

4 Cliquez sur le bouton Parcourir. Dans le dossier cb_graphics, sélectionnez le fichier kids_bike.jpg, puis cliquez sur

Sélectionner (Windows) ou Choisir (Macintosh).

5 Dans la liste Eléments, sélectionnez Target3, puis tapez correspondance racer dans le champ Nom.

6 Cliquez sur le bouton Parcourir. Dans le dossier cb_graphics, sélectionnez le fichier kids_soccer.jpg, puis cliquez

sur Sélectionner (Windows) ou Choisir (Macintosh).

Votre écran devrait ressembler à ce qui suit.

7 Cliquez sur OK pour fermer la boîte de dialogue Interaction CourseBuilder.

Positionnement des images dans le document

Dans la fenêtre Document, vous allez maintenant agencer les balises DIV pour configurer l'interaction.

1 Dans la fenêtre Document, sélectionnez une balise DIV en cliquant sur sa bordure.

2 Déplacez les éléments de votre document afin d'obtenir cet écran.

3 Dans la fenêtre Document, utilisez le curseur pour sélectionner le texte par défaut "Faites glisser les objets de gauche

vers les cibles correctes à droite, puis appuyez sur le bouton 'Envoyer' pour vérifier la réponse". Remplacez-le par le texte suivant :

Prêt à vendre ? Faites glisser chaque jouet vers le client cible qui lui correspond.

Définition des paramètres du point d'accrochage

Vous avez déjà défini l'événement qui se produit lorsqu'une mise en correspondance est incorrecte : le jouet retourne à sa position d'origine. Qu'advient-il du jouet en cas de correspondance correcte ? Cette étape définit la position du jouet lorsqu'il est glissé vers le bon groupe cible.

Vous n'aurez à définir que le comportement d'accrochage en cas de paires correctes, le comportement en cas de paires incorrectes ayant déjà été défini.

1 Cliquez sur l'une des images de l'interaction Glisser-déposer, puis sur <interaction> dans le sélecteur de balise et

enfin sur Modifier dans l'inspecteur Propriétés.

2 Cliquez sur l'onglet Paires.

Dernière mise à jour le 20/5/2011

UTILISATION DE L'EXTENSION COURSEBUILDER POUR ADOBE ELEARNING SUITE

Didacticiels Dreamweaver

Notez que les correspondances pour les éléments Drag1 et Target1 étant déjà définies, les paires de correspondances sont déjà configurées : satellite et correspondance satellite forment une paire correcte, tandis que satellite et correspondance waverider forment une réponse incorrecte.

3 Sélectionnez la paire "satellite:correspondance satellite" si ce n'est déjà fait.

4 Dans Point d'accrochage, sélectionnez "pixels en bas", puis tapez 70 dans le champ correspondant. Sélectionnez

ensuite "pixels à droite de l'angle supérieur gauche de l'élément cible" et tapez dans ce champ 30.

Votre écran devrait ressembler à ce qui suit.

En cas de correspondance, l'élément Glisser sera positionné à l'emplacement de l'élément Cible défini par ces coordonnées.

5 Sélectionnez la paire "waverider:correspondance waverider".

6 Dans Point d'accrochage, sélectionnez "pixels en bas", puis tapez 70 dans le champ correspondant. Sélectionnez

ensuite "pixels à droite de l'angle supérieur gauche de l'élément cible" et tapez dans ce champ 30.

7 Sélectionnez la paire "racer:correspondance racer".

8 Dans Point d'accrochage, sélectionnez "pixels en bas", puis tapez 70 dans le champ correspondant. Sélectionnez

ensuite "pixels à droite de l'angle supérieur gauche de l'élément cible" et tapez dans ce champ 30.

* N'est pas affiché en grisé si désactivé

Création de commentaires aux utilisateurs

Les utilisateurs ne reçoivent de commentaires que lorsque leur réponse est correcte. En cas de réponse erronée, le jouet retourne à sa position d'origine afin de permettre à l'utilisateur de refaire un essai. Pour que l'interaction soit entièrement correcte, l'utilisateur doit donner trois bonnes réponses. Cette interaction comporte deux types différents de commentaire : un commentaire lorsqu'une réponse est correcte ; un commentaire lorsque toute l'interaction est correcte.

Configuration d'un commentaire en cas de réponse correcte

La condition "si Correct" détermine le comportement à adopter en cas d'interaction entièrement correcte.

1 Cliquez sur l'onglet Gestionnaire d'actions.

2 Sélectionnez l'action Message contextuel sous "si Correct", puis cliquez sur Modifier.

La boîte de dialogue Message contextuel s'affiche.

3 Dans le champ Message de cette boîte de dialogue, modifiez le texte par défaut ("Correct") en tapant Vous êtes prêt

à vendre !

4 Cliquez sur OK pour fermer la boîte de dialogue.

Suppression des commentaires par défaut pour les réponses incorrectes ou inconnues

La condition suivante ("sinon si Incorrect") ne sera pas définie. En effet, les réponses incorrectes des utilisateurs ne doivent pas faire l'objet d'un commentaire. Aucun commentaire ne sera non plus défini pour la condition "sinon si Réponse inconnue", étant donné que les utilisateurs ne peuvent pas fournir de réponse inconnue.

1 Sélectionnez "sinon si Incorrect" et cliquez sur Couper.

Dernière mise à jour le 20/5/2011

UTILISATION DE L'EXTENSION COURSEBUILDER POUR ADOBE ELEARNING SUITE

Didacticiels Dreamweaver

2 Sélectionnez "sinon si Réponse inconnue" et cliquez sur Couper.

Les conditions et les actions Message contextuel associées sont automatiquement supprimées.

Création d'un commentaire en cas de réponse correcte

Vous allez maintenant créer une condition définissant l'envoi d'un commentaire en cas de réponse correcte en cours d'interaction. Chaque réponse correcte sera validée par ce commentaire jusqu'à ce que l'interaction soit terminée conformément à la condition stipulant que toutes les réponses doivent être correctes et qu'aucune réponse ne peut être incorrecte.

1 Dans la liste Gestionnaire d'actions, sélectionnez l'action Message contextuel sous "si Correct", choisissez Sinon

dans le menu contextuel Actions, puis cliquez sur Ajouter.

Sinon est ajouté à la liste Gestionnaire d'actions.

2 Après avoir sélectionné "--sinon", choisissez Message contextuel dans le menu contextuel Actions, puis cliquez sur

Ajouter.

La boîte de dialogue Message contextuel s'affiche.

3 Tapez correct ! dans le champ Message.

4 Cliquez sur OK pour fermer la boîte de dialogue.

5 Cliquez sur OK pour fermer la boîte de dialogue Interaction CourseBuilder.

6 Sélectionnez Fichier > Enregistrer pour enregistrer le document.

Création d'un lien vers l'interaction suivante

Créez un lien entre cette page et la dernière page du cours, le quiz à choix multiples.

1 Dans le panneau Insertion, sélectionnez Dessiner une balise AP DIV dans la liste Mise en forme. Déplacez

maintenant le curseur vers la fenêtre Document et faites glisser le curseur de façon à dessiner une balise AP DIV dans la zone inférieure droite du document.

2 Sélectionnez la balise AP DIV et positionnez-la en vous servant de l'inspecteur Propriétés.

3 Cliquez dans la balise AP DIV, puis sélectionnez Images > Image dans la liste commune du panneau Insertion.

4 Dans la boîte de dialogue Sélectionner la source d'image, accédez au dossier cb_graphics, sélectionnez le fichier

Arrow_Sharp_Right.gif, puis cliquez sur Sélectionner (Windows) ou Choisir (Macintosh).

Une flèche apparaît dans la balise DIV.

5 Dans l'inspecteur Propriétés, cliquez sur l'icône du dossier se trouvant en regard du champ Lien pour spécifier le

fichier à ouvrir lorsque la flèche est sélectionnée.

6 Dans la boîte de dialogue Sélectionner le fichier, sélectionnez cb_mc.htm dans le dossier cb_discover et cliquez sur

Sélectionner (Windows) ou Choisir (Macintosh).

7 Cliquez sur la bordure de la balise DIV pour la sélectionner, puis utilisez une de ses poignées pour la

redimensionner à la taille du graphique.

Dernière mise à jour le 20/5/2011

UTILISATION DE L'EXTENSION COURSEBUILDER POUR ADOBE ELEARNING SUITE

Didacticiels Dreamweaver

Vérification de l'interaction Glisser-déposer

Testez la page afin d'en observer le fonctionnement :

1 Sélectionnez Fichier > Enregistrer, puis Fichier > Aperçu dans le navigateur.

Le navigateur s'ouvre et affiche la page.

2 Faites glisser les jouets vers les descriptions.

Voici les réponses correctes :

• Satellite et "Enfants de 12 à 14 ans avec une forte imagination"

• Casque Waverider et "Enfants de 8 à 14 ans qui vont à l'école en bicyclette"

• Racer et "Préadolescents à la recherche de sensations fortes"

S'il est déplacé vers la mauvaise réponse, le jouet retourne à sa position d'origine.

S'il est déplacé vers la bonne réponse, le message "Correct !" apparaît.

Si tous les jouets sont déplacés vers les bonnes réponses, le message "Vous êtes prêt à vendre !" apparaît.

Création d'un quiz à choix multiples

Cette section du didacticiel vous apprend à créer un quiz à choix multiples. A chaque sélection effectuée par l'utilisateur dans une liste d'options, le commentaire fourni varie suivant que la réponse est correcte ou incorrecte.

Insertion d'une interaction CourseBuilder

1 Cliquez sur Fichier > Ouvrir. Dans la boîte de dialogue qui s'affiche, accédez au dossier cb_discover, repérez le

fichier cb_mc.htm, puis cliquez sur Sélectionner (Windows) ou Ouvrir (Macintosh).

2 Si la palette Objet n'est pas déjà ouverte, cliquez sur Fenêtre > Objets pour l'ouvrir.

3 Dans la fenêtre Document, cliquez au centre du document pour insérer l'interaction après les éléments de page

existants.

4 Dans le volet Commun de la palette Objet, cliquez sur l'icône Interaction CourseBuilder pour ouvrir la boîte de

dialogue correspondante.

Sélection d'un type d'interaction

1 Sélectionnez Choix multiples dans la liste Catégorie.

2 Cliquez sur l'icône correspondant au modèle graphique de choix multiples.

Définition d'une interaction Choix multiples

1 Cliquez sur l'onglet Général.

2 Dans le champ "question", supprimez le texte par défaut.

3 Pour Evaluer l'interaction, sélectionnez si nécessaire "lorsque l'utilisateur clique sur un choix".

4 Dans Correct lorsque, conservez le paramètre par défaut "N'importe quelle correcte et aucune incorrecte".

Dernière mise à jour le 20/5/2011

UTILISATION DE L'EXTENSION COURSEBUILDER POUR ADOBE ELEARNING SUITE

Didacticiels Dreamweaver

5 Dans les champs Les tentatives sont et Le temps est, conservez la valeur par défaut "Illimité".

6 Vérifiez que l'option Réinitialiser n'est pas sélectionnée.

7 Sélectionnez Insérer dans une balise DIV pour placer l'interaction CourseBuilder dans une balise AP DIV qui en

facilitera le positionnement dans le document.

Définition du choix correct

L'onglet Choix permet de définir les choix de l'interaction et de spécifier s'ils sont corrects ou incorrects.

1 Cliquez sur l'onglet Choix.

Dans la liste Choix, choice1 est présélectionné et défini comme étant correct.

2 Sous Options de choix, remplacez le texte par défaut "choice1" du champ Nom par waverider.

3 Effacez le texte du champ Texte.

4 Dans le champ Fichier image, cliquez sur Parcourir.

5 Dans la boîte de dialogue Sélectionner l'apparence, accédez au dossier cb_graphics, sélectionnez le fichier

toy_waverider_mini.gif, puis cliquez sur Sélectionner (Windows) ou Choisir (Macintosh).

L'onglet Choix est mis à jour.

Définition des choix incorrects

Vous allez définir des images pour les choix d'interaction incorrects.

1 Dans la liste Choix, sélectionnez choice2.

Notez que l'option "Le choix est" est définie comme étant incorrecte.

2 Sous Options de choix, remplacez le texte par défaut "choice2" du champ Nom par coldfusion.

3 Effacez le texte du champ Texte.

4 Dans le champ Fichier image, cliquez sur Parcourir. Dans la boîte de dialogue Sélectionner l'apparence, accédez au

dossier cb_graphics, sélectionnez le fichier toy_coldfusion_mini.gif, puis cliquez sur Sélectionner (Windows) ou Choisir (Macintosh).

5 Dans la liste Choix, sélectionnez choice3.

6 Sous Options de choix, remplacez le texte par défaut "choice3" du champ Nom par racer.

7 Effacez le texte du champ Texte.

8 Dans le champ Fichier image, cliquez sur Parcourir. Dans la boîte de dialogue Sélectionner l'apparence, accédez au

dossier cb_graphics, sélectionnez le fichier toy_racer_mini.gif, puis cliquez sur Sélectionner (Windows) ou Choisir (Macintosh).

9 Dans la liste Choix, sélectionnez choice4.

10 Sous Options de choix, remplacez le texte par défaut "choice4" du champ Nom par satellite.

11 Effacez le texte du champ Texte.

12 Dans le champ Fichier image, cliquez sur Parcourir. Dans la boîte de dialogue Sélectionner l'apparence, accédez au

dossier cb_graphics, sélectionnez le fichier toy_satellite_mini.gif, puis cliquez sur Sélectionner (Windows) ou Choisir (Macintosh).

13 Cliquez sur OK pour fermer la boîte de dialogue Interaction CourseBuilder.

Dernière mise à jour le 20/5/2011

UTILISATION DE L'EXTENSION COURSEBUILDER POUR ADOBE ELEARNING SUITE

Didacticiels Dreamweaver

Création d'un calque pour les commentaires aux utilisateurs

Vous allez tout d'abord positionner dans le document le calque contenant les choix de l'interaction. Vous créerez ensuite un calque dans lequel s'afficheront les questions du quiz et les commentaires pour les utilisateurs.

1 Dans la fenêtre Document, cliquez sur la bordure de la balise DIV de l'interaction pour sélectionner le calque.

2 Cliquez sur l'onglet Calque, puis déplacez le calque.

3 Dans le panneau Insertion, sélectionnez Dessiner une balise AP DIV dans la liste Mise en forme. Déplacez ensuite

le curseur vers la fenêtre Document et, après l'avoir placé dans la zone inférieure droite du document, faites-le glisser de manière telle à dessiner une balise AP DIV.

4 Sélectionnez la balise DIV et remplacez le texte par défaut "apDiv1" du champ ID de l'inspecteur Propriétés par

Commentaire.

5 Dans la fenêtre Document, cliquez dans la balise DIV de commentaire à l'endroit que vous souhaitez utiliser comme

point d'insertion. Dans le panneau Insertion, sélectionnez Images > Image de la liste commune.

6 Dans la boîte de dialogue Sélectionner la source d'image, accédez au dossier cb_graphics, sélectionnez le fichier

text_mc_question.jpg, puis cliquez sur Sélectionner (Windows) ou Choisir (Macintosh).

7 Sans désélectionner l'image, tapez Commentaire comme nom dans le champ Image de l'inspecteur Propriétés.

8 Le cas échéant, déplacez la balise DIV pour éviter qu'elle ne se superpose à la balise DIV contenant les choix.

Création de commentaires aux utilisateurs

Pour chaque choix effectué, l'utilisateur reçoit un commentaire. La technique est la même que celle utilisée plus haut pour afficher les informations sur les produits : le Gestionnaire d'actions remplace l'image de la question par l'image contenant le commentaire.

Configuration d'un commentaire en cas de réponse correcte

1 Cliquez à n'importe quel endroit du calque contenant les choix. Dans le sélecteur de balise, cliquez sur

<interaction>. Dans l'inspecteur Propriétés, cliquez sur Modifier pour ouvrir la boîte de dialogue Interaction CourseBuilder.

2 Cliquez sur l'onglet Gestionnaire d'actions.

3 Dans la liste Gestionnaire d'actions, repérez "si Correct", sélectionnez Message contextuel, puis cliquez sur Couper.

4 Dans la liste Gestionnaire d'actions, resélectionnez "si Correct", choisissez Permuter une image dans le menu

contextuel Actions, puis cliquez sur Ajouter.

La boîte de dialogue Permuter une image s'affiche.

5 Dans la liste Images, sélectionnez "image du calque Commentaire", puis cliquez sur Parcourir.

6 Dans la boîte de dialogue Sélectionner la source d'image, accédez au dossier cb_graphics, sélectionnez le fichier

text_feedback_correct.jpg, puis cliquez sur Sélectionner (Windows) ou Choisir (Macintosh).

7 Cliquez sur OK pour fermer la boîte de dialogue Permuter une image.

Dernière mise à jour le 20/5/2011

UTILISATION DE L'EXTENSION COURSEBUILDER POUR ADOBE ELEARNING SUITE

Didacticiels Dreamweaver

Configuration d'un commentaire en cas de réponse incorrecte

Vous allez maintenant définir le commentaire pour les choix incorrects.

1 Dans la liste Gestionnaire d'actions, repérez "sinon si Incorrect", sélectionnez Message contextuel, puis cliquez sur

Couper.

2 Dans la liste Gestionnaire d'actions, resélectionnez "sinon si Incorrect", choisissez Permuter une image dans le

menu contextuel Actions, puis cliquez sur Ajouter.

La boîte de dialogue Permuter une image s'affiche.

3 Dans la liste Images, sélectionnez "image du calque Commentaire", puis cliquez sur Parcourir.

4 Dans la boîte de dialogue Sélectionner la source d'image, accédez au dossier cb_graphics, sélectionnez le fichier

text_feedback_incorrect.jpg, puis cliquez sur Sélectionner (Windows) ou Choisir (Macintosh).

5 Cliquez sur OK pour fermer la boîte de dialogue Permuter une image.

6 Cliquez sur OK pour fermer la boîte de dialogue Interaction CourseBuilder.

Test de l'interaction

Vous allez maintenant tester la page afin d'en observer le fonctionnement.

1 Sélectionnez Fichier > Enregistrer, puis appuyez sur F12 pour l'ouvrir dans un navigateur.

2 Une fois le document ouvert, testez l'interaction :

• Cliquez sur le premier bouton. Vous obtenez un commentaire indiquant que votre choix est correct.

• Cliquez sur les trois autres boutons. Vous obtenez un commentaire indiquant que votre choix est erroné.

Création d'une interaction Choix multiples

Vous allez maintenant créer une page de navigation qui permettra aux utilisateurs de parcourir les pages de votre site. Ils pourront choisir de s'informer sur les produits, tester leur connaissance des produits ou participer à un quiz sur les primes à la vente.

Vous allez maintenant découvrir une autre utilisation possible de l'interaction Choix multiples.

Ouvrez le fichier auquel vous souhaitez ajouter une interaction CourseBuilder Choix multiples.

1 Cliquez sur Fichier > Ouvrir.

2 Dans la boîte de dialogue Ouvrir, accédez au dossier cb_discover, sélectionnez le fichier cb_nav.htm, puis cliquez

sur Ouvrir.

Insertion d'une interaction CourseBuilder

1 Si la palette Objet n'est pas déjà ouverte, cliquez sur Fenêtre > Objets pour l'ouvrir.

2 Dans la fenêtre Document, cliquez au centre du document pour insérer l'interaction après les éléments de page

existants.

Les marqueurs invisibles du document n'apparaissent pas car ils sont dissimulés par l'image de bannière.

3 Dans le volet Commun de la palette Objet, cliquez sur l'icône Interaction CourseBuilder.

La boîte de dialogue correspondante s'ouvre sur l'onglet Galerie.

Dernière mise à jour le 20/5/2011

UTILISATION DE L'EXTENSION COURSEBUILDER POUR ADOBE ELEARNING SUITE

Didacticiels Dreamweaver

Sélection d'un type d'interaction

Utilisez les options de l'onglet Galerie pour sélectionner un modèle d'interaction. Choisissez un navigateur pour obtenir une liste des interactions compatibles avec la version du navigateur sélectionné. Utilisez la liste Catégorie pour sélectionner un type d'interaction. Les icônes de l'onglet Galerie indiquent les modèles disponibles pour ce type d'interaction.

1 Dans la liste Catégorie, sélectionnez Choix multiples.

Les icônes de l'onglet Galerie représentent les interactions CourseBuilder Choix multiples compatibles avec les navigateurs version 4 et ultérieure.

2 Cliquez sur l'icône correspondant au modèle graphique de choix multiples à boutons radio.

Vous remarquerez que le nom du modèle, sur l'icône duquel le curseur est positionné, apparaît dans la zone vide située sous la Galerie.

A côté de l'onglet Galerie, la boîte de dialogue Interaction CourseBuilder affiche d'autres onglets qui vous permettront de définir les propriétés, les éléments et les actions de l'interaction.

Le cadre du modèle à choix multiples apparaît dans la fenêtre Document. Pour y voir également l'interaction CourseBuilder, déplacez si nécessaire la boîte de dialogue Interaction CourseBuilder vers le bas ou vers la droite.

Définition d'une interaction Choix multiples

Dans l'onglet Général, sélectionnez les valeurs des propriétés générales s'appliquant à toute l'interaction Choix multiples.

1 Cliquez sur l'onglet Général.

2 Dans le champ "question", remplacez le texte "Placez le texte de la question ici" en tapant :

Here's the latest on our new line of toys - specs, prices, and this quarter's sales incentives. Explore first, then test your knowledge with a couple of quizzes. Click a button to choose:

Le texte de la fenêtre Document est immédiatement mis à jour dès que vous cliquez dans un autre champ de cet onglet.

3 Pour Evaluer l'interaction, conservez la valeur par défaut "lorsque l'utilisateur clique sur un choix".

Elle spécifie que l'interaction est évaluée à l'instant même où l'utilisateur fait son choix.

4 Dans Correct lorsque, conservez la valeur par défaut "N'importe quelle correcte et aucune incorrecte".

5 Dans les champs Les tentatives sont et Le temps est, conservez la valeur par défaut "Illimité".

Dans cette interaction, vous ne souhaitez limiter ni le nombre d'essais, ni le temps dont dispose l'utilisateur pour répondre correctement à la question.

6 Vérifiez que l'option Réinitialiser n'est pas sélectionnée.

7 Sélectionnez "Insérer dans une balise DIV" pour placer l'interaction CourseBuilder dans une balise AP DIV qui en

facilitera le positionnement dans le document.

Dernière mise à jour le 20/5/2011

UTILISATION DE L'EXTENSION COURSEBUILDER POUR ADOBE ELEARNING SUITE

Didacticiels Dreamweaver

Définition des choix

L'onglet Choix permet de définir les choix de l'utilisateur dans l'interaction. Chaque choix est désigné par un nom afin d'être facilement reconnaissable dans les autres onglets. tapez le texte des choix de l'utilisateur et définissez la manière dont chaque choix est évalué.

1 Cliquez sur l'onglet Choix.

Dans la liste Choix, "choice1 (correct)" est présélectionné.

2 Dans le champ Nom, tapez Explorer à la place du texte par défaut "choice1".

3 Dans le champ Texte, tapez Explorer les nouveaux produits à la place du texte par défaut "Texte du choix 1".

Le texte entré s'affichera à l'écran.

4 Dans le menu contextuel Le choix est, sélectionnez Non évalué.

Cette interaction guide la navigation et un choix fait par l'utilisateur n'est considéré ni comme correct, ni comme incorrect.

5 Dans la liste Choix, sélectionnez "choice2".

Vous observerez que le champ Nom change. Il correspond au choix sélectionné dans la liste Choix.

6 Dans le champ Nom, tapez DD à la place du texte par défaut "choice2".

Dans le champ Texte, tapez Apprenez à connaître votre client cible à la place du texte par défaut "Texte du choix 2".

8 Dans le menu contextuel Le choix est, sélectionnez Non évalué.

9 Dans la liste Choix, sélectionnez "choice3".

10 Dans le champ Nom, tapez MC à la place du texte par défaut "choice3".

11 Dans le champ Texte, tapez Vos avantages à la place du texte par défaut "Texte du choix 3".

12 Dans le menu contextuel Le choix est, sélectionnez Non évalué.

13 Dans la liste Choix, sélectionnez "choice4", puis cliquez sur Supprimer pour effacer ce choix de l'interaction.

Définition de l'action

Complétez la définition de l'interaction en spécifiant l'action que CourseBuilder exécute en réponse aux choix de l'utilisateur. Chaque choix sera lié à un fichier dont l'ouverture sera déterminée par la sélection du choix. Utilisez le Gestionnaire d'actions pour configurer une action Atteindre l'URL pour chaque choix.

• La sélection du choix 1 provoque l'affichage de la page d'exploration de l'activité.

• La sélection du choix 2 provoque l'affichage de la page de quiz Glisser-déposer.

• La sélection du choix 3 provoque l'affichage de la page de quiz à choix multiples.

Au cours de la définition de cette interaction, vous personnaliserez le commentaire en modifiant les valeurs des segments, des conditions et des actions.

Sélection de l'onglet Gestionnaire d'actions

Cliquez sur l'onglet Gestionnaire d'actions.

Dernière mise à jour le 20/5/2011

UTILISATION DE L'EXTENSION COURSEBUILDER POUR ADOBE ELEARNING SUITE

Didacticiels Dreamweaver

Cet onglet comporte trois segments :

• Segment : Contrôle du temps

• Segment : Exactitude

• Segment : Contrôle du nombre de tentatives

Les limites de temps et de tentatives des segments sont automatiquement définies. Les segments ne sont toutefois activés qu'une fois les options correspondantes sélectionnées dans l'onglet Général.

Les actions de commentaire sont prédéfinies pour chaque segment par défaut du Gestionnaire d'actions. Vous allez modifier les valeurs par défaut des segments, des conditions et des actions pour personnaliser les commentaires de l'interaction.

Les segments précédés d'un signe plus (+) sont réduits. Pour en afficher les conditions et actions, cliquez sur Développer dans l'onglet Gestionnaire d'actions.

Modification des segments

Vous allez modifier le nom par défaut du segment pour lui attribuer une désignation plus parlante.

1 Dans la liste Gestionnaire d'actions, sélectionnez Segment : Exactitude.

2 Cliquez sur Modifier.

L'éditeur de segments s'ouvre.

3 Dans le champ Nom de segment, tapez Navigation pour remplacer le texte par défaut.

4 Cliquez sur OK pour fermer la boîte de dialogue.

Définition de la condition d'exploration

1 Dans la liste Gestionnaire d'actions, sélectionnez la condition "si Correct".

2 Cliquez sur Modifier.

L'éditeur de conditions s'ouvre.

3 Dans le champ Nom de condition, tapez Explorer sélectionné afin d'indiquer la condition représentée.

4 Dans le menu contextuel Interaction situé à l'extrême droite et affichant <aucun>, sélectionnez Bouton "Explorer".

5 Dans le dernier menu contextuel Type, vérifiez que la valeur sélectionnée est Vrai.

6 Cliquez sur OK pour fermer la boîte de dialogue.

Ajout d'une action Atteindre l'URL

Vous allez ajouter l'action qui mène l'utilisateur à l'URL correcte lorsque ce choix est sélectionné. Commencez par supprimer l'action Message contextuel existante. Vous ajouterez ensuite une action Atteindre l'URL.

1 Dans la liste Gestionnaire d'actions, sélectionnez Message contextuel sous "si Explorer sélectionné".

2 Cliquez sur Couper pour supprimer cette action de la liste du Gestionnaire d'actions.

3 Dans la liste Gestionnaire d'actions, sélectionnez "si Explorer sélectionné".

4 Dans le menu contextuel du Gestionnaire d'actions, choisissez Atteindre l'URL, puis cliquez sur Ajouter.

La boîte de dialogue Atteindre l'URL s'affiche.

5 Dans le champ URL, cliquez sur Parcourir.

Dernière mise à jour le 20/5/2011

UTILISATION DE L'EXTENSION COURSEBUILDER POUR ADOBE ELEARNING SUITE

Didacticiels Dreamweaver

6 Dans la boîte de dialogue qui s'affiche, accédez au dossier cb_discover, repérez le fichier cb_explore.htm, puis

cliquez sur Sélectionner (Windows) ou Choisir (Macintosh) pour spécifier qu'il s'agit du fichier à ouvrir lorsque le choix est sélectionné.

Le champ URL est mis à jour.

7 Cliquez sur OK pour fermer la boîte de dialogue.

Définition de la condition Glisser-déposer

1 Dans la liste Gestionnaire d'actions, sélectionnez la condition "sinon si Incorrect".

2 Cliquez sur Modifier pour ouvrir l'éditeur de conditions.

3 Dans le champ Nom de condition, tapez Glisser-déposer sélectionné afin d'indiquer la condition représentée.

4 Dans le menu contextuel Interaction situé à l'extrême droite, sélectionnez Bouton "DD".

5 Dans le dernier menu contextuel Type, vérifiez que la valeur sélectionnée est Vrai.

6 Cliquez sur OK pour fermer la boîte de dialogue.

Ajout d'une action Atteindre l'URL

Vous allez ajouter l'action qui mène l'utilisateur au quiz Glisser-déposer lorsque ce choix est sélectionné. Supprimez l'action Message contextuel existante, puis ajoutez une action Atteindre l'URL.

1 Dans la liste Gestionnaire d'actions, sélectionnez Message contextuel sous "sinon si Glisser-déposer sélectionné".

2 Cliquez sur Couper pour supprimer cette action de la liste du Gestionnaire d'actions.

3 Dans la liste Gestionnaire d'actions, sélectionnez "sinon si Glisser-déposer sélectionné".

4 Dans le menu contextuel du Gestionnaire d'actions, choisissez Atteindre l'URL, puis cliquez sur Ajouter.

5 Dans la boîte de dialogue Atteindre l'URL, cliquez sur Parcourir. Dans la boîte de dialogue qui s'affiche, repérez le

fichier cb_drag_drop.htm situé dans le dossier du didacticiel, puis cliquez sur Sélectionner (Windows) ou Choisir (Macintosh) pour spécifier qu'il s'agit du fichier à ouvrir lorsque le choix est sélectionné.

6 Cliquez sur OK pour fermer la boîte de dialogue.

Définition de la condition à choix multiples

1 Dans la liste Gestionnaire d'actions, sélectionnez la condition "sinon si Réponse inconnue".

2 Cliquez sur Modifier pour ouvrir l'éditeur de conditions.

3 Dans le champ Nom de condition, tapez Choix multiples sélectionné afin d'indiquer la condition représentée.

4 Dans le menu contextuel Interaction situé à l'extrême droite, sélectionnez le bouton "MC".

5 Dans le dernier menu contextuel Type, vérifiez que la valeur sélectionnée est Vrai.

6 Cliquez sur OK pour fermer la boîte de dialogue.

Ajout d'une action Atteindre l'URL

Vous allez ajouter l'action qui mène l'utilisateur au quiz à choix multiples lorsque le choix 3 est sélectionné. Supprimez l'action Message contextuel existante, puis ajoutez une action Atteindre l'URL.

1 Dans la liste Gestionnaire d'actions, sélectionnez Message contextuel sous "sinon si Choix multiples sélectionné".

2 Cliquez sur Couper pour supprimer cette action de la liste du Gestionnaire d'actions.

Dernière mise à jour le 20/5/2011

UTILISATION DE L'EXTENSION COURSEBUILDER POUR ADOBE ELEARNING SUITE

Didacticiels Dreamweaver

3 Dans la liste Gestionnaire d'actions, sélectionnez "sinon si Choix multiples sélectionné".

4 Dans le menu contextuel du Gestionnaire d'actions, choisissez Atteindre l'URL, puis cliquez sur Ajouter.

5 Dans la boîte de dialogue Atteindre l'URL, cliquez sur Parcourir dans le champ URL. Dans la boîte de dialogue qui

s'affiche, repérez le fichier cb_mc.htm situé dans le dossier cb_discover, puis cliquez sur Sélectionner (Windows) ou Choisir (Macintosh) pour spécifier qu'il s'agit du fichier à ouvrir lorsque le choix est sélectionné.

6 Cliquez sur OK pour fermer la boîte de dialogue, puis sur OK pour fermer la boîte de dialogue Interaction

CourseBuilder.

7 Sélectionnez Fichier > Enregistrer pour enregistrer le document.

Positionnement de l'interaction dans le document

Vous devrez éventuellement modifier les dimensions et la position de la balise DIV contenant l'objet d'interaction Choix multiples.

1 Cliquez sur la bordure de la balise DIV pour la sélectionner.

2 Procédez ensuite de la manière suivante pour redimensionner ou déplacer la balise DIV :

• Faites glisser la balise DIV vers l'emplacement voulu en utilisant l'onglet DIV (dans l'angle supérieur gauche).

• Déplacez n'importe quelle poignée de la balise pour la redimensionner.

3 Enregistrez vos modifications.

Test de l'interaction

1 Sélectionnez Fichier > Aperçu dans le navigateur.

Le navigateur s'ouvre et affiche l'interaction.

2 Testez le site en cliquant sur chaque bouton.

Les autres pages d'interaction créées s'affichent.

3 Quittez le navigateur lorsque vous avez fini de tester le site.

Dernière mise à jour le 20/5/2011

Chapitre 3 : Instructions de base de CourseBuilder pour Dreamweaver

Présentation des fonctionnalités de base de CourseBuilder

CourseBuilder pour Dreamweaver inclut une interface conviviale permettant de créer facilement des interactions Web d'apprentissage.

A propos de l'espace de travail CourseBuilder pour Dreamweaver

Après l'installation de CourseBuilder pour Dreamweaver, vous remarquerez la présence d'options CourseBuilder dans les menus de Dreamweaver et dans le panneau Insertion.

Comme dans Dreamweaver, commencez par créer un site local pour vos documents CourseBuilder pour Dreamweaver. Pour obtenir des informations concernant la création d'un site local, voir le chapitre « Planification et configuration de votre site » dans la documentation de Dreamweaver.

Les fonctionnalités de CourseBuilder pour Dreamweaver sont initialisées à l'insertion d'une interaction CourseBuilder dans un document. Lorsque vous commencerez à utiliser CourseBuilder pour Dreamweaver, vous remarquerez des commandes et composants dans l'espace de travail.

Copie des fichiers de support

Utilisez la commande Copier les fichiers de support pour copier les fichiers de support CourseBuilder pour Dreamweaver vers le dossier spécifié pour le site local. Cette commande ajoute deux dossiers à la structure du site : le dossier Scripts, qui contient des fichiers JavaScript et un dossier Images contenant des éléments graphiques tels que des images d'espace réservé, de bouton, de curseur et de minuteur. Les interactions CourseBuilder nécessitent ces fichiers de script et d'images pour fonctionner correctement.

Remarque : si la structure de fichiers actuelle contient un dossier Images, CourseBuilder pour Dreamweaver copie les fichiers image de support vers ce dossier. Si vous souhaitez conserver les fichiers de support CourseBuilder et vos fichiers graphiques à part, vous pouvez renommer vos fichiers graphiques avant de copier les fichiers de support.

Pour copier les fichiers de support :

1 Procédez de l'une des façons suivantes :

• Ouvrez un nouveau document, puis enregistrez-le dans le dossier du site local.

• Ouvrez un document existant à partir de votre dossier de site local.

2 Cliquez sur Modifier > CourseBuilder > Copier les fichiers de support.

3 Sélectionnez les options souhaitées, puis cliquez sur OK.

La commande Copier les fichiers de support copie automatiquement les fichiers de scripts.

Vous pouvez copier les fichiers image à partir du dossier Dreamweaver CS5\CourseBuilder vers le dossier d'emplacement du document. Vous pouvez également remplacer les fichiers image existants.

Dernière mise à jour le 20/5/2011

+ 97 hidden pages