When viewing module items, how to make Previous and Next buttons float at the bottom of the screen

[johnb]

Morning all,

In the image below, you can see that the Previous and Next buttons float at the bottom of the screen. This means that users do not have to scroll to the bottom of the page/screen in order to move forwards or backwards to the next module item.

I would like to implement this functionality but cannot figure out how to do so.

The only reference to this I can find is https://sites.udel.edu/canvas/2016/01/previous-next/#:~:text=When%20a%20user%20views%20a,return%20to....

It states:

"As reported in the Canvas Release Notes, starting January 30, 2016, a small change will happen to the Previous and Next buttons in the Modules tool.

When a user views a module item, the Previous and Next progression bar now always floats at the bottom of the screen. This change helps users not have to scroll to the end of a page to advance to the next module item or return to a previous item."

I have reviewed these release notes but can find no reference to this feature.

Can anyone assist with this please?

Best Wishes,

jb

[dbrace · Accepted solution]

Hi @johnb,

Based on the clarification that you provided, I believe you would need to:

1. not use the "Modules" area of the course
2. use a "Page" layout for the entire course
3. basically create your own manual layout for everything (pages, discussions, assignments, quizzes) that would mirror the functionality of the "Previous" and "Next" buttons that appear when using a "Module" layout (if doing this, you would need to put files in each of the other types of content because you cannot create a UI experience for a file that would have "Previous" and "Next" button anywhere on the webpage that appears)
4. for everything that you make (pages, discussions, assignments, quizzes) at the top of the RCE, manually create a "Previous" and "Next" link (or button)

consult with either

https://www.howtocanvas.com/create-amazing-pages-in-canvas/buttons

https://instructure.design

If/When manually creating links or buttons, be very careful with how you create them because if you do not make them correctly you will have problems when importing/copying the content/course. I would recommend that you regularly use the  How do I validate links in a course? - Instructure Community - 1001  feature.

Does that help you?

-Doug

[jcarpenter1]

Good morning @johnb !  I understand that you want the Next and Previous buttons to be at the very bottom of a page, no matter what, so students MUST read the entire page.  Have you tried adding requirements to your modules?  If not, you can add the requirement that the student must click that the page is done, and this shows up at the bottom of the page!

This link will take  you to how to make requirements in a module.  https://community.canvaslms.com/t5/Instructor-Guide/How-do-I-add-requirements-to-a-module/ta-p/1131

I also got around this by making my module, making my own "Next" button and linking the next page to the button, and then unpublishing the pages in the modules.  LOTS of work, but it took care of what you are asking it to do.

[johnb]

Thanks so much @jcarpenter1 for your response. In fact, I want to achieve exactly the opposite of what you describe (apologies for the lack of clarity in my original post). I want users to be able to navigate backwards or forwards via the Previous and Next buttons without having to scroll to the bottom of the page. 

[dbrace · Accepted solution]

Hi @johnb,

Based on the clarification that you provided, I believe you would need to:

1. not use the "Modules" area of the course
2. use a "Page" layout for the entire course
3. basically create your own manual layout for everything (pages, discussions, assignments, quizzes) that would mirror the functionality of the "Previous" and "Next" buttons that appear when using a "Module" layout (if doing this, you would need to put files in each of the other types of content because you cannot create a UI experience for a file that would have "Previous" and "Next" button anywhere on the webpage that appears)
4. for everything that you make (pages, discussions, assignments, quizzes) at the top of the RCE, manually create a "Previous" and "Next" link (or button)

consult with either

https://www.howtocanvas.com/create-amazing-pages-in-canvas/buttons

https://instructure.design

If/When manually creating links or buttons, be very careful with how you create them because if you do not make them correctly you will have problems when importing/copying the content/course. I would recommend that you regularly use the  How do I validate links in a course? - Instructure Community - 1001  feature.

Does that help you?

-Doug

[johnb]

Hi @dbrace , many thanks for your response. I have seen this functionality deployed as part of the CAUT MOOC module design. I think I´ll reach out to the MOOC leaders and inquire how they did this. I´ll share whatever I learn back to this thread.  

[dbrace]

You are welcome, @johnb. I have briefly enrolled myself into the free CAUT MOOC course that is currently running at https://canvas.instructure.com/courses/10691457. To me, unless I am misunderstanding what you have attempted to clarify, they are using a "Module" layout.

You can see that from the screenshot provided below and is especially evident when you look at the how they have requirements/prerequisites configured.

Thank you for reaching out to them and for coming back here to share with us what you learn after you reach out to them.

-Wout

 

[johnb]

So, @dbrace , @jcarpenter1 and others interested, I heard back from one of the CAUT MOOC leaders Agnes Bosanquet regarding this.

My query

Your module design involves the Previous and Next buttons/progression bar floating at the bottom of the page/screen. This means, very usefully, that users do not have to scroll to the bottom of the page/screen in order to navigate between resources in the module. How did you accomplish this?

Agnes´s response

The answer is simple, but unsatisfying I'm afraid, as we didn't do anything to make it possible. We simply went with the default settings in Canvas Free for Teacher. I haven't been able to replicate the floating Previous and Next buttons/progression bar.

The plot thickens! My query now is does anyone know what the default setting is in Canvas Free for Teacher accounts that facilitates the floating Previous and Next buttons/progression bar?

Best Wishes,

jb

[dbrace · Accepted solution]

Thank you for that update, @johnb. I do not have an answer for you.

In the "CAUT S1 2025" course in Canvas Free for Teachers that they are offering and I registered for, I am not experiencing any "floating" of the "Previous" or "Next" buttons except when viewing a discussion.  For everything else, I have to scroll all the way down to the bottom of the webpage.

Something that I did do was:

1. exported a Canvas course from my school's Canvas environment that used a module layout and the "previous" and "next" button did not "float"
2. created a new course in Canvas Free for Teachers (I did not change any settings)
3. imported the exported Canvas course

After doing that, the "Previous" and "Next" buttons did not "float".

I also:

1. created a brand new course in Canvas Free for Teachers
2. created a new module
3. created a new page as a module item
4. edited that page and added random lines of text so that the page was "long"
5. duplicated the page so that there were multiples items in the module
6. I went to view the pages and the "Previous" and "Next" buttons did not "float"

I am not sure what else there is to try in order to get the "Previous" and "Next" buttons to float.

-Doug

[johnb]

Sincere thanks @dbrace