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

On this page:

Author API:

• Breaking change in the Activity edit time input separator DOM element & CSS selector
• Non-breaking change in the Activity edit tabs CSS selector
• Non-breaking change in the math Question generator breadcrumbs link CSS selector
• Non-breaking change in the shared passages button CSS selector

Questions API:

• New version of MathJax
• 'Defer render' for rendering performance improvement

New math Question type:

• Breaking change in scoring and validation related public methods (applies to Questions, Items, and Assess APIs)

Learnosity Design System:

• Updates to included design system elements in existing features

Deprecation notice for two reports:

• Deprecation: "progress: single" report
• Deprecation: "progress by tag" report

All APIs:

• CSS Changes for UI Improvements

Author API

Please note that we have made the breaking DOM and CSS selector changes to address accessibility violations raised by eslint-plugin-jsx-a11y. As for the non-breaking selector changes in our own CSS, we have made them because we are moving away from referencing HTML elements in CSS selectors. It is not best practice to do so for future-proofing and maintainability reasons. While the old CSS selectors will still match the elements, we encourage our customers to similarly update their CSS overrides.

Breaking change in the Activity edit time input separator DOM element & CSS selector

Customers who override the Activity edit time input styling and whose CSS selectors contain references to the label.semi-colon selector should update their CSS as below:

• label.semi-colon should be replaced with .lrn-author-timeinput-separator

For example if the customer's CSS is the following:

#app-id label.semi-colon {
    text-align: center;
}

then it should be updated to:

#app-id .lrn-author-timeinput-separator {
    text-align: center;
}

The label HTML tag was replaced with a generic span tag and was given a more component centric lrn-author-timeinput-separator class name.

This change in DOM elements was needed to address the violation in the label-has-associated-control rule. In this particular instance, the label element was not the most appropriate tag to use as there was no control to associate it with.

Non-breaking change in the Activity edit tabs CSS selector

Customers who override the Activity edit tabs styling and whose CSS selectors contain references to li or a elements should update their CSS as below:

• li should be replaced with .lrn-author-tab
• a should be replaced with .lrn-author-tab-link

For example if the customer's CSS is the following:

#app-id .lrn-author-nav-tabs li a {
    color: red;
}

then it should be updated to:

#app-id .lrn-author-nav-tabs .lrn-author-tab .lrn-author-tab-link {
    color: red;
}

Non-breaking change in the math Question generator breadcrumbs link CSS selector

While not technically a breaking change, i.e. no DOM changes were performed, customers who override the math Question generator breadcrumbs link styling and whose CSS selectors contain references to the a element should update their CSS as below:

• a should be replaced with .lrn-author-mathgen-breadcrumbs-link

For example if the customer's CSS is the following:

#app-id .lrn-author-mathgen-breadcrumbs a {
    color: blue;
}

then it should be updated to:

#app-id .lrn-author-mathgen-breadcrumbs-link {
    color: blue;
}

Non-breaking change in the shared passages button CSS selector

While not technically a breaking change, i.e. no DOM changes were performed, customers who override the shared passages button styling and whose CSS selectors contain references to the a element should update their CSS as below:

• a should be replaced with .lrn-author-region-passages-button

For example if the customer's CSS is the following:

#app-id .lrn-author-shared-passages-popover ul li a {
    border: 1px dashed black;
}

then it should be updated to:

#app-id .lrn-author-region-passages-button {
    border: 1px dashed black;
}

 

Questions API

New version of MathJax 

MathJax is a library we use to display expressions within Questions and passages. The loading of MathJax is handled by Questions API if a widget contains an is_math attribute that is set to true. Starting with v2023.2.LTS, we load MathJax v3.2.2.

If you have been customizing our implementation of MathJax, it is important to note that the internal structure of MathJax version 3 is significantly different from that of version 2. For example, the MathJax API has changed, so if you have been calling MathJax functions or modifying existing MathJax objects, that code will likely need to be updated. The HTML structure has changed from HTML-CSS for version 2 into into CommonHTML in version 3. There are also changes to how MathJax is configured and loaded. See Upgrading from v2 to v3 and MathJax version 3 documentation for more detailed information on the differences.

Additionally, if you need to load and configure MathJax version 3 on the host page yourself, please follow this guide. For Long Term Support v2023.2.LTS and onward, we support customers loading either MathJax version 3 or MathJax version 2.

 

Defer render for rendering performance improvement

