Navigational Issues in Canvas Student App When Using URLs from Modules

[christopher_fra]

I need some assistance solving a possible anomaly. 

I am in the process of creating a Canvas Course Shell Template for my faculty. I am building a navigation using pages as the main navigational path. The goal is to be able to create a course shell with hyperlinks that won't break if a teacher renames the page name.

If I copy the URL of a page from the modules view (seen in the picture below) I get a hyperlink with an ID

and embed it into a hyperlink of a page,

thus using this method the page can be renamed without the link breaking. 

This navigation method works well for desktop browsers as well as mobile browsers. However, when navigating using the Canvas app, things go awry in that, when a user clicks on a hyperlink/hypermedia that is expected to connect to another page (or item) whose URL has been copied from the modules view, the canvas app navigates randomly to the modules view without going to anything specific as opposed to navigating to the page with the relevant content.

Two videos have been uploaded to showcase the behavior

Screenrecording of Navigating when Hyperlinks are created using URLs from the Pages:

Navigation works when using URL from pages - YouTube 

Screenrecording of Navigating when Hyperlinks are created using URLs from the Modules View:

Navigation issues when using modules URL - YouTube 

Tag:

 @James ‌ just seeking your help yet another time

[James]

 @christopher_fra ,

I don't know how much help I'll be. Things in mobile don't work exactly the same as in the browser and pretty much none of the things I've written for the web UI will work with mobile because of that. That means I'm limited in mobile knowledge.

The best thing I've found, something I discovered quickly my first semester teaching with Canvas, was to put forethought into the names I called the content pages and then not change them. That means coming up with a scheme before the class gets taught, not coming up with stuff on the fly like I do so often.

The other nice thing is that Canvas has now come up with that link checker on the Course > Settings page. That helps people find the pages where they modified the links and broke something.

Trying to refer to items by their module links is a hack. I've done it with videos before we had Arc so that I could tell which students were watching the videos. However, it may not be necessary in this particular case.

Mentioning hacks made me think of something that may not be so hackish. All of the path routes in Canvas works off numeric IDs except for pages. But it turns out that there is an ID associated with each page, it's just not shown, but you can still refer to a page by it's ID if you know it.

Have you tried linking to a content page by its ID to see if that works?

I don't know if this works in mobile or if it works when you copy content, so you would want to check, but it's worth a shot.

My Course 2335978 has a content page called "Canvas Success Tips".

The normal way of linking to that page contains a link like

/courses/2335978/pages/canvas-success-tips‍

However, every page has a PageID associated with it that is not normally shown to people because it's not friendly. To get the PageID, there are a couple of things you can do, but the easiest is probably to open the developer tools in your browser because the page_id is sent with the content. That's normally F12 to open the developer tools, then go to the console view.

After the page you want has been loaded, type this and hit enter.

ENV.WIKI_PAGE.page_id;‍

For me, it comes back with 11863641.

That's my PageID and I can refer to the page by that ID instead of canvas-success-tips.

/courses/2335978/pages/11863641‍‍

That should not change if someone renames the page.

That's the best I've got outside of making sure people don't change the names of pages, which you can't really do. If they do change then names, then make them go through and fix the links themselves. For most people, having them fix the links will cure them of changing the names.

[christopher_fra]

Hi James,

Thanks for your feedback. I will look into the information you shared and see how it works for me.

Cheers

[jdick1]

I think this is because you're just copying the URL and not the full XHTML address. I'm not an XHTML (or even regular HTML expert), but I think the app needs more metadata in order to be able to do this.

URL: https://canvas.andover.edu/courses/COURSE ID/OBJECT TYPE/PAGE TITLE?module_item_id=#####

      vs.

XHTML: <a title="PAGE TITLE" href="URL" data-api-endpoint="URL" data-api-returntype="CANVAS OBJECT TYPE">PAGE TITLE</a>

The trick is to add your link, save the page, and then reopen it and switch to HTML view; it will auto-populate all the extra items in the a tag. Once those are in place, it should allow users to import the content and rename without breaking the links in the iOS app (caveat: I don't have an Android device to test this on).

If you have a lot of objects (pages, quizzes, assignments) that will be heavily interlinked, you may find it helpful to create them all at once (content blank), get them in their modules, and then creating a sort of table of contents page with links to each. Save, reopen in the HTML editor and then copy/paste into an unminifier (like this one) and then you've got all of the addresses in one place. It's a bit of work at the beginning that I find saves me time and headaches down the line. The only caveat is making sure that the placeholder object names aren't going to change until it's ready for import into someone else's course section.

I'm still fairly new to Canvas, so if anyone else has better/more efficient workflows, would love to hear.

[christopher_fra]

Hi Jen,

Thanks much for your feedback. I will be trying out what both you and James suggested and see how it operates for me. Thanks in advance

[heatherlbrown77]

I'm just curious how this will work when the course is copied for each instructor. Wouldn't the page links change for each copy of the course which would break the links? Or am I overthinking it...

[christopher_fra]

Hi Heather,

No, the hyperlinks do not break when copied from one course to another. However, as an Instructional Designer, I don't copy or important one course into another (as pictures and other objects point back to the original course). 

I first expert the course and then import the exported canvas file (.imsc) into an empty canvas course shell.

Hope that helps 

[heatherlbrown77]

Thank you Christopher! We just switched from BB to Canvas so we are still trying to figure out all of the best practices. 

[Shar]

Hello Christopher Francique,

I used to reliably just link to the module from the homepage and it would work out just fine in mobile too.. as in goto the spot on the Modules page where the module is, but now it's doing something funky.

At any rate, to link to a page within a module and still have it continue in the module (in mobile), I learned about appending  /items/first to the URL of the module. But that is glitchy now.

So just today, I tried out just linking to the page URL that I get once I click on the page from modules. The URL ends with: ?module_item_id=85522 and that seems to do the trick. Now in both mobile and desktop, once I get to the page it will continue in the prescribed module.

Hope that helps,
Cheers - Shar