Guide de conception d'un thème

Thématisation explique comment un thème QuizWitz est construit : dans Adobe Animate, exporté sous forme de bibliothèque CreateJS. Cette page traite de l'étape qui précède - la conception du thème.

Elle s'adresse à un graphiste et part du principe que la conception et la production dans Animate sont assurées par des personnes différentes. Peu de graphistes travaillent encore dans Adobe Animate ; un graphiste livre donc généralement les visuels et une autre personne assemble le thème. Cela fonctionne bien, tant que les visuels arrivent sous une forme exploitable pour la construction. Cette page décrit cette forme et sert en même temps de liste des livrables lorsque vous demandez un devis à un graphiste.

La page comporte quatre parties :

1. Ce que vous concevez - les écrans couverts par un thème.
2. Les huit cadres et la planche d'éléments, un par un, avec des captures d'écran.
3. Règles de conception - comment le fichier doit être construit pour que le moteur puisse l'utiliser.
4. Ce qu'il faut livrer - fichier source, livrables et ordre de travail.

astuce

Si vous voulez seulement changer les couleurs, les polices et les fonds, vous n'avez besoin de rien de tout cela - personnalisez plutôt le thème Emerald.

Le voir en action

Chaque écran décrit ici peut être joué en direct, avec des données d'exemple, dans le testeur de thème à l'adresse client.quizwitz.com/test.html. Il charge un thème et propose un menu d'écrans de test : des questions avec et sans pièce jointe, la répartition des réponses pour un petit et un grand groupe, le classement, les intros de manche, l'écran de connexion avec et sans logo client, et ainsi de suite. Ajoutez ?theme=emerald à l'adresse pour voir le thème Emerald. Celui qui construit le thème utilise la même page pour le vérifier pendant l'assemblage.

---

Ce que vous concevez

Une partie de QuizWitz se joue avec toute une salle en même temps, et deux écrans sont toujours en jeu :

• L'écran de jeu - un projecteur ou un téléviseur, 1920 × 1080. Les questions, les réponses, la façon dont les réponses de la salle se sont réparties, le classement. C'est cela que vous concevez.
• Le téléphone de chaque joueur, sur lequel il tape sa réponse. C'est une page web à la mise en page fixe ; elle est stylée à partir de votre liste de couleurs, elle n'est pas mise en page par vous.

Un thème est l'habillage visuel complet de l'écran de jeu : le fond, la typographie, la couleur, la façon dont une question à quatre options est présentée, la façon dont le classement se construit, la façon dont une manche est annoncée.

---

Huit cadres et une planche d'éléments

Le jeu compte des dizaines d'états d'écran distincts, mais la plupart sont des variantes d'une même mise en page. Vous concevez huit cadres et une planche d'éléments ; le reste en découle. Ce n'est pas un raccourci - c'est ainsi que fonctionne le moteur. Un écran sans visuels propres se rabat sur un cadre général.

La planche compte autant que les cadres : un écran qui se rabat sur le cadre général a quand même besoin de mobilier dans sa zone de contenu - un panneau, une ligne, un filet.

#	Cadre	Couvre aussi
1	Cadre général	Treize états d'écran sans visuels propres
2	Écran de connexion	À dessiner deux fois : avec un logo client et sans
3	Écran d'attente	-
4	Écran de question	-
5	Question avec pièce jointe	La pièce jointe en plein écran, et les pièces jointes affichées entre les questions
6	Écran de réponse	L'écran de réponse des questions ouvertes et des questions avec pièce jointe
7	Classement et gagnant	Le classement entre les manches et le gagnant final
8	Intro de manche	Les six catégories de manche

À propos des captures d'écran

Les écrans ci-dessous proviennent d'un thème existant. Elles montrent quels éléments apparaissent sur chaque écran, et à quel moment. Ils ne sont une référence ni de style ni de mise en page : l'endroit où ce thème place sa question, ses options et son minuteur relève de son propre choix, et le vôtre peut être complètement différent.

Cadre 1 - le cadre général

Ce qu'il contient : le fond, un titre d'en-tête et une zone de contenu vide en dessous. Ce n'est pas une composition achevée, mais le cadre à l'intérieur duquel le reste est construit.

