LiSMeL v.2.0 Générateur de textes avec listes déroulantes
Introduction
LiSMeL est un script écrit en HTML, CSS et JAVASCRIPT permettant de créer très facilement des exercices interactifs de type "texte avec listes déroulantes" destinés à être effectués dans un navigateur internet tel que, par exemple, Internet Explorer, Firefox ...
Pour atteindre cet objectif, il n'est pas nécessaire de connaître, ni de comprendre ces langages de programmation. L'interface du logiciel étant très intuitive, vous arriverez à créer très aisément des "exercices avec listes déroulantes" !
De plus, à côté du texte avec listes proprement dit, vous pourrez configurer l'exercice en sélectionnant certaines options (images, texte à lire, chronomètre, indices, commentaires ...) ou encore en lui appliquant un design personnel (choix des couleurs, de la taille des caractères ...).
LiSMeL se chargera de coder tout cela à votre place ! Il ne vous restera plus qu'à copier/coller le code et à sauver le fichier créé ! Simple, non ?!
Si vous vous sentez prêt à commencer, cliquez sur [Fixer les paramètres] dans le menu en haut de cette page !
Fixer les paramètres
Complétez les données suivantes : ( * = facultatif )
| Titre de la page [?] : | |
| Titre de l'exercice : | |
| Auteur de l'exercice * : | |
| Date de création * : |
Pour sélectionner un paramètre, cochez la case correspondante.
Si nécessaire, complétez les renseignements supplémentaires (délai, nom du fichier .js)
Je désire :
annexer un texte à
lire
fixer un délai pour effectuer
l'exercice ==> Délai : (min:sec)
fournir la possibilité de
consulter un indice par liste
ajouter un commentaire
pour chaque réponse fausse
montrer les bonnes
réponses en fin d'exercice
donner la possibilité de
recommencer l'exercice
sauver le code JavaScript
dans un fichier externe
==> Nom du fichier JavaScript : (avec l'extension .js !)
Créer les questions
Entrez la consigne pour l'exercice dans le cadre ci-dessous (Consultez l'aide!) :
- Entrez dans le cadre ci-dessous la consigne pour l'exercice. Expliquez ce que vous attendez de l'utilisateur final et la manière dont il doit s'y prendre.
- Vous pouvez utiliser la touche [Enter] pour faire un saut de ligne.
- Vous pouvez incorporer une/des image(s) dans la consigne en utilisant la fonction [Image] du menu.
- Pour mettre votre consigne en forme, vous pouvez utiliser les balises HTML de mise en forme telles que, par exemple, <b>...</b> pour le gras, <i>...</i> pour l'italique, <u>...</u> pour le souligné etc.
- Entrez votre texte dans le cadre ci-dessous (Consultez l'aide!).
- Marquez ensuite les éléments à transformer en liste en les plaçant entre des accolades !
- Complétez, entre les crochets, les options de la liste en les séparant au moyen du signe # , sans espace avant ou après !
- N'utilisez les accolades et les crochets que pour former les listes. N'en placez pas ailleurs dans le texte !
- CREER UNE LISTE
- Pour créer une liste, double-cliquez sur un mot, puis cliquez sur le bouton {...}.
- Pour sélectionner plusieurs mots consécutifs, faites glisser la souris dessus en maintenant le bouton gauche enfoncé, puis cliquez sur le bouton {...}.
- Le programme supprime automatiquement l'éventuel espace en fin de sélection.
- A la droite de l'accolade fermante ( } ), vous voyez apparaître, entre crochets, le début de la liste des options (choix), avec la bonne réponse en première position immédiatement suivie par le délimiteur #.
Complétez cette liste par les options que vous désirez en les séparant au moyen du délimiteur # ! Par exemple:
...{bonne réponse}[bonne réponse#autre option#autre option#autre option] ... - Lors de la génération, le programme mélangera les options de chaque liste.
- SUPPRIMER UNE LISTE
- Pour supprimer une liste, sélectionnez le(s) mots(s) comme expliqué plus haut, puis cliquez sur le bouton rouge {X}.
- MISE EN FORME
- Pour agrémenter votre texte, vos indices ou vos commentaires, vous pouvez utiliser les balises HTML de mise en forme telles que, par exemple, <b>...</b> pour le gras, <i>...</i> pour l'italique, <u>...</u> pour le souligné etc.
- Vous pouvez aussi incorporer des images dans le texte, vos indices et vos commentaires en utilisant le bouton [Image] dans le menu du haut de l'écran.
- INDICES - COMMENTAIRES
- Si vous avez choisi d'afficher des indices et/ou des commentaires, les boutons respectifs apparaissent au bas du cadre et les boîtes de dialogue respectives
s'ouvriront à chaque création d'une nouvelle liste.
Entrez-y vos données. Vous pourrez les modifier jusqu'au moment de la génération de l'exercice en cliquant sur les boutons 'Indices' ou 'Commentaires'.
Configurer la page
- Comment sélectionner une couleur?
- Par défaut, les fonds sont blancs (FFFFFF) et la police de caractères noire (000000).
- Cliquez dans le champ.
- Un cadre pour choisir la couleur s'affiche.
- Cliquez dedans et choisissez une couleur en maintenant le bouton gauche de la souris enfoncé.
- Vous pouvez modifier l'intensité au moyen du curseur de droite.
- Cliquez ensuite en dehors du cadre pour le fermer.
- La couleur choisie et son code hexadécimal s'affichent.
- Vous pouvez entrer directement le code hexadécimal dans le champ.
- Vous pouvez copier/coller les valeurs d'un champ dans un autre.
Générer le code
- Clic droit sur le code sélectionné, puis => Copier.
- Ouvrez le 'Bloc-notes', => clic droit, => Coller.
- Dans le Bloc-notes => Fichier, => Enregistrer sous...
- Donnez un nom valide à votre fichier et ajoutez .html comme extension.
- Votre exercice est terminé et prêt à être ouvert dans un navigateur ou à être uploadé sur votre site ou votre blog !
->
-> Procédez comme pour la page HTML, mais dans le Bloc-notes =>Fichier, ->;Enregistrer sous..., =>donnez le même nom au fichier JavaScript séparé que lors de la configuration.
Texte
N.B.: vous pouvez redimensionner le cadre de texte au moyen de la poignée en bas à droite.
Insérer une image
- L'image à insérer doit se trouver au préalable dans un dossier que vous aurez nommé "images" et qui sera situé au même niveau que votre exercice !
- Si vous utilisez LiSMeL en ligne depuis le site LDD-Soft, sachez que vos images ne s'afficheront pas lors des prévisualisations (mesure de sécurité des navigateurs).
Nom du fichier image : images/ (avec l'extension .jpg, .png ou .gif)
Largeur de l'image = px | Hauteur de l'image = px | Bordure de l'image = (0 = aucune bordure)
Texte alternatif pour l'image au cas où celle-ci ne s'afficherait pas :
Alignement de l'image =
Si nécessaire, vous pouvez encore modifier les paramètres pour cette image. Cliquez ensuite sur OK.