User Guide

Everything you need to know from the basics through advanced features

  1. User Guide
  2.  » 
  3. Style Page
  4.  » Styling Your Assessment

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 assessment

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

styling your assessment

The Style page can be used to change the colors and formatting of your assessment.

You can also preview how these changes will look on your assessment.

Choose Your Assessment Layout

In the upper left-hand corner of the Style Tab, you’ll see the Layout section:

Assessment Layout

 

There are several pre-designed assessment layouts for you to choose from:

  • Clean & Simple:  plain assessment with no borders or question separators
  • Bordered:  assessment has a border and questions are separated by horizontal lines
  • Striped:  assessment has a border and questions are separated by an alternating background-color
  • Single question:  one question per page, auto-advance to next question

Select one of the options and click the Save & Update Preview button to view your changes.

Layout Options

Next, you have more formatting options related to your assessment layout:

Layout Options

The first setting allows you general control over the Font Size for your questions and other text areas in your assessment.

You can override the font size in any text area in the assessment editor by specifying a font in a specific editor window.  Wherever a font size is not specified in an editor window, then the general settings set here apply.

You can also choose whether to include your assessment title (or section headings if your assessment is split by section under the Setup Tab) on each page of your assessment.

Click the Save & Update Preview button to view your changes.

Edit Button Text and Other Text Elements

Moving to the right, you’ll see the Text section:

Edit Button Text

With these settings, you can change the wording on any of the buttons or pre-set fields in your assessment.

For example, here are the default settings for these buttons and text fields:

Text Elements

You can customize each of these as desired.  Just select the text field that you want to customize, enter what you’d like it to be, and save your changes.

This feature also provides increased support for non-English languages.

All the elements in your assessment can now be created in your language.

Text Elements French Spanish Chinese Mandarin Hebrew

Click the Save & Update Preview button to view your changes.

To view some of the fields, you might need to select “Test Assessment” from the drop-down menu in the upper right of your screen to see your changes.

Color Palettes

On the right, you’ll see a selection of color palettes available to you.

Color Palettes

Select a color palette from the list and click the Save & Update Preview button to view your changes.

Enter Your Brand Colors

You can also enter your brand colors (or other custom colors):

Brand Colors

There are 3 ways to enter colors:

  1. If you know the hex code for the color, you can enter it on the line.
  2. You can click on the color box and select a color.
  3. You can enter an HTML color name, such as “red” or “firebrick”, on the line.  (Learn more about HTML Color Names here.)

Click the Save & Update Preview button to view your changes.

Detailed Color Settings

You can also use the Detailed Color Settings to individually change the color items in your assessment.

Detailed Color Settings

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 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

Click the Save & Update Preview button to view your changes.

Preview your Style Selections

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

Preview Assessment

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

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.

Questions? Click Here!