Ce qu'il couvre : treize états d'écran - explication de la manche, classement, introduction des joueurs, variantes de choix multiple, questions longues, avertissements de Seats, paramètres. Chacun remplit la zone de contenu à sa façon avec des éléments de la planche d'éléments, le cadre doit donc pouvoir accueillir des choses qui ne se ressemblent pas du tout. Le sélecteur de questions et la question longue peuvent recevoir leur propre composition si vous le souhaitez ; sinon ils utilisent ce cadre.

Deux moments de jeu sur le même cadre : un sélecteur de questions et une échelle de points.

Regardez le peu qu'ils ont en commun. Le sélecteur place ses trois lignes dans un panneau bordé ; l'échelle n'a aucun panneau, seulement des lignes séparées par de fins filets. Ce que les deux partagent, c'est le fond et le bandeau d'en-tête au-dessus - tout ce qui se trouve en dessous appartient à l'écran individuel et est rempli par le jeu, pas par vous.

Ce panneau et ces filets viennent de la planche d'éléments, pas de ce cadre. Ce que ce cadre doit faire, c'est les accueillir : concevez la zone de contenu comme une zone vide, neutre et généreuse, qui fonctionne aussi bien avec un panneau bordé, une liste nue qu'un tableau de lignes. Un fond chargé en son centre, ou un en-tête qui ne fonctionne qu'avec un panneau glissé juste en dessous, c'est là que cela casse.

Cadre 2 - l'écran de connexion

Ce qu'il contient : tout ce dont la salle a besoin pour rejoindre la partie.

• cinq lignes d'instructions
• un code de jeu et un code QR, tous deux générés par le moteur - réservez un carré pour le code QR
• une ligne indiquant le nombre de joueurs connectés
• une liste des joueurs qui arrivent au compte-gouttes

À dessiner deux fois : avec un logo client à côté du code de jeu, et sans, les visuels du thème portant alors l'écran à eux seuls.

Cadre 3 - l'écran d'attente

Ce qu'il contient : presque rien - le logo du quiz lui-même, ou les visuels du thème.

Il ne partage que le fond avec l'écran de connexion ; concevez-le donc comme une composition à part entière. Il reste affiché pendant que le quizmaster lit une question à voix haute, ce qui le laisse à l'écran plus longtemps que presque tout le reste du jeu. Il mérite plus d'attention qu'un écran vide n'en reçoit habituellement.

Cadre 4 - l'écran de question

Ce qu'il contient : la question, un minuteur, quatre options de réponse et une ligne de feedback. C'est l'écran que la salle regarde le plus longtemps. Notez qu'une option peut ne contenir rien d'autre qu'un emoji :

Une question sans options - les joueurs tapent leur réponse sur leur téléphone. L'écran est presque vide et le minuteur devient l'élément principal :

Le moment où le temps est écoulé. La bulle de feedback apparaît par-dessus l'écran et le minuteur est vide :

Cadre 5 - question avec pièce jointe

Ce qu'il contient : les mêmes éléments que le cadre 4, disposés autour d'une image ou d'une vidéo. Il peut s'agir d'une composition différente. La pièce jointe est mise à l'échelle pour tenir dans le cadre que vous dessinez, une image en format paysage comme en format portrait doit donc y rester acceptable.

Ce qu'il couvre : la pièce jointe en plein écran, et les pièces jointes affichées entre les questions.

Ici avec les options à gauche et à droite de la pièce jointe :

Une pièce jointe seule, occupant tout l'écran :

Cadre 6 - l'écran de réponse

Ce qu'il contient : la réponse correcte, la façon dont les réponses de la salle se sont réparties entre les options, et une ligne de feedback.

Ce qu'il couvre : l'écran de réponse des questions ouvertes et des questions avec pièce jointe.

L'écran passe par trois moments. D'abord la répartition, sans rien de marqué encore :

Ensuite l'option correcte est cochée et les mauvaises sont barrées :

Et si la question comporte une explication, une bulle descend par-dessus les visuels. Laissez-lui de la place - elle se pose par-dessus tout ce que vous avez conçu :

Avec un petit groupe, le même moment est une liste de scores plutôt qu'un graphique :

Pour une question ouverte, le graphique montre combien de joueurs ont trouvé :

