How to Create HTML Buttons in Assessments
Use these provided the HTML codes to create any kind of Button supported by Brillium
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).
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.
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, switch the rich text editor to Code View by selecting the "</>" button:
- While in the Code View, select a button style below and paste it into the window (other HTML may be visible if you have already placed text in the panel):
- Change the URL: https://www.example.com for your desired destination URL
- Change the BUTTON TEXT to the desired button label
<a class="button button-pill" href="https://www.example.com">BUTTON TEXT</a><br>
<a class="button button-small" href="https://www.example.com">BUTTON TEXT</a><br>
<a class="button button-large" href="https://www.example.com">BUTTON TEXT</a><br>
Hollow Button (Neutral)
<a class="button button-hollow" href="https://www.example.com">BUTTON TEXT</a><br>
<a class="button button-alt" href="https://www.example.com">BUTTON TEXT</a><br>
<a class="button button-disabled" href="#">BUTTON TEXT</a><br>
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.