Présentation

PeLMeL est un script développé en HTML, CSS et JavaScript qui vous permet de créer, sans connaissances en programmation, différents exercices de type construction de phrases, mise en ordre, classement, tri ....
Il s'agira pour l'utilisateur final de cliquer, dans le bon ordre, sur des éléments mélangés afin de reconstituer la réponse. Le temps pour effectuer l'exercice peut être limité ou pas et une aide peut être accordée ou pas. C'est vous qui décidez!

Prérequis : Pour produire un exercice avec PeLMeL, vous devez néanmoins être capable de ...
  1. créer un dossier,
  2. copier/coller,
  3. utiliser un éditeur de textes (Bloc-notes, Notepad++ etc.),
  4. sauver un fichier dans un dossier

Vos exercices pourront, par la suite, être chargés sur un ordinateur ou un site/blog pour être exécutés dans un navigateur internet tel que Internet Explorer, Google Chrome, Safari, Firefox ...

Ouvrir

En cliquant sur le bouton "Ouvrir" du menu, vous accédez à une boîte de dialogue vous permettant de charger le projet (fichier JavaScript) que vous aviez sauvé lors d'une session précédente (voir "Sauver").
Cette boîte de dialogue est différente si vous utilisez PeLMeL directement depuis le site ou depuis une copie téléchargée de l'application.

Si vous utilisez PeLMeL depuis le site, vous devrez d'abord rechercher votre fichier sur votre ordinateur, l'ouvrir dans un éditeur de textes et copier/coller le contenu dans le cadre qui apparaît à l'écran. Terminez en cliquant sur "Envoyer". Les données sont transmises au programme et vous retrouvez votre projet tel que vous l'aviez laissé lors d'une précédente sauvegarde. A partir de là, vous pouvez y apporter les modifications que vous désirez.

Si vous utilisez PeLMeL en local, c'est plus facile! Vous devrez tout d'abord cliquer sur le bouton "Parcourir" de la boîte de dialogue pour retrouver votre fichier (placez ce dernier au même niveau et dans le même répertoire que PeLMeL_v20.html). Cliquez ensuite sur "OK". Les données sont transmises au programme et vous retrouvez votre projet tel que vous l'aviez laissé lors d'une précédente sauvegarde. A partir de là, vous pouvez y apporter les modifications que vous désirez.

Sauver

Si vous désirez enregistrer votre travail, pour y revenir ultérieurement par exemple, cliquez sur le bouton "Sauver" du menu. Une boîte s'ouvre avec les données se rapportant à votre projet.
  1. cliquez sur le bouton "Sélectionnez tout",
  2. copiez/collez la sélection dans un éditeur de textes comme le Bloc notes ou Notepad++ par exemple,
  3. sauvez le fichier sous un nom de fichier valide, avec l'extension '.js'. Vous pourrez rappeler ce fichier, lors d'une session ultérieure, en utilisant le bouton "Ouvrir" du menu.
  4. cliquez sur le bouton "Fermer" de la boîte.

Paramètres (I)

Dans cette rubrique, vous êtes invité à entrer différents paramètres en rapport avec votre projet.
Les données des champs marqués d'un seul astérisque sont absolument nécessaires au programme et doivent donc être obligatoirement complétés. Certains champs sont facultatifs et sont signalés par 2 astérisques. Dans ce dernier cas, vous pouvez éventuellement effacer les données qui s'y trouveraient (par exemple, la date).
Champs à remplir :
  1. Titre de la page
    Entrez dans ce champ le titre qui va appraître dans la "barre de titre du navigateur".
  2. Titre de l'exercice
    Entrez le titre général que vous désirez donner à votre exercice. Vous pouvez utiliser les balises HTML.
  3. Sous-titre de l'exercice
    Indiquez ici le sous-titre de votre exercice (facultatif). Vous pouvez utiliser les balises HTML.
  4. Consigne générale pour l'exercice
    Entrez la consigne générale pour votre exercice. Vous pouvez utiliser les balises HTML. Sachez que, plus loin, vous avez la possibilité de donner une consigne particulière pour chaque question.
  5. Auteur de l'exercice
    Votre nom, groupe, association etc. (facultatif)
  6. Exercice créé le
    Par défaut le programme affiche la date du jour, mais vous pouvez l'effacer ou modifier la date. (facultatif)
