Des livres interactifs avec Didapages

Des livres interactifs avec Didapages Patrice NADAM Médialog Didapages est un logiciel gratuit qui permet de créer ses propres outils pédagogiques interactifs. Ceux-ci sont immédiatement disponibles sous la forme de livres virtuels en flash. Un simple navigateur Internet suffit pour les consulter. Sans recours à un quelconque langage de programmation, il est possible de concevoir des exercices variés, mêlant textes, images, sons et vidéos. La réalisation, pas à pas, d un «livre», destiné à des élèves de maternelle, est l occasion de découvrir toutes les possibilités du logiciel. Vous aimeriez proposer à vos élèves des exercices interactifs sur ordinateur adaptés à des intentions pédagogiques précises : des QCM, des quiz, des exercices d appariement par déplacements d étiquettes, l apparition progressive d informations au rythme choisi par l élève Vous aimeriez disposer de possibilités de création plus larges que celles proposées par les générateurs de QCM de type HotPotatoes. Mais vous apprécieriez de conserver la possibilité d exécuter ces exercices à l aide d un simple navigateur Internet. Vous n avez aucune notion de programmation et ne voulez pas vous y mettre. Didapages est fait pour vous. Vous pouvez, avec ce logiciel dont l utilisation est relativement intuitive, créer vos propres outils pédagogiques interactifs. Aussitôt générés, ces derniers, qui se présentent sous forme de livres virtuels en flash, sont utilisables par les élèves. Un simple navigateur Internet suffit pour les feuilleter. L auteur de Didapages a imposé le format d un livre à l interface de son logiciel par souci de simplicité pour le concepteur novice et le lecteur : «un livre, c est rassurant, tout le monde sait comment ça marche, il suffit de tourner les pages». Certains concepteurs ressentiront peut-être cette interface unique et imposée comme une absence de liberté. Cependant, elle présente l avantage d être identique pour le concepteur (le professeur, le formateur) et pour l utilisateur (l élève ou le stagiaire). Ainsi, en phase de création, vous voyez aussitôt à l écran les modifications que vous apportez à votre projet. Didapages crée, pour chaque projet, un dossier regroupant une page web (index.html), un fichier en flash (lecteur.swf), un fichier de données (data.xml) et l ensemble des médias associés au projet (images, sons, vidéos ). Ce dossier peut être tout simplement copié sur chaque ordinateur d une salle de classe ou déposé sur le serveur d un réseau. Le transfert de ce dossier sur un serveur Web rend aussitôt accessible le livre interactif via Internet. Didapages gère un nombre très réduit de formats de fichier : seuls peuvent être importés les images au format JPG, les animations au format SWF, les vidéos au format FLV et les fichiers sons au format MP3. Vous pouvez être ainsi amené à convertir les ressources que vous souhaitez utiliser avant de les intégrer à vos projets. 24 MÉDIALOG N 68 JDÉCEMBRE 2008

