Rendre plus ludique son site avec des quizs, quelle bonne idée !

Nous nous proposons ici de comparer deux extensions WordPress qui permettent de le faire. Il s’agit, comme à l’habitude d’extensions gratuites, en l’occurrence WP Quiz et WP Pro Quiz.

Sans plus attendre, un exemple où un quiz peut s’avérer pertinent.
Récemment, la présidente du CDH35, Michelle Sévin, est intervenue pour présenter les missions principales du CDH 35.
Nous n’avons pas sous-titré la vidéo qui fût tournée à cette occasion et il nous est apparu intéressant, en contre partie, de faire un quiz à même de satisfaire les visiteurs malentendants.

Plus généralement, le quiz peut souvent plaire davantage qu’un long discours !

Le choix de l’extension « miracle » s’est avéré un peu laborieux et nous vous présentons ci-après les avantages et inconvénients des 2 solutions testées.

Quiz édité avec WP Quiz

Quiz édité avec WP Pro Quiz

1 Apparence des quiz du point de vue du visiteur

Ces 2 solutions diffèrent par:

1. Le préambule  qui peut être édité dans le quiz avec WP pro Quiz: une photo , un texte et un bouton « Démarrer le Quiz ». Noter que WP Quiz ne le permet pas, mais une alternative peut consister à mettre le préambule dans l’article qui introduit le quiz.
2. Pour les 2 solutions, après avoir répondu, le visiteur voit affiché en vert la bonne réponse et en rouge sa réponse s’il a mal répondu.
3. Après la réponse à une question, WP Quiz affiche seulement « Correct » ou « Faux »
4. Après chaque réponse à une question, WP pro Quiz dispose  d’un bouton « Vérifier » qui permet d’afficher « Exact » ou « Inexact » et qui, en complément, permet de visualiser un texte de correction ou bien un commentaire.
5. Avec WP pro Quiz, le visiteur peut se voir proposer les questions dans un ordre aléatoire, ce qui n’est pas le cas avec WP quiz. Cette fonction peut s’avérer ludique si le visiteur fait le quiz plusieurs fois.
6. WP ProQuiz permet les choix multiples, ce qui n’est pas le cas avec WP quiz: les quiz de ce fait sont plus variés si les choix multiples sont possibles.
7. Dans les 2 cas, le nombre de bonnes réponses s’affiche, avec en plus le temps et le nombre de points pour WP Pro Quiz.
8. WP Quiz permet d’afficher une image et un commentaire dédiés selon que l’utilisateur a atteint ou non un certain score. A noter que le commentaire se limite à un texte.
9. WP Pro Quiz dispose d’un bouton « voir les questions » qui récapitulent toutes les questions et réponses du visiteur avec les corrections, ce qui donne une  synthèse agréable à lire.

2 Facilité d’édition des quiz pour l’administrateur du site

• Les 2 solutions permettant d’éditer les quiz ont une interface en ligne sous WordPress et un paramétrage facilement compréhensible.
• Le choix entre les 2 solutions peut s’avérer plus complexe si l’on veut éditer les quiz hors ligne.

En effet, souvent les quiz sont édités par des personnes qui n’ont pas accès à l’interface d’administration pour diverses raisons (complexité jugée trop importante, personnes externes à l’entité,…). Il convient alors de se préoccuper des fonctions d’import/export des fichiers quiz qui sont édités hors plateforme.

Un autre exemple est la production de quiz en grand nombre où les outils d’édition de fichiers peuvent s’avérer plus productifs que l’interface WordPress des extensions.

La bonne nouvelle, c’est que les 2 solutions permettent l’import de fichiers quiz et que des outils d’édition ergonomiques existent pour chacune des 2 solutions. Ces éditeurs masquent la complexité à l’utilisateur de la syntaxe de par la possibilité de ne faire apparaitre que les informations pertinentes avec coloration des mots clés.

