Ръководство за дизайн на теми

Темите обясняват как се изгражда тема на QuizWitz: в Adobe Animate, експортирана като библиотека CreateJS. Тази страница разглежда стъпката преди това - дизайна на темата.

Написана е за графичен дизайнер и изхожда от това, че дизайнът и продукцията в Animate се правят от различни хора. Малко дизайнери още работят в Adobe Animate, затова обичайно е един дизайнер да предаде графиката, а друг да сглоби темата. Това работи добре, но само ако графиката е предадена във форма, с която изграждането наистина може да работи. Тази страница описва тази форма и същевременно служи като списък с материалите за предаване, когато поискаш оферта от дизайнер.

съвет

Ако искаш да смениш само цветовете, шрифтовете и фоновете, нищо от това не ти трябва - вместо това персонализирай темата Emerald.

Виж я в действие

Всеки описан тук екран може да се изиграе на живо, с примерни данни, в тестера на теми на адрес client.quizwitz.com/test.html. Той зарежда тема и предлага меню с тестови екрани: въпроси с и без прикачен файл, разпределението на отговорите за малка и за голяма група, класирането, интрата на рундовете, екрана за свързване с и без клиентско лого, и така нататък. Добави ?theme=emerald към адреса, за да видиш темата Emerald. Този, който изгражда темата, използва същата страница, за да я проверява по време на сглобяването.

---

Какво проектираш

Една игра на QuizWitz се играе от цяла зала едновременно и винаги участват два екрана:

• Екранът на играта - проектор или телевизор, 1920 × 1080. Въпроси, отговори, как са се разпределили отговорите на залата, класирането. Това проектираш ти.
• Телефонът на всеки играч, на който той въвежда отговора си. Това е уеб страница с фиксирано оформление; тя се стилизира от твоя списък с цветове, не ти я оформяш.

Темата е цялата визуална обвивка на екрана на играта: фон, типография, цвят, начинът, по който се представя въпрос с четири опции, как се изгражда класирането, как се обявява рунд.

---

Седем рамки и лист с елементи

Играта има десетки различни състояния на екрана, но повечето са варианти на едно и също оформление. Ти проектираш седем рамки и един лист с елементи; останалото се извежда от тях. Това не е пряк път - така работи двигателят. Екран без собствена графика се връща към обща рамка.

Листът е също толкова важен, колкото и рамките: екран, който се връща към общата рамка, все пак се нуждае от обзавеждане в зоната си за съдържание - панел, ред, линия - и това обзавеждане е дизайнерско решение, а не нещо, което може да се изведе от фон.

#	Рамка	Какво има на нея	Какво се извежда от нея
1	Обща рамка	Фонът, заглавие в горната лента и празна зона за съдържание под него. Не е завършена композиция - това е рамката, вътре в която се изгражда останалото.	Тринадесет състояния на екрана: обяснение на рунда, класиране, представяне на играчите, варианти с избор от няколко отговора, дълги въпроси, предупреждения за Seats, настройки. Всяко от тях запълва тази зона за съдържание по свой начин с елементи от листа, така че тя трябва да носи неща, които изобщо не си приличат. Изборът на въпроси и дългият въпрос могат да получат собствена композиция, ако така искаш; иначе използват тази рамка.
2	Свързване и изчакване	Два екрана, не един. Екранът за свързване е това, което залата вижда, за да се присъедини: пет реда с указания, код за игра, QR код, ред с броя на свързаните играчи и списък с играчите, които постепенно се появяват. Проектирай го два пъти: с клиентско лого и без. Кодът за игра и QR кодът се генерират от двигателя; запази квадрат за QR кода. Екранът за изчакване остава на екрана, докато quizmaster чете въпроса на глас, и е почти празен: собственото лого на куиза, или графиката на темата, и нищо друго. Той стои на екрана по-дълго от почти всичко останало в играта.	-
3	Екран с въпроса	Въпросът, таймер, четири опции за отговор, ред с обратна връзка. Екранът, който залата гледа най-дълго.	-
4	Въпрос с прикачен файл	Същото, подредено около изображение или видео. Може да е различна композиция от рамка 3. Прикаченият файл се мащабира така, че да се побере в правоъгълника, който начертаеш, затова в него трябва да изглежда приемливо както хоризонтално, така и вертикално изображение.	Също и вариантът с прикачен файл на цял екран, както и прикачените файлове, показвани между въпросите.
5	Екран с отговора	Кой отговор е бил верен, как са се разпределили отговорите на залата между опциите, и ред с обратна връзка.	Също и екранът с отговора за отворени въпроси и за въпроси с прикачен файл.
6	Класиране и победител	Списък с играчи с позиция, аватар, име и резултат. Предай реда на играч като отделен елемент за многократна употреба - по подразбиране той се повтаря шест пъти, до десет.	Както класирането между рундовете, така и крайния победител.
7	Интро на рунда	Кратко обявяване за всяка категория рунд. Категориите са шест: наука и техника, природа, забавление и музика, спорт, изкуство, история. Един дизайн може да обслужи няколко категории.	И шестте категории.

