SimpleQuizBuilder
SimpleQuizBuilder v.1.1 © 2013 Luc De Droogh


Qu'est-ce que c'est?

Simple Quiz Builder est un script écrit en HTML, JavaScript et CSS, prêt à l'emploi, qui permet de créer très facilement des exercices de type QCM à effectuer dans un navigateur internet, tel que Internet Explorer ou encore Firefox, etc.


Quelles sont les possibilités de Simple Quiz Builder?

Avec  Simple Quiz Builder, vous disposez d'un outil efficace pour rédiger rapidement des exercices à choix multiples présentant les particularités suivantes :

Comment créer un exercice avec Simple Quiz Builder?

  1. le sous-dossier "_SQB_EXEMPLE" : c'est le dossier qui contient une démo de SimpleQuizBuilder,
  2. le sous-dossier "docs" : placez-y vos documents (.txt, .html ou .pdf),
  3. le sous-dossier "images" : placez-y vos fichiers images, tout en y laissant les fichiers "no.png", "yes.png" et "info.gif",
  4. le sous-dossier "js" : qui contient les scripts "sqb_encrypted.js" et "questions.js",
  5. le sous-dossier "sons" : placez-y vos fichiers son (uniquement au format mp3),
  6. le sous-dossier "style" : qui contient les feuilles de style "noir.css", "bleu.css" et "vert.css",
  7. COULEURS_HEXA.html : qui est un fichier présentant les différentes couleurs avec leurs valeurs hexadécimales. Ce fichier est destiné à vous aider lors de la mise en forme de votre QCM.
  8. player.swf : qui est le lecteur Flash pour les fichiers son mp3,
  9. rgbeditor.png : qui est une image utilisée par ce fichier-ci,
  10. simplequizbuilder.png : qui est une image utilisée par ce fichier-ci,
  11. SQB.html : qui est le fichier de base et que vous pouvez renommer comme il vous convient, en respectant la syntaxe,
  12. SQB_aide.html : le fichier d'aide que vous lisez en ce moment,

    Comment compléter le fichier "questions.js" ?

OUVREZ CE FICHIER SOIT AVEC LE BLOC-NOTES, SOIT AVEC NOTEPAD++, SOIT AVEC TOUT AUTRE LOGICIEL DE TRAITEMENT DE TEXTE QUI ACCEPTE LE FORMAT txt (texte brut)(police "Courier New").
CE FICHIER DOIT CONSERVER SON NOM D'ORIGINE, A SAVOIR : "questions.js" (en minuscules)


VARIABLES QUE VOUS DEVEZ MODIFIER

TITRE DU QUIZ
Indiquez entre les guillemets le titre du QUIZ !
var titre="Titre du Quiz";

CONSIGNE
Indiquez entre les guillemets la consigne pour votre QUIZ ! Que doit faire l'utilisateur final?
var consigne="Consigne pour le Quiz";

AUTEUR
Indiquez entre les guillemets le nom de l'auteur du QUIZ (vous-même)[facultatif]!
var auteur="Nom de l'auteur des questions";

ORDRE DES QUESTIONS
Indiquez "var mix=1;" pour mélanger les questions à chaque chargement de la page ou "var mix=0;" pour ne pas mélanger les questions .
var mix=1;

NOMBRE DE QUESTIONS A POSER
Indiquez le nombre de questions à poser. Vous pouvez, en effet, décider de ne pas les poser toutes.
Si vous laissez la valeur sur 0, le programme posera toutes les questions entrées dans le fichier "questions.js" !
var nb_q=0;

PENALITES
Points à décompter pour chaque erreur (par exemple 0.3, 0.5, 0.8, 1 etc.); indiquez "var penalite=0;" pour ne rien décompter si l'utilisateur final commet une erreur.
var penalite=0.5;

REESSAYER
Indiquez "var encore=1;" si vous désirez laisser la possibilité, après une erreur, de cocher une autre proposition; sinon indiquez "var encore=0;"
var encore=1;

RECOMMENCER
Si vous voulez afficher le bouton "Recommencer" en fin d'exercice, indiquez : var recommencer=1; , sinon indiquez : var recommencer=0;
var recommencer=1;

