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

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

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

Страницата има четири части:

1. Какво проектираш - екраните, които една тема покрива.
2. Осемте рамки и листът с елементи, една по една, с екранни снимки.
3. Правила за дизайна - как трябва да бъде изграден файлът, за да може двигателят да го използва.
4. Какво да предадеш - изходен файл, материали за предаване и ред на работа.

съвет

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

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

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

---

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

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

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

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

---

Осем рамки и лист с елементи

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

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

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

За екранните снимки

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

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

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

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

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

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

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

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

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

• пет реда с инструкции
• код за присъединяване и QR код, и двата генерирани от двигателя - запази квадрат за QR кода
• ред с броя на свързаните играчи
• списък с играчи, които се присъединяват един по един

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

Рамка 3 - екранът за изчакване

Какво има на него: почти нищо - собственото лого на куиза или графиката на темата.

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

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

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

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

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

Рамка 5 - въпрос с прикачен файл

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

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

Тук с опциите вляво и вдясно от прикачения файл:

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

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

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

Какво покрива: екрана с отговора при отворени въпроси и при въпроси с прикачен файл.

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

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

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

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

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

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

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

Какво покрива: класирането между рундовете и крайния победител.

Класирането след рунд, с шест реда на играчи:

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

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

Какво има на нея: кратко обявяване за всяка категория рунд. Категориите са шест: наука и техника, природа, забавление и музика, спорт, изкуство, история.

Какво покрива: всичките шест категории. Един дизайн може да обслужва няколко от тях.

Тук една композиция с вариант за всяка категория:

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

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

---

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

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

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

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

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

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

---

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

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

---

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

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

Формат

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

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

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

На практика:

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

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

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

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

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

Ефект	Какво да направиш вместо това
Размазване на живо, падащи сенки и сияние като филтри	Подай ги като графика
Режими на смесване (multiply, screen, overlay)	Превърни ги в плътен цвят
Ефекти на слоеве и коригиращи слоеве	Вгради ги в изображението
Градиенти вътре в текст, или текст с контур на всеки знак	Пропусни ги
Маски, които се сменят при всеки кадър	Пропусни ги

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Появяват се в три момента:

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

Какво означава това за дизайна:

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

Шрифтове

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

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

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

Къде	Цветове
Екран на играта	Основен цвят, акцентен цвят, фон, цвят на панела или контейнера, фон на таймера, цвят на текста по подразбиране, цвят на текста в заглавието, цвят на текста на въпроса, текст на бутоните, текст на диалозите и обясненията, текст на името и резултата на играча, цветът за вярно, цветът за грешно
Четирите опции за отговор	За всяка опция: цвят на фона, цвят на рамката и един плътен цвят за телефоните и диаграмите
Телефоните на играчите	Фон, цвят на текста, цвят на контура, цвят на контура на опциите, както и фонът и цветът на текста на контейнера за отговор

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

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

• разделителят - линиите между редовете там, където няма панел, и на стълбицата с точки
• състоянията активен, неактивен и избран на ред в избора на въпроси
• текстът на диалозите
• лицевата и задната страна на QR кода

Ако ги пропуснеш, те падат до вградени стойности по подразбиране - бяло, сиво, червено, черно и бяло - които рядко пасват на един дизайн.

Логото на QuizWitz

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

---

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

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

Темата се изгражда в Adobe Animate и това, което Animate може да импортира, решава колко от работата ти ще оцелее непокътната при предаването:

Инструмент	Какво става при импортиране	Използвай го за
Adobe Illustrator (.ai)	Animate го импортира директно и превръща слоевете ти в слоеве на Animate или в отделни символи, като запазва имената на слоевете и оставя векторите редактируеми. Точно тази стъпка спасява графиката от това да бъде изграждана наново на ръка.	За предпочитане за крайния материал
Adobe Photoshop	Импортира се със запазени слоеве, както Illustrator, но дава растер вместо вектор.	Възможно
Figma	Всичко минава през експорт в SVG и PNG и точно там се губи структурата на слоевете, която е нужна тук. Ако все пак използваш Figma, предай всеки елемент поотделно като SVG, с имена на файлове, съответстващи на имената на слоевете, за да може структурата да се възстанови на ръка.	Концептуалната фаза, ако в нея си по-бърз

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

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

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

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

Ред на работа

1. Рамка 4, екранът с въпроса, заедно с листа с елементи. Получи одобрение и за двете преди останалото. Заедно те носят таймера, опциите, панела и всяка контрола, така че определят стила на цялата тема.
2. Рамки 1 до 3. Те следват естествено от първите две.
3. Рамки 6 до 8 идват последни.

---

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

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

Рамка	Име на символа	Задължителни части
1. Обща рамка	GeneralPurposeScreen; GeneralPurposeScreenWithHeader по избор	placeholder (зоната за съдържание); текстово поле title по избор
1b. Избор на въпроси, дълъг въпрос	MultiQuestionScreen, LongQuestionScreen; и двата по избор, връщат се към общата рамка	избор: заместител questions, timer; дълъг въпрос: заместител question
2. Екран за свързване	PresentationConnectScreen; PresentationConnectScreenWithLogo по избор, със заместител logo	instructions.line1 до line5, connectedPlayers; заместител qrCode с етикет на кадър showQrCode по избор
3. Екран за изчакване	PendingScreen; PendingScreenWithLogo по избор	header.text
4. Екран с въпроса	QuestionScreen	question.text, timer, feedback.text, option1 до option4, етикети на кадри showOptions и showFeedback
5. Въпрос с прикачен файл	QuestionScreenAttachment	както по-горе, плюс attachment.placeholder
5b. Прикачен файл на цял екран	AttachmentScreen	placeholder
6. Екран с отговора	AnswerPieScreen; AnswerPieScreenAttachment по избор	option1 до option4, answer.text, feedback.text
6b. Отговор на отворен въпрос	AnswerScreen, AnswerOpenQuestionPieScreen; вариантите …Attachment по избор	answer.text, feedback.text, players, piechart
7. Класиране	WinnerScreen + PlayerScore; WinnerScreen_round, WinnerScreen_game и PlayerScoreNoImage по избор	header.text, players, feedback.text (playAgain.text по избор); в реда: position, name, score, avatar по избор
8. Интро на рунда	един или повече символа с произволно име; конфигурационният файл свързва всяка от шестте категории със символ	-
-	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"
}