[QUIZ] Insérer des quiz dans Eklablog

Créer des quiz dans Eklablog

Il existe différents sites qui proposent de générer des quiz.
Plus ou moins contraignants ou limités ces sites sont néanmoins souvent efficaces.

Souhaitant des quiz sans contrainte (pas d'inscription, pas d'attente de validation, pas de publicité) et bien intégrés dans mon blog, j'ai décidé de développer mon système de quiz.

Je vous propose donc ici un code JavaScript pour créer des quiz sur votre blog Eklablog.
Pas de panique, vous n'avez pas besoin de savoir développer.

Pour utiliser ce système de quiz, il faut au préalable demander aux responsables d'activer JavaScript sur vos blogs, en passant par le formulaire de contact.

Notez qu'il est tout à fait possible qu'un jour Eklablog intègre un système de blog.
J'espère qu'un jour ce code deviendra inutile.

Ci-dessous un quiz de démonstration :

Support

Ce système de quiz est développé par mes soins sur mon temps libre.

Il est inutile de faire appel au support Eklablog qui ne pourra rien faire pour vous sur ce sujet, hormis activer le JavaScript.

Il est possible que des modifications d'Eklablog provoquent des effets indésirables, notamment sur l'édition des quiz.
L'affichage des quiz n'est que très peu lié à Eklablog et ne devrait pas souffrir trop en cas d'évolution d'Eklablog.

J'assurerai le support de cet outil de mon mieux en fonction de mes disponibilités.

Installation

Pour pouvoir créer des quiz sur votre blog, rendez-vous dans le menu : Apparence => Zone de script.

Inscrivez ce code :

<!-- Script pour quiz -->
<script id="eklaquizscript" src="https://ekladata.com/e9j_-EwBh7vqla8EEpVvjh_y_Eo/eklaquiz-v1-0.js" charset="UTF-8"></script>

Et cliquez sur Enregistrer.

Installation

Cette ligne demande au blog d'inclure le fichier dans lequel se trouve le code qui fait fonctionner les quiz.

Vérifier que le statut est bien "Actif", ce qui signifie que le JavaScript a été activé sur votre blog.

Gérer les quiz

Dans un premier temps, ouvrez l'article concerné en édition ( Éditer).

Puis ouvrez l'éditeur de quiz avec le menu "Contenu" => "Gérer mes quiz" :

Dans le bandeau Eklablog 

Remarque : ce bouton n'est pas un bouton « officiel » d'Eklablog, il a été ajouté par la ligne écrite dans la zone de script lors de l'installation.
Si vous ne voyez pas ce bouton, ne faites donc pas appel au support Eklablog.

Si vous souhaitez placer un autre bouton "Gérer mes quiz" ailleurs sur votre blog, il suffit de mettre (dans un article, un module, une page...) un élément (à insérer en "Code source") qui exécute le code eklaquiz.gereDisplay(), par exemple :

<input style="background: url('https://ekladata.com/W5GdzJLdiketuwIUILlsSkH5Qts/eklaquiz.png') #EEEEEE -0px -0px no-repeat; padding-left: 20px;" onclick="eklaquiz.gereDisplay()" type="button" value="G&eacute;rer mes quiz" />

Attention à ne pas placer ce bouton à un endroit accessible à tous, même si de toute façon il faut l'accès en écriture aux articles pour pouvoir modifier les quiz.

 Voici l'éditeur de quiz :

Editeur de quiz

Le premier quiz trouvé (ouvert en édition) est chargé.
Si les articles ouverts ne contiennent aucun quiz, cliquez en haut sur « Nouveau quiz » pour en créer un.
Saisissez le nom du quiz puis validez.

Dans le cadre gris en haut vous trouverez les informations suivantes :

