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. Then click on the “Style” tab at the top of the page. 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:   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: 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: 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: 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. 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. 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): 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. The first one is the Page Background Color field.  This setting affects the color of the background of all the pages in your assessment. The Question Text Color field affects the color of all the questions in your assessment. The Title & Accent Color field affects the color of your assessment title.  It also provides an accent color that is used throughout your assessment. The Assessment Border Color field affects the color of the border that encircles your assessment questions. The Title Border Color field affects the color of the border around your assessment title. The Assessment Background Color field affects the color of the background for your assessment questions. 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. The Horizontal line between questions field allows you to create a line to visually separate each assessment question. 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). 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.

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. You can type in the name of a common color. If you know the hex code for the color you want, you can enter it on the line.

Preview your Style Selections

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

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