Suivant

Paramètres (II)

Cases à cocher :
  1. ajouter une consigne propre à chaque question
    Cochez cette case si, pour chaque question, vous voulez avoir la possibilité d'entrer une consigne spécifique.
  2. fixer un délai pour réaliser l'ensemble de l'exercice
    En cochant la case, vous ferez apparaître un nouveau champ. Vous y entrez le délai dont l'utilisateur final disposera pour effectuer l'ensemble de l'exercice. Respectez le format indiqué, c-à-d, MM:SS.
  3. permettre de consulter des indices
    Si vous désirez aider l'utilisateur final, cochez cette case! Il vous sera demandé d'entrer un nombre d'indices valable pour l'ensemble de l'exercice. Par "indice", il faut entendre "prochain élément correct". Le programme indique également où sont les erreurs, garde la partie correcte avant la 1ère erreur et ajoute l'élément correct suivant, s'il existe.
  4. ajouter un commentaire positif et négatif par question
    Si vous désirez émettre un commentaire distinct pour une réponse correcte et pour une réponse incorrecte, cochez cette case!
  5. afficher les bonnes réponses
    Si vous cochez cette case, le programme affichera un bouton "Solutions" permettant, à tout moment, d'afficher les réponses attendues.
  6. donner la possibilité de recommencer l'exercice
    Si vous cochez cette case, le programme affichera, après la correction, un bouton "Recommencer".
Précédent

Questions (I)

Cliquez sur l'icône Ajouter une question pour afficher les champs de saisies de la première question. Chaque clic sur l'icône crée une nouvelle question.
Selon les paramètres que vous aurez définis, le programme affichera 1, 2, 3 ou 4 champs par question.
  1. S'il n'y a qu'1 seul champ, c'est celui de la question elle-même.
  2. S'il y a 2 champs, le premier est celui de la consigne spécifique à la question et le second celui de la question.
  3. S'il y a 3 champs, le premier est celui de la question et les 2 derniers concernent les commentaires après une réponse correcte et après une réponse incorrecte.
  4. S'il y a 4 champs, le premier est celui de la consigne spécifique à la question, le deuxième celui de la question et les 2 derniers concernent les commentaires après une réponse correcte et après une réponse incorrecte.
Comment entrer une question? Trois possibilités. La question est composée de :
  1. un seul mot : entrez le mot; le programme se chargera de le découper et d'en mélanger les lettres.
    Exemple: ANAGRAMME
  2. plusieurs mots séparés par des espaces : entrez les mots; le programme se chargera de découper à chaque espace et de mélanger les mots. Exemple: J'ai bien compris la procédure à suivre.
  3. plusieurs mots séparés par des espaces, mais délimités par des | (pipes): entrez les mots et placez un | à l'endroit où il doit y avoir une coupure. Le programme se chargera de couper à chaque | et de mélanger les éléments. Exemple: J'ai |bien compris |la procédure |à suivre.
Remarque: passez la souris sur les éléments soulignés en pointillés pour voir un exemple de transformation. Notez que dans l'exercice créé, il n'y aura pas les crochets.
Suivant

Questions (II)

Voici comment se présentent les champs de saisie pour une question avec consigne spécifique et commentaires
(remarquez que des balises HTML ont été employées dans la consigne et le commentaire après réponse incorrecte) :
question

Pour chaque question, les icônes suivantes Icônes permettent respectivement de :

  1. faire monter la question dans la liste (flèche vers le haut),
  2. faire descendre la question dans la liste (flèche vers le bas),
  3. supprimer la question de la liste (croix rouge),
  4. insérer une question dans la liste (flèche rouge vers la droite).

