Skip navigation
All Places > Canvas Developers > Blog > Author: korina_figueroa@emerson.edu

In the 2019-04-20 release notes, one of the bug fixes was: “The Copy a Canvas Course option uses active term dates to display available courses in the drop-down list.” Recently, it came to our attention in Emerson College’s Instructional Technology Group, that this bug fix had the side effect of removing past courses from this drop-down list unless the “Include completed courses” box is checked.

 

The list of courses in the "Select a course" dropdown for copying a Canvas course now changes when "Include completed courses" is checked.

Since we’d all gotten used to past courses appearing in the list whether or not this box was checked, the change caused us to assume that the drop-down was broken. Based on the comments by Christopher Casey, Rick Murch-Shafer, Chris Hofer, and Joni Miller in the release notes thread, we aren't the only ones who ignored this checkbox until now.

 

Almost all of the times our faculty use the course copy tool, it’s to copy from a past semester to the current one. To prevent confusion due to the new functionality, we decided to force the “Include completed courses” to be box checked by default.

 

Demonstration that choosing "Copy a Canvas Course" now results in the "Include completed courses" checkbox being checked by default.

 

Here’s the code I used to make this happen. I’m happy to help others get this working in their custom js files too!

 

Edited to add: Check the comments for more efficient and concise code for this. I'm leaving the original version here for the thought process breakdown.

 

I started by writing a helper function to do the actual work of checking the box:

 

 /*
* Check the "Include completed courses" box on course import screen.
* NOTE: If the checkbox ID changes in future versions of Canvas, this
* code will need to be adjusted as well.
*/


function checkCompletedCourses() {
  var completedBox = document.getElementById("include_completed_courses");

  if ((typeof completedBox !== 'undefined') && (completedBox !== null)) {
    // Set the checkbox value
    completedBox.checked = true;
    // Trigger the change event as if the box was being clicked by the user
    completedBox.click();
  }
}

 

Inside the document ready function in our custom js code file, I already had a variable for running code only on specific pages. I added an additional regular expression to check for the Import Content page in a course.

 

var currentCoursePath = window.location.pathname;
var importPattern = /(\/courses\/[0-9]+\/content_migrations)$/i;

 

Since the “Include completed courses” checkbox doesn’t exist until the “Copy a Canvas Course” option is selected, I set up a MutationObserver to monitor the div that this checkbox gets added to.

 

if (importPattern.test(currentCoursePath)) {
  var importBoxObserver = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      checkCompletedCourses();
    });
  });

  importBoxObserver.observe(document.getElementById("converter"), {
    childList: true
  });
}

 

So far this is working for us and we’re hoping it’ll prevent extra pre-semester stress once faculty are back on campus for the Fall.

Hi all! I’m an Instructional Technologist / Developer in Emerson College’s Instructional Technology Group.

 

Emerson has recently switched to using Panopto for video hosting and we’ve been working through some growing pains. We’ve heard from our reps for both Panopto and Canvas that we’re not the only school having the below problem, so I wanted to share the workaround we’re using.

 

The problem, as reported by our users, occurs on iOS versions of the Canvas Student and Canvas Teacher apps on pages that contain embedded Panopto videos requiring login to access.

 

On Android versions of the Canvas apps, users were offered the chance to login and watch the embedded videos.

Android user experience with Panopto embeds in mobile apps

 

On iOS, however, users encountered a frame with the text “Server Error” and “404 - File or directory not found.”

iOS user experience with Panopto embeds in mobile apps

 

Since our online courses are taught solely through Canvas and all have embedded Panopto videos on the front page, this was not the kind of first impression we wanted online learners to have of their courses.

 

We’re still working with Canvas and Panopto to find a solution, but in the meantime I wrote some custom Javascript and CSS for the Canvas mobile apps to improve the user experience. To keep the learning experience consistent across devices, the custom JS works for both iOS and Android versions of the Canvas apps.

 

First, the Javascript checks to see if there’s an iframe on the page with a source URL matching our Panopto URL (ie, https://emerson.hosted.panopto.com/).

 

Then, if it finds one or more matching iframes, it creates and adds a paragraph to the top of the page that encourages users to view the course in a browser instead:

“Warning: Some video content on this page is not supported in Canvas mobile apps. For the best experience, please access this course via a browser.”

""Android app view of the new warning message.

 

""
iOS app view of the new warning message.

 

Finally, the script replaces each matching iframe with just a plain link to the video that opens as an External Tool.

""
Android and iOS users both see the same "Watch video" link; user experience is kept consistent.

 

Panopto video shown with "External Tool" wrapping.
Clicking "Watch video" opens the video for playback while keeping some Canvas navigation options to return to course content.

 

The result is a much cleaner interface and user experience, which we’re considering keeping even when the original error gets resolved.

 

In theory this code could be adapted to replace any other iframes that don’t display properly in mobile by changing the source it’s checking for. So far we’ve only gotten reports of issues with Panopto, but that might change as more teachers and students start to use the apps.

 

I've shared a version of the code we’re using on GitHub. It's been edited to be a bit more generalized and is pure Javascript, so no need to load in jQuery. 

 

Canvas mobile - Custom embed user experience · GitHub 

 

If you aren’t already using custom mobile JS and CSS files, you can upload these two as-is* using these instructions: https://community.canvaslms.com/docs/DOC-10862-4214724282

 

If you are already using a custom CSS file for mobile, just update that file with the code from this CSS file.

 

If you’re already using a custom js file for mobile, you can copy to your file the two functions:

function replaceEmbed(frame,linkText) { … } and function customEmbedUX() { … } *

Then, just call customEmbedUX() from within whatever document ready type function you’re using.

 

If you use it, please keep some form of attribution with it. If you have suggestions for improvement, I’d love to hear them!

 

* Edited to add: One minor edit is needed in the code to make it work for you. In the customEmbedUX() function, change the Emerson URL to your Panopto URL.