• WP Quiz: format de fichier  d’extension json.
  Le fichier json de notre exemple est accessible ici
  Editable en ligne sur internet en se connectant à avec http://jsoneditoronline.org/
  (« Open from disk » d’un modèle, édition par copier/coller/modification des questions / réponse d’un modèle, puis Save to disk pour archivage)
• WP Pro Quiz: format de fichier d’extension xml
  Le fichier xml de notre exemple est accessible ici
  Editable en local sur disque avec « XML Notepad 2007 » téléchargeable ici

• Les 2 éditeurs sont assez faciles d’emploi (après un peu d’entrainement tout de même !). Il s’agit de localiser les flèches qui signalent la présence de blocs à déplier,  les clicks droit sur les icônes permettent d ‘accéder aux fonctions de copier/ coller et destruction de blocs, localiser les champs à éditer (questions  réponses, champ réponse correcte/incorrecte est assez intuitif, url des image à ajouter,…)

La moins bonne pour WP Quiz, c’est que la fonction export est payante. Il faut donc éviter de faire des modifications avec l’interface WordPress en ligne après avoir importer le fichier json au risque de voir un fihier json qui devient obsolète.

Avec WP pro Quiz, les 2 fonction import et export sont disponibbles dans la version gratuite (ouf !)

• Après publication des quiz, leur utilisation se fait par copier/coller d’un short code dans un article ou une page: wp_quiz id= »3457″ ou WpProQuiz 16 entourés par [ et ]

3 Visibilité sur le taux de participation au quiz

WP Pro Quiz permet de faire un suivi par mail dès qu’un visiteur a fait un quiz avec indication du taux de réussite aux questions.

Pour voir un exemple de questionnaire fait avec les outils de WordPress, c’est ici  Pour information, ce questionnaire est inspiré d’un questionnaire du CDH35 , complété, au niveau du § communication, par quelques questions ayant pour seul but d’illustrer des réponses par cases à cocher à choix multiples.

Quels sont les avantages par rapport aux outils Google ?

– augmenter le taux de visite de votre site web.
– personnaliser votre questionnaire

• tout d’abord, en rédigeant une introduction dans un article dédié qui présente le questionnaire, ce dernier étant perçu par le visiteur « dans le même univers » que le site.
• ensuite, en définissant un style qui rend votre questionnaire original

– bénéficier des avantages inhérents à votre site, en l’occurrence renforcer l’accessibilité du formulaire pour les malvoyants grâce à l’outil WP Accessibility du site (modification des couleurs et de la taille des caractères) que le visiteur peut activer, comme sur toutes les pages du site.

Quelles extensions WordPress sont nécessaires? – Le questionnaire est composé avec l’extension Contact Form 7.

Parmi les fonctions disponibles, on peut citer le nécessaire pour rédiger tout questionnaire: réponse possible par boutons radio, case à cocher (multiple ou non), présélection de réponse par défaut, case de texte libre,…. Des facilités complémentaires sont aussi proposées, telles l’insertion de lien, l’upload de fichiers,… Pour plus de détails, se reporter aux fichiers:

• Onglet_formulaire_questionnaire_futsal qui liste le code décrivant le questionnaire qui est présenté aux visiteurs sur le site
• Onglet_email_formulaire_futsal qui définit le contenu du mail de réponse au questionnaire que reçoit l’administrateur

– Contact Form 7 est enrichi par l’extension Contact Form 7 Conditional Fields. Cette dernière apporte la possibilité de présenter ou non un lot de questions selon la réponse à une question qui précède.
« Contact Form 7 Conditional Fields » ajoute un onglet dans Contact Form 7, c’est l’onglet « Conditionnels Fields » qu’il faut renseigner manuellement. Noter la facilité d’usage de l’interface qui permet d’affecter les lots de questions selon les valeurs des réponses.

Ex: Si vous avez sélectionné  « inscription d’un individuel », alors on vous propose de saisir les informations pour une personne. Si vous avez sélectionné « inscription d’une équipe » , alors vous devez saisir d’autres informations telles le nom du référent, le nom des joueurs,… – Style personnalisable: il est possible d’affecter un style au questionnaire: mettre une photo de fond, choisir les couleurs des questions et des réponses (par ex. aux couleurs de la FFH), avoir la même police que celle du site web,…L’extension qui permet de définir et d’affecter un style à un questionnaire se nomme Contact Form 7 Style