Листът с елементи

Две групи елементи на един лист, всеки начертан веднъж и използван навсякъде.

Градивни елементи на съдържанието. Те запълват зоната за съдържание на общата рамка. Екраните, които се връщат към нея, се сглобяват от тях, така че това, което начертаеш тук, решава как изглеждат всички те:

• панел: запълване, контур, радиус на ъглите - контейнерът, в който стои списък или блок текст
• ред от списък: повтарящата се единица на всеки списък, със собствен фон или без
• разделител: линията между редовете там, където няма панел
• двойка етикет и стойност: кратък етикет вляво, стойност вдясно

Контроли. Начертани веднъж, използвани на всеки екран:

• бутон в четирите му състояния: покой, посочен с мишката, натиснат, изключен
• символите за вярно и грешно
• лента за превъртане, отметка, падащ списък
• къде стои логото на QuizWitz

Какво е решено вместо теб

• Телефоните на играчите. Фиксирано HTML оформление, стилизирано от твоя списък с цветове.
• Шепата неща, които двигателят чертае сам. Част от обзавеждането се чертае в кода, вместо да се взема от темата - линиите между редовете на стълбицата с точки, откроеният ред при избора на въпроси, QR кодът. Те вземат цвета си от списъка в Цветът като списък и отникъде другаде, така че този списък е единственото, с което можеш да им влияеш.
• Кои екрани се връщат към общата рамка и как.
• Как шестте категории се съотнасят към графиката на интрото на рунда. Това съответствие е настройка в конфигурацията, така че едно интро може да се използва повторно за няколко категории.
• Цялото времетраене и всички продължителности на анимациите.
• Звукът. Една тема може да носи собствена музика и звукови ефекти, но това е отделен материал за предаване и не е част от заданието за дизайн.

Героят е по избор

Стандартната тема на QuizWitz има герой, който говори и реагира. Нищо не изисква такъв: валидаторът на теми само предупреждава за елемента ted; без него не се проваля. Темата Emerald се доставя без герой и отпадането му премахва най-скъпата анимационна работа - синхрона на устните, очите, ръцете.

Без герой интрото на рунда се превръща в графичен, типографски или илюстративен момент. Два подхода държат работата в разумни граници: една композиция с цветови или иконен вариант за всяка категория, или едно универсално обявяване, в което се сменя само името на рунда. Шест наистина различни интра са много работа за няколко секунди на екрана.

---

Как изглеждат тези рамки на практика

Екраните по-долу идват от съществуваща тема. Те са тук, за да покажат кои елементи се появяват на всеки екран и кога. Не са еталон нито за стил, нито за оформление: къде тази тема поставя своя въпрос, своите опции и своя таймер, е нейно собствено решение, а твоето може да е съвсем различно. Чети ги заради това какво трябва да присъства, а не заради това къде стои. Всички те, и още, могат да се изиграят в тестера на теми.

Рамка 1 - общата рамка

Два момента от играта върху една и съща рамка: избор на въпроси и стълбица с точки.

Виж колко малко общо имат. Изборът поставя трите си реда в панел с контур; стълбицата няма никакъв панел, само редове, разделени с тънки линии. Това, което двете споделят, е фонът и лентата на горната част над тях - всичко под нея принадлежи на конкретния екран и се запълва от играта, не от теб.

Този панел и тези линии са дизайнерски решения и зависят от теб - те идват от листа с елементи, а не от тази рамка. Това, което тази рамка трябва да прави, е да ги носи: проектирай зоната за съдържание като празна, неутрална и просторна зона, която работи еднакво добре с панел с контур, с гол списък и с таблица от редове. Фон, който е натоварен в средата, или горна лента, която работи само с панел, пъхнат точно под нея, е мястото, където това се чупи.

Рамка 2 - свързване и изчакване

