Migration Guide for 2023.1.LTS

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

On this page:

Author API:

  • Breaking change in the list pagination buttons
  • Additional updates

Items API:

  • Breaking change in section behavior

Question Editor API:

  • User interface updates

Questions API:

  • User interface updates

All APIs:

  • CSS Changes for UI Improvements

Author API

Breaking change in the list pagination buttons

The disabled state for the Item, Activity & Question list pagination (next and previous) buttons is now controlled by the aria-disabled attribute instead of the disabled attribute. This change was required for keyboard accessibility reasons to allow the pagination buttons to be focusable while disabled.

Clients who customise these buttons disabled state will need to update their CSS overrides accordingly. An example change can be seen below:

/* Old code (CSS) */
.lrn-pagination-btn:disabled {
background: grey;
}
/* New code (CSS) */
.lrn-pagination-btn[aria-disabled="true"] {
background: grey;
}

Another notable change relates to the applied transition on hover on the said buttons which will now be conditional upon the buttons not being aria-disabled. Clients who customize the hover transitions should update their CSS overrides accordingly. An example change can be seen below:

/* Old code (SCSS) */
.lrn-pagination-btn[data-authorapi-selector="pagination-next"] {
transition: padding-right .5s;

&:hover {
padding-right: 10px;
color: palevioletred;
}
}
/* New code (SCSS) */
.lrn-pagination-btn[data-authorapi-selector="pagination-next"] {
&:not([aria-disabled="true"]) {
transition: padding-right .5s;

&:hover {
padding-right: 10px;
color: palevioletred;
}
}
}

Author API: additional updates

  • Added the ability to add pop-up content to specific Rich Text Editor fields.
  • Updated Learnosity Design System components and colours.
  • Removed unused CSS rules.
  • Updated Author API paginated lists, see migration notes above.

Items API

Breaking change in section behavior

You can now extend section configuration. Previously, when extending a user’s section configuration at the beginning of a test, the configuration of the Activity template would completely override the configuration of the host page upon initializing the Items API. However, the configuration of the Activity template can now undergo a deep merge with the host page’s configuration instead of overwriting it.

Old behavior:

  • Previously, the host page’s sections configuration would be completely overriding the host page’s sections, so all of the activity_template_id configuration would not be brought over.
  • Previously, it was necessary to re-write all of the host page’s sections configurations, even those sections that didn’t need to be overridden from the activity_template_id.
  • Previously, it was not possible to target a specific section’s configuration to be overridden.

New behavior:

  • Now, the host page’s sections configuration will be deep merged with the activity_template_id configuration, so that all the missing configuration or unchanged configuration data will brought over from the activity_template_id.
  • Now, all of the sections configuration from the activity_template_id will be brought over to the host page’s configuration, so it's not necessary to re-write them from the host page’s configuration.
  • Now, you are able to merge a specific section’s configuration by specifying an empty object for the sections array.

1. Activity template configuration:     

{
   "sections": [{
     "config": {
       "title": "Section 1",
       "time": {
         "max_time": 15,
         "warning_time": 15
       }
     },
     "items": [{
       "id": "Demo3",
       "reference": "Demo3"
     }]
   }, {
     "config": {
       "title": "Section 2",
       "time": {
         "max_time": 20,
         "limit_type": "hard",
         "warning_time": 20
       }
     },
     "items": [{
       "id": "Demo5",
       "reference": "Demo5"
     }]
   }]
}

2. Host page configuration: 

{
   "sections": [{
     "config": {
       "title": "Client's Section config ",
       "time": {
         "max_time": 25,
         "warning_time": 10
       }
     },
     "items": [{
       "id": "Demo4",
       "reference": "Demo4"
     }]
   }]
}

3. Example of how to target the 3rd section to apply some configuration changes: 

{
   "sections": [
     {},
     {},
     {
       "config": {
         "title": "Section 3 ",
         "time": {
           "max_time": 15
         }
       },
       "items": [
         "Demo8"
       ]
     }
   ]
}

 

Question Editor API

  • Added padding to the preview to avoid content being cut off.
  • Added spacing around the popup content widget.

Questions API

  • Fixed UI problems in "Label image with drag & drop" which caused the drag and drop handle to disappear in certain cases.
  • Improved Hotspot UI for selections and hover states.
  • Added support for creating popup content.
  • Improved line reader keyboard interactions for better accessibility.

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 v2022.3.LTS and v2023.1.LTS in GitHub

 

Was this article helpful?

Did you arrive here by accident? If so, learn more about Learnosity.