DroPeX permet de créer très rapidement et très facilement des exercices de déplacements d'étiquettes de type "drag and drop" où l'utilisateur final doit déplacer des étiquettes à l'aide de la souris et les positionner aux endroits déterminés. Comme vous l'aurez deviné, le programme tire son nom de la contraction des mots anglais "drag and drop" et "exercise".
Aucune connaissance particulière en programmation n'est requise pour fabriquer de tels exercices à l'aide de DroPeX.
Il faut simplement être capable de :
- décompresser un dossier zippé (extension .zip).
- utiliser un logiciel de traitement de texte basique, comme le Bloc-notes par exemple,
- créer un répertoire sur votre disque dur,
- copier/coller des fichiers,
Pour le reste ... donnez libre cours à votre imagination !
Le dossier data.zip, nécessaire uniquement si vous voulez "sonoriser" votre exercice, contient, après décompression, le dossier "data". Ce dossier, qui devra accompagner votre exercice, comprend les fichiers suivants:
- dragdrop.js (fichier javascript pour les déplacements d'étiquettes)
- faux.mp3 (son en cas de réponse fausse)
- fin.mp3 (son en fin d'exercice)
- correct.mp3 (son en cas de réponse correcte)
- dewplayer.swf (fichier flash nécessaire pour jouer les sons)
- Tout d'abord, créez un dossier sur votre disque dur avec le nom que vous voulez.
- Ensuite, placez l'image de l'exercice (l x h max. = 800 x 600 px, 500Ko max.) dans ce dossier.
- Vous y placez aussi le dossier "data" dézippé (voir "Le ZIP"), si vous voulez du son.
- Cliquez/Double-cliquez (selon votre configuration) sur "Utiliser DroPeX" dans le menu de la fenêtre "DroPeX-Générateur". Le programme démarre !
-
Si vous utilisez Internet Explorer 10, vous devrez rendre celui-ci compatible avec le logiciel en procédant comme suit:
- Cliquez sur "Outils",
- dans la liste déroulante, choisissez "Outils de développement F12,
- dans la page qui s'est ouverte, cliquez sur "Mode navigateur : IE10",
- cochez "Internet Explorer 8".
Votre navigateur se comportera comme s'il s'agissait de la version 8, version avec laquelle fonctionne DroPeX.
- Cliquez sur le bouton "Parcourir" pour ouvrir votre "Explorateur de documents".
- Recherchez votre image dans le dossier que vous venez de créer, puis cliquez sur "Ouvrir".
- Le chemin vers l'image s'affiche dans le champ situé à la gauche du bouton "Parcourir".
- Cliquez ensuite sur le bouton "Envoyer" pour uploader votre image sur le site LDD-Soft.
- Après quelques instants, si tout est ok, votre image apparaît dans le coin supérieur gauche de votre écran.
- Le panneau de contrôle vient se placer juste en dessous de votre image. Déplacez-le à l'endroit qui vous convient!
Le mot "calque" désigne le rectangle que vous positionnez sur l'image et sur lequel l'utilisateur final devra déposer une étiquette.
Le mot "étiquette" désigne, quant à lui, un rectangle ayant les mêmes dimensions que le calque et contenant le(s) mot(s) à déplacer vers le calque qui convient. Dans l'exercice, la colonne des étiquettes se trouvera à la droite de l'image.
Pour créer un calque :
- cliquez à l'endroit voulu sur l'image. La position du clic représente en fait le coin supérieur gauche du calque.
- Chaque calque porte un nom unique pour les besoins du programme. Ce nom n'apparaît plus dans l'exercice finalisé.
- Si la position du calque ne vous convient pas, vous pouvez la modifier à tout moment par glisser/déposer.
ATTENTION : les calques ne peuvent pas toucher les bords de l'image ! - Vous pouvez supprimer un calque en faisant un clic droit dessus. Une confirmation de suppression vous sera demandée pour éviter tout clic malencontreux.
Pour créer une étiquette :
- double-cliquez sur un calque. Une petite boîte de dialogue s'ouvre et vous demande d'entrer un libellé pour l'étiquette.
Vous pouvez provoquer un saut de ligne dans un libellé en insérant la balise <br /> à l'endroit où il doit se produire (au besoin, modifiez les dimensions des calques et/ou modifiez la taille de la police).
Fermez la boîte soit en cliquant sur le bouton OK, soit en enfonçant la touche ENTER du clavier. - Astuce : Vous pouvez faire d'une pierre deux coups en double-cliquant d'emblée à l'endroit où vous désirez créer un calque; celui-ci apparaît et la boîte de dialogue pour l'étiquette s'ouvre au même moment!
Vous pouvez modifier la configuration par défaut des calques ou des étiquettes, d'une part, via le bouton "Paramètres" et, d'autre part, via le bouton "Configurer".
PARAMETRES
- Largeur / hauteur : valable aussi bien pour les calques que pour les étiquettes,
- Police des étiquettes : valable pour les étiquettes, mais vérifiable dans les calques en création,
- Taille de la police : idem,
- Fond des calques : valable uniquement pour les calques (pour les étiquettes, voir "Configurer"),
- Bordure des calques : idem.
A la rubrique "Etiquette", vous pouvez modifier les valeurs par défaut des étiquettes :
- la couleur de fond,
- la couleur de la police,
- le style de la bordure,
- la couleur de la bordure.
Pour modifier le libellé d'une étiquette, double-cliquez dessus et entrez un nouveau libellé dans la boîte de dialogue (voir Créer une étiquette).
Pour supprimer une étiquette, cliquez dessus avec le bouton droit de la souris. Une confirmation de suppression vous est demandée, ceci pour éviter tout clic droit malencontreux. Si vous désirez réellement supprimer l'étiquette, cliquez sur 'Ok', sinon cliquez sur 'Annuler'.
Cette boîte de dialogue permet de déterminer l'aspect graphique de votre exercice, ainsi que certains paramètres indispensables, tels que le titre, la consigne etc.
La boîte de dialogue "Configurer" contient les éléments suivants :
- Auteur : ce paramètre est facultatif. Vous pouvez entrer votre nom, par exemple.
- Page : vous pouvez déterminer la couleur de fond de votre exercice, ainsi que la marge par rapport au bord supérieur de la fenêtre. Par défaut, cette marge est fixée à 20px.
- Colonne de droite : cette colonne contient le titre, la consigne et les étiquettes. Vous pouvez déterminer sa couleur de fond, ainsi que sa largeur. La largeur par défaut est 98px. Si vous utilisez une image assez large, veillez à ne pas exagérer la largeur de la colonne de droite. Pensez à ceux qui n'ont pas votre résolution d'écran !
- Titre de l'exercice : vous y indiquez le titre que vous voulez donner à votre exercice. Rendez-le le plus court possible, car l'espace est compté ! Vous pouvez modifier les valeurs par défaut des autres paramètres.
- Consigne pour l'exercice : vous y indiquez la consigne pour votre exercice. Rendez-la la plus courte possible ! Vous pouvez modifier les valeurs par défaut des autres paramètres.
- Etiquette : voir Créer une étiquette .
- Score : Le score s'affiche au bas de l'exercice. Vous pouvez modifier les valeurs par défaut.
Cette partie du script "DroPeX" va rassembler toutes les données que vous avez entrées et ouvrir, dans votre navigateur internet, une fenêtre popup contenant votre exercice.Vérifiez par conséquent si le bloqueur de popups n'est pas activé dans votre navigateur! Cette fenêtre est active et vous permet par conséquent de voir à quoi ressemble votre exercice au moment du clic sur le bouton 'Générer'.
A ce stade, vous pouvez, soit refermer tout simplement la fenêtre et poursuivre votre travail, soit, si le résultat vous convient, sauver et terminer votre exercice.
Lorsque vous estimez que la préparation de votre exercice est terminée, vous allez sauver son code-source.
- Cliquez tout d'abord sur le bouton "Générer l'exercice" pour provoquer l'affichage de la fenêtre popup.
- Faites un clic droit sur la fenêtre, puis, dans le menu contextuel, cliquez soit sur "Afficher la source" (Internet Explorer), soit sur "Code source de la page" (Firefox). Vous pouvez aussi utiliser 'Affichage' dans la barre de menus de votre navigateur.
Sous Google Chrome et Safari, faites un clic droit sur la fenêtre, puis, dans le menu contextuel, cliquez sur "Inspecter l'élément", puis sur l'onglet "Éléments". - Une nouvelle fenêtre s'ouvre avec le code-source de votre exercice.
- Sélectionnez et copiez le code (soit avec la souris, soit via le menu 'Edition', soit via les touches du clavier).
Sous Google Chrome et Safari, réduisez le code à 2 lignes en cliquant sur les triangles. Sélectionnez la 1ère ligne, puis CTRL+C pour la copier. Ensuite, collez-la dans un éditeur de texte tel le 'Bloc-notes'. Cliquez droit sur la 2me ligne et choisissez 'Copy as HTML' ou 'Copier comme HTML' et collez dans votre éditeur. (sautez les étapes 5 et 6 ci-dessous) - Ouvrez votre logiciel de traitement de texte (le 'Bloc-notes' par exemple) en mode 'texte normal' ou 'texte plain' ou 'format txt'.
- Collez-y le code que vous avez copié.
Recherchez dans le code la balise <img src="../upl/(votre image) alt="" /> et effacez ../upl/, sinon l'image sera introuvable! - Sauvez le code dans le dossier que vous avez préparé sous le nom que vous voulez, mais avec l'extension .html.
- Assurez-vous que votre dossier contient bien : l'image, l'exercice et le dossier "data" (facultatif).
- Votre exercice est prêt !
- Lorsque vous refermerez la fenêtre, un message s'affichera pour vous annoncer que votre image a été supprimée du site LDD-Soft, pas de votre dossier bien sûr!!
© 2013- Luc De Droogh ~ LDD-Soft