LiSMeL-Générateur v.1.1
Je désire écrire un commentaire:
Créé
par © 2009 Luc De DrooghLiSMeL-Générateur est un script développé en HTML, CSS et JavaScript qui vous permet de créer, sans rien connaître en programmation, des exercices avec listes déroulantes où il s'agit de choisir la bonne réponse parmi celles proposées. Vous devez toutefois être capable de "copier, coller, ouvrir le Bloc-notes, enregistrer un fichier dans un dossier".
Editer un tel exercice, abstraction faite du temps nécessaire pour entrer les questions, le texte et les commentaires éventuels, ne prend que deux à trois minutes, grand maximum !! Le programme génère un exercice en 3 étapes très simples :
Etape 1 - Introduction des paramètres, des questions, du texte, des commentaires et des images
Etape 2 - Configuration de la page Web
Etape 3 - Création du code-source et enregistrement du(des) fichier(s) Web
Etape 2 - Configuration de la page Web
Etape 3 - Création du code-source et enregistrement du(des) fichier(s) Web
Etape 1 - Introduction des paramètres, des questions, du texte, des commentaires et des images
- A l'ouverture du programme, il vous est demandé d'introduire 7
paramètres. Faut-il :
- Pour choisir un paramètre, cochez ou décocher la case correspondante, une case cochée signifiant que le paramètre est actif.
- Si vous avez demandé à joindre un texte, vous pouvez taper directement le texte au clavier; vous pouvez aussi procéder par copier/coller ou par glisser/déposer.
Plusieurs balises vous permettent d'appliquer une mise en forme à votre texte. Vous pouvez également prévisualiser le texte mis en forme. Terminez la phase d'entrée du texte en cliquant sur . Vous pourrez y revenir par la suite en cliquant sur le bouton .
- Entrez vos questions dans le cadre prévu et indiquez au programme quels éléments constitueront la liste déroulante en commençant par la bonne réponse. Pour cela, marquez la liste au moyen du caractère | juste avant et juste après les éléments.
Exemple : Après lundi vient |mardi@dimanche@jeudi@samedi| . Séparez les éléments de la liste au moyen du caractère @ .
- Vous pouvez consulter les questions et les commentaires déjà entrés en cliquant sur le bouton "[Liste des questions sauvées]". Cette fenêtre permet aussi de copier des parties de questions ou de commentaires afin de les coller dans la question en cours.
- Pour insérer une image dans la question, cliquez sur le bouton [Insérer une image] et suivez les instructions.
- Aussi longtemps que vous restez à l'étape 1, vous pouvez modifier vos données. Lorsque vous aurez introduit toutes vos questions, cliquez sur , pas avant , car vous ne pourrez plus faire marche arrière !
- Si vous avez oublié de définir certains éléments, le script vous le signale et vous permet de corriger le tir.
a. numéroter les questions,
b. chronométrer l'exercice,
c. ajouter un texte à lire,
d. ajouter un commentaire pour chaque mauvaise réponse,
e. afficher la bonne réponse lors de la correction,
f. donner la possibilité de recommencer,
g. séparer le script (.js) en JavaScript du fichier .html, ce qui empêche de consulter les réponses en affichant le code-source.
b. chronométrer l'exercice,
c. ajouter un texte à lire,
d. ajouter un commentaire pour chaque mauvaise réponse,
e. afficher la bonne réponse lors de la correction,
f. donner la possibilité de recommencer,
g. séparer le script (.js) en JavaScript du fichier .html, ce qui empêche de consulter les réponses en affichant le code-source.
- Pour choisir un paramètre, cochez ou décocher la case correspondante, une case cochée signifiant que le paramètre est actif.
- Si vous avez décoché la numérotation des questions, les phrases de l'exercice ne seront pas numérotées, ce qui permet d'obtenir un texte plus ou moins suivi.
- Si vous avez demandé un chronomètre, vous pourrez introduire votre délai lors de la 2me étape.
- Si vous avez demandé la séparation du script JavaScript de votre page HTML, vous devrez préciser le nom de ce fichier (extension .js) lors de la 2me étape. Recopiez-le, car vous devrez le réutiliser à l'étape 3 !
- Si vous avez demandé de joindre un texte à lire, vous pourrez l'entrer tant que vous serez à l'étape 1.
- Si vous avez demandé à joindre un texte, vous pouvez taper directement le texte au clavier; vous pouvez aussi procéder par copier/coller ou par glisser/déposer.
Plusieurs balises vous permettent d'appliquer une mise en forme à votre texte. Vous pouvez également prévisualiser le texte mis en forme. Terminez la phase d'entrée du texte en cliquant sur . Vous pourrez y revenir par la suite en cliquant sur le bouton .
- Entrez vos questions dans le cadre prévu et indiquez au programme quels éléments constitueront la liste déroulante en commençant par la bonne réponse. Pour cela, marquez la liste au moyen du caractère | juste avant et juste après les éléments.
Exemple : Après lundi vient |mardi@dimanche@jeudi@samedi| . Séparez les éléments de la liste au moyen du caractère @ .
- Vous pouvez consulter les questions et les commentaires déjà entrés en cliquant sur le bouton "[Liste des questions sauvées]". Cette fenêtre permet aussi de copier des parties de questions ou de commentaires afin de les coller dans la question en cours.
- Pour insérer une image dans la question, cliquez sur le bouton [Insérer une image] et suivez les instructions.
- Aussi longtemps que vous restez à l'étape 1, vous pouvez modifier vos données. Lorsque vous aurez introduit toutes vos questions, cliquez sur , pas avant , car vous ne pourrez plus faire marche arrière !
- Si vous avez oublié de définir certains éléments, le script vous le signale et vous permet de corriger le tir.
Etape 2 - Configuration de la page Web
Cette deuxième étape vous permet de créer le "design" de votre
exercice, son aspect à l'écran, tel que l'utilisateur final pourra le voir.
- Vous devez entrer un certain nombre de données, si vous désirez modifier la configuration par défaut.
Le paramètre "nom de l'auteur" est facultatif. Le paramètre "date" est généré automatiquement à la date réelle, mais vous pouvez la modifier si vous le désirez.
Les paramètres à modifier absolument sont :
- Le bouton ouvre une fenêtre popup qui permet de voir à quoi ressemblera l'exercice dans un navigateur tel que Internet Explorer ou Firefox . La fenêtre "Prévisualisation" n'est pas active, car elle ne contient pas le code JavaScript !! Si vous cliquez dedans, elle se ferme.
- Si l'aspect de votre exercice ne vous convient pas, vous pouvez introduire d'autres données dans le cadre "Configuration", aussi longtemps que vous n'appuyez pas sur .
- Vous devez entrer un certain nombre de données, si vous désirez modifier la configuration par défaut.
Le paramètre "nom de l'auteur" est facultatif. Le paramètre "date" est généré automatiquement à la date réelle, mais vous pouvez la modifier si vous le désirez.
Les paramètres à modifier absolument sont :
- le titre de votre exercice,
- la consigne (que doit faire l'utilisateur final ?),
- le temps imparti pour effectuer l'exercice, si vous avez demandé le chronomètre,
- le nom du fichier JavaScript, si vous avez demandé qu'il soit séparé de la page HTML.
- Le bouton ouvre une fenêtre popup qui permet de voir à quoi ressemblera l'exercice dans un navigateur tel que Internet Explorer ou Firefox . La fenêtre "Prévisualisation" n'est pas active, car elle ne contient pas le code JavaScript !! Si vous cliquez dedans, elle se ferme.
- Si l'aspect de votre exercice ne vous convient pas, vous pouvez introduire d'autres données dans le cadre "Configuration", aussi longtemps que vous n'appuyez pas sur .
Etape 3 - Création du code-source et enregistrement du(des) fichier(s) Web
Le code-source de votre
exercice est généré lors de cette étape. Il tient en une seule page Web, si
vous n'avez pas demandé à ce que le script JavaScript soit séparé du
code HTML.
Par contre, si vous l'avez demandé, un second cadre succède au premier. Ce dernier cadre contient le code JavaScript qu'il faut sauver à part.
- Cliquez sur pour sélectionner le contenu du cadre.
- Copiez ce contenu, soit en utilisant la souris (clic droit > copier), soit en utilisant les touches du clavier (Ctrl + C).
- Ouvrez le "Bloc-notes" de Windows et collez-y le code que vous avez copié (clic droit > coller) ou (Ctrl + V).
- Cela fait, toujours dans le Bloc-notes, cliquez sur 'Fichier', puis 'Enregistrer sous...'. Choisissez un emplacement dans la boîte de dialogue qui s'est affichée, donnez un nom valide (voir votre OS) à votre exercice, ajoutez l'extension .html et cliquez sur 'Enregistrer'. Votre exercice est terminé ! Du moins, si vous n'avez pas demandé à séparer le code JavaScript, car, dans ce cas, il faut effectuer la même démarche que celle décrite plus haut, sauf que l'extension sera .js et non plus .html !
IMPORTANT : le nom du fichier .js doit être le même que celui que vous avez renseigné lors de l'ETAPE 2 (configuration) et doit être enregistré dans le même répertoire (ou dossier) que le fichier .html !!
Par contre, si vous l'avez demandé, un second cadre succède au premier. Ce dernier cadre contient le code JavaScript qu'il faut sauver à part.
- Cliquez sur pour sélectionner le contenu du cadre.
- Copiez ce contenu, soit en utilisant la souris (clic droit > copier), soit en utilisant les touches du clavier (Ctrl + C).
- Ouvrez le "Bloc-notes" de Windows et collez-y le code que vous avez copié (clic droit > coller) ou (Ctrl + V).
- Cela fait, toujours dans le Bloc-notes, cliquez sur 'Fichier', puis 'Enregistrer sous...'. Choisissez un emplacement dans la boîte de dialogue qui s'est affichée, donnez un nom valide (voir votre OS) à votre exercice, ajoutez l'extension .html et cliquez sur 'Enregistrer'. Votre exercice est terminé ! Du moins, si vous n'avez pas demandé à séparer le code JavaScript, car, dans ce cas, il faut effectuer la même démarche que celle décrite plus haut, sauf que l'extension sera .js et non plus .html !
IMPORTANT : le nom du fichier .js doit être le même que celui que vous avez renseigné lors de l'ETAPE 2 (configuration) et doit être enregistré dans le même répertoire (ou dossier) que le fichier .html !!
Une fois cela terminé, cliquez sur le fichier HTML pour admirer le
résultat de votre travail dans votre navigateur !!
Pour les connaisseurs, il est à noter que le code généré par LiSMeL est validé tant XHTML 1.0
que CSS 2.1.
visites.