COMPTE A REBOURS
Si vous désirez fixer un DÉLAI DE RÉPONSE, indiquez-le selon le format suivant :
qst[n][10]="00:30";  (pour un délai de 30 secondes par exemple) , ou bien
qst[n][10]="01:15";  (pour un délai d' 1 minute et 15 secondes)
Vous pouvez fixer un DÉLAI DIFFÉRENT d'une question à l'autre !
Si vous ne voulez pas de délai pour une question, n'indiquez rien entre les guillemets : qst[n][10]="";
Tenez compte du temps nécessaire pour examiner une image, lire un texte annexé, consulter un site internet ou pour écouter un fichier son !!


QUESTIONS, PROPOSITIONS ET COMMENTAIRES

Respectez bien la numérotation !!

Si vous voulez moins de 4 propositions, n'entrez rien, par exemple, entre les guillemets de qst[n][3]="";   ou de   qst[n][4]=""; .

Si vous devez employer un guillemet (") dans ce que vous entrez au clavier, faites le précéder de l'anti-slash, ce qui donne →  \" :
Exemple : qst[n][0]="Qui a dit:\"Veni, vidi, vici\" ?";

Pour forcer un saut de ligne, insérez dans votre texte la balise <br /> .

AUTRES BALISES UTILES POUR LA MISE EN FORME
Pour donner une certaine mise en forme à vos entrées texte, vous pouvez utiliser les balises HTML suivantes (N.B.: laissez bien l'anti-slash devant le slash!) :
 <b>...<\/b> [=gras]
 <i>...<\/i> [=italique]
 <u>...<\/u> [=souligné]
 <sup>...<\/sup> [=exposant]
 <sub>...<\/sub> [=indice]
 <big>...<\/big> [=taille de police plus grange]
 <small>...<\/small> [=taille de police plus petite]

Vous pouvez combiner plusieurs balises : <b><u>...<\/u><\/b> [= gras et souligné] (Veillez à bien imbriquer les balises!!)


UTILISER DES COULEURS
Pour modifier la couleur de la police, placez le code suivant autour du(des) mot(s) dont vous voulez modifier la couleur :
<span style='color:#valeur_hexadécimale'>....<\/span>

Exemple : <span style='color:#FF0000'>Mots en rouge<\/span> , ce qui donnera à l'écran : Mots en rouge

Vous trouverez un tableau complet des couleurs et de leurs valeurs hexadécimales dans le document annexé "COULEURS_HEXA.html".
Vous pouvez aussi télécharger un petit logiciel très utile qui s'appelle "RGBéditor : Télécharger RGBéditor


COMMENTAIRES
Pour n'afficher aucun commentaire pour une proposition donnée, n'écrivez rien entre les guillements : qst[n][8]="";
Vous pouvez aussi choisir de ne mettre aucun commentaire nulle part. Dans ce cas, laissez tous les commentaires vides comme ci-dessus.


 ATTENTION: N'AJOUTEZ PAS DE PROPOSITION (4 max.), NI DE COMMENTAIRE (4 max.) SUPPLÉMENTAIRE, SI VOUS IGNOREZ COMMENT LE FAIRE, car il y a aussi des modifications à apporter au script "sqb_encrypted.js" !
 SI VOUS DESIREZ EN AJOUTER, CONTACTEZ-MOI VIA LA PAGE DE CONTACT DE MON SITE à l'adresse:
http://www.ldd-soft.be/


INSERER UNE IMAGE
Pour insérer une image dans une question, une proposition ou un commentaire, vous devez :
- placer préalablement votre image dans le sous-dossier "images" du dossier "Simple Quiz Builder",
- entrer à l'endroit désiré la ligne de code ci-dessous (UTILISEZ LE COPIER/COLLER !) et modifier le paramètre "mon_image.extension" :

&nbsp;&nbsp;<img src='images/mon_image.extension' alt='' />

Par exemple, si vous voulez insérer une image dont le nom est "bidule.gif" :
&nbsp;&nbsp;<img src='images/bidule.gif' alt='bidule' />


INSERER UN SON
Pour insérer un son dans une question, une proposition ou un commentaire, vous devez :
   - placer préalablement votre fichier son (format mp3!!) dans le sous-dossier "sons" du dossier "Simple Quiz Builder",
   - entrer le code qui suit à l'endroit désiré (UTILISEZ LE COPIER/COLLER !) et modifier le paramètre "nom_fichier.mp3" :

&nbsp;&nbsp;<object type='application/x-shockwave-flash' data='player.swf' width='125' height='20'><param name='movie' value='player.swf' /><param name='FlashVars' value='mp3=sons/nom_fichier.mp3&amp;showslider=1&amp;width=125&amp;bgcolor=000000&amp;bgcolor1=0000FF&amp;bgcolor2=FFFFFF&amp;showstop=1' /></object>


Par exemple, si vous voulez insérer un fichier son dont le nom est "tambour.mp3" :

&nbsp;&nbsp;<object type='application/x-shockwave-flash' data='player.swf' width='125' height='20'><param name='movie' value='player.swf' /><param name='FlashVars' value='mp3=sons/tambour.mp3&amp;showslider=1&amp;width=125&amp;bgcolor=000000&amp;bgcolor1=0000FF&amp;bgcolor2=FFFFFF&amp;showstop=1' /></object>


NOTES :
• si vous choisissez la feuille de style "bleu.css", modifiez "bgcolor=000000" en "bgcolor=004080"
• si vous choisissez la feuille de style "vert.css", modifiez "bgcolor=000000" en "bgcolor=00753A"
• vous pouvez aussi modifier les couleurs du lecteur en changeant les valeurs hexadécimales de bgcolor1 et de bgcolor2.
• vous pouvez masquer la barre de progression du lecteur en mettant la valeur 0, au lieu de 1, après showslider=.



DOCUMENTS ANNEXÉS
Vous pouvez, pour chaque question, annexer un document à consulter (fichier au format .txt, .html, .pdf ou lien URL).
Placez ces fichiers dans le sous-dossier "docs"  du dossier "Simple Quiz Builder" et indiquez pour la question concernée :
           qst[n][11]="docs/nom_du_fichier.txt";
ou       qst[n][11]="docs/nom_du_fichier.html";
ou       qst[n][11]="docs/nom_du_fichier.pdf";
ou       qst[n][11]="http://www.adresse.com"; (adresse internet)
ou       qst[n][11]=""; (aucun document à lire)


LES DONNEES (le questionnaire proprement dit)
Ci-dessous, tous les paramètres pour la question n° 1 :
qst[n][0]="Votre question ici";
qst[n][1]="Proposition A";
qst[n][2]="Proposition B";
qst[n][3]="Proposition C";
qst[n][4]="Proposition D";
qst[n][5]="A";
qst[n][6]="Commentaire pour le choix A";
qst[n][7]="Commentaire pour le choix B";
qst[n][8]="Commentaire pour le choix C";
qst[n][9]="Commentaire pour le choix D";
qst[n][10]="00:15";
qst[n][11]="fichier_texte.txt";
← question 1
proposition A
proposition B
proposition C
proposition D
lettre de la réponse correcte (A,B,C ou D)
commentaire si option A est cochée
commentaire si option B est cochée
commentaire si option C est cochée
commentaire si option D est cochée
délai pour répondre à la question (15 sec. ici)
nom du document annexé à la question 1

    Et ensuite?

Il n'est pas absolument nécessaire que vous ayiez un site ou un blog, n'importe quel ordinateur disposant d'un navigateur Web devrait faire l'affaire !
Dans ce cas, créez un raccourci vers le fichier "SQB.html" ou son équivalent rebaptisé.
Il suffira de cliquer dessus pour lancer l'exercice.

   Exemple

Pour voir un exemple d'exercice créé avec SimpleQuizBuilder , cliquez ici .

   Contact

Pour tout complément d'aide, n'hésitez pas à prendre contact avec moi  ! Je m'efforcerai de répondre à vos questions dans la mesure de mes disponibilités.

Bon travail avec SimpleQuizBuilder !

Luc De Droogh,
Créateur de SimpleQuizBuilder
Administrateur du site LDD-Soft

" LDD-Soft "