Concevoir un schéma bilan interactif avec médiator

Sommaire:

Objectif: Créer un schéma bilan sur lequel l'enseignant ou les élèves peuvent déplacer des légendes pour les replacer aux bons endroits sur le schéma. Un témoin lumineux indique si la réponse est correcte ou si elle est fausse. En complément il est possible de faire afficher un petit descriptif de la légende déplacée afin de faciliter son replacement.

Etape 1: Préparation de la présentation

Organiser sa présentation...Créer une page et choisir son format...

Etape 2: Insérer un titre et une image :

Insérer un titre...Insérer une image....Tracer les flèches de légende...

Etape 3: Créer une légende et permettre son déplacement:

Créer un cadre de texte contenant la légende...Autoriser le déplacement du cadre de texte...(glisser déposer)Créer de nouvelles légendes...

Etape 4: Indicateur de bonne ou de mauvaise réponse:

Principe de la réalisation....Création d'une cible pour la légende "Le noyau"...Création d'une variable permettant de connaître la légende déplacée....Donner à la variable une valeur correspondant à la légende déplacer....Tester la valeur de la variable...Appliquer le test aux autres cibles...

1

L'ensemble de ces étapes une fois maîtrisé, vous pourrez combiner les différentes fonctions abordées afin de générer des documents nouveaux:

Questionnaires, cases à cocher, exercices avec évaluation automatique etc...

Etape 1: Préparation de la présentation

Créer un dossier d'enregistrement:Votre présentation fera appel à divers documents (images, vidéo etc...) dont l'emplacement devra être