С клиентско лого до кода за игра и без него, когато екранът се носи от собствената графика на темата:

Екранът за изчакване е отделна композиция, а не вариант на екрана за свързване - двата споделят само фона. Той остава на екрана, докато quizmaster чете въпроса на глас, и е почти празен: собственото лого на куиза, или графиката на темата, и нищо друго. Стои на екрана по-дълго от почти всичко останало в играта, така че заслужава повече внимание, отколкото обикновено получава един празен екран.

Рамка 3 - екранът с въпроса

Четири опции, въпросът над тях, таймерът в средата. Забележи, че една опция може да се състои само от емоджи.

Въпрос без опции - играчите въвеждат отговора си на телефона. Екранът е почти празен и таймерът се превръща в главния елемент:

Моментът, в който времето изтича. Балонът с обратна връзка се появява върху екрана, а таймерът е празен:

Рамка 4 - прикачен файл

Същите части, преподредени около зона за прикачен файл, с опциите отляво и отдясно:

Прикачен файл сам по себе си, запълващ екрана:

Рамка 5 - екранът с отговора

Този екран минава през три момента. Първо разпределението, все още без нищо отбелязано:

След това вярната опция се отмята, а грешните се зачеркват:

А ако въпросът носи обяснение, върху графиката пада балон. Остави му място - той каца върху всичко, което си проектирал:

При малка група същият момент е списък с резултати вместо диаграма:

При отворен въпрос диаграмата показва колко играчи са отговорили вярно:

Рамка 6 - класиране и победител

Класирането след рунд. Редът на играч е елементът, който се повтаря: позиция, аватар, име, резултат.

Финалното отброяване назовава по един играч, от последното място към първото - място, резултат и име на отбора в светлината на прожекторите. Тук летящите емоджита също са най-гъсти; виж бележката по-долу:

Рамка 7 - интрото на рунда

Един дизайн, по избор с вариант за всяка категория:

---

Правила за дизайна

Нито едно от тях не ограничава визуалния ти дизайн. Те са за това как е изграден файлът.

Формат

• 1920 × 1080 пиксела, точно. Една рамка на екран.
• Работи във вектор, където можеш. Където използваш растер (снимки, текстури): поне 2× размера на показване.
• Документът на Animate върви на 24 кадъра в секунда. Има значение, ако предлагаш идеи за движение.
• Остави 5% поле по краищата, свободно от съществена информация. Проекторите режат.

Структура на слоевете - правилото, което има най-голямо значение

Всичко, което може да се движи, да се появява или да сменя стойност, стои в собствен именуван слой. Нищо слято, нищо сплескано.

На практика: четирите опции за отговор са четири отделни слоя, а не един. Таймерът е отделен от фона. Бутонът и надписът му са два елемента. Редът на играч е една група, която може да се дублира.

Какво може да бъде слято: чисто декоративна фонова графика, която работи като едно неподвижно изображение.

Това е единственото правило, което наистина боли, когато не се спазва - тогава графиката трябва да се разглоби или да се преначертае, а точно този разход тази организация цели да избегне.

Ефекти, които не оцеляват

Двигателят чертае върху HTML5 платно. Тези трябва да бъдат вградени в изображението или да отпаднат:

• Размазване, сенки и сияние на живо като филтри → предай ги като графика
• Режими на смесване (умножаване, екран, наслагване) → сведи ги до плътен цвят
• Ефекти на слоеве и коригиращи слоеве
• Градиенти вътре в текст, или текст с контур на всеки знак
• Маски, които се сменят при всеки кадър

Градиентите във фигури са наред. Прозрачността е наред. Сенките като фиксирана графика са наред.

Как се държи текстът

Тук проектирането за QuizWitz се различава най-много от обичайната дизайнерска работа.

Не задаваш размер на шрифта. Чертаеш правоъгълник.

Целият текст се чертае на живо от компонент, който получава две неща: низ и правоъгълника, който си начертал. След това той търси най-големия размер на шрифта, при който този низ, пренесен на редове, все още се побира в правоъгълника. Дългият низ се смалява, за да се побере; късият расте, докато правоъгълникът се напълни.

Три реда, три еднакви правоъгълника - и три напълно различни размера на шрифта, само защото текстът е по-къс или по-дълъг. „Where is love“ получава цялата височина; въпросът над него трябва да се справи с два малки реда. Етикетите отляво се държат по същия начин.

От това следва:

