Voici une vue de l'exercice tel qu'il se présente lorsque tous les cadres sont ouverts : (taille réelle)

SlidingEx est un script "prêt à l'emploi" pour créer des exercices de construction de phrases par le déplacement d'éléments mélangés, en anglais, "drag and drop". Tout ce que vous devez faire, c'est entrer vos propres questions et données aux endroits prévus.
"SlidingEx" se compose de 3 fichiers :

SlidingEx.html : fichier HTML contenant le 'squelette' de l'exercice et dont vous pouvez modifier le nom,
slidingex.js : fichier contenant le script JavaScript pour l'exercice. Vous y modifiez les données, mais ne changez pas le nom de ce fichier.
slidingex.css : feuille de style pour l'exercice. Vous pouvez y modifier certaines données, mais ne changez pas le nom de ce fichier.

Lorsque vous voulez créer un exercice, vous commencez par copier ces 3 fichiers dans un nouveau dossier auquel vous donnez le nom de votre choix, par exemple, "CONSTRUCTION".
Vous renommez ensuite le fichier "SlidingEx.html" avec le nom de votre choix, par exemple "exercice_1.html".
Vous modifiez les données (paramètres, phrases, titre, consigne, aides et commentaires) dans le fichier "slidingex.js".
Vous pouvez aussi modifier, si vous vous en sentez capable, le fichier "slidingex.css" pour adapter le design à votre goût.

En poursuivant notre exemple, votre dossier "CONSTRUCTION" doit donc contenir un fichier nommé "exercice_1.html", un autre nommé "slidingex.js" et un troisième nommé "slidingex.css".

Pour exécuter l'exercice, il suffira de créer un lien depuis une page web vers le fichier .html, par exemple :
<a href="CONSTRUCTION/exercice_1.html target="_blank">Exercice 1</a>

Pour entrer vos propres données, vous ouvrez le fichier "slidingex.js" dans un éditeur de texte comme le Bloc-notes de Windows (Courier New, Standard, 10px), par exemple, et vous commencez par modifier, si vous le désirez, les "paramètres" suivants :

var help = true; // accorder une aide = "true", sinon "false" (complétez les données aide[0]=""; plus bas)
var comment = true; // commenter les réponses fausses = "true", sinon "false" (complétez les données com[0]=""; plus bas)
var corr = true; // afficher la réponse correcte = "true", sinon "false"
var again = true; // afficher le bouton [Recommencer] = "true", sinon "false"

Après cela, vous allez introduire vos phrases, votre titre, votre consigne, et éventuellement vos aides et vos commentaires, en respectant les indications fournies dans le script.

PHRASES : q[0]=""; (Vous écrivez votre phrase dans l'ordre correct entre les "", puis vous placez les délimiteurs | )
TITRE : var titre = ""; (Vous écrivez votre titre entre les "". Pour la mise en forme, voir indications fournies!)
CONSIGNE : var consigne = ""; (voir TITRE)
AIDES : aide[0]=""; (voir TITRE)
COMMENTAIRES : com[0]=""; (voir TITRE)

Veillez à ce que le nombre d'aides et/ou de commentaires soit égal au nombre de phrases !

Si vous ne voulez pas fournir d'aide ou de commentaire pour une phrase, faites : aide[19]=""; ou bien com[15]="";

Vous sauvez le fichier "slidingex.js" ainsi modifié dans le même dossier ...

et c'est tout !

Si vous voulez, en plus, modifier le design de l'exercice, il faut ouvrir le fichier "slidingex.css" et adapter les données à vos desiderata, à condition que vous sachiez ce que vous faites ! Pour vous guider, ce fichier est amplement commenté.

Pour voir la démo, c'est par ICI , pour télécharger le dossier SlidingEx v.1.0, c'est par LÀ .