Issues with Navigation within the Course

[danielcktan]

Hi all,

For our school, we have been working on a standadise Course Homepage layout for our courses. 

However, we notice the following issue if we are using the Canvas Student App (IOS & Android)

When we click on the links on the Course Homepage, we can view the page we link to but the flow of the content is broken as the Page Navigation (Previous & Next Buttons) do not appear at the bottom of the page.

 

The Page Navigation will only appear if we click on "Modules" on the course menu to navigate through the content structure to reach the page.

Is this a feature of the app or bug? This behaviour of the app seems to give users a poor experience and reverse our efforts to create an inviting Course Home Page as the links do not work as intended on the app.

Anyone out there experience this as well? Is there any work-around we can apply to the links on our pages?

Much appreciated and thanks in advance.

Daniel

[n_adamson]

Hi  @danielcktan , I believe that's the way Canvas works. You will only get the Previous/Next buttons if the page is inserted into the Modules section. If you're just linking to a standalone page, Canvas would have no idea of what to link to next. Some people have decided to create their own navigation within the Pages section, almost like a Wikipedia style system where there is no next/previous, but linking between pages instead. 

Or is it that you've inserted the page into Modules, and the link from the home page is pointing to the non-modules page where you really want it to point to the modules version of the page? I've not tested this myself but wonder if it might be possible?

[danielcktan]

Thanks for the response, nickada‌.

These pages linked from the Course Homepage are not standalone pages. They are already included and organised into the Modules.

When we access the course using the web browser, the page navigation works properly when we click on the link on the course homepage to go to the first page in the module.

However, when we try to access the same course using the Student Mobile App, the page navigation will not work when we click on the course homepage to go to the first page in the module. Unless like you mention before, we have to click on Modules link on the course menu to navigate to the first page in the module.

link from the home page is pointing to the non-modules page where you really want it to point to the modules version of the page?

Question: How do we point the link to the module version of the page?

[Shar]

Hi Daniel Tan,

It's been like 11 months since you asked your question and I stumbled on to it today. I want to suggest using /items/first on your modules link. Sometimes that works (mostly) and occasionally it breaks when Canvas updates code.

<li><a title="Font Styling" href="https://xxx.instructure.com/courses/96/modules/11493/items/first" 
data-api-endpoint="https://xxx.instructure.com/api/v1/courses/96/modules/11493" data-api-returntype="Module">Font Styling</a></li>

I'm going to point you to my answer in another discussion about the same topic regarding the Next and Previous buttons in mobile. There's lots of other good advice in that thread too and links to other threads and what not. It's a treasure hunt...

Eventually you should get to:

Example Course with Links for mobile & desktop

Hope it's not too late to reply and these resources give you some good ideas,
Cheers - Shar

[danielcktan]

hi ishar-uw‌, Thanks for sharing the info

Eventually my team mate discovered that we have to ensure the links to the pages are in the "module" format for the navigation in the mobile app to work:
https://lms.learnforlife.sg/courses/1197/modules/items/31210 

When links are inserted from the RCE, the format of the link to the same page will become the "pages" format:
https://lms.learnforlife.sg/courses/1197/pages/1-dot-1-overview-transition-planning?module_item_id=3... 

When the links are in "pages" format, they will work in web browsers but will break the navigation in mobile app as the mobile app rely on the module item id to track navigation.

To overcome this issue, we have to add links by copying the links of the pages from the module view rather than inserting the links using the RCE.

Thanks again for sharing.