Hi, I have been using the latest version of the Adapt framework and builder, and I am having an issue regarding the page level progress component. I have noticed that the second time you visit a page with the page level progress, it doesn't seem to log when you complete an accordion component. I have noticed that it is only the accordion one that is having a hard time and ONLY on the second time through the course. You will see the other components on the page mark complete as you go through but the accordions no.

• In reference to this
  adaptlearning/adapt_framework#305

Block level elements fails the w3c validator when they are children of button or label elements.

Convert block level elements to inline to pass w3c validator checks.

Subject of the issue

The .nav__pagelevelprogress-btn aria-label is too long. As a general rule, alt text or aria should be as succinct as possible, without sacrificing accuracy.

Current nav bar button aria-label:
"Page progress. Use this to listen to the list of regions in this topic and whether they're completed. You can jump directly to any that are incomplete or which sound particularly interesting. {{percentageComplete}}%"

Current PLP drawer aria-label (this is read when the PLP drawer is opened before you interact with the PLP items):
"Page sections"

Expected behaviour

I think the .nav__pagelevelprogress-btn should have a shorter label and additional instruction to be added to the drawer instruction instead.

Suggestion example:

"pageLevelProgressIndicatorBar": "Page progress. {{percentageComplete}}%. Open page sections."
"pageLevelProgress": "List of page sections and completion status. Select incomplete sections to jump directly to the content."

Using frame work 5.18.6 with AT 0.10.5 and adapt-contrib-pageLevelProgress-5.3.0 on an older freshly imported course the progress level indication seemed to be completely messed up.

So I had to start some more extensive trouble-shooting. There may be some error in the code of completionCalculations.js with regard to the function calculateCompletion(contentObjectModel) and its recursive call in line 62.

I think a problem arises as for instance completion.nonAssessmentTotal shares the same name

in line 34: completion.nonAssessmentTotal = nonAssessmentComponents.length;; and
in line 65: completion.nonAssessmentTotal += completionObject.nonAssessmentTotal;

In line 65 a sum is calculated. However this sum is always reset when line 34 is calculated during the recursive call of the function.

I was able to see that by using console.log quite a bit in conjunction with a newly created simple dummy course. The same is true for the other related variables.

After basically correcting this error I got correct progress level indications on my course again.

However, after renaming the variables I had to adapt the initialization and calculatePercentageComplete accordingly, as well.

Why this error did not pop-up in my older (pre 5 framework) version, I do not understand at this moment, as the code remained more or less unchanged since then.

Kind regards,
Wolfgang

• Add altText string to course.json file
• Append this to the percentage of completed components in a page and add as alt text

Subject of the issue

Currently the default is 0, it needs to be 90 for the core pr adaptlearning/adapt-contrib-core#239 to ensure that it's always immediately to the left of the drawer button, which is position 100.

Is it now a feature that clicking a link in the popout panel that it doesn't jump to the component until exiting?

Your environment

• version (AT v11.1 Framework v5.24.00)
• which browser and its version
• device(s) + operating system(s)

Steps to reproduce

Tell us how to reproduce this issue.

Expected behaviour

The page used to move on click in the popout window

Actual behaviour

After clicking the component link, it automatically jumps to the component after the X button is clicked.

Screenshots (if you can)

Complete a section and go back to main manu, enter the section you just completed again. Click on level progress bar to display progress menu. Result is all of the completed componenets are not marked as complete in the menu.

Level progress bar appears completed but componenets in the menu don't and interacting with them again in the section doesn't do anything.

The globals need to be nested inside an _extensions object (in legacy AAT this was added automatically).

For consistency this should be next to _altText, not inside globals.

Subject of the enhancement

In the PLP drawer, component completion is only represented by two states: "incomplete" or "complete". Presentation components like Accordion do not show partial completion when, for example, one of three items have been visited. The progress bar is either empty (incomplete) or full (complete).

If we were to switch the component progress bars to completion icons, this may increase the user's comprehension of what has been completed and what is still left. Furthermore, a lock icon could be used to indicate a locked state.

This could be a new, configurable option or we could replace the current behavior entirely.

Drawer example

Component title example

Unable to run 'adapt install adapt-contrib-pageLevelProgress' as this extension is not registered

• the hover should also match the icon hover color variable.

Subject of the issue

