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.

Style tab

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:

Select Layout from Style tab

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:

Select Layout Options from Style tab

Click on the “Select Fonts” button to access general controls for your Font choices and the default Font Size for your questions and other text areas in your assessment.

With Advanced and higher accounts, you can select from 1000+ Google fonts to add to your assessment editor menus. Search for a font by name or select from the list shown. You can add up to 5 Google fonts to the menus in your assessment.

Select from Google fonts

Next, you can set the default font for your assessment.

While all subscribers can choose from the “Native Nine” fonts, Advanced subscribers can also select from up to 5 Google fonts, and Private and Enterprise subscribers can upload their own custom fonts.

Set default font

Finally, you can set the default font size for your assessment.

Select default font size

NOTE: The settings here control the default fonts and font sizes for your assessment. You can still override the default font and font size in any text area in the assessment editor. Wherever a font or font size is not specified in an editor window, then the general settings that are 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.

Background Image

The background image checkbox allows you to select a full-page background image to be used in your assessment. Select the checkbox and click Edit. In the popup window that appears, you’ll see two radio buttons labeled Select stock background and Upload custom background, followed by a series of images.

The images on this page are the pre-defined background images available to each of your assessments. To use one, select it, then click Save:

To upload your own background image, select the Upload custom background radio button, then click Upload. In the file manager dialog, upload and select your background image.

The first image you upload will be used for desktop and laptop displays (wider than 800px). It should use a wide aspect ratio (wider than it is tall). 1280 x 720 works well. Make sure your image isn’t too large – excessive file size will cause your background image to load more slowly.

After you click Confirm, you’ll see a thumbnail image of your background. Assessment Generator automatically creates a mobile version of your background image by cropping the original image to a size that better fits mobile devices.

To keep the auto-generated mobile background, click save. Or if you prefer you can select Upload mobile background image and upload a different image. Your mobile background image should be vertically oriented – 450 x 800px works well.

Make sure that your mobile background image isn’t too large, as it may load slowly over cellular data connections.

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:

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.

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

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.