Like many of you out there, here at Utah State University, we are struggling to move all of our classes online in an absurdly short period of time in response to COVID-19.
To help speed up the process, I have created some JavaScript to facilitate rapidly pulling a template course into an empty course shell and I am sharing it in the hopes that it can alleviate some of the headaches for other institutions.
I am providing the code for two contexts, uploading JavaScript to Canvas using the Canvas Theme Editor and creating a browser bookmarklet for those who do not have access to account-level JavaScript in Canvas.
A Note About Permissions
The code that follows will run as the logged-in user and will only work if the user has permission to import course content in Canvas.
The code is also scoped to only show on the front-page of an empty course so it should not be visible to students.
Account Level JavaScript
Canvas allows for adding CSS and JavaScript at an account level using the Canvas Theme Editor. For institutions that want to provide this type of functionality for an entire account, here are two options:
Single Template Course
If you have a single template course that you would like to provide an easy way to copy, the following code will create an Insert Base Template button in the right Canvas sidebar:
Here is the code that you would upload to Canvas. Update the templateCourse id on line 36 to your template course:
<SPAN class="comment token">// Import Base Template button for the course Home Page</SPAN><BR /><SPAN class="comment token">// This function will keep checking the progress url until process is complete or fails</SPAN><BR /><SPAN class="keyword token">function</SPAN> <SPAN class="token function">checkImportProgress</SPAN><SPAN class="punctuation token">(</SPAN>progressUrl<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> $<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">get</SPAN><SPAN class="punctuation token">(</SPAN>progressUrl<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="comment token">// Update the button to show we are checking again</SPAN><BR /> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.kl-import-template'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">html</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'Checking Progress'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="comment token">// Four possible options</SPAN><BR /> <SPAN class="comment token">// 'queued', 'running', 'completed', 'failed'</SPAN><BR /> <SPAN class="keyword token">let</SPAN> completed <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="keyword token">switch</SPAN><SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">.</SPAN>workflow_state<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="keyword token">case</SPAN> <SPAN class="string token">'completed'</SPAN><SPAN class="punctuation token">:</SPAN><BR /> completed <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="keyword token">case</SPAN> <SPAN class="string token">'failed'</SPAN><SPAN class="punctuation token">:</SPAN><BR /> <SPAN class="token function">alert</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'Import failed'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="keyword token">default</SPAN><SPAN class="punctuation token">:</SPAN><BR /> <SPAN class="comment token">// For 'queued' or 'running'</SPAN><BR /> <SPAN class="token function">setTimeout</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="token function">checkImportProgress</SPAN><SPAN class="punctuation token">(</SPAN>progressUrl<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">5000</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><BR /> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>completed<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="comment token">// Reload the course home page</SPAN><BR /> location<SPAN class="punctuation token">.</SPAN><SPAN class="token function">reload</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="comment token">// Wait a bit and try again</SPAN><BR /> <SPAN class="token function">setTimeout</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="token function">checkImportProgress</SPAN><SPAN class="punctuation token">(</SPAN>progressUrl<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">5000</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><BR /> <SPAN class="comment token">// Provide feedback of the current progress</SPAN><BR /> <SPAN class="token function">setTimeout</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <BR /> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.kl-import-template'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">html</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'Template Progress: '</SPAN> <SPAN class="operator token">+</SPAN> data<SPAN class="punctuation token">.</SPAN>workflow_state<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1000</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /><SPAN class="punctuation token">}</SPAN><BR /><SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN>document<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">ready</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="comment token">// The Canvas course id for your template</SPAN><BR /> <SPAN class="keyword token">let</SPAN> templateCourse <SPAN class="operator token">=</SPAN> <SPAN class="string token">'593'</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="comment token">// Only add the button to the home page of courses without any other content in place</SPAN><BR /> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>ENV<SPAN class="punctuation token">.</SPAN>COURSE <SPAN class="operator token">!==</SPAN> undefined <SPAN class="operator token">&&</SPAN> ENV<SPAN class="punctuation token">.</SPAN>COURSE<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">!==</SPAN> <SPAN class="keyword token">null</SPAN> <SPAN class="operator token">&&</SPAN> window<SPAN class="punctuation token">.</SPAN>location<SPAN class="punctuation token">.</SPAN>pathname <SPAN class="operator token">===</SPAN> <SPAN class="string token">'/courses/'</SPAN> <SPAN class="operator token">+</SPAN> ENV<SPAN class="punctuation token">.</SPAN>COURSE<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">&&</SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.ic-EmptyStateList:visible'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="comment token">// Add the import button</SPAN><BR /> <SPAN class="keyword token">let</SPAN> importButton <SPAN class="operator token">=</SPAN> <SPAN class="string token">'<button class="btn btn-primary button-sidebar-wide kl-import-template"><i class="icon-download"></i> Import Base Template</button>'</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.kl-import-template'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.course-options'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">prepend</SPAN><SPAN class="punctuation token">(</SPAN>importButton<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="comment token">// Bind action</SPAN><BR /> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.kl-import-template'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">unbind</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'click'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'click'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="comment token">// Prompt user so they have a chance to cancel</SPAN><BR /> <SPAN class="keyword token">let</SPAN> confirmMessage <SPAN class="operator token">=</SPAN> <SPAN class="token function">confirm</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"This will copy content into your course. Click OK to proceed."</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>confirmMessage <SPAN class="operator token">==</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">html</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'Importing Base Template'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="comment token">// Send import request to the Canvas API</SPAN><BR /> $<SPAN class="punctuation token">.</SPAN><SPAN class="token function">post</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'/api/v1/courses/'</SPAN> <SPAN class="operator token">+</SPAN> ENV<SPAN class="punctuation token">.</SPAN>COURSE<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">+</SPAN> <SPAN class="string token">'/content_migrations'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="string token">'migration_type'</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'course_copy_importer'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'settings[source_course_id]'</SPAN><SPAN class="punctuation token">:</SPAN> templateCourse<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">,</SPAN> textStatus<SPAN class="punctuation token">,</SPAN> xhr<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="comment token">// Begin checking the progress url to see when import is complete</SPAN><BR /> <SPAN class="token function">checkImportProgress</SPAN><SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">.</SPAN>progress_url<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><BR /><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>Multiple Template Courses
This next variation is for institutions with multiple templates. Instead of a single button, this will add a list of courses with the option to preview and a brief description:
Here is the code that you would upload to Canvas. Update the templateList that begins on line 4 to include a name, id, and description for each of your template courses:
<SPAN class="comment token">// Create a list of templates on the home page of a blank course </SPAN><BR /><SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN>document<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">ready</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="comment token">// This is the list of your templates (Duplicate as needed)</SPAN><BR /> <SPAN class="keyword token">let</SPAN> templateList <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><BR /> <SPAN class="punctuation token">{</SPAN><BR /> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'Basic Online Template'</SPAN><SPAN class="punctuation token">,</SPAN> <BR /> id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'593'</SPAN><SPAN class="punctuation token">,</SPAN> <BR /> description<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'Basic 8 week course with readings, assignments, and quizzes'</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><BR /> <SPAN class="punctuation token">{</SPAN><BR /> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'Another Template'</SPAN><SPAN class="punctuation token">,</SPAN><BR /> id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'1234'</SPAN><SPAN class="punctuation token">,</SPAN><BR /> description<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'This is a good course template'</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><BR /> <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="comment token">// Function to check the Canvas progress url to see if the course has finished importing</SPAN><BR /> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">checkImportProgress</SPAN><SPAN class="punctuation token">(</SPAN>progressUrl<SPAN class="punctuation token">,</SPAN> courseID<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> $<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">get</SPAN><SPAN class="punctuation token">(</SPAN>progressUrl<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="comment token">// Give a visual cue that we are going to check again</SPAN><BR /> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'#kl-import-progress'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">html</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'Checking Progress'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="comment token">// 'queued', 'running', 'completed', 'failed'</SPAN><BR /> <SPAN class="keyword token">let</SPAN> completed <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="keyword token">switch</SPAN><SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">.</SPAN>workflow_state<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="keyword token">case</SPAN> <SPAN class="string token">'completed'</SPAN><SPAN class="punctuation token">:</SPAN><BR /> completed <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'#kl-import-progress'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">attr</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'class'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'alert alert-success'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="keyword token">case</SPAN> <SPAN class="string token">'failed'</SPAN><SPAN class="punctuation token">:</SPAN><BR /> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'#kl-import-progress'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">attr</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'class'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'alert alert-error'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">html</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'Import failed'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="keyword token">default</SPAN><SPAN class="punctuation token">:</SPAN><BR /> <SPAN class="comment token">// for 'queued' or 'running'</SPAN><BR /> <SPAN class="token function">setTimeout</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="token function">checkImportProgress</SPAN><SPAN class="punctuation token">(</SPAN>progressUrl<SPAN class="punctuation token">,</SPAN> courseID<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">5000</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><BR /> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>completed<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="comment token">// Change from institution visibility to course</SPAN><BR /> <SPAN class="comment token">// If you set the template visibility to 'institution', users can preview before they copy</SPAN><BR /> <SPAN class="keyword token">let</SPAN> parms <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="string token">'course[is_public_to_auth_users]'</SPAN> <SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN><BR /> <SPAN class="string token">'course[is_public]'</SPAN> <SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN><BR /> $<SPAN class="punctuation token">.</SPAN><SPAN class="token function">ajax</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="string token">'url'</SPAN> <SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'/api/v1/courses/'</SPAN> <SPAN class="operator token">+</SPAN> courseID<SPAN class="punctuation token">,</SPAN><BR /> <SPAN class="string token">'type'</SPAN> <SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'PUT'</SPAN><SPAN class="punctuation token">,</SPAN><BR /> <SPAN class="string token">'data'</SPAN> <SPAN class="punctuation token">:</SPAN> parms<BR /> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="comment token">// Import is complete, reload the page</SPAN><BR /> location<SPAN class="punctuation token">.</SPAN><SPAN class="token function">reload</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="comment token">// Import isn't finished, wait a bit and try again</SPAN><BR /> <SPAN class="token function">setTimeout</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="token function">checkImportProgress</SPAN><SPAN class="punctuation token">(</SPAN>progressUrl<SPAN class="punctuation token">,</SPAN> courseID<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">5000</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><BR /> <SPAN class="token function">setTimeout</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <BR /> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'#kl-import-progress'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">html</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'Template Progress: '</SPAN> <SPAN class="operator token">+</SPAN> data<SPAN class="punctuation token">.</SPAN>workflow_state<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1000</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><BR /> <SPAN class="comment token">// Only add the button to the home page of courses without any other content in place (shows import option)</SPAN><BR /> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>ENV<SPAN class="punctuation token">.</SPAN>COURSE <SPAN class="operator token">!==</SPAN> undefined <SPAN class="operator token">&&</SPAN> ENV<SPAN class="punctuation token">.</SPAN>COURSE<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">!==</SPAN> <SPAN class="keyword token">null</SPAN> <SPAN class="operator token">&&</SPAN> window<SPAN class="punctuation token">.</SPAN>location<SPAN class="punctuation token">.</SPAN>pathname <SPAN class="operator token">===</SPAN> <SPAN class="string token">'/courses/'</SPAN> <SPAN class="operator token">+</SPAN> ENV<SPAN class="punctuation token">.</SPAN>COURSE<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">&&</SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.ic-EmptyStateList:visible'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="comment token">// Add a placeholder to the sidebar</SPAN><BR /> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'#kl-template-list'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.course-options'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">prepend</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'<div id="kl-template-list"></div><div id="kl-import-progress"></div>'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="comment token">// Add each template to the list</SPAN><BR /> $<SPAN class="punctuation token">.</SPAN><SPAN class="token function">each</SPAN><SPAN class="punctuation token">(</SPAN>templateList<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>index<SPAN class="punctuation token">,</SPAN> val<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="keyword token">let</SPAN> itemInfo <SPAN class="operator token">=</SPAN> `<SPAN class="operator token"><</SPAN>p<SPAN class="operator token">></SPAN><BR /> <SPAN class="operator token"><</SPAN>a href<SPAN class="operator token">=</SPAN><SPAN class="string token">"/courses/${val.id}"</SPAN> target<SPAN class="operator token">=</SPAN><SPAN class="string token">"_blank"</SPAN> data<SPAN class="operator token">-</SPAN>tooltip<SPAN class="operator token">=</SPAN><SPAN class="string token">"left"</SPAN> title<SPAN class="operator token">=</SPAN><SPAN class="string token">"${val.description}"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"Button Button--secondary kl-preview-template"</SPAN> style<SPAN class="operator token">=</SPAN><SPAN class="string token">"padding: 2px 6px;"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>i <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"icon-eye"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>i<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"screenreader-only"</SPAN><SPAN class="operator token">></SPAN>View $<SPAN class="punctuation token">{</SPAN>val<SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">}</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<SPAN class="operator token">></SPAN><BR /> <SPAN class="operator token"><</SPAN>button <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"Button Button--secondary kl-import-template"</SPAN> data<SPAN class="operator token">-</SPAN>tooltip<SPAN class="operator token">=</SPAN><SPAN class="string token">"top"</SPAN> title<SPAN class="operator token">=</SPAN><SPAN class="string token">"Import ${val.name}"</SPAN> data<SPAN class="operator token">-</SPAN>courseid<SPAN class="operator token">=</SPAN><SPAN class="string token">"${val.id}"</SPAN> style<SPAN class="operator token">=</SPAN><SPAN class="string token">"padding: 2px 6px;"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>i <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"icon-download"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>i<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"screenreader-only"</SPAN><SPAN class="operator token">></SPAN>Import $<SPAN class="punctuation token">{</SPAN>val<SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">}</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>button<SPAN class="operator token">></SPAN><BR /> <SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"kl-template-name-${val.id}"</SPAN><SPAN class="operator token">></SPAN>$<SPAN class="punctuation token">{</SPAN>val<SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">}</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN><BR /> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>p<SPAN class="operator token">></SPAN>`<SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'#kl-template-list'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">append</SPAN><SPAN class="punctuation token">(</SPAN>itemInfo<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="comment token">// When template import is clicked</SPAN><BR /> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.kl-import-template'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">unbind</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'click'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'click'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="comment token">// Give user a chance to cancel</SPAN><BR /> <SPAN class="keyword token">let</SPAN> confirmMessage <SPAN class="operator token">=</SPAN> <SPAN class="token function">confirm</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"This will copy content into your course. Click OK to proceed."</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>confirmMessage <SPAN class="operator token">==</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="keyword token">let</SPAN> templateCourse <SPAN class="operator token">=</SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">attr</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'data-courseid'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="keyword token">let</SPAN> templateName <SPAN class="operator token">=</SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="template-string token"><SPAN class="string token">`.kl-template-name-</SPAN><SPAN class="interpolation token"><SPAN class="interpolation-punctuation punctuation token">${</SPAN>templateCourse<SPAN class="interpolation-punctuation punctuation token">}</SPAN></SPAN><SPAN class="string token">`</SPAN></SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">text</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'#kl-import-progress'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">addClass</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'alert alert-info'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">html</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="template-string token"><SPAN class="string token">`Importing </SPAN><SPAN class="interpolation token"><SPAN class="interpolation-punctuation punctuation token">${</SPAN>templateName<SPAN class="interpolation-punctuation punctuation token">}</SPAN></SPAN><SPAN class="string token">`</SPAN></SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="comment token">// Send import request to the Canvas API</SPAN><BR /> $<SPAN class="punctuation token">.</SPAN><SPAN class="token function">post</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'/api/v1/courses/'</SPAN> <SPAN class="operator token">+</SPAN> ENV<SPAN class="punctuation token">.</SPAN>COURSE<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">+</SPAN> <SPAN class="string token">'/content_migrations'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="string token">'migration_type'</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'course_copy_importer'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'settings[source_course_id]'</SPAN><SPAN class="punctuation token">:</SPAN> templateCourse<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">,</SPAN> textStatus<SPAN class="punctuation token">,</SPAN> xhr<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="comment token">// Begin checking the progress url to see when import is complete</SPAN><BR /> <SPAN class="token function">checkImportProgress</SPAN><SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">.</SPAN>progress_url<SPAN class="punctuation token">,</SPAN> ENV<SPAN class="punctuation token">.</SPAN>COURSE<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><BR /><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>JavaScript Bookmarklets (No access to add JavaScript to Canvas)
Next, let's take a look at some options for those who do not have access to add JavaScript to Canvas using the Theme Editor at an account level.
What is a Bookmarklet?
A bookmarklet is similar to create a bookmark in your browser to take you to a webpage. The difference is that instead of opening a webpage, a bookmarklet will run some JavaScript.
How do I create a Bookmarklet?
- Create a bookmark in your browser (the same way you would create any bookmark).
- Edit the bookmark.
- Give it a name to make it easy for you to find.
- In the URL field, you are going to add some JavaScript (keep reading to learn what this will look like).
Hard-Coded Template Course
If you would like to add a bookmarklet that will always import the same course, this is the JavaScript code we will use (replace the template_course_id on line 2 with your template course):
<SPAN class="comment token">// The id of our template course</SPAN><BR /><SPAN class="keyword token">let</SPAN> template_course_id <SPAN class="operator token">=</SPAN> <SPAN class="string token">'593'</SPAN><SPAN class="punctuation token">;</SPAN><BR /><SPAN class="comment token">// Only run on the home page of courses without any other content in place (shows import option)</SPAN><BR /><SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>ENV<SPAN class="punctuation token">.</SPAN>COURSE <SPAN class="operator token">!==</SPAN> undefined <SPAN class="operator token">&&</SPAN> ENV<SPAN class="punctuation token">.</SPAN>COURSE<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">!==</SPAN> <SPAN class="keyword token">null</SPAN> <SPAN class="operator token">&&</SPAN> window<SPAN class="punctuation token">.</SPAN>location<SPAN class="punctuation token">.</SPAN>pathname <SPAN class="operator token">===</SPAN> <SPAN class="string token">'/courses/'</SPAN> <SPAN class="operator token">+</SPAN> ENV<SPAN class="punctuation token">.</SPAN>COURSE<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">&&</SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.ic-EmptyStateList:visible'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="comment token">// Give user a chance to cancel</SPAN><BR /> <SPAN class="keyword token">let</SPAN> confirmMessage <SPAN class="operator token">=</SPAN> <SPAN class="token function">confirm</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"This will copy content into your course. Click OK to proceed."</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>confirmMessage <SPAN class="operator token">==</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="comment token">// Add a div for feedback</SPAN><BR /> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'#modules_homepage_user_create'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">prepend</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'<div id="kl-import-progress" class="alert alert-info"></div>'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="comment token">// Send request to Canvas</SPAN><BR /> $<SPAN class="punctuation token">.</SPAN><SPAN class="token function">post</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'/api/v1/courses/'</SPAN> <SPAN class="operator token">+</SPAN> ENV<SPAN class="punctuation token">.</SPAN>COURSE<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">+</SPAN> <SPAN class="string token">'/content_migrations'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="string token">'migration_type'</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'course_copy_importer'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'settings[source_course_id]'</SPAN><SPAN class="punctuation token">:</SPAN> template_course_id<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">,</SPAN> textStatus<SPAN class="punctuation token">,</SPAN> xhr<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="comment token">// Write a response with a link to the course migration page</SPAN><BR /> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'#kl-import-progress'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">html</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'Request submitted. Course copy will take a few minutes. Reload this page periodically or <a href="https://community.canvaslms.com/courses/'</SPAN><SPAN class="operator token">+</SPAN>ENV<SPAN class="punctuation token">.</SPAN>COURSE<SPAN class="punctuation token">.</SPAN>id<SPAN class="operator token">+</SPAN><SPAN class="string token">'/content_migrations">view import progress in Canvas</a>'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><BR /><SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="comment token">// Will only work on the course front page</SPAN><BR /> <SPAN class="token function">alert</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'Run this from the course home page of an empty course'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /><SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>In order for this to work as a bookmark, we have to convert it. I like to use MrColes Bookmarklet Creator to convert the code above into what we will add to a bookmark. After converting the code, it will look more like this:
javascript:(function()%7B%2F%2F%20The%20id%20of%20our%20template%20courselet%20template_course_id%20%3D%20'#####'%3B%2F%2F%20Only%20run%20on%20the%20home%20page%20of%20courses%20without%20any%20other%20content%20in%20place%20(shows%20import%20option)if%20(ENV.COURSE%20!%3D%3D%20undefined%20%26%26%20ENV.COURSE.id%20!%3D%3D%20null%20%26%26%20window.location.pathname%20%3D%3D%3D%20'%2Fcourses%2F'%20%2B%20ENV.COURSE.id%20%26%26%20%24('.ic-EmptyStateList%3Avisible').length%20%3E%200)%20%7B%2F%2F%20Give%20user%20a%20chance%20to%20cancellet%20confirmMessage%20%3D%20confirm(%22This%20will%20copy%20content%20into%20your%20course.%20Click%20OK%20to%20proceed.%22)%3Bif%20(confirmMessage%20%3D%3D%20true)%20%7B%2F%2F%20Add%20a%20div%20for%20feedback%24('%23modules_homepage_user_create').prepend('%3Cdiv%20id%3D%22kl-import-progress%22%20class%3D%22alert%20alert-info%22%3E%3C%2Fdiv%3E')%3B%2F%2F%20Send%20request%20to%20Canvas%24.post('%2Fapi%2Fv1%2Fcourses%2F'%20%2B%20ENV.COURSE.id%20%2B%20'%2Fcontent_migrations'%2C%20%7B'migration_type'%3A%20'course_copy_importer'%2C%20'settings%5Bsource_course_id%5D'%3A%20template_course_id%7D%2C%20function(data%2C%20textStatus%2C%20xhr)%20%7B%2F%2F%20Write%20a%20response%20with%20a%20link%20to%20the%20course%20migration%20page%24('%23kl-import-progress').html('Request%20submitted.%20Course%20copy%20will%20take%20a%20few%20minutes.%20Reload%20this%20page%20periodically%20or%20%3Ca%20href%3D%22%2Fcourses%2F'%2BENV.COURSE.id%2B'%2Fcontent_migrations%22%3Eview%20import%20progress%20in%20Canvas%3C%2Fa%3E')%3B%7D)%3B%7D%7D%20else%20%7B%2F%2F%20Will%20only%20work%20on%20the%20course%20front%20pagealert('Run%20this%20from%20the%20course%20home%20page%20of%20an%20empty%20course')%3B%7D%7D)()<SPAN class="line-numbers-rows"><SPAN></SPAN></SPAN> It is a lot harder to read but it will do the job. To make things easier for you to update, find the ##### string and replace it with your template course id. Once you update the course id, this is the code that you will paste in as the URL in your bookmark.
Prompt for Course ID
If you want a little more flexibility for what course you want to copy, this option will ask the user to provide a course ID.
Here is the JavaScript we will use for this one (you don't have to update this one):
<SPAN class="comment token">// Only run on the home page of courses without any other content in place (shows import option)</SPAN><BR /><SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>ENV<SPAN class="punctuation token">.</SPAN>COURSE <SPAN class="operator token">!==</SPAN> undefined <SPAN class="operator token">&&</SPAN> ENV<SPAN class="punctuation token">.</SPAN>COURSE<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">!==</SPAN> <SPAN class="keyword token">null</SPAN> <SPAN class="operator token">&&</SPAN> window<SPAN class="punctuation token">.</SPAN>location<SPAN class="punctuation token">.</SPAN>pathname <SPAN class="operator token">===</SPAN> <SPAN class="string token">'/courses/'</SPAN> <SPAN class="operator token">+</SPAN> ENV<SPAN class="punctuation token">.</SPAN>COURSE<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">&&</SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.ic-EmptyStateList:visible'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="comment token">// Prompt user for Canvas course ID</SPAN><BR /> <SPAN class="keyword token">let</SPAN> course <SPAN class="operator token">=</SPAN> <SPAN class="token function">prompt</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Please enter the Canvas course ID from which to pull content"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="comment token">// If they give a response, use it</SPAN><BR /> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>course <SPAN class="operator token">!=</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="comment token">// Placeholder for feedback</SPAN><BR /> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'#modules_homepage_user_create'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">prepend</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'<div id="kl-import-progress" class="alert alert-info"></div>'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="comment token">// Remove any spaces</SPAN><BR /> course <SPAN class="operator token">=</SPAN> course<SPAN class="punctuation token">.</SPAN><SPAN class="token function">trim</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="comment token">// Send request to Canvas</SPAN><BR /> $<SPAN class="punctuation token">.</SPAN><SPAN class="token function">post</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'/api/v1/courses/'</SPAN> <SPAN class="operator token">+</SPAN> ENV<SPAN class="punctuation token">.</SPAN>COURSE<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">+</SPAN> <SPAN class="string token">'/content_migrations'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="string token">'migration_type'</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'course_copy_importer'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'settings[source_course_id]'</SPAN><SPAN class="punctuation token">:</SPAN> course<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">,</SPAN> textStatus<SPAN class="punctuation token">,</SPAN> xhr<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="comment token">// Write a response with a link to the course migration page</SPAN><BR /> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'#kl-import-progress'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">html</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'Request submitted. Course copy will take a few minutes. Reload this page periodically or <a href="https://community.canvaslms.com/courses/'</SPAN><SPAN class="operator token">+</SPAN>ENV<SPAN class="punctuation token">.</SPAN>COURSE<SPAN class="punctuation token">.</SPAN>id<SPAN class="operator token">+</SPAN><SPAN class="string token">'/content_migrations">view import progress in Canvas</a>'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /> <SPAN class="punctuation token">}</SPAN><BR /><SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="comment token">// Will only work on the course front page</SPAN><BR /> <SPAN class="token function">alert</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'Run this from the course home page of an empty course'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /><SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>And here is that code converted to use for a bookmarklet:
javascript:(function()%7B%2F%2F%20Only%20run%20on%20the%20home%20page%20of%20courses%20without%20any%20other%20content%20in%20place%20(shows%20import%20option)if%20(ENV.COURSE%20!%3D%3D%20undefined%20%26%26%20ENV.COURSE.id%20!%3D%3D%20null%20%26%26%20window.location.pathname%20%3D%3D%3D%20'%2Fcourses%2F'%20%2B%20ENV.COURSE.id%20%26%26%20%24('.ic-EmptyStateList%3Avisible').length%20%3E%200)%20%7B%2F%2F%20Prompt%20user%20for%20Canvas%20course%20IDlet%20course%20%3D%20prompt(%22Please%20enter%20the%20Canvas%20course%20ID%20from%20which%20to%20pull%20content%22)%3B%2F%2F%20If%20they%20give%20a%20response%2C%20use%20itif%20(course%20!%3D%20null)%20%7B%2F%2F%20Placeholder%20for%20feedback%24('%23modules_homepage_user_create').prepend('%3Cdiv%20id%3D%22kl-import-progress%22%20class%3D%22alert%20alert-info%22%3E%3C%2Fdiv%3E')%3B%2F%2F%20Remove%20any%20spacescourse%20%3D%20course.trim()%3B%2F%2F%20Send%20request%20to%20Canvas%24.post('%2Fapi%2Fv1%2Fcourses%2F'%20%2B%20ENV.COURSE.id%20%2B%20'%2Fcontent_migrations'%2C%20%7B'migration_type'%3A%20'course_copy_importer'%2C%20'settings%5Bsource_course_id%5D'%3A%20course%7D%2C%20function(data%2C%20textStatus%2C%20xhr)%20%7B%2F%2F%20Write%20a%20response%20with%20a%20link%20to%20the%20course%20migration%20page%24('%23kl-import-progress').html('Request%20submitted.%20Course%20copy%20will%20take%20a%20few%20minutes.%20Reload%20this%20page%20periodically%20or%20%3Ca%20href%3D%22%2Fcourses%2F'%2BENV.COURSE.id%2B'%2Fcontent_migrations%22%3Eview%20import%20progress%20in%20Canvas%3C%2Fa%3E')%3B%7D)%3B%7D%7D%20else%20%7B%2F%2F%20Will%20only%20work%20on%20the%20course%20front%20pagealert('Run%20this%20from%20the%20course%20home%20page%20of%20an%20empty%20course')%3B%7D%7D)()<SPAN class="line-numbers-rows"><SPAN></SPAN></SPAN>
Wrap Up
Anyway, I hope that this will be useful to some of you during the present chaos and any future chaos. Feel free to modify, adapt, change, or share that code.