Cadre 7 - classement et gagnant

Ce qu'il contient : une liste de joueurs avec position, avatar, nom et score. Fournissez la ligne de joueur comme un élément séparé et réutilisable : elle est répétée six fois par défaut, jusqu'à dix.

Ce qu'il couvre : le classement entre les manches et le gagnant final.

Le classement après une manche, avec six lignes de joueur :

Le décompte final nomme un joueur à la fois, de la dernière place à la première - place, score et nom d'équipe sous les projecteurs. C'est aussi là que les emoji volants sont les plus nombreux :

Cadre 8 - l'intro de manche

Ce qu'il contient : une courte annonce par catégorie de manche. Il y a six catégories : sciences & techniques, nature, divertissement & musique, sport, art, histoire.

Ce qu'il couvre : les six catégories. Une même conception peut en servir plusieurs.

Ici, une seule composition avec une variante par catégorie :

Un personnage est facultatif. Le thème QuizWitz standard en a un qui parle et réagit ; le thème Emerald n'en a pas, et s'en passer supprime le travail d'animation le plus coûteux - synchronisation labiale, yeux, bras.

Sans personnage, l'intro de manche devient un moment graphique, typographique ou illustratif. Deux approches gardent le travail dans des proportions raisonnables : une composition avec une variante de couleur ou d'icône par catégorie, ou une annonce universelle unique dont seul le nom de la manche change. Six intros vraiment différentes, cela fait beaucoup de travail pour quelques secondes à l'écran.

---

La planche d'éléments

Deux groupes d'éléments, sur une seule planche, chacun dessiné une fois et réutilisé partout.

Briques de contenu. Elles remplissent la zone de contenu du cadre général. Les écrans qui se rabattent dessus sont assemblés à partir d'elles, ce que vous dessinez ici décide donc de l'allure de tous :

• un panneau : remplissage, bordure, rayon des angles - le conteneur dans lequel se trouve une liste ou un bloc de texte
• une ligne de liste : l'unité répétée de toute liste, avec son propre fond ou sans
• un séparateur : le filet entre les lignes, là où il n'y a pas de panneau
• une paire label-valeur : un label court à gauche, une valeur à droite

Contrôles. Dessinés une fois, utilisés sur chaque écran :

• un bouton dans ses quatre états : repos, survol, enfoncé, désactivé
• les symboles correct et incorrect
• une barre de défilement, une case à cocher, une liste déroulante
• l'emplacement du logo QuizWitz

---

Ce qui est décidé pour vous

• Les téléphones des joueurs. Une mise en page HTML fixe.
• La poignée d'éléments que le moteur dessine lui-même - les filets entre les lignes de l'échelle de points, la ligne mise en évidence dans le sélecteur de questions, le code QR. Leurs couleurs viennent de La couleur sous forme de liste.
• Quels écrans se rabattent sur le cadre général, et comment.
• La façon dont les six catégories sont associées aux visuels d'intro de manche. Cette association est un réglage de configuration, une même intro peut donc être réutilisée pour plusieurs catégories.
• Tout le rythme et toutes les durées d'animation.
• Le son. Un thème peut embarquer sa propre musique et ses propres effets sonores, mais c'est un livrable distinct qui ne fait pas partie du brief de conception.

---

Règles de conception

Aucune de ces règles ne limite votre travail visuel. Elles portent sur la façon dont le fichier est construit.

Format

• 1920 × 1080 pixels, exactement. Un cadre par écran.
• Travaillez en vectoriel partout où c'est possible. Là où vous utilisez du bitmap (photos, textures) : au moins 2× la taille d'affichage.
• Le document Animate tourne à 24 images par seconde. Utile si vous fournissez des idées de mouvement.
• Gardez une marge de 5 % sur les bords, libre de toute information essentielle. Les projecteurs rognent.

Structure des calques - la règle qui compte le plus

Tout ce qui peut bouger, apparaître ou changer de valeur se trouve sur son propre calque nommé. Rien de fusionné, rien d'aplati.

En pratique :

• les quatre options de réponse sont quatre calques séparés, pas un seul
• le minuteur est séparé du fond
• un bouton et son libellé sont deux éléments
• une ligne de joueur est un groupe unique qui peut être dupliqué