Nous vous proposons, dans ce Comment faire, de découvrir les principales fonctionnalités de Didapages, à travers la création d un petit cahier de douze pages et cinq exercices, centrés sur le thème de la pomme et destinés à des élèves de maternelle (classe de moyenne section). Dans ce numéro, vous réaliserez les sept premières pages de ce cahier. Dans le prochain numéro, nous vous proposerons de réaliser les pages suivantes qui mettront en œuvre d autres fonctionnalités de Didapages. PRÉPARATION DU TRAVAIL Les images et les fichiers nécessaires à la réalisation de ce Comment faire sont disponibles sur le site de Médialog (www.ac-creteil.fr/medialog/archive68/no68.htm) dans un fichier archive nommé commentfaire68.zip. Téléchargez le fichier et décompressez-le à l endroit désiré. Par exemple, dans le dossier Mes Documents, vous obtiendrez, en effectuant un clic-droit sur le nom du fichier et en choisissant Extraire tout, un sous-dossier commentfaire68. La version 1.1 de Didapages, gratuite pour un usage non commercial, est proposée au téléchargement sous la forme d un fichier d installation zippé. Allez sur le site de l association Fruits du savoir, à la page de présentation du logiciel (www.fruitsdusavoir.org/index.php?page=10). Cliquez sur le lien Téléchargez Didapages 1.1. Une fois le fichier Didapages1-1.zip téléchargé, ouvrez par un double clic l archive qui ne contient que le fichier Didapages1-1 intall.exe. Double-cliquez sur ce fichier pour lancer l installation de Didapages sur votre ordinateur. Un raccourci est créé sur le Bureau et le logiciel est lancé en fin d installation (1). Acceptez le choix de la langue puis refusez la consultation des messages. DÉMARRAGE D UN PROJET Le menu principal s affiche. Le bouton Présentation-Didacticiels pointe sur quatre livres, créés par l auteur de Didapages, permettant de découvrir et de prendre en main son logiciel. Le bouton Démarrer un nouveau projet sert à créer un nouveau livre. Le bouton Poursuivre un projet existant, quant à lui, permet de modifier un livre déjà enregistré. Pour démarrer un nouveau projet, vous allez devoir lui donner un nom, indiquer le titre du livre, préciser le nom de l auteur ainsi que le nombre de pages prévu, et la couleur de quelques éléments du livre. Cliquez sur Démarrer un nouveau projet Dans la fenêtre Démarrer un nouveau projet, saisissez Livre1 comme nom du projet Indiquez Pomme Maternelle pour le Titre du livre Indiquez votre nom dans le champ Auteur(s) Tapez Premier essai du logiciel Didapages Médialog n 68 et n 69 dans le champ Description En dessous, pour le paramètre Nombre de pages, déplacez le curseur vers la droite et augmentez la valeur à 12 Cliquez sur le bouton couleur de Couverture Dans la fenêtre Sélection de couleur, pour obtenir une autre couleur qu une des 40 prédéfinies, tapez 33 pour Rouge, 66 pour Vert et 99 pour Bleu Validez par Ok pour obtenir la couverture dans le bleu désiré (1) Comme l indique le site de l auteur (www.fruitsdusavoir.org), le logiciel fonctionne sous Windows 98, Me, 2000 ou XP. On peut également l utiliser sous Vista. Dans ce cas, si des messages d erreur successifs apparaissent au premier lancement de l application, il est nécessaire de quitter le logiciel pour le relancer comme si de rien n était. MÉDIALOG N 68 DÉCEMBRE 2008 25

Cochez la case Texturer la couverture pour donner un peu de relief à votre couverture de livre (les autres paramètres proposés par défaut seront conservés) et cliquez sur Créer. Mise à part la barre d outils placée en haut de l interface, ce qui s affiche à l écran correspond à ce que verront les futurs lecteurs. Au centre, le livre se consulte par de simples clics de souris. Pour l ouvrir et tourner les pages, il suffit de cliquer sur la couverture et les coins des pages. Le troisième bouton de la barre d outils permet d activer ou de désactiver l animation des pages lors de la consultation. Cliquez sur la couverture pour ouvrir le livre puis, successivement, sur les coins des différentes pages pour les faire défiler Cliquez sur le bouton Activer/désactiver l animation des pages Constatez l effet d animation en revenant en arrière pour afficher la page 1 (2). La première page, comme toutes les autres de votre livre, est pour l instant vierge. Utilisons cette première page pour comprendre les principes de fonctionnement de Didapages. Chaque page contient des objets (des éléments) auxquels seront imposés certaines caractéristiques et certaines actions. Chaque élément est identifié par un numéro d ordre qui détermine son niveau de superposition (2 est par-dessus 1, 3 est par-dessus 2, etc.) Dans votre livre, la première page est la page titre. Elle doit afficher en titre le nom de l école. Pour réaliser la première page, passez en mode Édition. Dans la barre d outils, cliquez sur Editer. Une fenêtre Edition de la page apparaît. Cette fenêtre constitue le véritable tableau de commandes de la conception des pages. Sous la barre Eléments, sur la ligne 1, sélectionnez Texte dans la liste déroulante Cliquez dans l élément apparu en haut de la page et tapez Ecole de l Imago Sélectionnez le texte et choisissez la valeur 20 pour la taille de la police Mettez en gras le texte (outil G), centrez le texte et choisissez un bleu pour la couleur des caractères Cliquez sur l étoile en bas à droite de l élément et faites la glisser vers la droite pour étirer l élément et faire apparaitre la totalité du texte sur une ligne Cliquez sur le chiffre 1, en haut à gauche de l élément (ou dans la fenêtre Edition de la page) pour sélectionner cet élément (la ligne et le numéro deviennent bleus) Dans la fenêtre Edition de la page, sous la barre Aligner, cliquez sur le bouton le plus à gauche de la première ligne (Centrage horizontal par rapport à la page) À l aide de la touche flèche vers le bas du clavier, déplacez vers le bas l élément sélectionné de 15 petits carreaux. Une image va agrémenter cette page d accueil. Pour pouvoir insérer une image (et les autres médias) dans une page de Didapages, il est nécessaire de l importer, au préalable, dans le projet. Une fois importée, elle apparaîtra dans la liste des images et pourra être ajoutée comme un autre élément. Dans la fenêtre Edition de la page, cliquez sur Enregistrer pour valider les modifications de la page 1 et fermer la fenêtre Cliquez sur Menu projet puis Médias Dans la fenêtre Import/Suppression de médias, cliquez sur Image JPG Dans la fenêtre Sélectionnez l image JPG à importer, recherchez le dossier où a été décompressé le fichier commentfaire68.zip. Sélectionnez le fichier pomme_ardoise.jpg et cliquez sur Importer Dans la fenêtre Import/Suppression de médias, cliquez sur Importer Fermez la fenêtre en cliquant sur Retour (2) Pour afficher de nouveau la couverture, il est nécessaire de passer par Menu projet - Paramètres et de valider par Ok. 26 MÉDIALOG N 68 JDÉCEMBRE 2008

