"Embedding" a Page Within a Page

[katzm5]

Hi all!

Let me state upfront that I hope I am communicating my question well. Please let me know if further clarification is needed on what I am asking.

Right now I am designing a course shell for our campus to improve the accessibility and usability of our Canvas courses. One thing I would like to do is have a module that is essentially a "Start Here" with pages on a course overview, success in the course, technology help, and contacting the instructor. I have created four pages within the "pages" section on Canvas – one for each heading. Now I am hoping to put all of those pages together under a single page with those pages embedded in. 

Here is my question: Right now, I have it set so that the "Start Here" page links to the other pages. But, I'd like to have it where the content of those pages actually show within the "Start Here" page while also maintaining their original content on the page itself. Linking the individual pages within the "Start Here" page doesn't work because it is just a link, rather than showing the content. I know this can be done because I've reviewed model courses with this setup, but I am unsure of how to achieve it. 

In this file below, each of the titles you see are individual pages that are then all showing together under this "Course Introduction" page. Does anyone know how to make this happen?

Thank you in advance for any help!

[Chris_Hofer · Accepted solution]

@katzm5 ...

I'm pretty sure that you can do this with the Design Tools (DesignPLUS) product from Cidi Labs, but there is a cost to that product.  I'm not as sure, however, if you can do that using iframe HTML code, though.

HTML Iframes (w3schools.com)

When I tried to apply similar code to a page in my sandbox course, I ended up with a page looking like this:

As you can see, duplicated global and course navigation buttons appeared on my page...which were all clickable...but that's not what I would want students to see.  I wonder if what you had seen was something that was using Design Tools?  Maybe there are other ways to do this (without Design Tools) that I'm not aware of, but the ifame way I tried wasn't successful.

I'd also be concerned about page length with the way you want to have things set up...especially for your students who are using mobile devices.  At a Canvas conference several years ago, I once heard something that has stuck with me..."you may not be using mobile, but your students are".  So, when designing your course pages, keep in mind the amount of scrolling that your students might have to do on a phone or table using the Canvas Student app...compared to using a laptop or desktop computer.

I hope this will be of some help to you.

[Chris_Hofer · Accepted solution]

@katzm5 ...

I'm pretty sure that you can do this with the Design Tools (DesignPLUS) product from Cidi Labs, but there is a cost to that product.  I'm not as sure, however, if you can do that using iframe HTML code, though.

HTML Iframes (w3schools.com)

When I tried to apply similar code to a page in my sandbox course, I ended up with a page looking like this:

As you can see, duplicated global and course navigation buttons appeared on my page...which were all clickable...but that's not what I would want students to see.  I wonder if what you had seen was something that was using Design Tools?  Maybe there are other ways to do this (without Design Tools) that I'm not aware of, but the ifame way I tried wasn't successful.

I'd also be concerned about page length with the way you want to have things set up...especially for your students who are using mobile devices.  At a Canvas conference several years ago, I once heard something that has stuck with me..."you may not be using mobile, but your students are".  So, when designing your course pages, keep in mind the amount of scrolling that your students might have to do on a phone or table using the Canvas Student app...compared to using a laptop or desktop computer.

I hope this will be of some help to you.

[paul_fynn · Accepted solution]

Building on  Chris_Hofer's reply, and to share our experience;

one of the unrealised opportunities in Canvas is with respect to pages (and other Canvas assets) where 30 years experience of WWW and UI has demonstrated that a key benefit/affordance of internet technology is the ability to reuse assets in multiple locations.

One area that this manifests itself is with 'Validate Links in context' where links are highlighted for the sole reason that they are located in a different Canvas course, even though that course is either institutionally available or has the same student enrolments.

It is possible to iframe pages (and other Canvas content) within the RCE, and it is possible to eliminate some of the 'page within a page' impact that this has eg:

<p><iframe src="https://canvas.anglia.ac.uk/courses/20384/pages/support-for-module-leaders?embedded=TRUE" width="100%;" height="800px" data-api-endpoint="https://canvas.anglia.ac.uk/api/v1/courses/20384/pages/support-for-module-leaders-external-examiners" data-api-returntype="Page"></iframe></p>

However, once the page is presented there appears to be no way from preventing students from navigating using the iframed page buttons - less of an issue where the pages are logically organised within the same module, but still a beaviour it woudl be useful to be able to control. 

Whilst we have attempted to make some use of iframed Canvas within our delivery sites  (for example, we can mirror a central support page into every delivery), we are now moving away from this and have determined that if we want to take that style of approach, then we need to make the retrograde step of creating our content as documents (pdf, doc, ppt) and using the document embed tool (which ironically is also an iframe).

As a final minor gripe, an embedded pdf appears ro take up the whole width of a page within which it is presented, even if the pdf itself is sized to a small business card, although this may just be a question of improving the html parameters.

Hope that's useful...

[Denham]

The biggest issue I have with embedded pages, discussions etc is when it comes ot links within and then those open within the iframe, rather then within a new tab or the parent (I'd like to get our institution to add something to address this behaviour) and the other is for next/previous buttons for when the page also exists within a module - ideally when embedded=true you shouldn't see next/previous buttons OR there should be another parameter we could add to the URL which removes the next/previous buttons.