• Charger un quiz : liste qui propose tous les quiz des articles ouverts en édition
• Nouveau quiz : cliquez ici pour créer un nouveau quiz
• Afficher / masquer le code HTML : pour utilisateurs avancés uniquement
• Identifiant du quiz : cet identifiant doit être unique pour tous les quiz du blog
  • Il est généré automatiquement et n'est pas modifiable
  • Il ne sera pas visible des visiteurs
  • Par exemple : quiztest1
• Nom du  quiz : un nom plus parlant que l'identifiant
  • Ce nom sera visible par les visiteurs, en haut du quiz
  • Par exemple : Mon quiz de test 1
• Affichage automatique :
  • Choisir "OUI" pour le quiz s'affiche dès l'ouverture de l'article
  • Choisir "NON" pour le quiz ne s'affiche que sur clic sur le bouton
• Afficher le bouton : affichage du bouton pour lancer/relancer le quiz
  • Choisir "OUI" si "Affichage automatique" est à NON pour que les visiteurs puissent lancer le quiz
• Texte du bouton de lancement : texte affiché sur le bouton qui permet de lancer le quiz (ou le réinitialiser s'il est déjà ouvert)
  • Par exemple : "Cliquez ici pour relancer le quiz"
• Article contenant le quiz : titre de l'article dans lequel le quiz doit être inséré
  • La liste ne propose que les articles ouverts en édition
• Statut du quiz :
• Modifié/Non modifié : "Modifié" si vous avez effectué des modifications sur le quiz
• Appliqué/Non appliqué : "Appliqué" si les modifications ont été appliquée à l'article
• Sauvegardé/Non sauvegardé : "Sauvegardé" si les modifications ont été sauvegardée dans l'article

En-dessous se trouvent les boutons d'actions :

• Modifier le quiz
  • C'est le mode par défaut
• Afficher le quiz
  • Permet de visualiser le quiz (presque) comme il sera dans l'article
• Tester le quiz
  • Visualise le quiz en sélectionnant par défaut la première réponse de chaque question
  • Permet de tester rapidement la description qui s'affiche sous chaque question après validation du quiz
• Appliquer les modifications
  • Met à jour le quiz dans l'article, mais ne sauvegarde pas l'article
• Sauvegarder les modifications
  • Applique les modifications et sauvegarde l'article

Sous ces boutons vous trouverez un bouton « Ajouter une question » qui, bien entendu, ajoute une question au quiz.

Ensuite sont listées les différentes questions :

• Question X : c'est l'intitulé de la question
• Sous-titre : texte complémentaire s'affichant en italique sous la question
• Image : une image qui s'affichera à gauche des réponses
  • l'image doit forcément provenir de votre médiathèque
  • cliquez sur "Parcourir" pour choisir une image de votre médiathèque
  • cliquez sur "Gérer" pour gérer la médiathèque et y ajouter des images
  • pour retrouver plus facilement vos images, créez un dossier dans la médiathèque (un pour tous les quiz ou un par quiz, à vous de voir)
• Supprimer la question : supprime la question du quiz
• Descendre et Remonter la question : vous permet de déplacer une question dans le quiz
• Choix multiple : cliquez sur ce bouton pour passer en choix multiple
  • cela permet d'avoir des questions qui acceptent plusieurs réponses
  • le bouton devient alors Choix simple pour revenir si besoin à un choix unique
• Sont listés ensuite les réponses possibles (appelées choix)
  • saisissez les différentes réponses
  • n'oubliez pas d'en sélectionner au moins une (la bonne réponse bien sûr)
• Les boutons Supprimer / Descendre / Remonter agissent sur chaque choix
• Le bouton Ajouter un choix ajoute une réponse possible
• Sous les choix se trouve une grande zone de saisie : celle-ci permet d'ajouter une description
  • cette description s'affichera sous la question lorsque le quiz est validé
  • celle-ci s'affichera que le visiteur ait trouvé ou non la bonne réponse
  • cela permet de compléter la question avec la réponse attendu et d'éventuelles explications

Les boutons "HTML" ouvrent l'éditeur de texte et permettent de saisir du texte mis en forme.

Personnalisation

Si vous souhaitez modifier l'affichage des quiz (taille des textes, couleurs...), insérez dans le code CSS du blog le code suivant :

/* Début CSS Quiz */
span.eklaquizname {}          /* Nom du quiz */
span.eklaquizquestion {}      /* texte de la question */
span.eklaquizchoixtexte {}    /* choix (texte uniquement) */
a.eklaquizchoix {}            /* choix (image+case+texte) */
img.eklaquizimg {}            /* images */
div.eklaquizdescription {}    /* description après validation */
span.eklaquizbuttonvalid {}   /* bouton de validation des réponses */
input.eklaquizbuttonlance {}  /* bouton de lancement */
div.eklaquizcadre {}          /* cadre du quiz*/
hr.eklaquizsep {}             /* separateur de question */
a.eklaquizbutton {}           /* boutons de l'écran de gestion */
span.eklaquizquestionnb {}    /* Nombre de questions */      
span.eklaquizresult span {}   /* Résultat */
span.eklaquizcompteur span {} /* Compteur */
/* Fin CSS Quiz */

La personnalisation se fait en CSS.
Il n'est pas nécessaire de tout copier, vous pouvez juste prendre les lignes qui vous intéressent.

Par exemple pour afficher le titre des questions en rouge et en taille 20 pixels :

span.eklaquizquestion {color:#FF0000;font-size:20px;}        /* texte de la question */

 Le code s'applique à tous les quiz du blog.

Compteur d'exécutions et moyenne

Un compteur externe (hébergé chez Free) permet de connaître le nombre de fois où le quiz à été exécuté, et la moyenne des résultats.
Ces informations sont affichées sous le quiz.
Notez que si vous modifiez ultérieurement le nombre de questions d'un quiz, la moyenne sera faussée.

Le compteur n'est pas mis à jour si la personne qui exécute le quiz a accès en écriture au blog.
Cela vous permet de tester votre quiz sans modifier les résultats.
Pour ne pas fausser le compteur avec des exécutions successives par le même utilisateur, celui-ci n'est mis à jour qu'une fois par ordinateur et utilisateur qui exécute le quiz (sauf si les cookies sont supprimés).

Vous pouvez également voir les résultats de tous les quiz du blog en cliquant sur le bouton "Résultats des quiz" situé sous le bouton "Gérer mes quiz" dans le menu "Contenu".
Dans le tableau qui s'ouvre, un lien "Réinitialiser" permet de supprimer les résultats d'un quiz (attention c'est irréversible !). "Supprimer" permet de supprimer toutes les informations du quiz sur le serveur externe (utile pour faire disparaître un quiz de la liste si vous avez supprimé un quiz de vos article, ou créé un quiz de test sans le sauvegarder).

Note : aucune donnée personnelle n'est stockée, même pas le login. Ce ne sont que des compteurs et des infos sur le quiz (nom, url, nombre de questions). 

Notez également que le compteur est hébergé chez Free : je ne peux donc garantir son fonctionnement dans le futur, mais ça fait deux ans que j'utilise un compteur de cette manière sans problème (avec peu de volumétrie cependant).
L'avenir nous dira si ça fonctionne avec plusieurs blogs sur le long terme.
Dans le cas contraire cela n'empêchera pas les quiz de fonctionner, seul le compteur est chez Free.

Aucune action n'est nécessaire pour activer ce compteur.

Supprimer / Déplacer un quiz

Dans l'article, le quiz est inclus dans une table (en rouge dans l'image ci-dessous).

Il suffit de supprimer / déplacer cette table complète.

Ne modifiez pas manuellement le contenu de cette table ! 

Quiz dans un article en mode édition

Vos commentaires

Plus vous serez nombreux à montrer de l'intérêt pour cet outil, plus je serai motivé à le maintenir.

Vous rencontrer des dysfonctionnements ?

Vous avez mis en place un quiz avec succès ?

N'hésitez donc pas à commenter cet article !