Cliquez sur Editer pour revenir à l édition de la page 1 Dans la fenêtre Edition de la page, sur la ligne 2, sélectionnez Image JPG dans la liste déroulante Sur cette ligne 2, cliquez sur l outil Configurer (la clé de mécanicien) Dans la fenêtre Image JPG, dans la liste déroulante de Fichier JPG, sélectionnez pomme_ardoise Indiquez la valeur 140 (3) pour Largeur et Hauteur et validez par Ok Cliquez sur le chiffre 2, en haut à gauche de l image Dans la fenêtre Edition de la page, sous la barre Aligner, cliquez sur le bouton Centrage horizontal par rapport à la page, puis sur le bouton Centrage vertical par rapport à la page, placé en-dessous. On ajoute un dernier objet à cette page d accueil : une indication pour inciter à tourner les pages. Ajoutez un nouvel élément texte (élément 3) dans lequel vous taperez les caractères >>>. Augmentez la taille de la police à 18. Alignez le texte à droite. Mettez les caractères en Gras et de couleur rougebrun. Adaptez ensuite la taille du cadre à son contenu. Dans Didapages, il est possible de déplacer rapidement les éléments par glisser-déposer. Pour cela : Cliquez sur le numéro 3 placé en haut à gauche du cadre et faites glisser l élément jusque dans la partie inférieure droite de la page, en le collant au bord droit et en le plaçant à deux carreaux du bord inférieur Cliquez sur Enregistrer de la fenêtre Edition de la page. La page titre est terminée. Vous pouvez à tout moment la modifier en cliquant à nouveau sur le bouton Editer placé au-dessus. Passez à la page suivante. Avant d aller plus loin, il peut être bon de sauvegarder le projet. Cliquez sur Menu projet puis Enregistrer (4). PREMIER EXERCICE : ÉCOUTER LES SONS Le premier exercice consiste pour l enfant à découvrir les sons associés aux mots de la comptine «Pomme de reinette et pomme d api». L exercice se fait en page de droite, la consigne est présentée en page de gauche. En cliquant sur chaque mot l enfant entend le mot correspondant. (3) Les valeurs ne correspondent malheureusement pas au nombre de carreaux mais à des pixels. (4) Il n est pas possible de choisir le lieu de sauvegarde de votre projet qui est enregistré, sous Windows XP, par défaut dans un sous-dossier Livre1 (le nom de votre projet) du dossier Didpages créé à l installation du logiciel dans Program Files. Sous Windows Vista, votre projet se trouve dans un sous-dossier Livre1 du dossier Didapages qui se trouve dans AppData\local\VirtualStore\Program Files du dossier de l utilisateur de la session. MÉDIALOG N 68 DÉCEMBRE 2008 27