« Contact Form 7 Style » ajoute un onglet dans Contact Form 7, c’est l’onglet « Contact style Template » qui permet d’affecter un style au formulaire.Quelques styles prédéfinis sont fournis, mais ils sont inadaptés à un formulaire à usage professionnel (ils sont laids et « ringards »). Voyez par vous même sur l’image ci-dessous  qui rassemble un aperçu de ces styles !

Il est donc préférable d’éditer le style soit même. Pour un exemple simple, voir le style, « futsal » de notre exemple , le style ayant été composé au préalable via le menu « Contact style » aux couleurs du logo FFH. Il superpose une image de fond dans la partie haute du questionnaire, le libellé des questions est « jaune » et le champ réponse en texte libre est « bleu ». Enfin, le bouton « Envoyer » est « fuchsia ». Consultation des réponses au questionnaire Comme tout système de questionnaire en ligne, l’administrateur reçoit un mail dès qu’une personne a répondu au questionnaire. Avantage WordPress: les réponses au questionnaire sont archivées sur le site grâce à l’extension Flamingo : plus besoin d’archiver et de ranger soi même les mails de réponse, qui plus est, qui auraient pu passer inaperçus dans sa boite mail, au pire être traités comme des SPAM !

L’administrateur du site web peut consulter les mails par le menu Flamingo / Messages entrants L’ extension Flamingo permet également d’exporter les messages sous forme d’un tableau excel => Flamingo dispose d’un bouton “exporter”. L’export sélectif de mails est possible. On peut mettre les mails à ne pas exporter dans la corbeille (quitte à les restaurer plus tard).
De mémoire, il semble aussi qu’il soit possible de ne cocher que les mails à exporter (à vérifier toutefois car il n’a pas été possible de le reproduire  au moment de la rédaction de cet article ) . Mise en forme du fichier excel pour dépouiller plus facilement les réponses: 1- Tout d’abord, il faut mettre en forme le fichier en scindant la colonne dans laquelle tous les champs figurent séparés par une virgule. (sélectionner la colonne, menu  « données » puis « convertir »  et choisir « type de fichier délimité » puis « virgule ») 2- Pour faciliter le dépouillement des réponses , un peu de tri dans le tableau excel permet de classer les réponses, cf fichier excel  de notre exemple  après conversion et classement.

Retour au sommaire

L’extension « BackWPup » permet de faire la sauvegarde de son site à partir du tableau de bord WordPress.

Penser à le faire régulièrement est une « sage » précaution, ou tout du moins quand des modifications significatives sont intervenues sur le site.

Une astuce bien pratique , notamment pour compléter des sauvegardes faites de façon « hasardeuses » (non régulières, quand on y pense,…), peut consister à utiliser la fonction « Programmation » des opérations de sauvegarde.

Par exemple, une sauvegarde mensuelle, voire hebdomadaire, peut être programmée pour se déclencher automatiquement. Cocher l’option  Démarrer l’opération « avec le cron de wordpress »

Le test a été fait et la sauvegarde intervient bien à l’heure et date programmée (en pratique dans le cas du test, l’heure du fichier de sauvegarde est postérieure d’1/4h = durée de la sauvegarde)

Retour au sommaire

Deux extensions testées

• « Soundy Background music »

Pourquoi pas un message du président de l’association à l’occasion des vœux, un témoignage de sportif, un chant de Noël,…

Cette extension permet de déclencher la lecture d’un fichier MP3 dès ouverture du site.

Le fichier MP3 est personnalisable et peut être chargé via les « Médias » de WordPress.

Pour ne pas irriter le visiteur du site, deux boutons Pause et Start  sont placés par l’extension et ce, bien visible ! L’allure et l’emplacement de ces 2 boutons sont personnalisables.