• Един и същ въпрос изглежда различно в друга игра. Въпрос от шест думи се появява голям и запълва екрана; въпрос от тридесет и пет думи се появява малък на пет реда, в точно същия правоъгълник. И двата трябва да изглеждат добре.
• Проектирай всяко текстово поле два пъти. Напълни го веднъж с много кратък пример и веднъж с много дълъг, и провери дали композицията се държи и в двата случая. Като ориентир: опция за отговор е от една до около осем думи, въпрос - от пет до четиридесет, име на играч - от два до двадесет знака.
• Не разчитай на фиксиран брой редове. Заглавие, което е „винаги на един ред“, тук не съществува.
• Не подравнявай текста оптически с нищо друго. Текст, който трябва да съвпадне с линия или с фигура, ще се измести веднага щом стане по-къс или по-дълъг. Използвай достатъчно просторни правоъгълници и подравняване (вляво, центрирано, вдясно) вместо точни позиции.
• Правоъгълникът е максимум, а не обещание. Ти проектираш пропорциите му; запълването се променя.
• Дванадесет езика. Немските сложни думи са дълги, а унгарският не е по-милостив. Правоъгълник, който е тесен на английски, пада до нечетливо малък размер на немски.
• Вътре в текста може да се появят емоджита. Играчите избират по едно до името на отбора си, а въпрос или опция може да съдържа някое - понякога една опция не е нищо друго освен емоджи. Те се чертаят в цвят и са по-високи от буквите около тях.

Какво трябва да знае изграждането за всяко текстово поле: къде е, колко е голямо, как е подравнено, какъв цвят и какъв шрифт има. Не: при какъв кегел.

От това следват две неща, които можеш да използваш: голям правоъгълник с кратък текст сам по себе си се превръща в силна типографска композиция, а правоъгълник, който нарочно правиш тесен и висок, вкарва текста в колона. Можеш да използваш това напасване като дизайнерско средство - просто не бива да проектираш срещу него.

Таймерът - задължителен, и е анимация

Всеки екран с въпрос има таймер. Той не е по избор; залата трябва да вижда колко време остава. И двете рамки с въпрос носят такъв.

Таймерът не е броящо число, а анимация, чиято глава за възпроизвеждане двигателят движи. Ти проектираш преход от „пълно“ към „празно“ - изпразваща се лента, затварящ се пръстен, пясъчен часовник, скъсяваща се линия. Двигателят възпроизвежда тази анимация точно с такава скорост, че последният кадър да съвпадне с края на въпроса.

От това следва:

• Продължителността на въпроса не е фиксирана. Тя се задава за всеки куиз - често двадесет до тридесет секунди, но може да е по-къса или по-дълга. Твоята анимация се разтяга или свива, за да пасне. Проектирай преход, а не анимация с определен брой секунди.
• Без цифри и без отброяване на всяка секунда. Таймер, който брои „20, 19, 18…“, престава да е верен веднага щом продължителността се промени.
• Последните секунди са най-напрегнатият момент от играта. Помага, ако преходът става по-ясен или по-настоятелен към края.
• Четлив от дъното на залата, с един поглед.
• Разрешени са няколко таймера. Лента отгоре и пръстен до въпроса се управляват и двата, стига всеки да се казва timer.

Предай таймера като поредица от ключови кадри или като описание на прехода - „лентата се изпразва отдясно наляво и преминава от зелено към червено“ е достатъчно.

Летящите емоджита кацат върху всичко

Всеки играч избира емоджи при присъединяването си, а играта хвърля тези емоджита из екрана. Двигателят ги чертае в слой над темата, в цветовете, които емоджито на играча случайно има. Тук няма какво да проектираш - но има около какво да проектираш, защото те не са рядка украса. Появяват се в три момента:

• Когато играч отговори. Емоджито на този играч се издига от долния ръб на произволна хоризонтална позиция, описва дъга и пада обратно извън кадъра.
• Когато играч хвърли някое. Играчите могат да хвърлят емоджито си от телефона; ъгълът и скоростта идват от плъзгането, а то тръгва отдолу от средата, въртейки се.
• Когато при финалното отброяване се разкрие място. Залп от емоджитата на назования играч: двадесет за обикновено място, петдесет за третото, седемдесет и пет за второто и сто и петдесет за победителя.

Те винаги влизат от долния ръб, описват дъга под действието на гравитацията и падат обратно навън. Какво означава това за дизайна:

• Дръж долната трета на екраните с класирането и с победителя свободна от всичко дребно или съществено. По време на отброяването там долу наистина е претъпкано.
• Приеми, че ще се бият с палитрата ти. Това са пълноцветни емоджита от всяко ъгълче на таблицата Unicode и никоя тема не ги контролира. Дизайн, който се държи само в тесен цветови диапазон, ще изглежда случаен през тези секунди.
• Хвърлянето е потиснато, докато се показва изображение или видео, така че екраните с прикачен файл остават чисти.
• Целият слой може да се изключи за отделна игра, така че не изграждай и композиция, която зависи от това, че те са там.

Шрифтове

• Шрифтовете трябва да могат да се вграждат. Нужен е файлът .ttf или .otf, плюс лиценз, който разрешава вграждане в приложение. Шрифт, лицензиран само като уеб шрифт или само за печат, не може да се използва. Провери това, преди да проектираш с него; след това корекцията е скъпа.
• Шрифтове с необичайно големи горни или долни удължения могат да се компенсират, но съобщи, ако използваш такъв.

Цветът като списък

Темата чете списък с цветове от конфигурационен файл, а телефоните на играчите се стилизират от същия списък. Предай палитрата си като именуван списък, а не само като цветове в графиката:

• Екран на играта: основен цвят, акцентен цвят, фон, цвят на панела или контейнера, фон на таймера, цвят на текста по подразбиране, цвят на текста в горната лента, цвят на текста на въпроса, текст на бутоните, текст на диалозите и обясненията, текст на името на играча и резултата, цветът за вярно, цветът за грешно.
• Четирите опции за отговор: всяка с цвят на фона и цвят на контура, плюс по един плътен цвят за опция за телефоните и за диаграмите.
• Телефоните на играчите: фон, цвят на текста, цвят на контура, цвят на контура на опциите, както и цветът на фона и на текста на контейнера с отговора.

На екрана на играта са разрешени градиенти: подай ги като две шестнадесетични стойности.

Няколко цвята са единственият лост върху части, които двигателят чертае сам, така че си струва да бъдат решени, вместо да останат по подразбиране: разделителят (линиите между редовете там, където няма панел, както и на стълбицата с точки), състоянията активен, неактивен и избран на ред при избора на въпроси, текстът на диалозите, и лицето и гърбът на QR кода. Ако ги пропуснеш, те падат до вградени стойности по подразбиране - бяло, сиво, червено, черно и бяло - които рядко пасват на един дизайн.

Логото на QuizWitz

Персонализираните дизайни включват логото на QuizWitz. Запази му място там, където не пречи на дизайна.

---

Какво да предадеш

Изходен файл - за предпочитане Illustrator

Adobe Illustrator (.ai) е за предпочитане и за това има конкретна причина. Темата се изгражда в Adobe Animate, който импортира файловете от Illustrator директно и превръща слоевете ти в слоеве на Animate или в отделни символи, като запазва имената на слоевете и оставя векторите редактируеми. Точно тази стъпка спасява графиката от това да бъде изграждана наново на ръка.

Figma или Photoshop също стават, но знай какво струва: при Figma всичко минава през експорт в SVG и PNG, а точно там се губи структурата на слоевете, която е нужна тук. Ако все пак използваш Figma, предай всеки елемент поотделно като SVG, с имена на файлове, съответстващи на имената на слоевете, за да може структурата да се възстанови на ръка. Photoshop се импортира в Animate с непокътнати слоеве, също като Illustrator, но ти дава растер вместо вектор.

Ако си по-бърз във Figma, използвай я за концептуалната фаза, а финалната версия предай в Illustrator.

Структура на файла:

• По една работна площ на екран, всяка точно 1920 × 1080, именувана според рамките по-горе.
• Частите за многократна употреба (бутон, ред на играч, опция за отговор, таймер) като символи или компоненти, а не като отделни копия.
• Имена на слоевете на английски, без интервали: question, option1 до option4, timer, feedback, header, background, playerScore.
• Цветовете като именувани мостри и текстът като именувани стилове, вместо зададени за всеки обект поотделно.

Списък с материалите за предаване