associé à votre fichier médiator (celui portant l'extension. md8). Cette précaution n'est pas indispensable pour les images mais vous évitera bien des déconvenues lorsque vous exporterez votre présentation et que vous la lirez ou la modifierez sur d'autres ordinateurs.

Il est donc conseillé pour chaque nouvelle présentation de préparer un dossier s'organisant ainsi:

Remarque: Si les éléments intégrés dans votre présentation sont des films ou des fichiers nécessitant d'être ouverts avec d'autres logiciels (ex fichiers powerpoint), vous devez les placer dans le même répertoire que votre fichier d'exportation et les déplacer avec lui lorsque vous changez d'ordinateur. Un lien relatif vers ces fichiers vous assurera alors de pouvoir les ouvrir quel que soit l'emplacement dans lequel vous les aurez collé.

Créer une page et choisir son format:À l'ouverture, médiator vous propose diverses options de format pour votre future présentation. Le type de format dépend de vos besoins et peut être en partie modifié après création du document.Dans notre exemple, choisissez:

Dossier de votre projet

Dossier dans lequel vous placez les images dont vous aurez besoin

Nom de votre fichier avant exportation

Type de document. Détermine les éléments disponibles durant la présentation. Cela assure la compatibilité des options possibles avec le format choisi.

Aspect de la présentation Taille de la

fenêtre

Sommaire

2

Insérer un titre:

Insérer une image:Les fichiers d'images peuvent être enregistrés sous différents formats (extensions). Chaque format correspond à une norme de compression des données qui confert au fichier et à l'image différentes propriétés que médiator gère de façon spécifique.

Format. GIF: Format qui convient bien aux images représentant des dessins (nombre de couleurs limité à 256). Ce format permet de définir certaines couleurs comme transparentes.Il permet aussi de fabriquer des images animées.Par contre, un gif inséré dans médiator ne pourra pas être redimensionné. Il convient donc de bien choisir la taille de l'image lorsque vous la créez et que vous l'enregistrez sous ce format.

Format .JPEG:Format qui convient bien aux images de type photo. Il permet de choisir, à l'enregistrement, le taux de compression et donc de choisir le meilleur compromis entre taille de fichier et qualité de l'image.Ce format peut-être redimensionné sous médiator mais ne permet pas d'avoir des couleurs transparentes.

Format .PNG:Format qui convient bien aux dessins. Il présente l'avantage d'être redimensionnable sous médiator et de permettre de rendre une couleur transparente.

Format .BMP:Ce format donne des images de qualité mais les fichiers sont alors volumineux en terme d'octet. Ils sont redimensionnables sous médiator mais pas de couleurs transparentes.

Des logiciels comme "photofiltre" ou "irfanview" permettent de convertir un fichier dans le format souhaité et de redimensionner les images à volonté.

Cliquer sur l'icône de titreTracer un rectangle en maintenant le bouton gauche de la souris enfoncé.

Taper le texte du titre

Modifier les propriétés du titre en utilisant la fenêtre de propriétés.

Placez l'image dans le répertoire image de votre document.

(voir étape1)

Cliquez sur l'icône « GIF » puisdans la fenêtre qui s'ouvre, sélectionnez l'image choisie

Sommaire

Remarque: Dans notre exemple, cette image ne bougera plus. Afin d'éviter de la sélectionner de façon

intempestive, il est préférable de la verrouiller en utilisant la fenêtre de propriétés.

3

Tracer une flèche de légende:

Dans l'exemple choisi, les traits de légendes sont déjà dans l'image insérée. Il se peut cependant que vous deviez tracer ces traits de légendes. Voilà une procédure possible.

1- Cliquez sur l'icone Polygone.

3- Sélectionnez votre objet polygone dans la liste des objets.4- Cochez la case -> « Flèche fin »5- Modifiez dans cette même fenêtre l'épaisseur, la couleur etc...

Sommaire

Faites ensuite une série de copier/coller pour créer les autres flèches.

2- Tracez un trait.

4

Etape 3: Créer une première légende et permettre son déplacement

Créer un cadre de texte contenant la légende:

Autoriser le Glisser/déposer:

1- Cliquez sur l'icone d'inserstion d'un texte

2- Tapez le texte: « Le noyau »3- Choisissez la taille et la couleur de la fonte.

4- Dans la liste des objets de la page, sélectionnez votre objet texte (il doit pour l'instant se nommer: « texte »5- Dans la fenêtre de propriétés, modifiez le nom de l'objet en « noy ».

Remarque: Renommer cet objet vous permettra de mieux le repérer par

la suite et facilitera la compréhension de la partie « programmation ».

1- Sélectionnez le texte « noy »2- faites un clic droit et affichez la fenêtre d'événements.

4- Dans l'onglet multimédia, choisissez l'événément « Glisser-Déposer » et placez le dans la fenêtre en face de l'action « gauche enfoncé »

3- Dans la colonne des actions, choisissez « Gauche enfoncé » et faites le glisser dans la partie blanche de la fenêtre.

5- Dans la fenêtre qui s'ouvre, choisissez « @ThisObject ».

6- Cochez : « Glisser »7- Cochez : « Faire glisser l'objet à l'avant plan »8- Cliquez sur OK.

Remarque: Désormais, si l'utilisateur enfonce le bouton

gauche de la souris alors qu'il survole le texte « le noyau », le texte suivra les

mouvements de la souris et pourra être déplacé n'importe où sur la page.

5

En testant votre animation, vous avez certainement remarqué qu'une fois la légende déplacée, on ne pouvait plus la déposer.Il faut maintenant associer l'événement "déposer" au relachement du clic gauche de la souris.

1- Sélectionner le texte « noy »2- faites un clic droit et affichez la fenêtre d'événements.

3- Dans la colonne des actions, choisissez « Gauche relâché» et faites le glisser dans la partie blanche de la fenêtre.

4- Dans l'onglet multimédia, choisissez l'événéments « Glisser-Déposer » en placez le dans la fenêtre en face de l'action « gauche relâché »

5- Cochez : « Déposer »

6- Cliquez sur OK.

Remarque: Désormais, si l'utilisateur relâche le bouton gauche de la souris après avoir glissé la légende, cette

légende est déposée à l'emplacement ou se trouve la souris.

Sommaire

Remarque: Cette succession d'action peut devenir fastidieuse à répéter lorsque l'on veut

créer plusieurs éléments mobiles sur l'animation. Un raccourci existe dans l'onglet utilisateur de la fenêtre d'événements.Faites glisser le raccourci dans la fenêtre

après avoir sélectionné l'objet à déplacer et l'ensemble des actions crées précédemment sont automatiquement associées à cet objet.

Raccourci!!!.

6

Créer de nouvelles légendes:Afin de conserver le style de la première légende, le mieux est de faire un copier/coller. Vous conserverez du même coup, les actions associées au texte.

Vous pouvez désormais créer autant de légendes qu'il est nécessaire par de simples copier/coller.

1- Sélectionner le texte « noy »

2- Cliquez sur le bouton « copier ».

3- Cliquez sur le bouton « coller ».

Remarque: Le nouvel objet ne semble pas visible à l'écran. Il existe pourtant

(exactement superposé au premier).Sa référence apparaît d'ailleurs dans la liste des objets.

Il vous faut le renommer en lui donnant un nom proche de la légende qu'il contient.

Ex : « mit » pour « la mitochondrie »

Décalez votre nouvelle légende sous la première puis, double cliquez dessus.Tapez alors le nouveau texte de légende:« La mitochondrie ».

Remarque: vérifiez que les actions (Glisser/Déposer) sont bien conservées pour ce

nouvel objet.La référence @ThisObject étant une référence relative à l'objet sélectionné, vous déplacez bien « La mitochondrie » et non « Le noyau » avec un clic gauche enfoncé sur cette nouvelle légende.

Sommaire

7

Etape 4: Indicateur de bonne ou de mauvaise réponse:

Principe de la réalisation:Le principe est d'afficher un voyant vert si la réponse est bonne et un voyant rouge si la réponse est fausse. Biensûr, d'autres indicateurs peuvent être créés en fonction de votre imagination.

Comment tester l'exactitude d'une réponse?● On crée une cible à l'emplacement exact d'une légende.(Au bout de la flèche noyau pour "Le

noyau")● On crée ensuite une variable qui change de valeur en fonction de la légende déplacée.

■ Ex: variable N qui prend la valeur "noyau" lorsque l'utilisateur déplace la légende "Le noyau" et qui prend la valeur "mito" lorsque l'utilisateur déplace la légende "La mitochondrie".

● On crée ensuite le test suivant:

Création d'une cible pour la légende noyau:

SiN=  « noyau »

Légende déposée sur la cible « cibnoyau »

Condition à vérifier Alors

Sinon

Afficher voyant vertEteindre voyant rouge

Afficher voyant rougeEteindre voyant vert

Action effectuée par l'utilisateur Test Réponses

1- Créez un rectangle en face du trait de légende correspondant au noyau. Ce rectangle représente la cible de la légende « noyau ».2- Dans les propriétés,

choisissez un style « transparent ».

3- Pour retrouver facilement votre rectangle renommez le « cibnoyau ».

Remarque: Attention, n'utilisez pas l'option « visibilté » pour rendre votre rectangle transparent, car il deviendrait alors inactif dans cette

page et ne pourrait plus servir de cible.

Sommaire8

Création d'une variable indiquant la légende déplacée:

Donner à la variable "T" une valeur correspondant à la légende déplacée:

Afin de permettre le repérage de la légende déplacée, on fait prendre à "T", une valeur correspondant à cette légende.Par exemple: Si l'utilisateur déplace la légende "noyau", on fera prendre à "T" la valeur "noyau".

Si il déplace la légende "mitochondrie", on fera prendre à "T" la valeur "mito"Etc...

9

1-Dans le menu « document »,choisissez « variable

2- Dans la fenêtre qui s'ouvre, choisissez: « créer »

3-Dans la fenêtre qui s'ouvre, tapez le nom de la nouvelle variable: « T ».4- Choisissez « Locale » et « texte ».5- Cliquez sur « OK » pour fermer la fenêtre.

Remarque: Vous venez de créer une variable « T » qui pourra changer de valeur. Cette valeur devra

toujours être une suite de caractères qui seront placés entre des guillemets.

Sommaire

Il vous faut maintenant, associer une valeur spécifique de "T" pour chacune des légendes de votre schéma.Pour la mitochondrie par exemple:

10

1- Dans la fenêtre qui s'ouvre,choisissez la variable « T ».

2-Dans la section : Extression à affecter, tapez « noyau ».

Remarque: À présent, chaque fois que l'utilisateur gardera le bouton gauche de la souris enfoncé et

qu'elle est sur la légende « noyau », T aura la valeur « noyau ».

Sélectionnez la légende « mitochondrie »:Dans la fenêtre d'événements, asssociez à l'événement « gauche enfoncé », l'action

« Affecter ». Puis affectez à « T », la valeur « mito ».

Sommaire

Tester la valeur de "T":

Pour évaluer si la réponse est vraie,lorsque une légende est déposée sur une cible, il faut tester la valeur de "T". Puis indiquer quoi faire si la condition est vraie et si la condition est fausse.(voir le principe d'un test)

11

Créez deux objets, un rond rouge et un rond vert, que vous nommez respectivement, « rouge » et vert ».

Superposez ces objets puis rendez les invisibles en utilisant la fenêtre de propriété.Vous pouez placer ces objet où vous voulez sur la page. Ils indiqueront à l'utilisateur si la

réponse est vraie ou si elle est fausse.

1- Selectionnez la cible correspondant au noyau: « cibnoyau » et affichez la fenêtre d'événements.2- Dans la colonne de gauche, sélectionnez l'événement: 'Deposer sur'3- Dans l'onglet programmation, choisissez l'action « Si-alors-sinon » et faites le glisser à coté de l'événement.

4-Entrez la condition à évaluer: Ici, on veut savoir si la variable « T » a bien la valeur « noyau ».(C'est à dire, si l'utilisateur à bien déplacé la légende noyau.)

5- Si la condition est vraie, faites glisser l'action « afficher rond vert » suivie de l'action « cacher rond rouge ».

6- Si la condition est fausse, faites glisser l'action « afficher rond rouge» suivie de l'action « cacher rond vert».

Remarque:À présent, chaque fois que l'utilisateur déposera la légende « le noyau » sur la cible « cibnoyau », un rond vert s'affichera qui lui indiquera que sa réponse est exacte.

Sommaire

Associer à chaque cible le test correspondant:Afin de na pas répéter ces étapes pour chacune des cibles, il vous suffit de sélectionner l'événement et l'action associée que vous venez de créer. De copier ces éléments puis de les coller dans la fenêtre événement d'une autre cible.Il vous faut biensûr ensuite,modifier la codition afin de l'adapter à cette nouvelle cible.

12

Ici, T= « mito » doit remplacer la condition précédente.

Sommaire