Ce qui peut être fusionné : les visuels de fond purement décoratifs qui fonctionnent comme une seule image fixe.

C'est la seule règle dont le non-respect fait vraiment mal - il faut alors décomposer ou redessiner les visuels, ce qui est précisément le coût que cette organisation vise à éviter.

Les effets qui ne survivent pas

Le moteur dessine sur un canvas HTML5. Ceux-ci doivent être intégrés à l'image ou abandonnés :

Effet	À faire à la place
Flou en direct, ombres portées et lueurs appliqués comme filtres	Les fournir sous forme de visuels
Modes de fusion (produit, superposition, incrustation)	Les convertir en couleur unie
Effets de calque et calques de réglage	Les intégrer à l'image
Dégradés à l'intérieur du texte, ou texte avec un contour par caractère	Les abandonner
Masques qui changent d'une image à l'autre	Les abandonner

Les dégradés dans les formes ne posent pas de problème. La transparence ne pose pas de problème. Les ombres sous forme de visuels fixes ne posent pas de problème.

Comment se comporte le texte

C'est là que concevoir pour QuizWitz diffère le plus d'un travail de conception ordinaire.

Vous ne définissez pas de corps de texte. Vous dessinez un cadre de texte.

Tout le texte est dessiné en direct par un composant qui reçoit deux choses : une chaîne, et le rectangle que vous avez dessiné. Il cherche ensuite le plus grand corps auquel cette chaîne, répartie sur plusieurs lignes, tient encore dans le cadre. Une chaîne longue rétrécit pour tenir ; une chaîne courte grandit jusqu'à remplir le cadre.

Trois lignes, trois cadres identiques - et trois corps de texte complètement différents, uniquement parce que le texte est plus court ou plus long. « Where is love » obtient toute la hauteur ; la question au-dessus doit se contenter de deux petites lignes. Les labels de gauche se comportent de la même manière.

Ce qui en découle :

• La même question a une autre allure dans une autre partie. Une question de six mots apparaît grande et occupe tout l'écran ; une question de trente-cinq mots apparaît petite sur cinq lignes, dans exactement le même cadre. Les deux doivent bien rendre.
• Concevez chaque cadre de texte deux fois. Remplissez-le une fois avec un exemple très court et une fois avec un exemple très long, et vérifiez que la composition tient dans les deux cas. En règle générale : une option de réponse va d'un à environ huit mots, une question de cinq à quarante, un nom de joueur de deux à vingt caractères.
• Ne comptez pas sur un nombre de lignes fixe. Un titre « toujours sur une ligne » n'existe pas ici.
• N'alignez pas le texte optiquement sur autre chose. Un texte qui doit s'aligner sur un filet ou une forme se décalera dès qu'il sera plus court ou plus long. Utilisez des cadres suffisamment généreux et un alignement (à gauche, centré, à droite) plutôt que des positions exactes.
• Douze langues. Les mots composés allemands sont longs, et le hongrois n'est pas plus clément. Un cadre juste en anglais tombe à une taille illisible en allemand.
• Des emoji peuvent apparaître à l'intérieur du texte. Les joueurs en choisissent un à côté de leur nom d'équipe, et une question ou une option peut en contenir un - parfois une option n'est rien d'autre qu'un emoji. Ils sont dessinés en couleur et sont plus hauts que les lettres qui les entourent.

Ce que celui qui construit le thème doit savoir de chaque cadre de texte : où il se trouve, quelle est sa taille, comment il est aligné, quelle couleur et quelle police. Pas : à quel corps.

Vous pouvez en tirer parti. Un grand cadre avec un texte court devient à lui seul une composition typographique forte, et un cadre que vous rendez délibérément étroit et haut force le texte en colonne. Utilisez cet ajustement comme outil de conception ; ne concevez simplement pas contre lui.

Le minuteur - obligatoire, et c'est une animation

Chaque écran de question a un minuteur ; la salle doit voir combien de temps il reste.

Le minuteur n'est pas un nombre qui décompte mais une animation dont le moteur déplace la tête de lecture. Vous concevez une progression de « plein » à « vide » - une barre qui se vide, un anneau qui se referme, un sablier, une ligne qui rétrécit. Le moteur joue cette animation exactement à la vitesse qui fait coïncider la dernière image avec la fin de la question.