pomme de reinette et pomme d'api tapis tapis rouge pomme de reinette et pomme d'api tapis tapis gris Commencez par importer les fichiers son, nécessaires à l exercice. Cliquez sur Menu-projet puis Médias Dans la fenêtre Import/Supression de médias, cliquez sur Son MP3 Choisissez, dans le sous-dossier sons du dossier commentfaire68, le fichier dapi.mp3 puis cliquez sur Importer Dans la fenêtre Import/Supression de médias, cliquez sur Importer Recommencez les manipulations pour importer les sept autres fichiers (de.mp3, et.mp3, tapis.mp3) correspondant aux différents mots de la comptine Cliquez sur Retour pour fermer la fenêtre. Vous allez ensuite insérer un élément Texte (en position 1) pour y saisir les paroles de la chanson Cliquez sur le bouton Editer placé au-dessus de la page 3 Dans la fenêtre Edition de la page, sous la barre Eléments, sélectionnez Texte dans la liste déroulante de la ligne 1 Agrandissez la zone de texte pour qu elle occupe toute la page 3 Tapez les paroles de la chanson en sautant une ligne entre chaque partie du texte (voir ci-contre) Sélectionnez tout le texte à la souris et choisissez une taille de 35 en gras Cliquez sur l outil Configurer de l élément 1 et cochez la case Couleur de fond pour obtenir un fond blanc, proposé par défaut, puis validez par Ok. Vous allez insérer dans la page tous les sons en respectant l ordre suivant : pomme (élément 2), de (élément 3), reinette (élément 4), et (élément 5), dapi (élément 6), tapis (élément 7), rouge (élément 8) et gris (élément 9). Pour insérer le premier son (pomme) : Dans la liste déroulante de la ligne 2, sélectionnez Son MP3 Cliquez sur Configurer de l élément 2 Dans la liste déroulante Fichier MP3 de la fenêtre Son MP3, sélectionnez pomme, puis cliquez sur Ok. Recommencez l opération pour les autres sons (éléments 3 à 9) en respectant scrupuleusement l ordre proposé. Dans la page 3, ces éléments sont tous superposés dans le coin supérieur gauche de la page. Ce n est pas gênant, laissez-les à cette place. En revanche il est nécessaire de les cacher en plaçant le texte au-dessus. C est pour cette raison qu un fond blanc a été choisi. Dans la fenêtre Edition de la page, cliquez sur le 1 de la première ligne de Eléments et glissez-déposez cette ligne en position 10. Pour que l enfant puisse, en cliquant sur un mot, entendre le son correspondant, vous devez placer, sur chaque mot, une Zone réactive permettant de lancer le fichier MP3 adéquat. Le principe est le suivant : une Zone réactive permet de rendre visibles ou invisibles d autres objets de la page. Dans le cas d un son, la visibilité correspond à son écoute, l invisibilité à son arrêt. Pour pouvoir écouter le même son plusieurs fois, il est nécessaire de le rendre «invisible» avant de le rendre «visible» (et non après!). Dans la fenêtre Edition de la page, en ligne 11, dans la liste déroulante, sélectionner Zone réactive Placez cet élément sur le premier mot pomme et modifiez sa taille pour l adapter à la taille du mot Cliquez sur le bouton Configurer de l élément 11 La fenêtre Zone réactive apparaît. Dans le champ Visibilités liées au clic, tapez -2,+2 (sans espace) et validez par Ok. L instruction -2,+2 signifie qu on masque l élément 2 puis qu on le fait apparaître. Le signe - («moins») fait disparaître un élément, le signe + («plus») le fait apparaître. Pour déclencher ce son pour les autres mots pomme, il suffit de procéder par copier-coller de cette zone réactive. 28 MÉDIALOG N 68 JDÉCEMBRE 2008

