T.V
- La campagne "Trouvez la différence" est un classique qui peut être revisité avec Qualifio. Dans ce type de campagne, les participants doivent repérer la différence entre deux images. Dans certains cas, ils doivent le faire avant que le temps ne soit écoulé.
Prérequis : Vous devez créer deux versions de la même image, à l'exception d'un petit détail. La deuxième image, dans laquelle vos participants devront trouver la différence, doit être divisée en morceaux de taille identique.
En combien de secondes parviendrez-vous à trouver la différence ? Participez à la campagne ci-dessous :
L'astuce du pro : Les images ne doivent pas nécessairement être quasiment identiques, mais nous vous le recommandons pour un niveau de difficulté supplémentaire ;)
Devrais-je créer un Quiz ou un Chrono Quiz ?
- Sélectionnez le format Quiz ou Concours pour créer une simple campagne "Trouvez la différence". Vous pourrez ajouter un chronomètre, mais il ne sera pas pris en compte lors du tirage au sort des gagnants (c'est seulement pour le plaisir !)
- Sélectionnez le format Chrono Quiz si vous souhaitez ajouter un chronomètre et le prendre en compte lors du tirage au sort du/des gagnant(s).
Créer le jeu
Vous pouvez utiliser ce diaporama afin de savoir comment créer une campagne "Trouvez la différence". Il vous est possible de vous aider de ce guide interactif ou suivre pas à pas, le tutoriel se trouvant en dessous de ce dernier.
Lorsque vous êtes dans votre campagne, allez à Questions et appliquez les paramètres suivants.
Pour votre image originale
- Choisissez le type de question Images cliquables.
- Rédigez votre question dans la zone prévue à cet effet.
- Dans le menu Indice, sélectionnez l'option Image et téléchargez votre image originale.
Pour votre image contenant la différence
- Créez autant de réponses possibles qu'il y a de morceaux de votre image. Par exemple, si vous avez choisi de diviser votre image en 16 morceaux différents (4x4), vous devrez ajouter 16 réponses possibles à votre question.
- Pour chaque proposition de réponse, téléchargez une partie de votre photo. Cela doit se faire de gauche à droite et de haut en bas. Par exemple, votre première réponse doit être illustrée avec la partie supérieure gauche de votre image, puis vous devez passer à la deuxième partie qui se trouve à droite de la première, etc.
- Indiquez quelle est la bonne réponse.
- Vous devez entrer un label pour chaque réponse possible. Sous les réponses, sélectionnez l'option Masquer pour les labels.
- Choisissez le bon nombre de colonnes pour l'affichage de réponses. Dans cet exemple, vous auriez besoin de 4 colonnes car l'image a été divisée en 16 morceaux.
- Veuillez noter que, pour un affichage parfait sur mobile, nous recommandons un maximum de 3 colonnes. L'image idéale est une image en 600x400, coupée en 3 colonnes and 2 rangées, pour un total de 6 pièces (chaque pièce a une taille carrée de 200x200).
Astuce CSS
Une fois terminé, vous remarquerez peut-être qu'il y a une marge entre les morceaux de votre image. Pour les rendre invisibles, cliquez sur Apparence et cliquez sur Modifier l'apparence. Copiez ce code CSS et collez-le dans l'onglet Paramètres avancés > CSS :
.answerPic.col_2 {width: 50% !important;}.answerPic.col_3 {width: 33% !important;}.answerPic.col_4 {width: 25% !important;}.answerPic.col_5 {width: 20% !important;}.answerPic {display: block; float: left !important;}.answerPic img {border-width: 0px; border-radius: 0px;}.questionset .custom figure {padding: 0;}.answerPic img {border-radius: 0px !important;-moz-border-radius: 0px !important;-webkit-border-radius: 0px !important;max-width: 100% !important;}.questionset .answerPic img:hover{transform: none;-webkit-transform: none;-moz-transform: none;}div.answerPic figure {padding: 0px;}.answerPic img {width: 100%; border-radius: 0px !important;-moz-border-radius: 0px !important;-webkit-border-radius: 0px !important;}div.answerPic img:hover {animation: none;-webkit-animation: none;-moz-animation: none;-o-animation: none;-ms-animation: none;position: relative;z-index: 1;box-shadow: 0 0 5px rgba(0,0,0,0.5);}.answerPic {z-index: auto;}
Nous espérons que vous trouverez le processus de création d'une campagne "Trouvez la différence" très simple. Sinon, nos experts devraient pouvoir vous aider !