Cette page génère une page html - javascript de schéma. L'utilisateur déplacera des calques que nous appellerons "déplaçables" vers d'autes calques "fixes", ces derniers pouvant être reliés par des flèches (fixes). Le calque déplaçable retourne à son emplacement d'origine s'il est mis à une mauvaise place.
Le script du Drag and Drop provient de la page de Stefan Koch
http://www.dpunkt.de/javascript/bsp/script2/dragdrop/index.html.
Cette page ne peut être utilisée que sous Internet Explorer mais le script généré sera utilisable sous Netscape Communicator 4.x, 6 et 7,
Mozilla 1.0, Internet Explorer, Opera 5.
Suivez l'ordre ci-dessous.
Cliquez sur la croix pour fermer ce calque

 

 

 

 

 

 

 

 

 

déplacez-moi en gardant le bouton gauche appuyé

Avec Internet Explorer les étiquettes se déplacent mieux en prenant le mot, avec Netscape en prenant le coin.
1) Créer les calques fixes : - définissez le nombre de calques (maxi 10): ... .
- placez-les au bon endroit (gardez le bouton gauche de la souris appuyé sur le calque pour le déplacer)
- modifier la taille et les couleurs des calques fixes
2) Mettre des flèches : - définissez le nombre de flèches (maxi 12) :
- placez-les au bon endroit .... - modifier les flèches et leur taille
3) Créer les calques déplaçables :
- définissez le nombre de calques déplaçables (maxi 12): .. ....
- placez-les à leur position de départ (gardez le bouton gauche de la souris appuyé sur le calque pour le déplacer)
- modifier le texte des calques déplaçables.(après vous ne pourrez plus les déplacer)
- modifier la taille et les couleurs des calques déplaçables
4) les bonnes réponses : enregistrer le numéro du calque fixe sur lequel chaque calque déplaçable doit être placé.
5) Pour terminer : modifier le texte des calques fixes .(après vous ne pourrez plus les déplacer)
6) options : - les calques déplaçables doivent-ils disparaître quand ils sont à la bonne place ?
- le score doit-il retirer un point en cas d'erreur ?

(utilisez l'ascenceur à droite pour le voir)




 

 

 

 

 

 

 

 

 

 

Le code de votre page d'exercice s'inscrit ci-dessous. Copiez-collez-le dans le bloc-note (ou dans la partie code de Dreamweaver). Enregistrez dans le format .htm (exemple : exercice1.htm). Dans le bloc-note, vous devez avoir sélectionné "tous les types de fichiers". Double-cliquez sur votre fichier pour le voir dans votre navigateur.
Les images doivent se trouver dans un sous-dossier "image".
Vous pouvez modifier votre page (ajouter un texte par exemple) dans Dreamweaver, FrontpageExpress ou Netscape Composer, mais ne modifiez pas la place des calques sinon vos réponses ne seraient plus valables, n'ajoutez pas de tableau dans les calques déplaçables.

 

Document réalisé par Isabelle Gautier protégé par la licence LLDL-v1, Licence de Libre Diffusion des Documents, http://pauillac.inria.fr/~lang/licence/v1/lldd.html . Vous pouvez librement utiliser, modifier et diffuser ce document mais uniquement à titre gratuit.