GaPeX-Générateur v.2.2

Je désire écrire un commentaire:

GaPeX-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 de type texte à trous, ou texte lacunaire, où il s'agit d'entrer la réponse dans une case.

A l'exercice, vous pouvez ajouter un chronomètre, un texte à lire, des indices, des commentaires et des images.

Même si vous ne devez rien connaître en programmation pour atteindre cet objectif, vous devez toutefois être capable de "copier/coller", de créer un répertoire, d'enregistrer des fichiers dans ce répertoire, ainsi que d'utiliser un éditeur de texte simple, tel que le Bloc-notes de Windows par exemple.

Editer un tel exercice, abstraction faite du temps nécessaire pour entrer les questions, le texte à lire, 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 et des commentaires
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 et des commentaires

- A l'ouverture du programme, il vous est demandé d'introduire, en plus du titre, de l'auteur et de la date, 8 paramètres facultatifs.
Vous pouvez :

a. joindre un texte à lire,
b. fixer un délai pour effectuer l'exercice,
c. afficher, dans le cadre de la consigne, les éléments à placer dans le texte,
d. ajouter un bouton 'Indice' pour chaque trou,
e. ajouter un bouton 'Commentaire' après chaque mauvaise réponse,
f. afficher les bonnes réponses non trouvées,
g. donner la possibilité de recommencer,
h. séparer le script (.js) en JavaScript du fichier .html, pour empêcher l'utilisateur final de consulter les réponses en affichant le code-source.

Pour répondre aux questions, cochez ou décocher la case correspondante, une case cochée signifiant que le paramètre est actif.

Si vous avez demandé un chronomètre, vous pourrez choisir le délai dans la liste déroulante qui s'affiche.
Si vous avez demandé de joindre un texte, vous pourrez l'entrer en cliquant sur le bouton [texte] du menu.
Si vous avez demandé d'afficher les éléments, le programme les affichera automatiquement dans l'ordre alphabétique, juste en dessous de la consigne.
Si vous avez coché la case 'Indice', le programme vous proposera d'entrer des indices personnalisés pour chaque trou dans le texte. L'exercice affichera, à côté du trou, un bouton permettant à l'utilisateur d'accéder à l'indice.
Si vous avez coché la case 'Commentaire', le programme vous proposera d'entrer des commentaires personnalisés pour chaque trou dans le texte. Lorsque l'utilisateur aura terminé l'exercice, chaque mauvaise réponse sera accompagnée d'un bouton permettant de lire le commentaire spécifique.
Si vous avez coché la case 'Montrer les bonnes réponses', l'exercice affichera, après que l'utilisateur aura poussé sur [Corriger], les bonnes réponses dans les champs respectifs.
Si vous avez coché la case 'Recommencer', l'exercice affichera un bouton [Recommencer] qui ré-initialisera tout.
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) dans le champs qui s'affichera. Recopiez-le, car vous devrez le réutiliser lors de la génération du code !

- Si vous avez demandé à joindre un texte, vous disposez d'un éditeur de texte, façon Word. Vous pouvez taper directement le texte au clavier; vous pouvez aussi procéder par copier/coller ou par glisser/déposer.
Plusieurs outils vous permettent d'appliquer une mise en forme à votre texte. Vous pouvez également prévisualiser le texte mis en forme. Vous pouvez même l'imprimer !

- Entrez votre texte lacunaire dans le cadre prévu et indiquez au programme quels éléments devront être remplacés par des cases d'introduction de données comme celle-ci : . Pour cela, marquez les éléments comme indiqué dans l'aide.

Exemple : Cet {élément} est marqué et sera {remplacé} par une case d'introduction de données.

Ce qui donnera dans l'exercice proposé à l'utilisateur final:

Cet est marqué et sera par une case d'introduction de données.

- Vous pouvez introduire les indices et/ou les commentaires en cliquant sur les boutons respectifs qui ne s'afficheront que lorsque vous aurez cliqué sur [Sauver].
Attention: une fois que vous aurez cliqué sur [Sauver], vous n'aurez plus accès au texte lacunaire ! Il sera bloqué !

- 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.

Si vous désirez modifier la configuration par défaut, vous devez entrer un certain nombre de données.
Le bouton [Prévisualiser], dans le menu en haut de page, 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 de prévisualisation n'est pas active, car elle ne contient pas le code JavaScript !! Si vous cliquez dedans, elle se ferme automatiquement.
Si l'aspect de votre exercice ne vous convient pas, vous pouvez modifier les données dans le cadre "Configurer la page" aussi longtemps que vous n'avez pas obtenu le résultat désiré.

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 lancer la génération du code-source de votre exercice.
Attendez que le message "Génération terminée !" s'affiche avant de continuer !!
Copiez le contenu qui a été sélectionné automatiquement par le programme, soit en utilisant la souris (clic droit > copier), soit en utilisant les touches du clavier (Ctrl + C).
Ouvrez un éditeur de texte, par exemple le "Bloc-notes" de Windows, et collez-y le code que vous avez copié (clic droit > coller) ou (Ctrl + V).
Cela fait, toujours dans votre édteur de texte, sous Windows par exemple, 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 "Fixer les paramètres" et doit être enregistré dans le même répertoire (= dossier) que le fichier .html !!

Images

Remarque : Pour ne pas provoquer d'erreur, veuillez ne pas incorporer d'image dans la case "Titre de la page".

Pour incorporer une image, cliquez sur le bouton [Image] dans le menu du haut et complétez les cases de la boîte de dialogue.

ATTENTION : vous devez créer au préalable un dossier que vous nommerez "images" (en minuscules) et que vous placerez dans le même répertoire que votre exercice.
Si vous travaillez en local, il est conseillé de placer provisoirement le dossier "images" dans le même répertoire que GaPeX, de manière à afficher les images lors des prévisualisations. Par après, vous placerez ce répertoire "images" dans le même dossier que votre page d'exercice.

Si vous travaillez en ligne, il vous sera impossible de voir les images lors des prévisualisations, car le logiciel n'a pas accès à votre disque dur (sécurité des navigateurs), ce qui est heureux d'ailleurs !!

Une fois cela terminé, cliquez sur le fichier HTML pour admirer le résultat de votre travail dans votre navigateur !!

visites.