Picture of Greg Pell
pageLevelProgress & Drawer options?
by Greg Pell - Wednesday, 22 April 2015, 6:57 AM
 

Sorry for yet another post, hopefully everyone isn't getting sick of me yet?!

I have been busy building courses as you can gather and had some queries around what governs the titles displayed in the Page Navigation Drawer. From what I can tell, that menu is built using the titles of components IF pageLevelProgress is enabled for that component.

The query I have is, how hard would it be to change the titles that are displayed in the drawer (to lets say Article titles) but still have pageLevelProgress enabled for all components on the page?  

Essentially I just want to keep that menu a little cleaner, especially on large pages that have a lot of components. Also, who wants to give meaningful titles to EVERY single component in a course :P

 

Cheers

 

Picture of Chuck Lorenz
Re: pageLevelProgress & Drawer options?
by Chuck Lorenz - Wednesday, 22 April 2015, 2:41 PM
 

Hi Greg,

OK, I'll take stab at this. I'm sure others can weigh-in with more/better insight... And we all understand "how hard would it be to" is all relative to a developer's experience, right?

Sounds to me like you're talking about building an articleLevelProgress extension. If you haven't yet jumped into plug-in development, I think this is the perfect scenario. You know quite clearly what you want to achieve AND you have a well-functioning model plug-in, pageLevelProgress. Similar to what has been suggested for modifying the Vanilla theme, make a copy and start playing with the code. Personally, I would recommend that you develop plug-ins using the framework. I'd hold off on bringing the authoring tool into play until you're reworking properties.schema (and in this particular case, that file might not even need any reworking).

Below is my take on what pageLevelProgress does and what I imagine you want articleLevelProgress to do.

pageLevelProgress:
- displays overall progress (components collection) in the navbar
- displays individual component titles and progress in the drawer
- provides navigation by jumping from component title listed in the drawer to its location on the page

articleLevelProgress
- displays overall progress (components collection) in the navbar
- displays individual article titles and aggregated progress of an article's components in the drawer
- provide navigation by jumping from article title listed in the drawer to its beginning on the page

Based on this understanding, here's what I see (BTW The object names can get confusing; I've tried hard to be precise.):

adapt-contrib-pageLevelProgress.js defines two objects/classes:
PageLevelProgressNavigationView
PageLevelProgressView
As Backbone views, both have their associated Handlebars template in the templates folder.

Since the progress is ultimately based on the learner working through the components, the progress bar that is displayed in the top nav bar doesn't have to change. That means:
- PageLevelProgressNavigationView could stay the same (well, maybe except for onProgressClicked().
- pageLevelProgressNavigation.hbs could stay the same.

PageLevelProgressView is where I think most of the changes would be introduced. There's a few areas I would focus in on.
- The "router:page" event is assembling the components and passing them to setupPageLevelProgress() so they can be made into a collection. That collection is in turn used to create a new PageLevelProgressNavigationView. The PageLevelProgressNavigationView uses this collection within updateProgressBar() to calculate how wide the indicator should be. So this calculation is made using components; no problem here. However, when the progress bar is clicked, onProgressClicked() is called and this same collection (of components) is used to create the PageLevelProgressView. PageLevelProgressView is what is used to build drawer's custom view. This is where you need to alter the code to ensure that it uses a collection of articles rather than a collection of components. Render() is passing component data to pageLevelProgress.hbs. You need to ensure article data is accessible there, too, so you can display the title.
- pageLevelProgress.hbs uses the component's _isComplete attribute to set the progress bars that are displayed in the drawer. You'll need to figure out what to use instead to determine if an article is complete. I haven't checked to see if there is a comparable article attribute. (I suspect not.) You may need to loop through each article's components to see if all are complete. Heads up: the components' progress bars in the drawer are "boolean" in that they are either complete or they're not. There's no range indicated. You'll have to decide if that's adequate for articles. If you need to display a percentage of components completed, you've reached a new level of complexity. BUT you have updateProgressBar() as a model. Perhaps you can introduce something similar to PageLevelProgressView.
- scrollToPageElement() needs to be reviewed to ensure that it continues to work with articles.

This is just a quick perusal of the code to help you with your own analysis. Any strong statement above should be read with a "probably" or a "might" inserted in it somewhere :-)

Greg, hope this helps in some way.

Picture of Greg Pell
Re: pageLevelProgress & Drawer options?
by Greg Pell - Thursday, 23 April 2015, 2:15 AM
 

Thanks Chuck. That's very useful, I have enough skill to follow what you are saying and could understand a bit from what is going on within that component, however I just need to hunt down someone with the dev skills to achieve this now :)

I am surprised though that no one has found this to be an issue with this component before now though..?