Design global
En parallèle de la création graphique du module Quiz, il vous faudra avoir créé les différents éléments graphiques de votre campagne. Veuillez consulter cette page qui vous donnera accès à toutes les informations essentielles pour la création graphique de votre campagne.
Si vous souhaitez inclure des variables de jeu sur votre fond d'écran, pensez à leur laisser un espace dans la conception graphique :
Liste des variables disponibles pour le Quiz :
%quiz_score_total% : total des points obtenus à toutes les questions.
%quiz_good_answers% : affiche le nombre de questions correctement répondues, indépendamment du nombre de points attribués à chaque bonne réponse.
%quiz_bad_answers% : affiche le nombre de mauvaises réponses données par l'utilisateur.
%quiz_cumulated_score% : tous les scores cumulés effectués par le participant plusieurs mécaniques de Quiz à la suite.
Exemple : Je joue à un Quiz (200pts), puis à un deuxième Quiz (100pts), cette variable affichera mon score cumulé entre mon Quiz 1 & 2, soit 300pts
%quiz_total_answers% : affiche le nombre de questions auquel l’utilisateur à répondu.
%quiz_answers_ratio% : Pourcentage de questions auquel l’utilisateur à bien répondu.
Uniquement si le mode aléatoire des questions n'est pas activé :
%quiz_1_user_answer% : Réponse 1 de l'utilisateur
%quiz_[numéro de la question]_user_answer% : Réponse X de l'utilisateur
Choix du template
Dès l'ouverture de la brique Apparence, vous faites face à un choix stratégique pour l'esthétique de votre campagne. Ce choix définit la structure globale de votre interface sur Desktop et Mobile.
Même si rien n'est figé, vous pourriez à tout moment rebasculer d'un template à un autre.
Template 1 : Le Mode "Immersif"
L'image est la star de votre Quiz. Idéal pour une expérience visuelle forte et moderne.
Le concept : L'image d'illustration occupe l'arrière-plan de la zone de jeu, créant une immersion totale.
Cela peut également être uniquement un aplat de couleur avec du texte mis dans l'éditeur.
Astuce "Full Visuel" (si option "image d'illustration" est souhaité) : Si vous souhaitez intégrer vos questions directement dans votre création graphique (pour une police spécifique ou un montage complexe). Pour éviter d'avoir le texte de la question au milieu du visuel (le champ texte de la question restera visible au-dessus de votre image) :
Pour tout le Quiz : Passez la couleur du texte de la question à 0% d'opacité (transparent) dans le mode Personnalisé :
Pour une seule question : Utilisez un caractère invisible dans le champ texte de la question pour vider l'espace sans impacter les autres questions.
Transparence des réponses : Pour laisser apparaître votre visuel de fond derrière les boutons, réglez la "couleur de fond de la zone de réponse" sur 0% :
Visuel à produire :
Format conseillé : Un visuel carré de 1200x1200px.
Placement du contenu : Placez vos textes et éléments importants dans la partie haute du visuel et centré pour garantir une bonne visibilité lors du redimensionnement mobile et éviter que ce soit rogner.
Ex :
Interface : Les éléments Barre de progression et Chronomètre sont dissociés et placés stratégiquement pour ne pas masquer l'image.
Template 2 : Le Mode "Classique"
Une organisation segmentée pour une clarté et une lisibilité maximale.
Le concept : Mise en avant de la question plus haut afin d'avoir un peu moins de scroll. Si un visuel d'illustration y est ajouté, il se logera juste en dessous de la question de manière centrée.
Format conseillé (si option "image d'illustration" est souhaité) : Privilégiez des visuels horizontaux (ratio 600x400px).
Attention : Sur Desktop en format paysage, le visuel subit un zoom automatique pour occuper l'espace, il pourra apparaître rogné.
Interface : La barre de progression et le chronomètre sont regroupés pour une lecture rapide des informations de jeu.
Adaptation et personnalisation des couleurs
Une fois votre structure choisie, l'étape suivante consiste à habiller votre Quiz aux couleurs de votre marque. Pour cela, deux approches s'offrent à vous selon votre niveau d'exigence graphique.
Le Mode Simple : Rapidité et Harmonie
C'est la solution idéale pour lancer une campagne esthétique en un temps record.
Palettes thématiques : Nous mettons à votre disposition 5 palettes de couleurs pré-établies.
Personnalisation flash : Chaque palette comporte 4 couleurs clés que vous pouvez ajuster très simplement à l'aide de codes Hexadécimaux (ou du Color Picker !).
Si le résultat ne vous convient pas, un bouton de réinitialisation vous permet de revenir aux réglages d'origine de la palette.
Le Mode Personnalisé : Le contrôle total
Vous avez besoin d'une précision chirurgicale sur chaque élément ?
Le mode personnalisé débloque le paramétrage couleur de chaque brique (Barre de progression, fonds de questions, états des boutons "au clic", etc.).
La transition intelligente : Vous n'avez pas besoin de repartir de zéro ! Vous pouvez configurer votre base en Mode Simple, puis basculer en Mode Personnalisé.
Le bénéfice : Le système conserve vos réglages du mode simple et les injecte dans les propriétés avancées. Il ne vous reste plus qu'à ajuster les détails spécifiques sans avoir à tout reparamétrer.
✍️ Un message d'alerte s'affichera lors du passage du mode Simple au mode Personnalisé pour confirmer que vous souhaitez appliquer votre style actuel aux paramètres avancés.
Formats des visuels à préparer (optionnel)
Pour les éléments suivants, le format est libre. Notre éditeur s'occupe de les redimensionner automatiquement pour qu'ils s'intègrent parfaitement à votre mise en page, voici les éléments concernés :
Bouton "Indice"
Image d'illustration (pour illustrer une question - évoqué ci-dessus)
Image pour l'écran interstitiel (explications post-réponse, possibilité de différencier les visuels de la bonne et de la mauvaise réponse)
Réponses en image : Bien que le format soit libre, nous vous conseillons un ratio proche de 200x50px pour un rendu harmonieux.
💡 Conseil typographie : N'oubliez pas d'uploader vos polices au format .WOFF pour garantir une cohérence parfaite avec votre charte graphique.
Adaptabilité Desktop vs Mobile
L'affichage de votre Quiz s'adapte dynamiquement à la largeur de votre fenêtre, mais avec des règles spécifiques :
Le passage en mode "Paysage"
Cette option de différenciation n'est disponible que sur Desktop. Sur Mobile, le rendu sera obligatoirement en Portrait pour garantir l'ergonomie tactile.
Le seuil des 650px (Desktop)
Au-delà de 650px de large, le Quiz bascule dans un affichage enrichi :
Réorganisation : La partie "Question" (texte + visuel) bascule à droite, tandis que les "Réponses" s'affichent à gauche (en format Paysage).
Zoom visuel : Les éléments (boutons de réponses et images) deviennent plus imposants pour occuper élégamment l'espace grand écran.
💡 Conseil d'expert : Si vous utilisez le Template 1 avec du texte intégré à l'image, testez toujours votre rendu en réduisant la fenêtre de votre navigateur sous les 650px pour vérifier que votre texte reste lisible lors du passage en mode colonne (Portrait).
Tips
Épuré le rendu des "Réponses en image"
Par défaut, les boutons de réponses possèdent un fond et un contour colorés. Si vous souhaitez que seules vos images apparaissent (pour un rendu plus aérien) :
Rendez-vous dans les réglages des Réponses en mode Personnalisé.
Passez l'opacité de la couleur de fond et de la couleur de contour à 0%. Vos images flotteront alors librement sur l'arrière-plan.