Copy/Paste HTML Dos and Don'ts

Copy/Paste Dos

While some coders learn HTML by starting with the basics and gradually developing their code into something more sophisticated, in practice, there is no reason for you to reinvent the wheel each time you are working on a Page in Canvas. In fact, you should be "stealing" and re-using code to make your job easier.

This can take the form of importing pre-existing pages from eDS templates and resources like the eDS Assets site and then customizing them as needed, or you can grab code from different courses whenever you see a cool element like a well-designed call-out box that you want to re-use elsewhere. With this in mind, at the end of this module, we've included a whole section with examples of code for a variety of reusable elements that you should copy/paste to use in your own courses.

Pro Tip: Make a Sandbox Course

As you work more with HTML, you will undoubtedly build up a repertoire of your own go-to HTML structures that you can adapt as necessary in your projects. Many designers create a sandbox Canvas course where they can store these useful bits of code for future use. We encourage you to do this too!

Copy/Paste Don'ts

Broken Image Links

While copy/pasting is a great timesaver, there is one trick involving user permissions and images that frequently trips up new users to Canvas. The issue occurs when you copy an image from one course and paste it into another. The problem is that as a designer with access to both courses, you have Canvas permissions to the Files sections in both courses. When Canvas displays the image for you, it will appear to be normal. However, to a student that does not have access to the course where the image was originally copied from, the image link will appear broken. (As an aside, the problem occurs frequently with faculty who copy/paste things from one of their courses into another and have no idea that students aren't seeing the content.)

Let's imagine that the course where we found the image below is Course A and the course we are in now is Course B.

Take a look at the screenshot below from Course B (where the image was copy/pasted into) that shows what the designer sees when they look at the page. Seems pretty good, right?

Bloom's Taxonomy: Originally, Bloom and his colleagues (1956) created three taxonomies; cognitive, affective, and psychomotor. The most widely used is the cognitive one which focuses on six levels of cognitive functioning arranged hierarchically. A revised version of this taxonomy is now in use (Anderson & Krathwohl, 2001).

Taxonomy of Significant Learning: Created by Fink (2003) as a successor to Bloom's Taxonomy, Fink focused on "lasting change that is important in terms of the learner's life" or significant learning. Fink identified six kinds of significant learning.

Now take a look at what a student in Course B, who is not in Course A (the source of the copied image) sees.

As you can see, the image is not there at all. Let's take a look under the hood at the HTML to see if we can diagnose the problem.

Here is an example of the code for the image that was copy/pasted into the HTML of Course B.

<p><span style="color: #000000;"><img style="width: 100%;" src="https://iu.instructure.com/courses/1814909/files/92473897/preview" alt="" data-api-endpoint="https://iu.instructure.com/api/v1/courses/1814909/files/92473897" data-api-returntype="File" data-decorative="true" /></span></p>

If you look closely at the highlighted area of the href being used to pull the image into the page, you can see a 7 digit number in-between "courses" and "files" which tells you that this image resides in the Files area of Course A (https://iu.instructure.com/courses/1814909).

However, if you look at the url at the top of this page, you will see that Course B, where you are now, is "https://iu.instructure.com/courses/1769028". This is different than the URL for Course A, and this indicates that Canvas is pulling in the image from Course A, not Course B. If a student isn't in Course A then they don't have access to the Files in that course, and all they will see is the little square, which for most users is barely even noticeable.

To fix this problem, you need to download the image from Course A and then upload it into Course B. After that, it can be embedded on the page using the RCE.

Copy/Pasting Between Different Nodes in Canvas

At IU, Canvas is structured into a variety of nodes so that individual units can customize their Canvas experience as necessary. You can view the node for a specific course by going to Settings and looking in the Subaccount field.

In some cases, the CSS in particular nodes has been updated by a developer to allow for some "tricks" that aren't available to most units in Canvas. Since the vast majority of nodes have not been updated, this rarely causes performance issues.

However, eDS has its own node called "eLearning Design (Non-Credit)" which does have some unique features that will not translate into courses living in other nodes. This node was created for high-profile special projects like Teaching for Student Success, which are outside of the degree-bearing courses we frequently work on. Occasionally, these one-off projects have particular needs that warrant customization. If you try to copy/paste code from courses using these customizations, you may get unexpected results.

In the event that you experience this, you should consult with the Career ID leading the project and/or send an email to Erik Scull for assistance.