Dans la fenêtre Edition de la page, cliquez sur l outil Copier de l élément 11 (à droite des ciseaux) Cliquez sur l outil Coller de l élément 12 Dans la page 3, placez cet objet sur le deuxième mot pomme Procédez de la même façon pour les deux autres mots pomme (éléments 13 et 14). Pour les autres mots de la chanson, vous pouvez coller la zone réactive initialement copiée (élément 11) puis en modifier les paramètres (taille, position et instruction). Cela permet d éviter les erreurs dues au fait que Didapages ne permet pas de nommer les éléments et ne les identifie que par un numéro d ordre. Collez, en ligne 15, l élément 11 et placez l élément sur le premier mot de avant d en modifier la taille Cliquez sur l outil Configurer de l élément 15 Dans le champ Visibilités liées au clic, tapez -3,+3 (vous augmentez de 1 la valeur du numéro de l élément son correspondant) Copiez cet élément 15 et collez-le en ligne 16 Placez cet élément 16 sur le deuxième mot de Effectuez un coller en ligne 17 et modifiez les propriétés pour augmenter de 1 la valeur du numéro de l élément son correspondant Placez cet élément sur le mot reinette et adaptez sa taille. Copiez, puis collez cet élément pour appliquer une zone réactive sur le second mot reinette. Répétez ces opérations pour l ensemble des autres mots de la chanson (et, d api, tapis, rouge, gris). Dans la fenêtre Édition de la page, la zone réactive correspondant au dernier mot est le vingt-huitième élément. Fermez la fenêtre, enregistrez votre projet puis vérifiez le résultat. La page de gauche (page 2), réservée à la consigne, contient le texte de la consigne ainsi qu un bouton permettant de l écouter. On peut l embellir d une image illustrant la nature de l exercice. Commencez par importer les médias utilisés dans cette page : les images hp.jpg et ecoute.jpg ainsi que le fichier son consigne1.mp3. Pour concevoir la page, cliquez sur le bouton Editer situé au-dessus de la page 2 Dans la fenêtre Edition de la page, choisissez une couleur rouge pour la page En ligne 1, dans la liste déroulante, sélectionnez Son MP3 et cliquez sur l outil Configurer de l élément pour choisir le fichier consigne1 Placez l'élément au centre de la page pour qu il soit caché par le deuxième élément de la page En ligne 2, dans la liste déroulante, sélectionnez Texte et cliquez sur l outil Configurer Dans la fenêtre Texte, cochez la case Couleur de fond (le fond sera blanc) Tapez les valeurs 50 pour X, 50 pour Y, 250 pour Largeur et 400 pour Hauteur puis validez vos choix par Ok. Créez, en élément 3, le texte de la consigne Clique sur les mots pour les écouter, en taille 16 gras, de couleur bleue et placez-le en haut du cadre blanc. Ajoutez, en élément 4, l image du haut-parleur (hp.jpg) et, en élément 5, l illustration de l exercice (ecoute.jpg). Disposez les éléments sur la page en modifiant éventuellement leurs dimensions. Pour déclencher l écoute de la consigne, créez, en élément 6, une zone réactive que vous placez sur l image du hautparleur et pour laquelle vous définissez, dans le champ Visibilités liées au clic, l instruction -1,+1. Testez le fonctionnement de cette page. Didapages permet de créer des modèles de page (pages-type) que l on peut réutiliser. La page 2 présente une structure commune à toutes les pages de consignes de votre livre. On peut donc la définir comme page-type. MÉDIALOG N 68 DÉCEMBRE 2008 29