Ce qui en découle :

• La durée d'une question n'est pas fixe. Elle est définie par quiz - souvent vingt à trente secondes, mais elle peut être plus courte ou plus longue. Votre animation est étirée ou compressée pour s'y adapter.
• Pas de chiffres ni de graduations par seconde. Un minuteur qui décompte « 20, 19, 18… » cesse d'être juste dès que la durée change.
• Les dernières secondes sont le moment le plus tendu du jeu. Il est utile que la progression devienne plus lisible ou plus pressante vers la fin.
• Lisible depuis le fond de la salle, d'un seul coup d'œil.
• Plusieurs minuteurs sont autorisés. Une barre en haut et un anneau près de la question sont tous deux pilotés, tant que chacun s'appelle timer.

Fournissez le minuteur sous forme d'une série d'images clés ou d'une description de la progression - « la barre se vide de droite à gauche et passe du vert au rouge » suffit.

Les emoji volants atterrissent par-dessus tout

Chaque joueur choisit un emoji en rejoignant la partie, et le jeu projette ces emoji à travers l'écran. Ils sont dessinés par le moteur sur un calque au-dessus du thème. Il n'y a rien à concevoir ici - mais il y a quelque chose à contourner par la conception, car ce ne sont pas une fioriture rare.

Ils apparaissent à trois moments :

• Quand un joueur répond. Son emoji s'élève depuis le bord inférieur à une position horizontale aléatoire, décrit un arc et retombe hors du champ.
• Quand un joueur en projette un. Les joueurs peuvent projeter leur emoji depuis leur téléphone ; l'angle et la vitesse viennent du balayage, et il part du bas au centre, en tournoyant.
• Quand une place est dévoilée dans le décompte final. Une gerbe des emoji du joueur nommé : vingt pour une place ordinaire, cinquante pour la troisième, soixante-quinze pour la deuxième, et cent cinquante pour le gagnant.

Ce que cela implique pour la conception :

• Gardez le tiers inférieur des écrans de classement et de gagnant libre de tout élément petit ou essentiel. Pendant le décompte, c'est vraiment encombré là en bas.
• Partez du principe qu'ils jureront avec votre palette. Ce sont des emoji en pleine couleur venus de tous les coins de la table Unicode, et aucun thème ne les contrôle. Une conception qui ne tient que dans une gamme de couleurs resserrée aura l'air accidentelle pendant ces secondes.
• Les projections sont supprimées tant qu'une image ou une vidéo est affichée, les écrans avec pièce jointe restent donc propres.
• Le calque entier peut être désactivé par partie, ne construisez donc pas non plus une composition qui dépend de leur présence.

Polices

• Les polices doivent pouvoir être incorporées. Le fichier .ttf ou .otf est nécessaire, ainsi qu'une licence qui autorise l'incorporation dans une application. Une police dont la licence ne couvre que le web, ou uniquement l'impression, ne peut pas être utilisée. Vérifiez-le avant de concevoir avec elle ; c'est une correction coûteuse après coup.
• Les polices aux jambages supérieurs ou inférieurs inhabituellement grands peuvent être compensées, mais signalez-le si vous en utilisez une.

La couleur sous forme de liste

Le thème lit une liste de couleurs dans un fichier de configuration, et les téléphones des joueurs sont stylés à partir de la même liste. Fournissez votre palette sous forme de liste nommée, et pas seulement sous forme de couleurs dans les visuels :

Où	Couleurs
Écran de jeu	Couleur principale, couleur d'accent, fond, couleur de panneau ou de conteneur, fond du minuteur, couleur de texte par défaut, couleur du texte d'en-tête, couleur du texte de la question, texte des boutons, texte des dialogues et des explications, texte du nom et du score des joueurs, la couleur pour correct, la couleur pour incorrect
Les quatre options de réponse	Pour chaque option : une couleur de fond, une couleur de bordure, et une couleur unie pour les téléphones et les graphiques
Téléphones des joueurs	Fond, couleur du texte, couleur du contour, couleur du contour des options, ainsi que la couleur de fond et de texte du conteneur de réponse

Les dégradés sont autorisés sur l'écran de jeu : donnez-les sous forme de deux valeurs hexadécimales.

