Dans ce tutoriel, nous verrons comment créer un quiz directement dans Blogger avec un simple code JQuery et quelques balises CSS pour personnaliser l'apparence de l'outil.
Une démonstration live de l'outil est disponible à la fin de ce tutoriel.
Les avantages de l'outil de création de quiz :
Il s'agit d'un outil élégant et facile d’utilisation qui vous permettra de créer un questionnaire dans les articles ou les pages de votre blog sur le thème de votre choix et sans logiciels tiers.
Vous aurez un contrôle total sur vos créations qui seront hébergées dans Blogger et qui seront accessibles uniquement via votre blog.
Les questions et les réponses sont automatiquement mélangées lorsque la page est actualisée par l'utilisateur.
Vous avez également la possibilité d'inclure des images dans vos tests.
À la fin de chaque test, un rapport est généré permettant ainsi à l'utilisateur d'évaluer ces performances et de corriger ses erreurs.
Cette version est entièrement responsive et s'adapte sur les petits écrans (smartphone, tablette).
Cet outil simple et léger conviendra parfaitement pour un blog d'enseignant.
Fonctionnement :
Pour chacune de vos questions, vous devez indiquer la réponse considérée juste, pour générer un score automatiquement à la fin du quiz.
Ajouter une question avec deux ou plusieurs choix de réponses, dans ce cas vous donnez la possibilité aux utilisateurs de sélectionner la bonne réponse parmi plusieurs choix possibles.
Prérequis avant l'installation de l'outil de création de quiz
Pour vérifier que la bibliothèque jQuery est bien installée dans votre thème Blogger, il faudra accéder au code HTML.
Rappel : avant d'entamer toute modification du code HTML de votre thème, je vous conseille vivement d'enregistrer une copie de votre thème. Si vous ne savez pas comment procéder, cliquez ici.
- Cliquez sur "Thème"> "Modifier le code HTML"
- Une boite contenant le code HTML de votre thème s'affichera
- Cliquez n'importe où à l'intérieur du code HTML
- Appuyez ensuite sur Ctrl et F en même temps ou Cmd et F pour Mac, une petite barre de recherche doit apparaître en haut à gauche dans la nouvelle interface de Blogger.
-
Dans la barre de recherche, saisissez
jquery.jsoujquery.min.js
Vous allez probablement trouver un code qui ressemble à ceci :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>Si vous ne trouvez aucun code jQuery dans votre thème, ajoutez le code qui suit au-dessus de la balise </head>.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>Vous pouvez essayer une version plus récente si vous le souhaitez, à savoir la version 3.1.1 ou 3.5.1 dont le code est le suivant :
Version jQuery 3.1.1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Version jQuery 3.5.1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>Notez bien : votre thème doit contenir une seule version de la bibliothèque jQuery pour éviter tout dysfonctionnement ou conflits entre les différentes versions.
Ajouter les propriétés CSS et le code JavaScript dans le code HTML du thème Blogger
-
Dans la barre de recherche, cherchez la balise
</head> -
Insérez le code qui suit juste au-dessus de la balise
</head>
<style type='text/css'>
.container{display:flex;align-items:center;justify-content:center;background:#eee;padding:3rem 2rem;margin:2em 0;}
#quiz1{background:#fff;border-radius:5px;padding:2rem;border:1px solid rgba(0,0,0,.2);min-width:550px;}
#quiz1 img{max-width:100px;}
.quiz button,.quiz .quizQuestions ul.questionAnswers li,.quiz .quizResults li{border-radius:2px}
@media screen and (max-width:768px){
#quiz1{min-width:unset!important}}
/* PLUGIN DEFAULT STYLES */
.quiz{position:relative}
.quiz ul{margin:0;padding:0;list-style:none}
.quiz .hidden{display:none}
.quiz button{font:inherit;font-size:14px;border:0;background:#4789fb;color:#fff;cursor:pointer;margin-bottom:5px;outline:0;padding:10px;width:100%}
@media screen and(min-width:640px){.quiz button{width:auto}}
.quiz button:hover{background:#3e77da}
.quiz .quizQuestions{margin-bottom:10px}
.quiz .quizQuestions>li{display:none;position:relative}
.quiz .quizQuestions>li.showQuestion{display:block}
.quiz .quizQuestions>li.disabled .questionAnswers li:hover:not(.selectedAnswer){background:initial}
.quiz .quizQuestions>li.disabled .questionAnswers li label,.quiz .quizQuestions>li.disabled .questionAnswers li input[type=radio]{cursor:default}
.quiz .quizQuestions>li .questionCount{font-size:14px}
.quiz .quizQuestions>li .questionTitle{margin:0;padding:20px 0}
.quiz .quizQuestions ul.questionAnswers{overflow:hidden}
.quiz .quizQuestions ul.questionAnswers li{margin-top:5px;border:1px solid #e2e2e2}
.quiz .quizQuestions ul.questionAnswers li:first-child{margin:0}
.quiz .quizQuestions ul.questionAnswers li:hover{background:#ededed}
.quiz .quizQuestions ul.questionAnswers li.selectedAnswer{background:#4789fb;color:#fff}
.quiz .quizQuestions ul.questionAnswers li.incorrectAnswer{background:#f02d3a;color:#fff}
.quiz .quizQuestions ul.questionAnswers li.correctAnswer{background:#2ecc71;color:#fff}
.quiz .quizQuestions ul.questionAnswers label,.quiz .quizQuestions ul.questionAnswers input[type=radio]{cursor:pointer}
.quiz .quizQuestions ul.questionAnswers input[type=radio]{margin:0;margin-right:10px;vertical-align:middle}
.quiz .quizQuestions ul.questionAnswers label{display:inline-block;padding:13px;width:100%}
.quiz .quizControls{margin-top:10px}
.quiz .quizControls button{display:block}
@media screen and(min-width:640px){.quiz .quizControls button{display:initial;margin-right:5px}}
.quiz .quizControls button.ctrlPrev{background:#224178}
.quiz .quizControls button.ctrlPrev:hover{background:#2f5ba7}
.quiz .quizControls button.ctrlDone{display:none}
.quiz .quizControls button.ctrlNext,.quiz .quizControls button.ctrlDone{float:right;background:#2ecc71}
.quiz .quizControls button.ctrlNext:hover,.quiz .quizControls button.ctrlDone:hover{background:#28b162}
.quiz .quizControls button.ctrlSkip{background:#9b59b6}
.quiz .quizControls button.ctrlSkip:hover{background:#874d9e}
.quiz .quizControls button.disabled{cursor:not-allowed;background:#e2e2e2}
.quiz .quizControls button.disabled:hover{background:#e2e2e2}
.quiz .quizResults ul{margin:20px 0 10px}
.quiz .quizResults li{font-size:14px;padding:10px;border:1px solid;border-left:10px solid;margin-bottom:10px;line-height:1.5em}
@media screen and(min-width:640px){.quiz .quizResults li{padding-left:20px}}
.quiz .quizResults .viewResults{background:#2ecc71}
.quiz .quizResults .viewResults:hover{background:#26aa5e}
.quiz .quizResults .questionTitle{margin:5px 0 10px 10px}
.quiz .quizResults .answeredCorrect{border-color:#2ecc71}
.quiz .quizResults .answeredWrong{border-color:#f02d3a}
.quizScore {font-size: 16px;font-weight: 700;color: #2c82c9}
</style>
<script src="https://cdn.jsdelivr.net/gh/cctonikgf/recherche@master/quizlastub.js"></script>Activer l'outil dans les pages ou les articles de votre blog à l'aide d'un code HTML
Ouvrez votre article dans la page d’édition des articles Blogger.
Dans l’éditeur visuel "Affichage rédiger", repérez d’abord l’endroit où vous désirez voir apparaître votre quiz et marquez-le avec un texte de votre choix pour faciliter l’intégration du code via l’éditeur HTML.
Cliquez ensuite sur l’onglet HTML "Affichage HTML" pour accéder à l’éditeur HTML de votre article.
Repérer maintenant votre marquage
Supprimer ce marquage et insérer le code HTML d'activation ci-dessous à sa place.
<div class="container">
<div id="quiz1"></div>
</div>Créez votre test et insérez-le à la suite du code HTML d'activation
La dernière étape consiste à élaborer votre quiz qui sera placé juste au-dessous du code HTML de l'étape précédente dans le volet "Affichage HTML" de la page d'édition de votre article. Pour ce faire, renseigner les lignes de codes en suivant les instructions fournies dans les commentaires.
<script type="text/javascript">
$("#quiz1").dlxQuiz({
quizData: {
questions: [{
q: 'Une tasse de thé ou de café représente :', //Votre question
a: "0 calorie", //La bonne réponse
options: [ //Les autres réponses possibles
//Attention, il n'y pas de virgule à la fin du troisième choix
"0 calorie",
"30 calories",
"10 calories"
]
},
{ //Question vrai/faux
q: 'La capitale de la Norvège est Stockholm',
a: "Faux",
options: ["Vrai", "Faux"]
},
{ //Question avec des réponses en images
q: "Sélectionnez le logo du constructeur automobile Mercedes-Benz",
a: "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtAz_SWf14dXIRxybmdpXSaT6y_FfkZK_folWZ72eosg_OaqaHJs6uLttGRcuNMyHVG27PgC4D437Q97b92cWO-W_HexzAkBdlcfJ9uFhHc87gh4uOmd-TeyNO1fmMCgkWg9JbwqZ0B0A/'/>",
options: [
"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtAz_SWf14dXIRxybmdpXSaT6y_FfkZK_folWZ72eosg_OaqaHJs6uLttGRcuNMyHVG27PgC4D437Q97b92cWO-W_HexzAkBdlcfJ9uFhHc87gh4uOmd-TeyNO1fmMCgkWg9JbwqZ0B0A/'/>",
"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ-uDo-FlqxlXLYdQlSuTIgnNZvO3fYI4bfGNAUW5LxNMPy1wND2a3uWjPRExz2kmydNqaZnVqos4U5DmdgpfUgcL3sZypx_uhYiv5qcb54hbqyeOIDztojO5NA763ijpIPhSxdZm1K6I/'/>"
]
},
{
q: "La devise du Québec est : ",
a: "Je me souviens",
options: ["Je me souviens", "Je suis libre", "Tous heureux"]
},
{
q: "Rovaniemi, « la ville du Père Noël », se trouve en : ",
a: "Finlande",
options: ["Norvège", "Finlande", "Pologne"]
},
{ //Ne mettez pas de virgule (,) après l'accolade de votre dernière question
q: "Les célèbres neiges du Kilimandjaro se trouvent : ",
a: "En Tanzanie",
options: ["Au Japon", "En Tanzanie", "Au Népal", "Au Mali"]
}
]
}
});
</script>
Votre code doit ressembler à ça :
Enfin, il ne vous reste plus qu’à prévisualiser votre article pour voir les changements. Cela dit, il vaut mieux publier l'article pour que le quiz soit entièrement fonctionnel.
Le résultat final devra ressembler à la démonstration suivante :
Voilà ! C’est tout pour ce tutoriel consacré à la création d’un jeu-questionnaire personnalisé dans Blogger.
Merci à vous et n'hésitez surtout pas à le partager sur les réseaux sociaux si vous jugez qu'il pourrait être utile pour d'autres personnes.