Nous avons illustré cette extension sur le site avec un cadeau sonore surprise 😉 qui sera activé jusqu’à mi-décembre . Au delà de cette date, un poème de Popelin « arbre de Noël » vous sera lu.

• Christmasify!
  

à utiliser avec parcimonie;-)

Permet de lire une musique au choix parmi 3 proposées par l’extension

Permet des animations du plus sobre (des animations) au plus ringard (guirlandes, boules de noël, traineau,…)

• Christmas Countdown Widget

Après installation et activation, glisser ce widget dans votre sidebar

ou bien utiliser le shortcode « countdown » entre crochets dans votre page/article et l’animation s’affichera à l’emplacement où vous avez placé le code[countdown]

Retour au sommaire

Cette extension « WP Dashboard Notes » peut s’avérer très pratique au quotidien pour les personnes amenées à éditer des articles voire administrer le site..

En effet, on peut avoir oublié quelle extension est concernée lorsque l’on veut modifier le site (par ex défilement des photos,…), on veut « se remettre dans le bain » rapidement après une période d’inactivité sur le site (quelles astuces?, quels pièges?,…).

L’extension permet tout simplement d’afficher au niveau du tableau de bord un texte, tout comme un post-it sur son bureau.

Sa mise à jour est très facile via un éditeur du type bloc notes. Le design est on ne peut plus minimaliste mais efficace.

Ci après un exemple:

Mise à jour du site: Consutez cet aide mémoire-Image de fond du site => Menu Extension, sous nenu FullBackground => modifier l’adresse de l’image (1920pix de large) dans la zône background links (adresse web du fichier à lire dans medias)-Flash Infos => Modifier « les affiches du moment » de l’extension « Meta Slider »-Affiches du Moment => Modifier l’extension « Huge IT SLider »(penser à renseigner l’url de chaque photo pour affichage plein écran)-Affiches du planning des activités pour les centre de rééducation => Modifier la page « Bienvenue au Comité Départemental … » avec Elementor (cf icône crayon de l’image). Penser à SAUVEGARDER le site régulièrement avec l’extension BackupWP. -Handinews: Ecrire les articles catégorisés handinews_xx (à créer à chaque handinews), créer et mettre à jour son sommaire (catégorie sommaire_handinews) et éditer avec MailpoetEn cas de dysfonctionnement anormal (ex: indisponibilité du site, de l’écran d’admin (la page blanche!) => Penser à consulter ovh.com (notre hébergeur) car il se peut que des travaux (voire un plantage!) soient en cours.

Retour au sommaire

De base, WordPress ne propose pas de fonctions permettant de classer ses médias: tous les médias apparaissent « à plat » dans la même fenêtre quelque soit le type de médias (photo, vidéo, pdf,…). Quand le nombre de médias est important, il devient très difficile de se repérer.

Les photos constituent le meilleur exemple, sachant que l’on a souvent tendance à en transférer beaucoup trop, souvent les photos sont similaires avec quelquefois des versions de la même image de taille différente, voire des photos qui ne présentent que très peu d’intérêt. Dans le pire des cas, des photos figurent dans l’album « Médias », mais ne sont pas utilisées dans le site !

Les longues soirées d’hiver seront donc mises à profit pour faire du rangement;-)

Heureusement, des extensions WordPress gratuites sont là pour nous sortir de cette situation.

Nous proposons dans cet article de décrire l’extension « Enhanced Media Library »

Son utilisation est très intuitive. Nous l’avons testée sur ce site de publication de newsletters sans rencontrer aucun problème et le résultat offre un réel confort d’utilisation!

Après installation et activation, le menu  « Médias » de WordPress se trouve pourvu de nouvelles options, en particulier, la possibilité de créer des catégories médias.

Avant de créer ces catégories, on remarquera que l’écran qui affiche les médias a été enrichi d’un rubrique de filtrage (à gauche) qui permet de distinguer les fichiers photos, vidéos , audios,  pdf , ….

