[Modules] Module Progress Bar (amended)

[ProfessorBeyrer]

 

Amended after comments and questions from  @James ‌.

TL;DR

Instructors should be able to add a module progress bar
Amendment: Instructors should be able to add a module progress bar that includes the module title.

Why it's needed

Students benefit from web pages that are shorter rather than longer, and as a consequence Modules can have many links within. In one of my courses there are anywhere from 8 to 20 items in each of 12 modules. That's a lot of clicking Next and Previous for my students! Each begins with an overview and ends with a summary, but there is no progress report within each module unless I add one on each page. It would be great if one could be there automatically so when I reorder items or add or remove things the progress bar is updated without me needing to make edits there.

Amendment: While students are navigating through a module, the title of the module does not appear on the page with the exception of external links. For those module items it appears in the breadcrumbs, but the breadcrumbs for other module item include the name of the tool instead (Pages, Discussions, Quizzes, etc.). Since each module has an anchor link on the Modules page, it would also be great if the title of the module, hyperlinked to that module's anchor on the Modules page, appeared as part of the progress bar.

How it will work

Instructors will have the option to add an automatically generated progress bar at the bottom of each page that is part of a module, between the Previous and Next buttons. The option for a progress bar will be module by module, and it will appear on every published item within that module. (That's a bonus way to communicate the item's published status to instructors!) 

Amendment: The progress bar will include the title of the module hyperlinked to the module's anchor on the Modules page. 

The progress bar will show the count of published items within the module and the number of the current item (e.g., 1 out of 12, 2 out of 12, etc.). It might look like the heart rate tracker on my favorite elliptical trainer at my gym:

I propose numbers instead of words, but it might be neat if it ended with "PEAK LEARNING." :smileycool:

How this benefits students

Students benefit from knowing where they are within a module. This helps them plan their time on task, especially for those modules that are structured consistently. It is good for them to know how many times they have to select that Next link before they achieve peak learning.

Amendment: And as awesome as our module titles are, our students might forget which module they are in. Including the module title as part of the progress tracker will help them stay aware of their surroundings.

[KristinL]

This is a neat idea! I've seen instructors/designers do this by hand with images, but each time something is added, deleted, or reorganized, that image needs to be replaced or adjusted! I wonder if this could be a course-level option, but I would definitely like to add an option like this to my modules.

I look forward to seeing others' contributions to this conversation!

[James]

 @ProfessorBeyrer ,

Interesting concept.

Someone asked me a week or two ago about determining progress in a module. My first response to her was to ask how she would measure progress since that would drive how I answered her.

How do you envision measuring progress? Do you treat every item in the module as an equal percentage of the overall goal, just count the quizzes and assignments but not reading, external items, just consider the items that appear in the module requirements (similar to a graphical version of the "View Progress" button), or something else?

[ProfessorBeyrer]

Great question,  @James . To me it's just a link counter. I don't imagine the amount of time or effort on an individual item to be represented on the tracker; some students will of course spend more time or effort on some items and more on others. I for example spend more time reading your posts and contributions than I do on those from others. This would be separate from the module requirements, to-do items, assignment submissions, etc.

[ken_cooper]

 @ProfessorBeyrer ‌ and  @James ‌ -- since I did upvote, I wanted to comment that I would hope it would just be a raw counter.  For modules grades I could see it being weighted, as grades are weighted and the calculations are right there (not saying that we need a progress bar for both though), but for this idea I was under the assumption it was a pure tracker of activity done in a module.  I don't think faculty members are going to want to setup weighting for those activities and sub-activities in many cases, and the amount of overhead to maintain that from term-to-term when adding/removing/editing resources would just be too great.

[GideonWilliams]

Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes please

[James]

Are they discrete bars that can also serve as a jump to that item? Of course, one would have to have tooltips so people knew what they were.

I know this is not the same thing that you're talking about, but I have a table of contents menu bar at the bottom of one of my courses. It displays the chapter in green and then expands the chapter that we're currently on black with the section that we're currently one in blue.

That works because the course is highly structured, but I've only applied it to lecture notes. I don't know how much the students use it, but I wanted to make it friendly for them to see where they are.

What you're talking about would be just the section I have coded in black / blue, but you couldn't put text on them because it would be too big and if a module had lots of items in it, then it would take a lot of space. A percentage or scaled meter would be the only way to go. 

I'm guessing that extended thought suggests that you should not make them hyperlinks, but I'm not sure. Keyboard users and people using screen readers probably don't want to listen to a list of all of the modules.

But that makes me wonder about a select box that would allow the user to list all of the items in a module and let them quick jump to the one they wanted.

That's not really what you wanted, I'm just thinking out loud (metaphorically, of course).

[ken_cooper]

Wow  @James , that's really cool.  Is that a Canvancement, or just something that you custom built for your course?  For a course with a good deal of module content items it would be really nice to be able to quick jump from within one module page/activity to another without having to go back to the modules page.  If I could go from 12.3 to 12.18 right from 12.3 for instance, would be a nice time saver.  Not trying to derail the topic, as this isn't really the same thing as Greg's idea, but I love the functionality you're showing right here.

[ProfessorBeyrer]

Thinking out loud is awesome. No, my intent would not be for hyperlinks. I wouldn't want students to jump through the module out of the sequence I have set up. If I have requirements set up that won't be a problem; if I don't then I'd rather students have to look at the titles of all the module items before they select where they want to go. They can see those titles on the Modules page. And the potential for lots of module items is another good reason to make the progress bar be simple with just a few pieces of information that can work regardless of the number of items in the module:

<--Previous | Item no. X out of Y | Next-->

[James]

That's some PHP code I threw together that loads the page, appends/replaces the menu bar, and then writes it back if it has changed the page. I have a very structured naming system:

Chapter 3 Introduction, Chapter 4 Introduction, Chapter 5 Introduction, etc.,

Chapter 3 Summary, Chapter 4 Summary, Chapter 5 Summary, etc.,

Section 3.1, Section 3.2, Section 3.3, etc.

The code isn't published anywhere. It uses an unpublished PHP API I wrote.

[James]

Just documenting some things ...

The Get module item sequence endpoint of the Modules API accepts two parameters. The values that we would most likely want are:

• asset_type = ModuleItem
• asset_id = the module_item_id that appears in the URL

If you specify a module item id, then items will only be in one module, so you don't have to worry about duplicate modules.

This returns an object with an items array. The items[0].current.position contains the position of the current module. This would satisfy the X portion of "Item no. X out of Y."

A second property is the modules array. Again, there is just one when you specify the module item id. The modules[0].items_count contains the total number of items in the module. This would provide the Y portion of "Item no. X out of Y."

In other words, only one API call is needed per module item to determine the information needed. This is the same call that Canvas makes to fetch the previous and next buttons, although it adds an undocumented frame_external_urls=true query parameter.

The modules[0] object also includes the name of the module that you're in. I mention this because I'm a little wary of the language "Item no. X of Y" and whether it conveys what we want conveyed in an unconfusing way. It doesn't mention that it's the current module and someone might reasonable take it to mean something else. I imagine Greg was mentioning that just as an example, but the wording should be flexed out if someone wants to write code that would do this before Canvas gets around to it.

The content is contained in a div with id="sequence_footer" but more specifically in a div inside that with a class="module-sequence-footer-content"

Edit: It appears that the parent div changes depending on what kind of content it is, so we may have to look for the class rather than an CSS id.