Cliquez sur le bouton Editer placé au-dessus de la page 2 Dans la fenêtre Edition de la page, cliquez sur Gestion des pages-types Dans le champ Nom de la fenêtre correspondante, tapez consigne, cliquez sur Enregistrer puis sur Retour Dans la fenêtre Edition de la page, cliquez sur Enregistrer. DEUXIÈME EXERCICE : RETROUVER LES MOTS Dans ce deuxième exercice l enfant doit retrouver, à trois reprises, dans une liste déroulante, le mot proposé. L évaluation est faite à la fin de l exercice. Comme dans l exercice précédent, la page de gauche est destinée à la consigne. On va donc utiliser la page modèle qui vient d être créée. Passez en page 4 Cliquez sur le bouton Coller la page puis sur Page-type Dans la fenêtre Ajout d une page type, sélectionnez consigne puis validez par Ok. Importez les médias nécessaires à cette page : l image lis.jpg et le son consigne2.mp3. La page-type ne conserve pas la couleur de la page d origine. Pour cette nouvelle page, choisissez un fond bleu. Modifiez le texte de la consigne par Dans chaque liste, trouve le mot modèle. Clique sur la pomme verte quand tu as terminé. Modifiez les paramètres des éléments 1 (le son MP3) et 5 (l illustration de l exercice). Dans la page 5, créez trois éléments Texte contenant les mots POMME, COMPOTE et TARTE. Positionnez-les harmonieusement dans la page. Vous allez maintenant créer un nouvel élément : une liste déroulante dans laquelle on effectue une sélection. Dans la fenêtre Edition de la page, choisissez, en ligne 4, Liste et cliquez sur le bouton Configurer de l élément Dans le champ Largeur, tapez 80 Dans le champ Propositions de la liste de la fenêtre Liste, tapez HOMME,POMME,POIRE (sans espace) Laissez le champ Texte initial vide Dans le champ Propositions justes, tapez POMME Dans le champ Points en jeu, tapez 1 et validez par Ok Dans la page 5, placez l élément Liste à droite du mot POMME. 30 MÉDIALOG N 68 JDÉCEMBRE 2008

Créez de la même façon les autres listes. La première doit contenir les propositions suivantes : CASSEROLE, COMPOTE et TOMATE. La seconde contiendra CARTE, TANTE, TARTE. N oubliez pas d indiquer à chaque fois la bonne réponse et de précisez 1 pour le nombre de points en jeu. On souhaite qu à la fin de l exercice l élève puisse savoir s il l a réussi ou non, par l affichage d un symbole explicite : une pomme verte souriante ou une pomme orange grincheuse. Pour cela, on a besoin d un bouton de validation et d une gestion des scores. Un total de 100% indique que l exercice a été réalisé sans erreur. On ne souhaite pas faire apparaître le score, il sera masqué par l image d une pomme verte. De même, le bouton de validation sera placé sous cette image. Importez tout d abord les images nécessaires : pomme_verte.jpg, reussite.jpg et erreur.jpg. Placez, comme septième élément, l image erreur et, comme huitième, l image reussite. Indiquez pour ces éléments leur position : X=150 et Y=370 (l élément 8 cache l élément 7). Maintenant, passez à la gestion du score. Dans la fenêtre Edition de la page, choisissez en ligne 9 Score et cliquez sur l outil Configurer de l élément Dans la fenêtre Score, dans la première ligne de Visibilités liées au score, tapez 100 pour le premier %, 100 pour le deuxième % puis +8,-7 (pour rendre visible la pomme souriante et invisible la pomme grincheuse) Dans la ligne suivante, tapez 0 pour le premier %, 99 pour le deuxième %, +7,-8 (pour rendre visible la pomme grincheuse et invisible la pomme souriante), puis validez par Ok Dans la fenêtre Edition de la page, choisissez, en ligne 10, Bouton valider et cliquez sur l outil Configurer de l élément Indiquez 160 pour X, 450 pour Y et 30 pour Largeur puis validez par Ok. Testez le bon fonctionnement de votre exercice et constatez l affichage du score (en haut à gauche) ainsi que l apparition de la pomme apropriée. Ajoutez l image de la pomme verte en élément 11, réduisez sa taille (35 pour Largeur et Hauteur). Placez cette image, ainsi que l élément Score, en X=160 et Y=450. Réduisez la largeur de l élément Score à 35. La hauteur du bouton de validation est fixe et inférieure à la hauteur de l image de la pomme verte. Pour que le clic sur la pomme verte soit effectif sur la plus grande partie de sa surface, il est nécessaire de centrer entre eux verticalement les trois éléments. Dans la fenêtre Edition de la page, sélectionnez les éléments 9,10, 11 (par MAJ + Clic gauche) et cliquez sur le bouton Centrage vertical des objets (troisième bouton de la deuxième ligne Aligner en partant de la gauche). Le système de validation, défini dans cette page, va être adopté dans les prochains exercices. Il est donc possible de faire d une partie de cette page une page modèle. Cliquez sur le bouton Copier la page au-dessus de la page 5 Passez en page 7 et cliquez sur le bouton Coller la page puis Page copiée Editez la page 7 et supprimer tous les éléments inutiles en cliquant sur les poubelles de chacune des lignes 1 à 6 Glissez-déposez, un à un, les éléments restants pour les placer sur les lignes 1,2, 3, 4 et 5 en respectant l ordre initial Cliquez sur l outil Configurer de l élément Score et modifiez les lignes Visibilités liées au score avec les bons numéros d éléments (+2,-1 en première ligne et +1,-2 pour la seconde ligne) puis validez par Ok Cliquez sur le bouton Gestion des pages-types et nommez cette nouvelle page-type exercice. TROISIÈME EXERCICE : RECONSTITUER LE PUZZLE La page 7 est prête à accueillir l exercice. Dans ce dernier, il est demandé à l élève de reconstituer, à partir d un mot modèle, le mot POMME à l aide de pièces d un puzzle. En même temps, il reconstitue l image du fruit. MÉDIALOG N 68 DÉCEMBRE 2008 31

