This page lists important information for Learnosity customers who are upgrading to the 2022.3.LTS (Long Term Support) version.

On this page:

Questions API:

• 'Text only' button replaced with Learnosity Design System (LDS) button

Author API:

• 'Text only' button replaced with Learnosity Design System (LDS) button
• Advanced accessibility changes in MCQ affecting custom layouts

• Hiding the advanced accessibility option in MCQ questions

Reports API:

• Colors in most reports have been updated to be more accessible.

Questions API

Learnosity Design System (LDS) text only buttons

The following Questions API buttons have been replaced by the Learnosity Design System button:

1. Math essay with rich text: Apply and delete table buttons
2. Chemistry essay with rich text: Apply and delete table buttons
3. Chemistry essay with rich text: Apply button in Formula keypad
4. Essay with rich text: Apply and delete table buttons
5. Essay with rich text: Upload and cancel buttons in image modals

Note that all of the existing button classes and attributes have been maintained on the replaced buttons for backwards compatibility with any existing client CSS selector overrides. In addition to the existing Question API "lrn_btn" & "lrn_btn_<variant>" classes, LDS buttons will have the "lds-btn" and "lds-btn-<variant>" classes. The "lds-btn-<variant>" can have a variation of "primary | secondary | danger".

 

Visual difference

Image: visual difference animation for the Apply button
(Left is LDS, right is non-LDS) 

 

In the animation above, to the left of the red drag bar you can see the new UI with the updated components, whereas on the right you can see the previous components (non-design system buttons).

 

DOM structure diff

Table apply button

<button 
   class="lds-btn lds-btn-primary lrn_btn lrn_btn_blue"
   data-lrn-action="apply"
   type="button">
Apply
</button>

 

Table delete button

<button
   type="button"
   class="lds-btn lds-btn-danger lrn_btn lrn_btn_danger">
Delete table
</button>

 

Image upload button

<button
   class="lds-btn lds-btn-primary lrn_btn lrn_btn_blue image-editor-upload-button" 
   data-lrn-action="upload"
   type="button">
Upload
</button>

 

Image cancel button

<button 
   class="lds-btn lds-btn-secondary lrn_btn"
   type="button">
Cancel
</button>

 

Formula apply button

<button 
   class="lds-btn lds-btn-primary lrn_btn lrn_btn_blue"
   data-lrn-action="apply"
   type="button">
Apply
</button>

 

Updating your own CSS selector overrides

The text only button has been replaced by LDS buttons however, depending on how your CSS selectors are written, there is a case where you will need to slightly update the selectors. If your CSS selector overrides are scoped within an element ID selector, (say #my-app) then there is no need to update your CSS. This is because we have made sure the existing Questions API classes are still assigned to the LDS button. Take the below CSS override for example:

#my-app .lrn-wysihtml-modal-controls .lrn_btn_blue[data-lrn-action="apply"] {
 font-size: 1rem;
}

This selector will successfully override the styles of the check answer button even after it has been replaced by the LDS button. This is the case for two reasons:

1. As mentioned above, we have made sure the existing CSS classes are maintained on the replaced buttons, giving your existing CSS selectors a chance to target them.
2. Due the fact that you are using an element ID as a scoping selector, your CSS selectors are guaranteed to have a higher specificity than any Questions API CSS selector (we do not use ID selectors in our CSS). This is also true even if your CSS is loaded first.

   If your CSS selector overrides are not scoped within an element ID selector, but instead you are making sure they contain more classes than the Questions API selectors, then you will need to update them so that they can target the LDS buttons.

For example, if your CSS override looks like the following:

.lrn.lrn_assess .lrn_question .lrn_response_wrapper .lrn-wysihtml-modal-controls .lrn_btn_blue[data-lrn-action="apply"] {
 font-size: 1rem;
}

You can either simplify it to contain a scoping element ID like so:

#my-app .lrn-wysihtml-modal-controls .lrn_btn_blue[data-lrn-action="apply"] {
 font-size: 1rem;
}

...or you can bump the selector specificity with an extra "lds-btn" class to be able to target and override the LDS button styles like so:

.lrn.lrn-assess .lrn_question .lrn_response_wrapper .lds-btn[data-lrn-action="apply"] {
 font-size: 1rem;
}

Notice the extra .lds-btn in the last part of the selector above.

Turning off the LDS text only buttons in Questions API

Note that the text only button classes and attributes have been maintained for backwards compatibility with any existing client CSS selector overrides. To disregard the LDS replacement to the button, you can use the beta_flags object to disable the LDS replacement.

