GaPeX v.2.2 Générateur de textes lacunaires

Introduction

GaPeX est un script écrit en HTML, CSS et JAVASCRIPT permettant de créer très facilement des exercices interactifs de type "texte lacunaire", ou encore "texte à trous", 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 des "exercices à trous" avec une facilité déconcertante !

De plus, à côté du texte lacunaire 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 ...).

GaPeX 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 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)
afficher les éléments à trouver dans un ordre mélangé
fournir la possibilité de consulter un indice par trou
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 :

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.
Vous pouvez proposer dans ce cadre les réponses dans le désordre.
(voir 'Paramètres')
L'utilisateur final pourra ainsi employer le copier/coller ou
ou le glisser/déposer pour entrer ses réponses dans les trous.

Fermer

Entrez le texte dans le cadre ci-dessous.
Marquez ensuite les mots à cacher en les plaçant entre des accolades !
Veuillez n'utiliser les accolades que pour marquer les mots !
Consultez l'aide !

AIDE

Pour créer un trou, double-cliquez sur le mot, puis cliquez sur le bouton {...}
Pour créer un trou de plusieurs mots consécutifs, sélectionnez-les en glissant la souris dessus
et en maintenant le bouton gauche enfoncé, puis cliquez sur le bouton {...}.
Le programme supprime automatiquement l'éventuel espace en fin de sélection.
Pour annuler un trou, procédez comme ci-dessus, mais cliquez ensuite sur le bouton {X}.
Vous pouvez incorporer dans votre texte des balises HTML de mise en forme telles que, par exemple,
... pour le gras, ... pour l'italique, ... pour le souligné etc.
Une fois TOUS les trous créés, cliquez sur le bouton SAUVER.
Si vous avez choisi d'afficher des indices et/ou des commentaires, les boutons respectifs s'affichent.
Cliquez dessus pour entrer vos données.

Fermer

Configurer la page

AIDE

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 coloré s'affiche,
- cliquez dans le cadre et choisissez votre 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.

N.B.:
• vous pouvez entrer directement le code hexadécimal dans le champ,
• vous pouvez copier/coller les valeurs d'un champ à un autre.

IMPORTANT : Ne placez pas de signe # devant la valeur hexadécimale.

Fermer

PAGE
Couleur de fond

TITRE
Couleur de fond
Police de caractères
Couleur
Style
Graisse
Taille	pt.
Alignement

CONSIGNE
Couleur de fond
Police de caractères
Couleur
Style
Graisse
Taille	pt.
Alignement

CHRONOMETRE
Police de caractères
Couleur
Style
Graisse
Taille	pt.
Alignement

CADRE DE FOND DE L'EXERCICE
Couleur de fond

TEXTE LACUNAIRE
Couleur de fond
Police de caractères
Couleur
Style
Graisse
Taille	pt.

INDICES
Couleur de fond
Police de caractères
Couleur
Style
Graisse
Taille	pt.
Alignement

COMMENTAIRES
Couleur de fond
Police de caractères
Couleur
Style
Graisse
Taille	pt.
Alignement

SCORE
Couleur de fond
Police de caractères
Couleur
Style
Graisse
Taille	pt.
Alignement

CADRE DES BOUTONS
Couleur de fond
Alignement

TROUS
Couleur de fond
Police de caractères
Couleur

Générer le code

Génération du code HTML

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

Génération du code JS séparé

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

Texte à joindre :(Entrez le texte soit au clavier, soit par copier/coller, soit par glisser/déposer)
N.B.: vous pouvez redimensionner le cadre de texte au moyen de la poignée en bas à droite.

Insérer une image

ATTENTION !
- Toutes vos images doivent 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 GaPeX en ligne, 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 =

Code à copier/coller ou glisser/déposer à l'endroit où vous désirez voir apparaître l'image :

Si nécessaire, vous pouvez encore modifier les paramètres pour cette image. Cliquez ensuite sur OK.