Didacticiel pour concevoir un exercice en "Drag'n'drop"
Voir l'exemple : une carte des agglomérations françaises

Votre objectif : créer un "glisser déposer" d'étiquettes sur une image, ici une carte, sur laquelle il faudra positionner diverses localisations
Vous pouvez,en ligne, créer un nouvel exercice...
ou Télécharger le dossier complet (fichiers java, exercice, aide) de 86 ko zippé et travailler à partir de ce fichier d'aide.

Préparer votre image (en .jpg de préférence ; l'affichage des .gif peut poser problème)
en la positionnant dans le dossier DRAG

Selectionner votre fichier image

Utliser Internet Explorer car Netscape pose problème. Internet Explorer peut charger l'image sélectionnée et vous aider à déterminer les coordonnées .
Entrer la taille de l'image
Faire un "clic droit" sur l'image / Propriétés : relever les dimensions indiquées (nombre de pixels)

( With = Largeur totale = largeur de l'image / Height = Hauteur totale = hauteur de l'image + 20 ). La largeur doit être au minimum de 350.
Largeur totale (with) Hauteur totale (height)

Préparer le code
Après avoir cliqué sur SHOW IMAGE, vous devez voir votre image.
Cliquer là où une étiquette doit être positonnée :
s'affichent les coordonnées du point, au dessous de l'image.
(Eviter de mettre des points trop proches les uns des autres...
 il sera impossible de superposer des étiquettes ! )
Modifier tous les éléments de la liste comme indiqué :

 

<<< Changer les valeurs des chiffres des coordonnées dans
value="chiffres, chiffres"
(à la valeur Drop 1 correspond les coordonnées de l'étiquette NOM de Word 1)

Astuce : copier/coller les coordonnées qui s'affichent sous l'image

<<< Changer tous les "NOM" par le nom des étiquettes
<<< Ici, le code est prévu pour 15 étiquettes...
Si nécessaire supprimer les lignes inutiles ou, au contraire, en rajouter !
<<< Indiquer le nom du fichier image dans :
value="nomimag.jpg" (image en jpg)
<<< Vous pouvez modifer ces commentaires ..

<<<Indiquer les dimensions de l'image, comme indiqué ci dessus, dans :
<APPLET CODE=dadexc.class WIDTH=580 HEIGHT=600>

 

Finaliser le travail

>>Vous avez maintenant tous les renseignements pour modifier le code source du fichier "exercice.htm" :

1/sélectionner à la souris, dans la fenêtre ci-dessus, tout le texte et copiez le (Edition/Copier)
de
<APPLET CODE ....
..................
à </APPLET>

2/Afficher l'exercice . Dans Internet Explorer, Menu "Affichage" puis "Source" : vous avez édité le code source du fichier "exercice.htm" t Supprimer le texte de

APPLET CODE ....
..................
à </APPLET>

3/Coller le nouveau texte.

Attention à ne rien modifier d'autre !


4/Enregistrez sous un nouveau nom le fichier.
C'est presque fini... vous devez toutefois télécharger les fichiers "java" indispensables au bon fonctionnement. Vous positionnerez votre nouveau fichier dans le dossier "dragndrop". Lancez le... ça marche !


>>Attention, ne pas modifier ni supprimer les autres dossiers et fichiers....
>> Si vous ne voyez pas toutes les étiquettes, il suffirait d'augmenter la largeur dans "with" (faire des essais)
>> Désolé, pas d'aide supplémentaire : je ne sais pas programmer en java !

Créé par Tobias Poschwatta .Retrouvez la version originale en anglais de Mr. H.-H. Müller
qui a autorisé Gilles Badufle à l'adapter en français et à le modifier sur www.soshg.org