{
  "beta_flags":{
    "lds": false
  }
} 

 

 

 

Author API

Text-only buttons replaced with Learnosity Design System (LDS) button

The following buttons were replaced with the Learnosity Design System button:

• Customize text labels in Activity Edit’s Player Tab 
• Set text labels in Activity Template Builder 
• Confirm and Reset button in Activity Edit’s Customize Text Labels modal 
• Select (Resource Item) in Activity Edit’s Items Tab 

Note that all of the existing button classes and attributes have been maintained on the replaced buttons for backwards compatibility with any existing client CSS selector overrides. In addition to the existing Author API "lrn-btn" & "lrn-btn-<variant>" classes, LDS buttons will have the "lds-btn" and "lds-btn-<variant>" classes.

 

The list of LDS button class variations used in this replacement are:

• "lds-btn-<size>" where size can be: "sm"
• "lds-btn-<variant>" where variant can be: "primary | danger |
 secondary | outline-dark"

In the animation below, to the left of the red drag bar you can see the new UI with the updated components, whereas on the right you can see the previous components (non-design system buttons).

 

Visual difference

Image: visual difference animation for the Customize text labels button in Activity Edit
(left is LDS, right is non-LDS)

 

DOM structure diff

Customize text labels button in Activity Edit’s Player Tab 

<span type="button" role="button" tabindex="0" 
class="lrn-btn lrn-author-btn lrn-btn-small 
lrn-btn-primary lrn-author-customize-labels 
lds-btn lds-btn-primary lds-btn-sm">
    <label>
        Customize text labels
    </label>
</span>

 

Set text labels button in Activity Template Builder 

<button type="button" data-authorapi-selector="lrn-author-set-text-labels" 
class="lrn-btn lrn-author-btn lrn-btn-small lrn-btn-primary 
lds-btn lds-btn-primary lds-btn-sm">
    Set text labels
</button>

 

Reset button in Activity Edit’s Customize Text Labels modal 

<button type="button" data-authorapi-selector="lrn-author-reset-labels" 
class="lrn-btn lrn-author-btn lrn-btn-small 
lrn-btn-default lrn-btn-primary lrn-btn-cancel 
lds-btn lds-btn-secondary lds-btn-sm">
    Reset
</button>

 

Confirm button in Activity Edit’s Customize Text Labels modal 

<button type="button" data-authorapi-selector="lrn-author-reset-labels-confirm" 
class="lrn-btn lrn-author-btn lrn-btn-small 
lrn-btn-sec lrn-btn-confirm 
lds-btn lds-btn-danger lds-btn-sm">
    Confirm?
</button>

 

Select (Resource Item) button in Activity Edit’s Items Tab 

<button type="button" class="lrn-btn lrn-author-btn lrn-btn-small 
lrn-author-btn-outline lrn-btn-sec lrn-author-activity-button 
lrn-author-resource-select-btn 
lds-btn lds-btn-outline-dark lds-btn-sm">
    Select
</button>

 

 

Updating your own CSS selector overrides

All Author API buttons that have not been replaced have not been updated in any way. This means that your existing CSS overrides will still match them and style them accordingly.

 

For the buttons that have been replaced by LDS buttons however, depending on how your CSS selectors are written, there is a case where you will need to slightly update the selectors.

If your CSS selector overrides are scoped within an element ID selector, (say #my-app) then there is no need to update your CSS. This is because we have made sure the existing Author API classes are still assigned to the LDS buttons.

 

Take the below CSS override for example:

#my-app .lrn-author-item-settings .lrn-btn-cancel {
  font-size: 1rem;
}

This selector will successfully override the styles of the Item settings cancel button even after it has been replaced by the LDS button. This is the case for two reasons:

1. As mentioned above, we have made sure the existing CSS classes are maintained on the replaced buttons, giving your existing CSS selectors a chance to target them.
2. Due the the fact that you are using an element ID as a scoping selector, your CSS selectors are guaranteed to have a higher specificity than any Author API CSS selector (we do not use ID selectors in our CSS). This is also true even if your CSS is loaded first.

 

If your CSS selector overrides are not scoped within an element ID selector, but instead you are  making sure they contain more classes than the Author API selectors, then you will need to update them so that they can target the LDS buttons.

 

For example, if your CSS override looks like the following:

.lrn.lrn-author .lrn-author-api-react-container .lrn-author-item-settings .lrn-btn.lrn-btn-cancel {
  font-size: 1rem;
}

You can either simplify it to contain a scoping element ID like so:

#my-app .lrn-author-item-settings .lrn-btn-cancel {
  font-size: 1rem;
}

 

...or you can bump the selector specificity with an extra "lds-btn" class to be able to target and override the LDS button styles like so:

.lrn.lrn-author .lrn-author-api-react-container .lrn-author-item-settings .lds-btn.lrn-btn.lrn-btn-cancel {
  font-size: 1rem;
}

Notice the extra .lds-btn in the last part of the selector above.

 

Turning off the LDS buttons in Author API

In the event that migrating to this LTS version proves more challenging due to the Author API button replacement and to help with this initial transition period, we have made a boolean beta flag init option available to use: config.beta_flags.lds. When this is set to false, the flag instructs Author API to render its previous legacy buttons instead of the LDS ones in the entire Author API.

 

Beware that this is a temporary and/or last resort compatibility option to give clients time to address any unexpected styling issues, and the flag can be removed in a future LTS version without notice. Developers will be reminded of this with the following warning in their browser's console whenever they set the flag to false:

 

Advanced accessibility changes in MCQ affecting custom layouts

Before LTS version 2022.3 the loop to display MCQ options could be defined as follows:

<div data-lrn-qe-loop="options[*]">
    <span data-lrn-qe-input="options[*]"></span>
</div>

It is now necessary to change the input path from options[*] to options[*].label as in the following code snippet:

<div data-lrn-qe-loop="options[*]">
    <span data-lrn-qe-input="options[*].label"></span>
</div>

Any custom layouts for MCQ Questions need to be modified accordingly.

Hiding the advanced accessibility option in MCQ questions

If you don't want the advanced accessibility options to show for MCQ questions, you have two options: the first option is to switch to simple layout mode in Question Editor by setting ui.layout.mode in the Question Editor init options. This hides a lot of MCQ attributes and might therefore not be the optimal solution.

The second option is to create a custom layout for MCQ questions. The default layout specifies the following loop for options:

<div data-lrn-qe-loop="options[*]">
  <div class="lrn-qe-display-flex lrn-qe-flex-gap-sm lrn-qe-margin-bottom-xs">
      <span class="lrn-qe-flex-full" data-lrn-qe-input="options[*].label"></span>
  </div>
  <div class="aria-labels-container lrn-qe-padding-left-lg lrn-qe-form-el-removable lrn-qe-form-el-wrapper lrn-qe-margin-bottom-md">
      <div>
          <span data-lrn-qe-label="options[*].assistive_label.label" class="lrn-qe-margin-top-none lrn-qe-margin-bottom-xs"></span>
          <span data-lrn-qe-input="options[*].assistive_label.label" class="lrn-qe-margin-top-none"></span>
      </div>
      <div>
          <span data-lrn-qe-input="options[*].assistive_label.exposed_visible_label"
                class="lrn-qe-inline-block lrn-qe-margin-top-none"></span>
          <span data-lrn-qe-label="options[*].assistive_label.exposed_visible_label"
                class="lrn-qe-inline-block lrn-qe-margin-left-sm lrn-qe-margin-top-none"></span>
      </div>
  </div>
</div>

You can replace that with a loop similar to the following: 

<div data-lrn-qe-loop="options[*]">
  <span class="lrn-qe-flex-full" data-lrn-qe-input="options[*].label"></span>
</div>

Reports API

A majority of our out-of-the-box reports in the Reports API have had color updates. This is not a dramatic change, but has improved each of the colors in terms of accessibility. An example of the new color scheme can be seen below.

UI Improvements

Below is a summary of all CSS changes between the previous LTS release and this release. Generally, these changes contain new feature implementations and various accessibility improvements.

See all CSS changes between v2022.2.LTS and v2022.3.LTS in GitHub

 

Author API

• General updates to buttons to apply the LDS styles over legacy components  

Question Editor API

• Improved UI for authoring the shading Question type to allow the selection of colored borders
• Updated math editor modal confirmation buttons
• Added the ability to set custom ARIA labels to any text selection inside Rich Text Editor fields for all Question types
• Improved keyboard support for re-ordering MCQ options

Questions API

• Improved Calculator and Line Reader Features accessibility and styling
• Improved graphplotting and numberlineplot Question type accessibility and styling
• Fixed a bug where several math Question types were rendering plain text in italics
• Fixed a bug where response validation wrappers were hidden when a border is applied
• Applied LDS buttons for elements used in Question Editor API modals
• Further improvements to accessibility with borderless tables

Reports API

• General improvements to the color contrast for various elements