Course import tool: include completed courses by default

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 chriscas, @rmurchshafer , @Chris_Hofer ‌, and @millerjm ‌ 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:

 <SPAN class="comment token">/*<BR /> * Check the "Include completed courses" box on course import screen. <BR /> * NOTE: If the checkbox ID changes in future versions of Canvas, this <BR /> * code will need to be adjusted as well.<BR /> */</SPAN><BR /> <BR /><SPAN class="keyword token">function</SPAN> <SPAN class="token function">checkCompletedCourses</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />  <SPAN class="keyword token">var</SPAN> completedBox <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"include_completed_courses"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /><BR />  <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">typeof</SPAN> completedBox <SPAN class="operator token">!==</SPAN> <SPAN class="string token">'undefined'</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">&&</SPAN> <SPAN class="punctuation token">(</SPAN>completedBox <SPAN class="operator token">!==</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />    <SPAN class="comment token">// Set the checkbox value</SPAN><BR />    completedBox<SPAN class="punctuation token">.</SPAN>checked <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN> <BR />    <SPAN class="comment token">// Trigger the change event as if the box was being clicked by the user</SPAN><BR />    completedBox<SPAN class="punctuation token">.</SPAN><SPAN class="token function">click</SPAN><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="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>

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.

<SPAN class="keyword token">var</SPAN> currentCoursePath <SPAN class="operator token">=</SPAN> window<SPAN class="punctuation token">.</SPAN>location<SPAN class="punctuation token">.</SPAN>pathname<SPAN class="punctuation token">;</SPAN><BR /><SPAN class="keyword token">var</SPAN> importPattern <SPAN class="operator token">=</SPAN> <SPAN class="regex token">/(\/courses\/[0-9]+\/content_migrations)$/i</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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.

<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>importPattern<SPAN class="punctuation token">.</SPAN><SPAN class="token function">test</SPAN><SPAN class="punctuation token">(</SPAN>currentCoursePath<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />  <SPAN class="keyword token">var</SPAN> importBoxObserver <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MutationObserver</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>mutations<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <BR />    mutations<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>mutation<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />      <SPAN class="token function">checkCompletedCourses</SPAN><SPAN class="punctuation token">(</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><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /><BR />  importBoxObserver<SPAN class="punctuation token">.</SPAN><SPAN class="token function">observe</SPAN><SPAN class="punctuation token">(</SPAN>document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"converter"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN><BR />    childList<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><BR />  <SPAN class="punctuation token">}</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>

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.

Find more posts tagged with

Comments

Robert

@korina_figueroa

Nice work. Always a fan of a good mutation hack. I wanted to share a few things I've learned doing some of these.

I recommend wrapping independent code blocks in their own IIFE | MDN for scope in your Global JS. This prevents the contents of that IIFE from affecting other code, variables etc, within your own file as well as Canvas.
Since the IIFE is invoked immediately, you don't need to put this in document ready.
Moving up the window.location.pathname test prevents further execution when not matched, and not declaring those variables shortens the file a little bit for your users.
The regex for the test, doesn't need to case insensitive, and we can shorten it up a bit.
The mutations do not need to be iterated, they are already complete (in the DOM) by the time you reach the inside of the code block for new MutationObserver(). You can essentially do whatever truthy condition you want, like the value of the select, and then execute checkCompletedCourses(). It's faster too. I was doing this too until @James ‌ showed me it wasn't necessary.

<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="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="regex token">/^\/courses\/\d+\/content_migrations$/</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">test</SPAN><SPAN class="punctuation token">(</SPAN>window<SPAN class="punctuation token">.</SPAN>location<SPAN class="punctuation token">.</SPAN>pathname<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /><BR />    <SPAN class="keyword token">const</SPAN> checkCompletedCourses <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN><BR />      <SPAN class="keyword token">let</SPAN> completedBox <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'include_completed_courses'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />      <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">typeof</SPAN> completedBox <SPAN class="operator token">!==</SPAN> <SPAN class="string token">'undefined'</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">&&</SPAN> <SPAN class="punctuation token">(</SPAN>completedBox <SPAN class="operator token">!==</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />        <SPAN class="comment token">// Set the checkbox value</SPAN><BR />        completedBox<SPAN class="punctuation token">.</SPAN>checked <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN><BR />        <SPAN class="comment token">// Trigger the change event as if the box was being clicked by the user</SPAN><BR />        completedBox<SPAN class="punctuation token">.</SPAN><SPAN class="token function">click</SPAN><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><BR /><BR />    <SPAN class="keyword token">const</SPAN> importBoxObserver <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MutationObserver</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>mtx<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />      <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'chooseMigrationConverter'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">==</SPAN> <SPAN class="string token">'course_copy_importer'</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />        <SPAN class="token function">checkCompletedCourses</SPAN><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 /><BR />    importBoxObserver<SPAN class="punctuation token">.</SPAN><SPAN class="token function">observe</SPAN><SPAN class="punctuation token">(</SPAN>document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'converter'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN><BR />      childList<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</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="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>

korina_figueroa

I circled back around to this after the June 22nd release broke this and some other customizations we were using. Based on @James ‌' comment in a recent thread on the Javascript loading issues, the code below is what I'm using now to check the box. Seems to be working, but happy to hear if there are more improvements to make!

<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="regex token">/^\/courses\/\d+\/content_migrations$/</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">test</SPAN><SPAN class="punctuation token">(</SPAN>window<SPAN class="punctuation token">.</SPAN>location<SPAN class="punctuation token">.</SPAN>pathname<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR /> <SPAN class="comment token">// Only define & execute the below function if user is on the "Import Content" screen</SPAN><BR /> <BR /> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">checkImportBox</SPAN><SPAN class="punctuation token">(</SPAN>mutations<SPAN class="punctuation token">,</SPAN> observer<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />   <SPAN class="comment token">//console.log('Begin checkImportBox');</SPAN><BR />   <SPAN class="keyword token">const</SPAN> converter <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'converter'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />   <SPAN class="comment token">//console.log(converter);</SPAN><BR /><BR />   <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>converter <SPAN class="operator token">&&</SPAN> <SPAN class="keyword token">typeof</SPAN> observer <SPAN class="operator token">===</SPAN> <SPAN class="string token">'undefined'</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />     <SPAN class="keyword token">const</SPAN> obs <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MutationObserver</SPAN><SPAN class="punctuation token">(</SPAN>checkImportBox<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />     obs<SPAN class="punctuation token">.</SPAN><SPAN class="token function">observe</SPAN><SPAN class="punctuation token">(</SPAN>document<SPAN class="punctuation token">.</SPAN>body<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN><BR />       <SPAN class="string token">'childList'</SPAN> <SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><BR />     <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />   <SPAN class="punctuation token">}</SPAN><BR /><BR />   <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>converter<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />     <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">typeof</SPAN> observer <SPAN class="operator token">!==</SPAN> <SPAN class="string token">'undefined'</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />       observer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">disconnect</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />     <SPAN class="punctuation token">}</SPAN><BR />     <SPAN class="keyword token">const</SPAN> importBoxObserver <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MutationObserver</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN><BR />       <SPAN class="comment token">//console.log(document.getElementById('chooseMigrationConverter').value)</SPAN><BR />       <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'chooseMigrationConverter'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">==</SPAN> <SPAN class="string token">'course_copy_importer'</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />         <SPAN class="comment token">//console.log(document.getElementById('include_completed_courses').value)</SPAN><BR />         <SPAN class="keyword token">let</SPAN> completedBox <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'include_completed_courses'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />         <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>completedBox<SPAN class="punctuation token">.</SPAN>checked<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />           completedBox<SPAN class="punctuation token">.</SPAN>checked <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN><BR />           completedBox<SPAN class="punctuation token">.</SPAN><SPAN class="token function">click</SPAN><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><BR />     <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /><BR />     importBoxObserver<SPAN class="punctuation token">.</SPAN><SPAN class="token function">observe</SPAN><SPAN class="punctuation token">(</SPAN>converter<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN><BR />       childList<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</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="comment token">// END - checkImportBox definition</SPAN><BR /> <BR /> <SPAN class="token function">checkImportBox</SPAN><SPAN class="punctuation token">(</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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>