The line-height: 0; style applied to the .nav__pagelevelprogress-btn selector can cause an issue with accessibility options that alter the line height display within a course.

This line height style is required to ensure the height of the parent container matches that of its children. With a small amendment this line height style can be removed and replaced with alternative styling that achieves the same effect.

Your environment

• 5.x FW / AAT

Subject of the issue

By default, the PLP drawer opens from the right side. Now that we can rearrange the navigation buttons via config, we can move the PLP nav button to the left. In this case, it seems to make more sense to have the PLP drawer open from the left since it's closer in proximity to the PLP nav button.

It would be nice to have this as a configurable option that's also separate from other drawer functionality. For instance, the PLP drawer could open from the left while the Resources drawer opens from the right.

Related:
adaptlearning/adapt-contrib-core#219

Subject of the issue/enhancement/features

_showAtCourseLevel missing from readme, schema and example

required: Boolean => required: Array

Subject of the issue/enhancement/features

I have received feedback from a large set of user survey data that the current PLP settings give learners the false impression they have nearly completed the course. In actuality, they are almost done with the current page. I will be evaluating the recent addition _showAtCourseLevel, in a live setting. But additionally, I am adding a course level progress meter in the menu header that may trigger the PLP drawer.

If there is an appetite for this visual indicator, I am happy to add my work to a PR. I believe even screen reader users may benefit from something like this.

Lastly, this plug-in now adds progress meters to various elements through the course experience and is not solely focused on a page-level experience anymore. I would suggest changing the name to adapt-contrib-progression.

Rough Visual Draft

Subject of the issue

I can't see that pageLevelProgressEnd aria-label is used by the plugin. When I search for this it only returns the README and schema files. Was this removed at some point (I couldn't see anything in the blame history) or has this just been overlooked and never utilised?

Expected behaviour

As per the aria-label, "You have reached the end of the list of page sections", I'd expect this to read when you reach the bottom of the drawer.

Subject of the enhancement

When using _showAtCourseLevel: true, it would be helpful to have a class like is-selected that indicates which item in the PLP drawer is the current item (content object or menu).

In the following screenshot, it's difficult to tell that the user is currently in the "Adapt components" topic. Ideally, we would be able to style that button differently.

It may also be useful to have a class added to the .pagelevelprogress element that indicates if course level is being used (ex. .is-course-level).

All hovers should be prefixed by .no-touch in the LESS file.

Subject of the issue

Style and code changes are necessary to attain compatibility with Navigation Button text labels introduced in adaptlearning/adapt-contrib-core#338

Your environment

• Framework 5.28.9
• Page Level Progress 6.3.1
• Core adaptlearning/adapt-contrib-core#339

Is it just me or does it not look feel natural that the non completed sections are filled white and the completed ones look empty, this also looks the opposite of the main page progress bar
I realise this is a styling issue that can be fixed with theme

Currently drawer items aren't read by JAWS so a blind user wouldn't be able to navigate to a set component using drawer.

If I click on any of the menu options while using the blockslider extension, it doesn't show the corresponding slide, instead, it stays on the one your are currently viewing.

Multiple progress bars show at once.

Subject of the issue/enhancement/features

Drawer not closing automatically when switching between content objects.

Your environment

• FW v5.22.8
• Chrome

Steps to reproduce

Open PLP with _showAtCourseLevel set to true
Select a different content object from the current.

Expected behaviour

Navigates to the new content object/menu and drawer automatically closes

Actual behaviour

Navigates to the new content object/menu as expected. Drawer clears but does not close automatically, can still be closed manually.

I've been updating the padding for navigation bar from @navigation-padding: 5px;, single value to @navigation-padding: 5px 0px 5px 26px; multi-value form. With this change during the compiling I've got following error:

Running "less:dist" (less) task
>> OperationError: Operation on an invalid type in src/less/adapt.less on line 6
658, column 5:
>> 6657 .page-level-progress-navigation {
>> 6658     padding:(@navigation-padding+6px);
>> 6659     @media all and (max-width:(@device-width-medium - 1px)) {
Warning: Error compiling src/less/adapt.less Use --force to continue.

Aborted due to warnings.

Probably theme should give more granular padding variables for this
adaptlearning/adapt-contrib-vanilla#185

Currently the same help text is repeated in three places:
"help": "If set to 'true', this component will be tracked by PageLevelProgress"

Needs to change to something like this:
On course:
"help": "If set to 'false', Page Level Progress will be disabled on all components, pages, and menus"

On contentObject:
"help": "If set to 'true', progress bar will be displayed"

On component, no change is needed. Retain:
"help": "If set to 'true', this component will be tracked by PageLevelProgress"

The same object is being used on three levels, but has very different impact:

"_pageLevelProgress": {
        "_isEnabled": true
    }

Perhaps this could be refactored/renamed in the future.
On course:
"_disablePageLevelProgress"
Currently it is switch that only disables children that have been explicitly enabled. It does not enable children where the PLP object has been set to false ("_isEnabled": false) or where the PLP object has been omitted. It does not provide defaults for children.

On contentObject:
"_displayProgressBar"

On component, no change is needed.
"_isEnabled"

If an article or block title describes a series of components with not titles, PLP will still take you to the component and the article / block title will be off the screen.

This looks terrible.

Need to allow articles and block in the PLP

When the draw is open, if you could also click the progress icon (in the nav bar) to close the draw this would be a nice little touch.

Same comment from @zmisiak:
"Clicking on a list icon opens a Drawer. It can be closed using the X or by clicking again on list icon - this is OK.

Clicking on progress bar opens tab with items and shows progress - OK. However clicking again on progress bar does not close it, only X works.

Tested with Firefox 28.0"

Subject of the issue

It's difficult to check if the indicator aria label is actually on screen or not because it's out of bounds inside its parent.

• This should also include a menu selector attribute so it can be placed if the menu differs in HTML markup.

Third curly brace was removed from a recent commit.

Issue to reinstate third curly brace.

Subject of the issue

The line-height: 0; style applied to the .nav__pagelevelprogress-btn selector can cause an issue with accessibility options that alter the line height display within a course.

This line height style is required to ensure the height of the parent container matches that of its children. With a small amendment this line height style can be removed and replaced with alternative styling that achieves the same effect.

Your environment

• 5.x FW / AAT

Subject of the issue/enhancement/features

Page level progress json is required at content object level, on all content objects, even if it's not being used. If it isn't in causes errors to trigger in the console

Your environment

• Framework 5.31.7
• Edge (latest)
• Windows

Steps to reproduce

I recently tried this (having it attached and enabled to some content objects and not on present on others, where there was no requirement for it), and it threw up lots of errors and stopped some pages from loading. The following error was triggered each time a component was completed, globally.

The fix was to attach the PLP json to each content object but then disable it where it isn't required.

Expected behaviour

This doesn't seem consistent with how it behaves at component level, where if you don't attach it to a component, it just excludes it from the PLP menu with no errors. Please could it be made consistent with component level please? So if you don't include it at CO level, it's not used on the page with no errors?

Screenshots

Subject of the issue/enhancement/features

I've just created a fresh new course in the Framework and added a new page. The page had no components with PLP on it, even with the PLP JSON there but set to disabled and didn't load. I got this error

Your environment

• version (AT/Framework) FW v5.24.8
  PLP v6.2.4

From @shauncg on June 20, 2014 11:38

No JAWS tags appear to have been set for the progress/in-page navigation menu. Every item listed is simply read as "close link".

The one exception is the button to open this drop-down menu itself, which seems to be correctly reading out the percentage of overall progress.

Copied from original issue: adaptlearning/adapt_framework#407

In js/PageLevelProgressNavigationView.js code will currently throw an error if the _globals property is missing from course.json.

_globals appears to not be available in some conditions.

Subject of the issue

Give a better overview of progress from the plp

develop branch.

A recent project has highlighted a problem with the way completion is calculated, resulting in PageLevelProgressNavigationView not rendering 100%.

Scenario: page has a subset of its components enabled for PLP. All components in this subset are completed. When other (non-optional) components remain incomplete the page remains incomplete. Because completionCalculations uses page completion in its calculation, PageLevelProgressNavigationView therefore does not render 100%.

Subject of the issue/enhancement/features

The navigation bar order feature is missing description text to explain its purpose.

Related Tickets

#61

Your environment

• FW v5.24.7
• AAT v1

Steps to reproduce

Please see project settings in AAT v1.

Expected behaviour

A tooltip descriptor should explain its purpose.