Styling with CSS

Learn how to style Learnosity components.
Designer Developer

Learnosity is designed with a neutral design so that it blends seamlessly with your existing platform and styling. This also provides a great base to style further with CSS to fit perfectly with you design vision.

All Learnosity API's use scoping to prevent any Learnosity CSS from affecting the host page. This has the added benefit of allowing the host page to specifically target and style the component using standard CSS class selectors.

All API's have a .lrn class at the root level, as well as an API-specific class. For example .lrn_widget is at the root level of the Questions API, .lrn-assess for the Assess API and .lrn-qe for the Question Editor API.

Examples

These live demos show how a Learnosity assessment can be fully restyled with standard CSS.

See the following sections for useful selectors for each API.

Questions API

Common selectors

The are a number of common selectors that can be used across all Question types.

  • .lrn.lrn_widget wraps each Question at the top level.
  • .lrn_stimulus is the Question stimulus that is being asked.
  • .lrn_response targets the response area for the Question.
  • .lrn_validate wraps the optional "Check Answer" button.
  • .lrn_correctAnswerList (Review Only) targets the correct answer feedback area.

Question type selectors

It is also possible to target classes of Questions based on their core type - some examples of these are:

  • .lrn_mcq for MCQ Question types, including single select (radio) and multi Select (checkbox).
  • .lrn_association for association Question type.
  • .lrn_clozetext for cloze text Question type.

The Questions API styling demo has interactive examples of all the available selectors.

See our interactive Questions API styling demo for the full list of CSS selectors for Questions.

Other selectors

There are also a number of components that may be common across Question types, or may be shared across similar Question types. Some examples of these are:

  • .lrn_cloze_response Response area for all cloze types including dropdowns, text input, and drop areas.
  • .lrn_possibilityList container area for buttons to be dragged from.
  • .lrn_btn_drag draggable buttons that may contain text, math, or images.
  • .lrn_mcqgroup label MCQ Question labels.

The Questions API styling demo has interactive examples of all the available selectors.

Assess API

The Assess API has a number of selectors that allows it to be targetted easily with CSS, and it uses all the CSS from the Questions API too.

  • .lrn.lrn-assess wrapper for the whole Assess player.
  • .lrn-region this exists on all regions of Assess when using regions mode.
  • .lrn-top-left-region target the top left region.
  • .lrn-top-right-region target the top right region.
  • .lrn-items-region target the main content area where Items & Questions are dispayed.
  • .lrn-right-region target the right hand side region.
  • .lrn-bottom-left-region target the bottom left region.
  • .lrn-bottom-region target the bottom region.
  • .lrn-bottom-right-region target the bottom right region.

Items API

The Items API is a light wrapper around the Assess or Questions API. Use a different selector depending on which mode is initialized:

  • In inline mode all Items on will be wrapped with a .lrn.learnosity-item class.
  • In assess mode the Assess API will have the .lrn.lrn-assess class.

Author API

The Author API has the following classes defined at the root level:

  • .lrn.lrn-author standard wrapper class for Author API.

Question Editor API

The Question Editor API has the following classes defined at the root level:

  • .lrn.lrn-qe standard wrapper class for Question Editor.

The following additional selectors can be used with the Question selection view:

  • .lrn-qe-tiles-nav container for the left hand tile navigation when selecting Question groups.
  • .lrn-qe-tiles-list container for the right hand side tiles when selecting a Question.

These additional selectors can be used with the Question edit view:

  • .lrn-qe-toolbar container for toolbar at top of the editing pane.
  • .lrn-qe-col-edit container for the editing column.
  • .lrn-qe-col-slider container for the slider between the editing and preview columns.
  • .lrn-qe-col-preview container for the preview column.

Additional detail is available for the Question Editor on the Question Editor API - CSS Classname Utility page.

Reports API

The Reports API has the learnosity-report at the top level of every report that it renders, and it also includes a class which matches the type of report. For example: sessions-summary or sessions-summary-by-tag which allows for easy targetting of specific report styles.

Additional resources