Précédent

Configuration

La rubrique "Configuration" vous permet de donner une certaine mise en forme à votre exercice. Par exemple, vous pouvez déterminer de quelle couleur sera le fond de la page, la police et la taille des caractères, la couleur de la police etc.

Vous pouvez contrôler à tout moment le résultat en cliquant sur le bouton "Preview" (Prévisualisation) du menu principal.
Les couleurs

Les couleurs sont exprimées en valeurs hexadécimales précédées du signe "#". Pour modifier une couleur par défaut, cliquez dans le champ. Un petit cadre s'affichera et vous pourrez sélectionner votre couleur en déplaçant la petite croix "+" et en modifiant la luminosité grâce au curseur situé à droite.

couleurs

Prévisualisation

Pour vous permettre de contrôler l'avancement de votre projet, cliquez sur le bouton "Preview" du menu principal.
Une nouvelle fenêtre (popup) s'ouvrira et vous montrera à quoi ressemblera exactement votre exercice au stade actuel. Cette fenêtre est active, vous pouvez donc vérifier si tout fonctionne bien!

Le simple fait de cliquer sur "Preview" entraîne automatiquement une génération du code-source de l'exercice.
Vous pouvez voir ce code dans les rubriques "HTML", "JAVASCRIPT" et "STYLE".

Exemple de prévisualisation (attention, ceci n'est qu'une image inactive!)

N.B.: puisque le logiciel PeLMeL utilise des fenêtres popups, veuillez vous assurer que votre navigateur ne les bloque pas!

Génération

Lorsque vous estimez avoir terminé la préparation de votre exercice, cliquez sur le bouton "Générer" dans le menu principal.
Si vous n'avez pas oublié d'éléments essentiels à l'exercice, le logiciel affichera le code-source de votre exercice en 3 parties :
  1. le code HTML,
  2. le script en JavaScript,
  3. le code CSS pour la feuille de style.
A partir de là, vous pouvez sauver les trois fichiers ci-dessous. Vous cliquez sur le bouton "Sélectionner tout", puis vous faites un "copier/coller" dans un éditeur de texte.
Depuis votre éditeur, vous sauvez chaque fichier, comme indiqué dans le logiciel, dans un seul et même dossier(répertoire).

Vous pouvez également décider de ne pas encore sauver les 3 fichiers, mais d'apporter certaines modifications à votre projet.

Enfin, vous pouvez vous contenter de "Sauver" votre projet pour y revenir plus tard.

Balises HTML

Pour vous permettre d'appliquer une certaine mise en forme supplémentaire à celle de la rubrique "Configuration", vous pouvez utiliser les balises HTML suivantes dans le titre de l'exercice, le sous-titre, la consigne générale, les consignes spécifiques et les commentaires.
BaliseSignificationFormeRésultat
<br />saut de ligne
<hr />ligne horizontale<hr />
<h1>...</h1>titre de niveau 1<h1>mot</h1>

mot

<h2>...</h2>titre de niveau 2<h2>mot</h2>

mot

<h3>...</h3>titre de niveau 3<h3>mot</h3>

mot

<h4>...</h4>titre de niveau 4<h4>mot</h4>

mot

<h5>...</h5>titre de niveau 5<h5>mot</h5>
mot
<h6>...</h6>titre de niveau 6<h6>mot</h6>
mot
<b>...</b>gras<b>mot</b>mot
<i>...</i>italique<i>mot</i>mot
<u>...</u>souligné<u>mot</u>mot
<small>...</small>texte écrit plus petit<small>mot</small>mot
<big>...</big>texte écrit plus grand<big>mot</big>mot
<s>...</s>texte barré<s>mot</s>mot
<sub>...</sub>texte en indicemot<sub>mot</sub>motmot
<sup>...</sup>texte en exposantmot<sup>mot</sup>motmot
<b><i>...</i></b>gras et italique<b><i>mot</i></b>mot