We've improved the rendering performance of our Questions and Features by adding a new configuration object, render_optimization to Questions API.

As of the latest release, this object allows clients to pass in a new flag defer_render which can also be passed through Items API by using the Questions API initialization options.

{
    "config": {
        "questions_api_init_options": {
            "render_optimization": {
                "defer_render": true
            }
        }
    }
}

This flag is off by default, but when it is switched on, supported Questions and Features (see list in the defer_render documentation), will defer rendering until the container they are nested within in the DOM becomes visible, i.e. not display: none or visibility: hidden . If they happen to be in a container that's visible from the beginning, i.e.  display: block  or visibility: visible, they will render at runtime as per usual.

{
    "config": {
        "questions_api_init_options": {
            "render_optimization": {
                "defer_render": {
                  "stagger": true,
                  "stagger_interval": 2000
                }
            }
        }
    }
}

There are two additional options for the deferred rendering, the stagger that enables the stagger rendering, whereby the supported Questions and Feature types will get rendered in the background at an interval until all are rendered and the stagger_interval will set the interval in milliseconds between each Question and Feature background render.

There are two additional options for deferred rendering:

1. The stagger flag, which when enabled extends the default behaviour of deferred rendering by also pre-rendering the supported Questions and Features in the background at an interval until completion (working in tandem with the “render on visible” behaviour already enabled by default with deferred rendering).
2. The stagger_interval option, which will set the interval in milliseconds between each Question and Feature background render.

Clients who rely on all Questions and Features being rendered at runtime, but who also want to take advantage of these performance improvements can potentially reorganise their code slightly to use the new 'render' event for Questions and Features, which notifies when individual Questions and Features are rendered. We've also added a new isRendered function for Questions and Features that lets clients determine whether an individual Question or Feature has rendered. Clients can also choose to manually render these instances using the new render methods for Questions and Features.

 

New math Question type

Breaking change in scoring and validation related public methods (applies when using Questions, Items and Assess APIs)

This LTS includes our new math Question type (clozeformulaV2). This Question type is based on our new enhanced math scoring engine and is supported on v2023.2.LTS and onwards.

This new engine carries out its evaluations asynchronously. This in turn makes the scoring and validation of the math Question type asynchronous. To accommodate this, the following public methods now take an optional callback parameter.

Questions API:

• Question isValid()
• Question getScore()
• Question mapValidationMetadata()
• Question validate()
• QuestionsApp getGroupScore()
• QuestionsApp getScores()

Items API:

• ItemsApp getScores()

Assess API:

• AssessApp getScores()
• AssessApp validateQuestions()
• AssessApp validQuestions()

The results of these public methods should now be received via their callback parameter, rather than from the return value of the method, in order to support use of the new math Question type.

For example, in the case of the questionsApp.getScores() method, instead of getting the scores as follows:

const scores = questionsApp.getScores();
//...then do something with the scores

you would instead get them as follows:

questionsApp.getScores(scores => {
    //...then do something with the scores
});

 

Note on backwards compatibility

The above public methods will continue to return values as usual, in addition to providing the new callback parameter. The return values from these public methods can still be used without issue, if the Activity does not contain a math Question type (clozeformulaV2).

Learnosity Design System

See the release summary page, Learnosity Design System: 2023.2.LTS Release for details about this update to the Learnosity Design System: 

Deprecation notice for two reports

Learnosity will be deprecating two report types from Reports API with this release: the "progress: single" report and the "progress by tag" report. To learn more, contact our support team.

All APIs

CSS Changes for 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 v2023.1.LTS and v2023.2.LTS in GitHub

Assess API

• Updated color contrast and tooltip consistency on buttons.
• Fixed a bug where the text on custom button elements weren't visible.

Author API

• Updated breadcrumb styling for Math Question Generator links.
• Fixed a bug in Activity Edit where the time input component's semi-colon vertical alignment was incorrect.
• Various accessibility improvements.

Question Editor API

• Updated the layout for the math validation methods, so that it is easier for content authors to understand.
• Added focus styling on some buttons to improve keyboard accessibility.

Questions API

• Updates for MathJaxV3 support.
• Update styling in the numeration of response areas to provide better color contrast.
• Fixed a bug where the drag handle icon was incorrectly shown in the response area of the image cloze association Question type.
• Fixed a bug on the calculator and line reader Features, where the click and move functionality would cause unwanted interaction with elements lying underneath.