1. Изходният файл, структуриран както е описано по-горе.
2. Всяка рамка като PNG, 1920 × 1080 - еталон за това как трябва да изглежда. За рамка 2 както версията с клиентско лого, така и версията без него.
3. Листът с елементи като една работна площ: градивните елементи на съдържанието и контролите, изброени по-горе.
4. Всеки отделен графичен елемент като прозрачен PNG в 2×, в една папка, с име на файла, съответстващо на името на слоя.
5. Таймерът като ключови кадри или като писмено описание на прехода.
6. Шрифтовете като .ttf или .otf, с доказателство за лиценз.
7. Списъкът с цветове, описан по-горе, в шестнадесетични стойности.
8. Половин страница бележки: каква е идеята, как трябва да се появяват опциите, какво се движи и какво остава неподвижно. Не десетстранична дизайнерска обосновка - този, който изгражда темата, трябва да знае какво да изгради. Идеите за движение могат да бъдат описани или предадени като груб аниматик.

Ред на работа

Започни с рамка 3, екрана с въпроса, заедно с листа с елементи, и осигури одобрение и на двете преди останалото. Заедно те носят таймера, опциите, панела и всяка контрола, така че определят стила на цялата тема, а екранът с въпроса е този, който залата гледа най-дълго. Рамки 1 и 2 следват естествено от тях; рамки от 5 до 7 идват накрая.

---

Приложение - имена на символите

За пълнота и за онзи, който иска да знае точно къде попада графиката му. Не е нужно да четеш това, за да свършиш работата; седемте рамки и листът с елементи по-горе са достатъчни. Използването на тези имена като имена на слоеве спестява една стъпка на превод.

Рамка	Име на символа	Задължителни части
1. Обща рамка	GeneralPurposeScreen; GeneralPurposeScreenWithHeader по избор	placeholder (зоната за съдържание); текстово поле title по избор
1b. Избор на въпроси, дълъг въпрос	MultiQuestionScreen, LongQuestionScreen; и двата по избор, връщат се към общата рамка	избор: заместител questions, timer; дълъг въпрос: заместител question
2. Екран за свързване	PresentationConnectScreen; PresentationConnectScreenWithLogo по избор, със заместител logo	instructions.line1 до line5, connectedPlayers; заместител qrCode с етикет на кадър showQrCode по избор
2b. Екран за изчакване	PendingScreen; PendingScreenWithLogo по избор	header.text
3. Екран с въпроса	QuestionScreen	question.text, timer, feedback.text, option1 до option4, етикети на кадри showOptions и showFeedback
4. Въпрос с прикачен файл	QuestionScreenAttachment	както по-горе, плюс attachment.placeholder
4b. Прикачен файл на цял екран	AttachmentScreen	placeholder
5. Екран с отговора	AnswerPieScreen; AnswerPieScreenAttachment по избор	option1 до option4, answer.text, feedback.text
5b. Отговор на отворен въпрос	AnswerScreen, AnswerOpenQuestionPieScreen; вариантите …Attachment по избор	answer.text, feedback.text, players, piechart
6. Класиране	WinnerScreen + PlayerScore; WinnerScreen_round, WinnerScreen_game и PlayerScoreNoImage по избор	header.text, players, feedback.text (playAgain.text по избор); в реда: position, name, score, avatar по избор
7. Интро на рунда	един или повече символа с произволно име; конфигурационният файл свързва всяка от шестте категории със символ	-
-	LoadingScreen	text, progress
-	Button, Checkbox, Slider, QuestionSelect, Scrollbar, SettingsScreenScrollarea, SymbolCorrect, SymbolWrong, PackListItem	не се нуждаят от собствена графика - изграждат се от това, което се появява в твоите рамки
-	IntroScreen, IntroScreenBranded, MenuScreen, SettingsScreen, AlertScreen, ActivityScreen, ActivityVotePieScreen	показват се само в настолното приложение, не в куиз на живо. Не са част от заданието: взети са от шаблона на темата и се престилизират с твоя фон и твоите бутони

Символите за интро на рунда в стандартната тема се казват RoundIntroScienceAndTech, RoundIntroFloraAndFauna, RoundIntroTedMusic, RoundIntroTedSport и RoundIntroTedCultHist; изкуството и историята споделят последния. „Ted“ в тези имена е остатък от героя на оригиналната тема и не означава, че в тях трябва да се появява герой.

Всеки елемент с .text след него е напасвано текстово поле, както е описано по-горе: правоъгълник, който двигателят запълва сам. Елементът timer е филмов клип със собствена времева линия; двигателят чете броя на кадрите му и мести главата за възпроизвеждане пропорционално на изминалото време, най-много 24 пъти в секунда.

Какво взема конфигурационният файл от твоя дизайн

{
  "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"
}