Quelques couleurs sont le seul moyen d'agir sur des parties que le moteur dessine lui-même ; elles méritent donc d'être choisies plutôt que laissées par défaut :

• le séparateur - les filets entre les lignes là où il n'y a pas de panneau, et sur l'échelle de points
• les états actif, inactif et sélectionné d'une ligne du sélecteur de questions
• le texte des dialogues
• le premier plan et l'arrière-plan du code QR

Si vous les omettez, elles retombent sur des valeurs par défaut intégrées - blanc, gris, rouge, noir et blanc - qui correspondent rarement à une conception.

Le logo QuizWitz

Les conceptions sur mesure comprennent le logo QuizWitz. Réservez-lui une place où il ne gêne pas la conception.

---

Ce qu'il faut livrer

Fichier source - Illustrator de préférence

Le thème est construit dans Adobe Animate, et ce qu'Animate peut importer détermine quelle part de votre travail survit intacte à la passation :

Outil	Ce qui se passe à l'import	À utiliser pour
Adobe Illustrator (.ai)	Animate l'importe directement et convertit vos calques en calques Animate ou en symboles séparés, en conservant les noms de calques et en laissant les vecteurs modifiables. C'est exactement l'étape qui évite que les visuels soient reconstruits à la main.	À privilégier pour le livrable final
Adobe Photoshop	S'importe avec ses calques intacts, comme Illustrator, mais donne du bitmap au lieu du vectoriel.	Possible
Figma	Tout passe par un export SVG et PNG, et c'est précisément là que se perd la structure de calques nécessaire ici. Si vous utilisez malgré tout Figma, fournissez chaque élément séparément en SVG, avec des noms de fichiers correspondant aux noms de calques, afin que la structure puisse être reconstruite à la main.	La phase de concept, si vous y êtes plus rapide

Structure du fichier :

• Un plan de travail par écran, nommé d'après les cadres ci-dessus.
• Les parties réutilisables (bouton, ligne de joueur, option de réponse, minuteur) sous forme de symboles ou de composants, pas de copies isolées.
• Des noms de calques en anglais, sans espaces : question, option1 à option4, timer, feedback, header, background, playerScore.
• Les couleurs en nuances nommées et le texte en styles nommés, plutôt que définis objet par objet.

Liste des livrables

1. Le fichier source, structuré comme ci-dessus.
2. Chaque cadre en PNG, 1920 × 1080 - une référence de l'allure attendue. Pour le cadre 2, la version avec et la version sans logo client.
3. La planche d'éléments sur un seul plan de travail : les briques de contenu et les contrôles.
4. Chaque élément graphique séparé en PNG transparent à 2×, dans un seul dossier, le nom de fichier correspondant au nom de calque.
5. Le minuteur sous forme d'images clés ou d'une description écrite de la progression.
6. Les polices en .ttf ou .otf, avec justificatif de licence.
7. La liste des couleurs décrite dans La couleur sous forme de liste, en valeurs hexadécimales.
8. Une demi-page de notes : quelle est l'idée, comment les options doivent apparaître, ce qui bouge et ce qui reste immobile. Pas une justification de conception de dix pages - celui qui construit le thème a besoin de savoir quoi construire. Les idées de mouvement peuvent être décrites ou fournies sous forme d'animatique sommaire.

Ordre de travail

1. Le cadre 4, l'écran de question, avec la planche d'éléments. Faites valider les deux avant le reste. À eux deux, ils portent le minuteur, les options, le panneau et tous les contrôles ; ils fixent donc le style de tout le thème.
2. Les cadres 1 à 3. Ils découlent naturellement des deux premiers.
3. Les cadres 6 à 8 viennent en dernier.

---

Annexe - noms des symboles

Pour être complet, et pour qui veut savoir exactement où aboutissent ses visuels. Vous n'avez pas besoin de lire ceci pour faire le travail ; les huit cadres et la planche d'éléments ci-dessus suffisent. Utiliser ces noms comme noms de calques épargne une étape de traduction.

