Create HTML Buttons in Assessments – Brillium Support Community

Most fields in Brillium support HTML. This means that assessment authors can include styled objects in assessment Agreement, Instructions, and Feedback screens. In fact, even some of the Assessment UI fields can include HTML. This process can seem quite technical at first, but with some practice, it can significantly improve the look and feel of the assessment experience.

This article provides the HTML codes to create any of the Buttons supported by Brillium. Buttons can be very useful when linking to external content such as websites, documents, or training hosted on a Learning Management System (LMS).

Button Types

Brillium has several button types. Below are examples of the different button styles and the HTML code to create each button type in Brillium.

Note: HTML displayed in the Brillium assessment authoring experience will appear differently than when it is displayed in the Brillium assessment experience. It may seem that the button is not displaying correctly when creating a button, but it will display properly when rendered to learners during the course of an assessment. To see this, you can always preview your assessment to ensure that it displays HTML properly.

How to Create a Button in a Brillium Text Field

In a Brillium text field, select the Code View button from the Rich Text Editor tool bar (the </> symbol)
Paste in the appropriate button HTML code for the desired button type
Select the Code View button and add any additional text, images or video
Save the changes

Note: A button can be placed anywhere amongst text, images, or video. The example HTML code below uses "https://www.example.com"" as the destination when clicked. Replace this URL with the desired web URL when using the button code below.

Button Styles

The following buttons styles can be used within Brillium Assessment UI, Instructions, Feedback, Justification, and Conditional Feedback area.

To use any of the button styles below:

Select a buttons style:
Change the URL: https://www.example.com for your desired destination URL
Change the BUTTON TEXT to the desired button label

Pill Button

<a class="button button-pill" href=" https://www.example.com" >BUTTON TEXT</a>

Square Button

<a class="button button-small" href=" https://www.example.com" >BUTTON TEXT</a>

Large Button

<a class="button button-large" href=" https://www.example.com" >BUTTON TEXT</a>

Hollow Button (Neutral)

<a class="button button-hollow" href=" https://www.example.com" >BUTTON TEXT</a>

Alternate Button

<a class="button button-alt" href=" https://www.example.com" >BUTTON TEXT</a>

Disabled Button

<a class="button button-disabled" href="#">BUTTON TEXT</a>

Expanded Button (displays across entire screen)

<a class="button button-expanded" href=" https://www.example.com" >BUTTON TEXT</a>

Note: Button color does not need to be defined. Buttons will take on the color as defined in the selected Assessment Theme (selected in Assessment Builder under the Properties tab). When changing the Assessment Theme, the button color will automatically adapt to the selected theme color.

Related to