Emerald theme
The Emerald theme is the easiest way to customize the look of your QuizWitz game. By default, the theme is a clean blue / green style with vivid option colors, but by combining quiz attachments and theme modifiers you can change the way it looks - drastically.
You can use our theme tester to see what your settings will look like.
Select the Emerald theme
In your Quiz settings, select Theme and enable Emerald.
You can test a quiz using the Emerald theme here.
Attachments
Quiz attachments
By far the easiest way to change the look and feel of the game is by attaching images to your quiz. Open the Quiz settings and scroll down to the Attachments section. Here you can upload images that will be used as background, client logo, connect - and wait screens (for conference - and live quizzes), and more.
Round attachments
You can also upload images or videos that will be played before and after the game. This goes for rounds as well: find an image that you want to use as round introduction, go to round settings, disable Show round intro to hide the default round introduction, and upload your image or video as Show before round. When the round starts, the image or video will be displayed instead of the default introduction.
Use images and videos of a 1920 x 1080 resolution for best results.
After playing with the attachments, we end up with something like this.
Music
All music in the game can be replaced with attachments as well. Any audio files uploaded in the during question slots will be played during the question countdown.
Emerald theme modifiers
In addition to attachments, you can also manipulate the Emerald theme with query parameters. These are parameters you can add to the advanced game options URL - and they change the look of the theme.
For this, we will start with an example quiz (without any attachments):
https://play.quizwitz.com/11486:gFUabUFh7i/emerald-theme-tutorial-default
When you start the above quiz, the game will be in the default Emerald style. Let's change that.
The easiest way to experiment with these parameters is by using our theme tester.
When you are done experimenting, you can copy - paste the parameters to your advanced game options URL.
The available modifiers are:
- backgroundColor
- mainColor
- accentColor
- containerColor (the question container; may carry an alpha value, for example ffffff40)
- timerBackgroundColor
- headerTextColor
- optionTextColor
- dialogTextColor
- pieChartLabelColor
- ladderColor
- optionColors (4 colors, comma - separated)
- optionBorderColors (4 colors, comma - separated)
The players' devices can be styled as well:
- remoteBackgroundColor
- remoteTextColor
- remoteQuestionColor
- remoteQuestionTextColor
- remoteOptionOutlineColor
- remoteOutlineColor
- remoteContainerBackground
- remoteContainerText
- remoteOptionColors (4 colors, comma - separated)
Additionally, you can set a default font:
- defaultFont
- headerFont
These fonts must be URLs to publicly available font files.
Finally, hideLogo=1 hides the QuizWitz logo.
Each of these modifiers can contain a single color in HTML hex format (ff0000), or a linear gradient by providing multiple colors divided by a minus symbol ( - for example ff1b6b-45caff). (Note that the # symbol should not be added.)
The query parameters must start with a question mark ( ? ) and each parameter must be divided with an ampersand ( & ). For more information on query parameters, visit wikipedia.
By adding these parameters to your game URL, you can modify the colors in the theme:
https://play.quizwitz.com/11486:gFUabUFh7i/emerald-theme-tutorial-default?backgroundColor=ff1b6b-45caff&accentColor=00ff87&mainColor=ffffff&timerBackgroundColor=fff95b
Saving the modifiers on your quiz
You don't have to add the parameters to every link by hand. Open Share or embed in the quiz editor, expand Advanced game options and paste the parameters (without the leading question mark, for example backgroundColor=ff1b6b-45caff&accentColor=00ff87) into the raw query string field and click Save settings to quiz. Every play link and share link of the quiz carries them from then on.
The QuizWitz AI assistant can do this for you as well: ask it to change the background colour of your quiz and it will switch the quiz to the Emerald theme and store the modifiers.
Custom question views
The Emerald theme also offers two extra screen layouts for a question with an image or video in its During question slot, chosen per question with the Custom view option in the question settings:
- Full screen attachment - the image or video fills the whole game screen, the question text and options are not drawn
- Full screen attachment without timer - the same, with the countdown hidden too
Players read the question and answer on their own devices. See writing questions for details.