Cadre	Nom du symbole	Parties requises
1. Cadre général	GeneralPurposeScreen ; GeneralPurposeScreenWithHeader facultatif	placeholder (la zone de contenu) ; cadre de texte title facultatif
1b. Sélecteur de questions, question longue	MultiQuestionScreen, LongQuestionScreen ; tous deux facultatifs, se rabattent sur le cadre général	sélecteur : espace réservé questions, timer ; question longue : espace réservé question
2. Écran de connexion	PresentationConnectScreen ; PresentationConnectScreenWithLogo facultatif, avec un espace réservé logo	instructions.line1 à line5, connectedPlayers ; espace réservé qrCode avec l'étiquette d'image showQrCode facultatif
3. Écran d'attente	PendingScreen ; PendingScreenWithLogo facultatif	header.text
4. Écran de question	QuestionScreen	question.text, timer, feedback.text, option1 à option4, étiquettes d'image showOptions et showFeedback
5. Question avec pièce jointe	QuestionScreenAttachment	comme ci-dessus, plus attachment.placeholder
5b. Pièce jointe en plein écran	AttachmentScreen	placeholder
6. Écran de réponse	AnswerPieScreen ; AnswerPieScreenAttachment facultatif	option1 à option4, answer.text, feedback.text
6b. Réponse à une question ouverte	AnswerScreen, AnswerOpenQuestionPieScreen ; variantes …Attachment facultatives	answer.text, feedback.text, players, piechart
7. Classement	WinnerScreen + PlayerScore ; WinnerScreen_round, WinnerScreen_game et PlayerScoreNoImage facultatifs	header.text, players, feedback.text (playAgain.text facultatif) ; dans la ligne : position, name, score, avatar facultatif
8. Intro de manche	un ou plusieurs symboles de n'importe quel nom ; le fichier de configuration associe chacune des six catégories à un symbole	-
-	LoadingScreen	text, progress
-	Button, Checkbox, Slider, QuestionSelect, Scrollbar, SettingsScreenScrollarea, SymbolCorrect, SymbolWrong, PackListItem	aucun visuel propre nécessaire - construits à partir de ce qui apparaît dans vos cadres
-	IntroScreen, IntroScreenBranded, MenuScreen, SettingsScreen, AlertScreen, ActivityScreen, ActivityVotePieScreen	affichés uniquement dans l'application de bureau, pas dans un quiz en direct. Ne font pas partie du brief : ils sont repris du modèle de thème et restylés avec votre fond et vos boutons

Les symboles d'intro de manche du thème d'origine s'appellent RoundIntroScienceAndTech, RoundIntroFloraAndFauna, RoundIntroTedMusic, RoundIntroTedSport et RoundIntroTedCultHist ; l'art et l'histoire partagent le dernier. Le « Ted » de ces noms est un reste du personnage du thème d'origine et ne signifie pas qu'un personnage doive y apparaître.

Chaque élément suivi de .text est un cadre de texte ajusté, comme décrit dans Comment se comporte le texte : un rectangle que le moteur remplit lui-même. L'élément timer est un clip vidéo doté de son propre scénario ; le moteur lit son nombre d'images et déplace la tête de lecture proportionnellement au temps écoulé, au maximum 24 fois par seconde.

Ce que le fichier de configuration reprend de votre conception

{
  "fontFiles": { "<body font>": "fonts/body.ttf", "<heading font>": "fonts/heading.ttf" },
  "fonts":  { "default": "<body font>", "header": "<heading font>" },
  "colors": {
    "_accent_": "#…", "_main_": "#…", "_background_": "#…-#…",
    "_container_": "#…", "_timerBackground_": "#…",
    "default": "#…", "header": "#…", "question": "#…",
    "buttons": "#…", "dialog": "#…", "player": "#…",
    "_optionColors_": [ { "background": "#…-#…", "border": "#…" } ]
  },
  "optionColors": [ "#…", "#…", "#…", "#…" ],
  "booleanResultColors": { "correct": "#…", "wrong": "#…" },
  "remoteColors": {
    "background": "#…", "text": "#…", "outline": "#…",
    "options-outline": "#…", "container-background": "#…", "container-text": "#…"
  },
  "roundIntros": { "science": "<symbol>", "nature": "<symbol>", "entertainment": "<symbol>",
                   "sports": "<symbol>", "art": "<symbol>", "history": "<symbol>" },
  "overlay": "light | dark"
}