Les jeux télévisés avec des questionnaires sont populaires depuis plusieurs générations. Créer son quizz en ligne ou quiz en français académique, peut-être intéressant pour dynamiser ses pages web. Imiter Jean-Pierre Foucault, Julien Lepers ou autre Alain Chabat, peut-être une belle expérience. Alors, tu souhaites créer un site avec des questions ? Nous allons voir dans ce tuto comment créer un quiz interactif et gratuit avec WordPress notre CMS préféré.
Créer son quizz ou quiz ?
Nous verrons la réponse dans le tutoriel ! J’ai vu sur internet que l’on retrouve quiz et quizz, j’ai demandé à plusieurs personnes si on l’écrit avec un ou deux « z ». La réponse : « euh… c’est une bonne question ». Comme je préfère aider les gens plutôt que de créer des polémiques sur le français, je me suis dit que vais répondre à tout le monde. 😉
Pour créer son quizz, nous n’aurons à insérer aucune balise ou aucun code HTML, le plugin que je vais présenter est bien sûr responsive.
Comment créer un quiz : Installation et paramétrage
Il existe plusieurs extensions gratuites ou payantes, nous allons utiliser Ari Stream Quiz :
- Tout d’abord, survol Extension.
- Ensuite, clique sur Ajouter.
- Ecris « ari stream quiz ».
- Clique sur le bouton Installer.
- Puis, sur Activer.
- Dans la barre d’outils WordPress, survol ARI Stream Quiz.
- Enfin, clique sur Réglages.
Créer son quizz : Réglage général du plugin
Commençons par l’onglet général dans les réglages de l’extension :
Hide title : par défaut le titre est un H2, il est possible de personnaliser le titre comme nous le verrons plus loin, mais aussi de l’enlever si tu coches cette case.
Ensuite, Thème par défaut : Tu peux sélectionner le thème qui te convient. Celui par défaut est très bien.
Défilement intelligent : Le navigateur te guide à la question suivante. L’effet est pas mal.
Durée du défilement : Si tu as coché la case défilement intelligente, tu peux ici régler la vitesse. 600, c’est très bien.
Ensuite, Décalage du défilement : Le défilement va créer un décalage si tu ne le laisses pas à 0.
Afficher les questions à la fin : Pratique si tu prévois de créer plusieurs questions, tu les verras à nouveau.
Ensuite, à Warning on exit : si tu coches cette case, et que le candidat quitte le questionnaire en cours, une pop-up demandera de confirmer son action.
Afficher le résultat par question : Tu peux afficher les réponses après que le candidat ait répondu, ou alors à la fin du questionnaire ou laisser planer le mystère en n’affichant pas les réponses.
Lockout single answers : en clair, tu n’as pas le droit de te tromper ! Si tu coches cette case, ton candidat ne pourra plus sélectionner une autre réponse.
Enfin, Key API : Permet de relier MailChimp et pour le champ du bas une clé MailerLite.
Réglages sharing de l'extension
Là, nous arrivons dans la partie des réseaux sociaux.
Pour commencer, Facebook App ID : L’endroit pour relier Facebook à ton questionnaire.
Ensuite, Share buttons : Si tu souhaites afficher des boutons de partage à la fin du questionnaire. Je te conseille de décocher Google+, Google a abandonné ce projet !
Nous ne pouvons pas sélectionner Pinterest : dommage, mais tu inquiètes, j’ai un article pour toi.
Tu peux modifier les messages automatiques. Par exemple, lorsque le test est terminé, l’extension va t’afficher le nombre de réponses correctes. Le message est en anglais, nous allons le mettre en français.
A Titre sur la page de résultat :
{{userScore}} réponses sur {{maxScore}} sont correctes.Tu peux bien sûr traduire les autres également.
Réglages avancés du plugin
Clean uninstall : Si tu coches cette case, et que tu décides de désinstaller le plugin, alors toutes tes données seront supprimées.
Ensuite, Load Facebook SDK : Si un modèle ou une extension charge SDK Facebook JS, il est possible de le désactiver pour éviter des conflits.
Add meta tag : S’il est activé le plugin affichera des balises meta.
Ensuite, Images lazy loading : En l’activant, la page se charge en premier, et par la suite les images. C’est apprécié par les moteurs de recherche.
Enfin, Style CSS personnalisés : si tu souhaites améliorer le design, c’est ici que ça se passe !
Créer un quiz avec WordPress
Nous allons créer un article « Gagnez un voyage à Tahiti », tu peux placer du texte si tu le souhaites.
Puis, dans le menu admin de WordPress, nous allons survoler Ari Stream Quiz et cliquer sur Quiz.
Créer son quizz : première question
Ca-y-est, nous allons créer notre questionnaire, prêt ?
Normalement, tu ne retrouves aucun test, pour créer le premier, cliques sur le gros bouton vert AJOUTER UN QUIZ TRIVIA.
Saisissez le titre du quiz ici : ben… on va écrire notre titre (H2), je mets « Gagnez un voyage »
Comme tu peux le voir, nous sommes sur l’onglet RESULTATS, j’écris « Quiz ».
Plus bas, tu choisis le nombre de points que le candidat obtient s’il trouve la bonne réponse : 1 point, ça suffit !
Tu pourras placer une image avec le résultat.
Plus bas, je vais mettre un peu de texte « Merci pour la participation ».
Nous allons maintenant créer notre question dans le module QUESTIONS.
Ensuite, à Saisir la question, j’écris « Comment écrit-on en français ».
A Saisir la réponse, j’écris « Quizz ». Puis, dans la seconde section, j’écris « Quiz » et je coche la bonne réponse.
Enfin, je clique sur ENRIGISTRER.
Le plugin va te diriger vers la page d’accueil de ARI Stream Quiz, tu vas pouvoir copier le code court et le coller dans l’article « Gagnez un voyage à Tahiti ».
Maintenant, tu as l’honneur et le privilège d’être le premier participant à ce quiz ! Je sais, c’est nul, tu connais déjà la réponse !
Créer un QCM en ligne gratuit : seconde question
Pour commencer, pour créer notre deuxième question, à ARI Stream Quiz -> Quiz, nous allons cliquer sur Modifier sous « Gagnez un voyage ». Ensuite, clique sur l’onglet QUESTIONS, et je vais mettre « Quelle est la capitale de l’Inde ? ».
Réponse : « Calcutta » ; « Bangalore » ; « New Delhi » ou » Mumbai ». Bien sûr, clique sur AJOUTER LA REPONSE pour ajouter des propositions.
Ensuite, en dessous de chaque ville, tu as la possibilité d’ajouter une image, nous allons intégrer une image qui correspond à chacune d’elle.
Affichons la réponse : qui est « New Delhi », cela vaudra 1 point, nous allons aussi ajouter une image :
Gagner le voyage devient plus compliqué maintenant avec nos deux questions. En tout cas, le résultat est pas mal :
Ce qui est dommage, il n’est pas possible de sélectionner deux réponses, par exemple :
« Qui est/sont le(s) fondateur(s) de Google ? »
- Mark Zuckerberg
- Larry Page
- Sergey Brin
- Elon Musk
Eh oui, il s’agit de deux réponses Larry Page et Sergey Brin. Si tu trouves un hack, dit-le dans les commentaires.
Comment créer un test en ligne : Réglages
Toujours dans le menu ARI Stream Quiz -> Quiz, mais cette fois dans le module REGLAGES, tu vas pouvoir peaufiner ton quiz.
Ensuite à Thème : tu as le choix entre plusieurs thèmes. Celui par défaut n’est pas trop mal, pas vrai ?
Mélanger les réponses : Les réponses ne correspondront plus à l’ordre que tu leur avais donné.
Ensuite, questions aléatoires et Sélectionne 0 questions : à notre exemple, nous avons créé deux questions. Si tu coches cette case et que tu écris 1, l’une des deux questions sera affichée.
Lancez le quiz immédiatement : tu n’auras plus le gros bouton rouge, les questions seront de suite affichées.
Ensuite, Show Share buttons : Pour afficher les boutons des réseaux sociaux, à condition qu’ils soient activés dans ARI Stream Quiz -> Réglages. Le candidat pourra montrer ses résultats sur les réseaux sociaux.
Enfin, Collect users’ data : en cochant cette case, tu pourras demander l’adresse courriel du candidat, le nom ou/et de l’intégrer à MailChimp…
Créer son quizz : ce que j'aime, ce que je n'aime pas
Ce que j’aime :
- Le design est vraiment sympa.
- Il se prend assez bien en main.
- Utilisation d’un shortcode pour afficher le quiz.
- Possibilité de le relier à ActiveCampaign.
Ce que je n’aime pas :
- Il n’est pas possible de valider deux réponses.
- Relier à ActiveCampaign en version payante.
Ce qu'il faut retenir
Si tu souhaites créer quelque chose d’original, te démarquer et rendre ton site plus dynamique, ce plugin pourrait t’intéresser. De plus il se prend bien en main et sans passer par l’option payant tu pourras déjà faire de belles choses.
Que penses-tu de ce plugin ?
article vraiment très intéressant, pédagogique et clair ; je le mets dans mes favoris ; merci beaucoup pour cette mine d’informations 🙂
Merci Emma, je suis ravi que cet article te plaise 😊
Très bonne idée à laquelle je n’avais pas pensé. C’est vrai qu’on adore faire des quiz, c’est très très accrocheur !!!
Je le testerai dès que possible ! Du coup, je n’ai pas (encore) de hack à proposer pour sélectionner plusieurs bonnes réponses ;-p
Je mets l’url de cet article dans un coin pour te faire un retour de mon expérience mais pour sûr, ce n’est pas pour tout de suite :-/
Sinon, la réponse à quiz ou quizz… C’est quiz a priori (cf https://zero-faute-d-orthographe.com/quiz-ou-quizz)
Bonne réponse Caroline, merci pour ton commentaire.
Top ! Merci pour cet article et ces explications pas à pas ! Je souhaitais rendre mon blog sur le développement personnel par la créativité, plus interactif et ludique, c’est vraiment une super idée ! Je vais tester rapidement 🙂
Super ça… Merci pour ton commentaire.
Créer un quiz, c’est une idée intéressante et je l’aurai eu moi-même, j’aurai été bien incapable de savoir comment m’y prendre donc grand merci
Avec plaisir Anne. Et ce n’est pas compliqué avec ce plugin. Merci pour ton commentaire.
Tu as un super blog pour les jeunes blogueurs comme moi :p
Merci Nicolas, ça fait plaisir. Et merci pour ton commentaire.
C’est une super bonne idée, merci pour ce tutoriel !
Avec plaisir, merci pour le commentaire.
Bonjour, je cherchais un plugin pour faire un texte à trou pas un QCM, est-ce que c’est bon également ce plugin?
Hello Lara, non, je ne pense pas. Je n’ai rien vu qui permettait de créer des phrases avec des trous.
Je vous remercie pour cet article très utile pour moi car j’adore créer des QCM dans mes formations, et justement je me demandais comment en faire pour les gens qui viennent sur le site. Savez-vous si on peut l’intégrer à une Newsletter ou un email ? Et si oui, comment on procède ?
Je n’ai pas testé la partie newsletter. Mais oui, il est possible de l’intégrer à une newsletter. Soit avec MailChimp ou avec MailerLite, après avoir créé un compte chez l’un d’eux, vous obtiendrez une clé API (API Key) que vous enregistrerez dans réglages -> Général du plugin.
Avec la version pro vous pourrez utiliser : ActiveCampaign, AWeber, Drip, GetResponse ou Zapier pour les newsletters.
Je ne sais pas exactement ce qu’il est possible d’envoyer via la newsletter comme je ne l’ai pas utilisé. Mais vous pouvez faire le test, par exemple MailChimp (essaye gratuit).
Merci pour votre commentaire.
Merci pour cet article 😉! Hyper intéressant et cela me donne pas mal d’idées pour la suite !
C’est super ça. Merci pour ton commentaire 😊
Mais j’adore! merci pour cet article, justement j’ai le projet de proposer un quiz. Euh du coup est ce qu’on peut selon les réponses renvoyer un mail avec les résultats?
Je n’ai pas testé la partie newsletter, mais il est possible d’en envoyer, il doit certainement s’agir de résultats.
Encore un super article bien expliqué et intéressant !! Merci 😉
Oh mais j’enregistre ! Merci beaucoup 😀.
Avec plaisir Délia, merci pour ton commentaire
Créer un quiz ou quizz ? D’après le Larousse un seul z est suffisant pour ce mot d’origine anglaise rentré dans notre dictionnaire 😉 Je parle justement de l’évolution de notre langue dans mon blog, avec l’apparition de l’écriture inclusive en rédaction web SEO. Merci pour cet article. Ca me donne des idées de créations !
Tant mieux si cela te donne des idées. Je suis curieux de découvrir l’évolution du français avec le Web. Merci pour ton commentaire.