Styling Your Assessment

To style your assessment, start by entering the Assessment Generator editor.

First, select the “Edit” link in the menu underneath your assessment.

Edit Simple Assessment

Then click on the “Style” tab at the top of the page.

Style Tab

The Style page can be used to change the colors that are shown in your assessment.  

You can also change the font size of your assessment questions text and preview how these changes will look on your assessment.

Color Fields

On the left-hand side of the page, there are a number of different fields that you can use to affect the look of your assessment.

The first one is the Page Background Color field.  This setting affects the color of the background of all the pages in your assessment.

Page Background Color

The Question Text Color field affects the color of all the questions in your assessment.

Question Text Color

The Title & Accent Color field affects the color of your assessment title.  It also provides an accent color that is used throughout your assessment.

Title & Accent Color

The Assessment Border Color field affects the color of the border that encircles your assessment questions.

Assessment Border Color

The Title Border Color field affects the color of the border around your assessment title.

Title Border Color

The Assessment Background Color field affects the color of the background for your assessment questions.

Assessment Background Color

Next up is the Alternate Question Background.  By setting this color to be different from your Assessment Background Color, you can provide a way to visually separate your assessment questions by alternating the colors.  

Alternate Question Background

The Horizontal line between questions field allows you to create a line to visually separate each assessment question.  

Horizontal line between questions

By setting these last 2 fields to be the same color as the Assessment Background Color you can provide a uniform look for your assessment questions.  

Also, if you have only one question per page the settings of these 2 fields won’t affect the look of your assessment.

Next is the place to set the color for your (optional) results chart. This color applies to the charts shown in simple assessment results. It also applies as the default color for bar charts in type-based assessments. (It does not affect the colors shown in radar and pie charts).

Chart Color

You can also opt to turn the chart off completely. See Setting Up How Users Receive Their Results for more details.

Lastly, there are the settings to set the button color and the button text color.

button color and button text color

Changing the Color Assignments

There are multiple ways you can change the color assignments in these fields.  

You can click on the color box and select a color.

Click on box to select a color

You can type in the name of a common color.

Type the name of a common color

If you know the hex code for the color you want, you can enter it on the line.

Enter the hex color code

Preview Your Color Selections

You can see how your color selections look in your assessment by either using the return key on your keyboard or by clicking the Save & Update Preview button.

Save & Update Preview Button

Select the Default Assessment Font Size

In addition, you can change the default font size for the text in your assessment.  We find that font sizes 14 through 16 tend to be easiest to read.  You can experiment here to find the font size that works best for your assessment.

Change Font Size

There’s also an option here where you can choose to include or exclude your assessment title on all the pages in your assessment.  

Show Assessment Title

Preview your Style Selections

You can check out how our assessment looks in the preview window to help guide your decisions.  

Preview Window

Test your Assessment on Desktop or Mobile View

You can also get a more complete look at your assessment by selecting either the “Test Assessment” or “Test Mobile” option from the “Actions” menu.

Test Assessment & Test Mobile

Be sure to click on the “Save” button to record your changes.

Please review the rest of our User Guide to learn more about our software.