T.V
- Gamifiez votre marketing en construisant votre propre "bonto" (ou "bonneteau") en ligne avec Qualifio. Les participants sont invités à se concentrer sur le jeu, de manière à attirer leur attention sur votre contenu, vos produits et votre marque. Dans ce tutoriel, vous apprendrez à créer une version Qualifio du jeu du "bonto" classique.
Bref aperçu
Le concept du jeu est simple : une "balle" (ou tout autre objet) est cachée sous l'un des trois "gobelets" identiques, qui sont ensuite mélangés. Une fois que les gobelets cessent de bouger, le but du jeu est de trouver le gobelet qui cache la balle et de cliquer sur celui-ci.
Vous pouvez utiliser ce guide interactif afin d'apprendre à créer un jeu "bonto" avec Qualifio. Il vous est possible de vous aider de ce guide interactif ou de suivre pas à pas le tutoriel se trouvant en dessous de ce dernier.
Étape 1 : L'écran du jeu
Dans un premier temps, allez à votre campagne > Questions.
Créez la question de base du jeu en sélectionnant Images cliquables et personnalisez l'apparence du jeu en chargeant vos propres images.
Une fois que vous avez chargé vos images, l'étape suivante consiste à marquer toutes les réponses comme étant correctes.
Chaque question aura le même texte et les mêmes réponses. La façon la plus simple et la plus rapide de procéder est de dupliquer deux fois votre question. Une fois dupliquée, la question peut être adaptée selon les besoins !
Gestion des scores
Par défaut, le système attribuera un point pour chaque bonne réponse. Mais dans le bonto, le système de points fonctionne de la manière suivante :
- Dans la première question : vos réponses vaudront respectivement 1, 2 et 3 points.
- Dans la deuxième question : vos réponses vaudront respectivement 4, 5 et 3 points.
- Dans la troisième question : vos réponses vaudront respectivement 4, 2 et 6 points.
Dans le bonto, la balle cachée est positionnée au hasard à chaque fois. Ainsi, les participants peuvent gagner un jour et perdre le lendemain. Pour ce faire, vous devez randomiser l'ordre des questions du quiz en allant sur Ordre des questions et en sélectionnant "aléatoire sur 1 question".
Vous pouvez rendre le jeu encore plus difficile en fixant un délai aux participants pour localiser la balle (barre de progression ou indication du temps en secondes).
Étape 2 : Personnalisation des écrans de sortie
Dans l'étape "Sortie", vous pouvez personnaliser les textes qui seront affichés sur l'écran auquel les participants accèderont après avoir terminé le jeu.
Le message de fin change selon que le participant a cliqué sur le bon gobelet ou non. Cliquez sur "Ajouter différents messages en fonction du score" et ajoutez un message par score (6 au total).
- Si le score est de 1, 5 ou 6, le participant gagne. Il est redirigé vers une page "gagnante" où est affichée la balle avec un message tel que "Bravo !"
- Si le score est de 2, 3 ou 4, le participant perd. Il est redirigé vers une page "perdante" où vous ne révélerez pas la balle.
Vos écrans de sortie définitifs devraient ressembler à ceux-ci :
Arrêtons-nous ici pour faire un test rapide et nous assurer que la partie principale du jeu fonctionne. Cliquez pour voir l'aperçu (Preview). N'oubliez pas que l'animation des gobelets n'a pas encore été créée.
Étape 3 : Paramètres de la campagne
Dans l'étape "Paramètres", vous pouvez :
- Limiter le nombre de participations et de participants uniques. Examinons ces options plus en détail →
- Permettre aux utilisateurs de jouer à nouveau dès l'écran de sortie.
- Publier un classement pour montrer les scores obtenus par les meilleurs participants.
Étape 4 : Paramètres de viralité
Cette étape est très importante si vous voulez que la campagne devienne virale. Encouragez les participants à partager le jeu sur les réseaux sociaux et à inviter leurs amis à jouer.
Vous trouverez ici toutes les informations relatives à cette étape.
Étape 5 : Animation des gobelets
Enfin, une animation peut être réalisée afin que les gobelets bougent de manière aléatoire au début du jeu. Pour ce faire, il suffit d'ajouter ces lignes de code dans l'onglet CSS de l'étape "Apparence" :
/* Animation CSS*/
.answers-container #answerPicGroup {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.answerPic {
position: relative;
}
.answerPic:hover img {
animation: movehover 0.5s infinite alternate;
position: relative;
}
@keyframes movehover {
from {
bottom: 0px;
transform: rotate(0deg);
}
to {
bottom: 5px;
transform: rotate(4deg);
}
}
.answerPic:nth-child(1){
animation: move-box1 alternate 1.5s 2 ;
}
.answerPic:nth-child(2) {
animation: move-box2 alternate 1.5s 2 ;
}
.answerPic:nth-child(3){
animation: move-box3 alternate 1.5s 2 ;
}
@keyframes move-box1 {
0% {
left: 0%;
}
25% {
left: 65%;
}
50% {
left: 10%;
}
75% {
left: 50%;
}
100% {
left: 20%;
}
}
@keyframes move-box2 {
0% {
left: 0%;
}
25% {
left: -15%;
}
50% {
left: 30%;
}
75% {
left: -30%;
}
100% {
left: 5%;
}
}
@keyframes move-box3 {
0% {
left: 0%;
}
25% {
left: -40%;
}
50% {
left: -10%;
}
75% {
left: -50%;
}
100% {
left: -30%;
}
}
Lorsque l'animation est prête, faites un test rapide pour vous assurer que tout fonctionne comme prévu.
Vous pouvez utiliser l'étape Apparence pour personnaliser votre campagne (couleurs, polices, fond, etc.)
Nous espérons que vous avez aimé ce tutoriel, merci de nous avoir lu !
Vous avez d'autres questions ? Envoyez-nous votre demande
Nous vous recommandons également de lire ces articles pour obtenir des conseils supplémentaires :