Commencez par importer les images correspondant aux pièces du puzzle : pomme_p.jpg, pomme_o.jpg, pomme_m1.jpg, pomme_m2.jpg et pomme_e.jpg. Pour reconstituer ce puzzle, les pièces seront déposées dans un endroit bien précis de la page. Cette zone de dépôt est représentée par cinq éléments Zone cible (une zone pour chaque lettre) qui doivent posséder un numéro d ordre inférieur à celui des images. Il est donc nécessaire, dans fenêtre Edition de la page, de laisser libres les lignes 6 à 10 avant d insérer les images. Dans la fenêtre Edition de la page, sélectionnez, en ligne 11, Image JPG puis cliquez sur l outil Configurer de l élément Dans la fenêtre Image JPG, tapez 110 pour X, 215 pour Y, 25 pour Largeur et 145 pour Hauteur Dans Fichier JPG, sélectionnez pomme_e Cochez les options Déplaçable et Uniquement les zones cibles, puis validez par Ok. Copiez cet élément et collez-le quatre fois (éléments 12 à 15), puis modifiez les paramètres de la façon suivante : Dans l élément 12, pomme_m2 pour Fichier JPG, X=135 et Y=215 Dans l élément 13, pomme_m1 pour Fichier JPG, X=160 et Y=215 Dans l élément 14, pomme_o pour Fichier JPG, X=185 et Y=215 Dans l élément 15, pomme_p pour Fichier JPG, X=210 et Y=215 Pour créer les zones cibles : Dans la fenêtre Edition de la page, sélectionnez en ligne 6 Zone cible puis cliquez sur l outil Configurer de l élément Dans la fenêtre Zone cible, tapez 110 pour X, 55 pour Y, 25 pour Largeur et 145 pour Hauteur Choisissez un bleu comme couleur de fond Dans le champ Juste si contact avec les elements, tapez 15 Dans le champ Points en jeu, tapez 1 puis validez par Ok. Copiez cet élément et collez-le quatre fois (éléments 7 à 10) puis modifiez les paramètres de la façon suivante : Dans l élément 7, 14 pour Juste si contact avec les elements, X=135 et Y=55 Dans l élément 8, 13 pour Juste si contact avec les elements, X=160 et Y=55 Dans l élément 9, 12 pour Juste si contact avec les elements, X=185 et Y=55 Dans l élément 10, 11pour Juste si contact avec les elements, X=210 et Y=55 Pour créer le mot-modèle, ajouter un élément Texte (élément 16) dans lequel vous tapez le mot POMME en majuscules, en séparant chaque lettre de deux espaces. Mettez la police en taille 20. Placez l élément au-dessus des zones cibles de telle sorte que chaque lettre corresponde à la zone cible. 32 MÉDIALOG N 68 JDÉCEMBRE 2008

