LiSMeL-Générateur v.2.0

Je désire écrire un commentaire:

LiSMeL-Générateur est un script développé en HTML, CSS et JavaScript utilisable dans un navigateur Internet tel que Internet Explorer, Firefox ... et qui vous permet de créer, sans rien connaître en programmation, des exercices avec listes déroulantes où l'utilisateur final devra choisir la bonne réponse parmi celles proposées dans la liste. Vous devez toutefois être capable de "copier, coller, ouvrir le "Bloc-notes" ou tout autre éditeur de texte, créer un dossier et enregistrer un fichier dans un dossier".
Editer un tel exercice, abstraction faite du temps nécessaire pour entrer le texte avec les listes, le texte annexe, les indices 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 indices, 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 1 - Introduction des paramètres, des questions, du texte, des indices, des commentaires et des images

- Au début du programme, il vous est demandé de préciser un certain nombre de paramètres. Faut-il :

ajouter un texte à lire,
fixer un délai pour effectuer l'exercice,
proposer un indice par liste,
ajouter un commentaire pour chaque mauvaise réponse,
afficher la bonne réponse lors de la correction,
donner la possibilité de recommencer,
séparer le script (.js) en JavaScript du fichier .html, ce qui rend la consultation des réponses plus compliquée pour l'utilisateur final.

- 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é à fixer un délai, vous devrez le choisir dans une liste déroulante.
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).
Si vous avez demandé à joindre un texte à lire, vous pourrez l'entrer dans un cadre tout au bas de la page.

- 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 boutons vous permettent d'appliquer une mise en forme à votre texte. Vous pouvez également prévisualiser le texte mis en forme. Vous pouvez revenir au texte en cliquant sur le bouton [Texte] dans le menu en haut de page.

- Entrez le texte qui contiendra les listes déroulantes dans le cadre prévu et indiquez au programme quels éléments constitueront des listes déroulantes. Consultez l'aide en ligne pour connaître la procédure à suivre!

- Si vous avez demandé à ajouter des indices/commentaires, une boîte de dialogue s'affichera pour chaque nouvelle liste que vous créerez. Entrez vos indices/commentaires, puis fermez la boîte en cliquant sur OK.

- Vous pouvez consulter/modifier les indices/commentaires déjà entrés en cliquant sur les boutons "Indices" ou "Commentaires".

- Pour insérer une image dans le titre, la consigne, le texte à listes, les indices, les commentaires, cliquez sur le bouton [Image] et suivez les instructions.

- Vous pouvez, à chaque instant, mais toutefois avant la génération du code, apporter des modifications aux paramètres, texte annexe, texte avec listes, indices ou commentaires.

- 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 é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 bouton [Prévisualiser], dans le menu en haut de l'écran, ouvre une fenêtre popup qui permet de voir à quoi ressemblera l'exercice dans un navigateur tel que Internet Explorer, Firefox etc.

- La fenêtre de 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" et vérifier les changements en cliquant sur [Prévisualiser].

- Une aide en ligne est fournie pour le choix des couleurs.

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 que vous devez sauver à part, mais toutefois dans le même dossier que votre fichier HTML.

- Attendez l'apparition du message "Génération terminée !" pour copier le contenu (déjà sélectionné) du cadre (cliquez sur , si le contenu est désélectionné).

- 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 (ou tout autre logiciel de traitement de texte en mode 'texte brut') 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é dans le cadre des "Paramètres" et doit être enregistré dans le même 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 !!

Sauvegarde et ouverture de fichiers (nouveau depuis la version 2.0)

Sauvegarde :

Pour ne pas perdre le fruit de votre travail et/ou le reprendre lors d'une prochaine session, il vous est désormais possible de sauver votre projet sur votre disque dur, clé USB etc.
A l'étape de génération de votre exercice, vous devrez signaler au programme si vous désirez conserver ou pas les données de votre projet. Si vous cliquez sur OUI, vous verrez apparaître un cadre dans lequel figureront toutes les informations nécessaires à LiSMeL pour ouvrir votre projet tel qu'il était lors de sa dernière génération.
Comme LiSMeL n'a pas accès à votre ordinateur, vous devrez copier/coller ces données vous-même dans le "Bloc-notes" et les sauver avec l'extension .js . Attention, si votre projet contient des images, sauvez les données dans le même répertoire que celui où se trouve votre dossier 'images/' !

Ouverture :

ATTENTION: Cette fonction n'est applicable que si vous travaillez en local, c'est-à-dire, si vous travaillez avec la version téléchargée de LiSMeL, et non depuis le site LDD-Soft ! De plus, si vous utilisez Firefox comme navigateur, vous devez sauver vos fichiers dans le même répertoire que 'LiSMeL.html'.

Dans LiSMeL, vous pouvez voir, dans le menu du haut de l'écran, un bouton [Ouvrir]. Ce bouton permet l'ouverture d'un fichier de données sauvé lors d'une génération précédente (voir 'Sauvegarde' ci-dessus).
En cliquant sur [Ouvrir], vous faites apparaître une petite boîte de dialogue vous invitant à entrer le nom du fichier à ouvrir. Cliquez sur le bouton 'Parcourir' pour ouvrir votre explorateur de documents et y rechercher le fichier voulu (extension .js). Une fois ce dernier trouvé, cliquez sur OK. Dès cet instant un petit cadre s'affichera, en haut à gauche, comportant le nom du fichier ouvert. LiSMeL chargera automatiquement toutes les données et vous proposera votre projet tel qu'il était avant sa dernière génération.
A partir de là, vous pouvez y apporter les modifications désirées.
Si votre projet contient un texte annexe, vous verrez apparaître son code dans un cadre spécial. Copiez/collez ce code en suivant les instructions en ligne.

visites.