Ensuite, on crée les catégories qui nous intéressent et il s’agit ensuite d’affecter ces catégories aux médias en consultant les médias un par un. C’est clairement l’étape la plus pénible.

Après avoir affecté une catégorie à chaque média que l’on veut conserver, on s’intéresse à la possibilité de « Filtrer par catégorie Média », ce qui fait apparaitre toutes les nouvelles catégories média que l’on a créées.

La sélection de la catégorie fait apparaitre l’écran où ne figurent que les vignettes des médias concernés.

Bien entendu, ces bonnes habitudes sont à perpétrer pour tout import futur de média qui devra être catégorisé.

Attention, comme dit la maxime: « Chasser le naturel et il revient au galop« . Pour illustration, l’auteur de cet article, bien qu’ayant mis en œuvre au préalable l’extension sur ce site,  n’a pas eu le réflexe dans l’immédiat de catégoriser les photos de cet article !

Retour au sommaire

• l’outil de copie d’écran de Windows est un moyen simple de copier des images

• le séquence clavier « alt + touche imp écr » copie en mémoire la totalité de l’écran

Néanmoins, il est tout de même intéressant de se protéger contre la copie des images lorsque le visiteur du site fait un click droit, puis  « enregistrer sous », d’autant plus que des extensions wordpress gratuites permettent de le faire.

Un précédent article décrivait déjà l’extension  SF Move Login. Pour rappel, elle permet d’accéder à la page de connexion d’administration par une chaine de caractères définie par l’administrateur du site et non par le mot wp-admin connu de tous.

Le CDH 22 a désiré mettre en œuvre ce mécanisme sur son site avec le support du CDH 35.
Ceci nous a permis de préciser le paramétrage de cette extension, ce qui facilitera le travail des personnes désirant le faire.

Voici donc la copie d’écran des paramètres

A noter:

• la ligne « Afficher un message d’erreur » à cocher obligatoirement dans la zone « redirections », sinon ça ne fonctionnera pas !
• bien que indépendant du moyen d’accès à l’écran d’administration, cette extension apporte des fonctions complémentaires concernant le mot de passe d’administration WordPress en facilitant la réinitialisation du mot de passe et le cas du mot de passe oublié .

Retour au sommaire

Objectif: Pour attirer de nouveaux abonnés à une newsletter, il est d’usage de placer un formulaire d’abonnement sur son site Internet.

Le corollaire qui permet le désabonnement est beaucoup plus simple à mettre en œuvre puisque les templates de newletters généré par Mailpoet intègrent de base un lien qui permet de désabonner.

On retiendra 3 étapes à suivre pour mettre en place l’abonnement:

Première étape: Constitution le formulaire d’abonnement

Menu Mailpoet / Formulaire, Ajouter , puis Donner un nom au formulaire

Sélectionner la liste de la newsletter concernée par l’abonnement.

A noter que cette liste est rarement vierge et que bien souvent elle a été constituée au préalable dans Mailpoet (via le menu « liste » ) par l’émetteur de la newsletter à partir de son carnet d’adresse.

Deuxième étape: Insérer le formulaire dans un article ou dans une page
Deux solutions: via un code court (ou short code) ou via du code HTML iframe.

Exemples de codes (en gras) pour les 2 solutions d’insertion:

([mailpoet_form id= »2″]) (pour être visible à l’écran dans le cas de cet article article, le short code est mis entre parenthèses afin de ne pas exécuté)

<p><iframe class= »mailpoet_form_iframe » tabindex= »0″ src= »https://handisport35.org?mailpoet_form_iframe=1″ width= »100% » height= »100% » frameborder= »0″ marginwidth= »0″ marginheight= »0″ scrolling= »no »></iframe></p>

Troisième étape: le test (à ne pas négliger)
Utiliser sa propre adresse mail pour tester l’abonnement et le désabonnement en vérifiant entre temps la mise à jour de la liste via le menu Mailpoet / Liste

Le résultat obtenu à l’écran pour le formulaire

[mailpoet_form id= »1″]

Retour au sommaire newsletter