Au clic sur la pomme verte de validation, l enfant saura si sa réponse est bonne ou non. Si elle est erronée, le mot se reconstitue automatiquement devant lui. Un élément Animation permet de réaliser cela. Dans la fenêtre Edition de la page, sélectionnez en ligne 17 Animation. Vous obtenez l élément 17 correspondant à un lecteur d animation disposant d un bouton Lire, d un bouton Réinitialiser, d un bouton Enregistrer et d un curseur dont on va voir la fonction. Sélectionnez les éléments 11 à 15 Dans l élément 17, cliquez sur le bouton rouge pour enregistrer la position des éléments sélectionnés, un point de repère apparaît sur la réglette du lecteur d animation Annulez la sélection en cliquant quelque part dans la page Dans l élément 17, déplacez le curseur à l extrême droite de la réglette Placez les pièces du puzzle dans le bon ordre sur les zones cibles Sélectionnez à nouveau les éléments 11 à 15 Cliquez sur le bouton rouge de l élément 17 pour enregistrer la nouvelle position des éléments Déplacez le curseur à l extrême gauche de la réglette pour retrouver la position initiale. Fermez la fenêtre et testez l animation en cliquant sur le bouton Lire. L animation obtenue n est pas celle que l on souhaite. Ce que l on veut, c est que le déplacement des pièces du puzzle se fasse à partir de la position donnée par l enfant. Pour cela il est nécessaire de supprimer le premier repère de l animation. Cliquez sur le bouton Editer de la page 7 Dans l élément Animation (élément 17), cliquez sur le point rouge du premier repère pour le sélectionner, puis cliquez sur la poubelle placée à la droit de la réglette Dans la fenêtre Edition de la page, cliquez sur Enregistrer. On désire qu un clic sur la pomme verte de validation déclenche cette animation uniquement en cas de mauvaise réponse. Il est nécessaire de limiter le nombre de tentatives à 1. Ouvrez la fenêtre de configuration de l élément Score (élément 3) puis ajoutez,+17 (avec la virgule et sans espace) à la seconde ligne de Visibilités liées au score Valider par Ok Ouvrez la fenêtre de configuration de l élément Bouton valider (élément 4) puis tapez 1 pour le nombre de tentatives. Pour terminer cette page, il vous reste à cacher l élément Animation par un texte vide, mais de fond blanc, en élément 18. Fermez la fenêtre d édition de la page et testez votre exercice. Pour la page 6, collez la page-type consigne et modifiez ses paramètres. Choisissez un fond vert, remplacez l illustration (élément 5) par le fichier puzzle.jpg et la consigne sonore (élément 6) par le fichier consigne3.mp3. Modifiez la consigne : Reconstitue le puzzle dans la zone bleue. Clique sur la pomme verte quand tu as terminé. Enregistrez votre projet en l état. Vous le compléterez avec le Comment faire? du prochain numéro de Médialog. En attendant, vous pouvez Générer le livre, ce qui vous permettra de l utiliser en situation de lecteur. Didapages commence par vérifier la présence et l utilisation des tous les médias importés lors de la conception du projet. Ensuite, il propose un Paramétrage qui, éventuellement, vous permet de définir différentes URL pour les fichiers associés. Vous pouvez omettre cette étape. Enfin, vous choisissez l emplacement dans lequel seront enregistrés tous les éléments constitutifs de vos pages, qui seront réunis dans un dossier unique portant le nom de votre projet. C est dans ce dossier que vous trouverez le fichier index.html qui vous permettra «d ouvrir votre livre». RÉALISER L ANIMATION Pour réaliser l animation, il est nécessaire de respecter scrupuleusement les étapes. À la fin, après avoir supprimé le premier repère, ne changez rien à l animation, au risque de devoir tout recommencer. Le curseur de l élément Animation est placé à gauche. Les éléments 11 à 15 (en position initilale) sont sélectionnés. Un clic sur le bouton Enregistrer (bouton rouge) place un premier repère par-dessus le curseur. Les éléments 11 à 15 sont désélectionnés. Le curseur de l élément Animation est placé à droite. Les éléments 11 à 15 sont déplacés puis sélectionnés. On enregistre leur nouvelle position (deuxième repère). Le curseur de l élément Animation est replacé à gauche. Le premier repère est sélectionné. Un clic sur la poubelle supprime le premier repère. 33