A new way to embed content into Canvas

Previously on this blog, I wrote a post about How to embed content into Canvas in 3 easy steps.  Embedding content is a fantastic way to spruce up a content page, assignment, or announcement in Canvas by bringing in content from around the web and placing it in your class.  You can embed YouTube videos, presentations, or any of the tools that we showcase in our Technology Spotlight.  

In my previous post I explained that in 3 easy steps you can embed content, but I wanted to post an update and let you know that it is now even easier to embed content.  Canvas has an updated feature that allows you to embed without having to access the html editor (which, admittedly, can be quite intimidating to people who do not regularly come across html code).  Here are the modified steps:

Step 1: Grab the embed code

When you want to embed content from a source, you typically look for some sort of Share option.  Usually the Share option will have a popup or menu where you will find embed code.  The universal sign for embed code is:  </>

Look for that sign (or something similar) and copy the code provided.

Step 2: Paste your embed code

I made a promise to you.  I promised that it would not be easier to put your embed code into Canvas, and that you wouldn't have to mess with the html editor.  The trick to embedding content now is to place your cursor on the place where you want the embedded content to reside, then click Insert/edit media on the Rich Content Editor, and paste your code on the embed tab.  You will see a placeholder on the editing page, and when you save the page then your content will be embedded.  

Written by Dr. Sean Nufer, Director of Ed Tech for TCS Education System.

How to embed content into Canvas in 3 easy steps

There is a vast world of awesome ed tech platforms that reside outside of our online learning environment - Canvas.  It is possible to use these platforms and then link out to them within Canvas, but today we are going to talk about another (much better) approach: embedding content into Canvas.  

Embedding is using HTML code to allow you to place an online element right onto your course page. If you have embed code from VoiceThread, ThingLink, Padlet, YouTube, or any number of other online resources, then you can place those right in your LMS.  This process may sound a little complicated at first, but with just a little practice you will become confident and awesome.  

Step 1: Copy the embed code

On the platform page you wish to embed, search for an Embed option.  Often you can find this if you search for a Share link.  Find and copy the embed code that they provide.  Often this will begin with the code: <iframe…  Sometimes there is an embed option right on the page, other times you have to look for the Share button and then find the embed code.  But most platforms today make it fairly straightforward and easy to find the embed code.

Step 2: Paste your code

Once you have your embed code copied, go to the page in the LMS where you want to place it. Make sure that you switch your page to HTML view.  Paste the code where you want the interaction.

In the example above, I am pasting the Padlet embed code right into a discussion post on a Canvas discussion.  I can also paste that code into the discussion instructions, and announcement, a content page, an assignment...anywhere in Canvas where I can access the HTML editor.  

Step 3: Publish or save your page

Once your code is copied and pasted, it should be ready to go live.  To see this process in more detail, feel free to review the webinar: http://bit.ly/2A6PX3q

That's really all you need to do to embed content within Canvas.  It literally is as easy as 1, 2, 3.  

Tip: How to place embed code onto a page that already has content.

The HTML editor can look intimidating if you already have a lot of content on your page.  One trick that you can do is find exactly where you want to place your embedded content on the Rich Content Editor, and then hit enter a few times to clear some space, and finally type out some characters that would really stand out when you go into the HTML editor.  I typically type out a line of A's:  AAAAAAAAAAA

Written by Dr. Sean Nufer, Director of Ed Tech for TCS Education System.
 

Basic HTML Tables

Today we are going to talk about tables.  There are many ways to put a table in Canvas, and there are many creative uses for tables on our content pages.  We'll begin with the very basics, which is how to insert, format, and modify a table using the Table Creator feature on the Canvas Rich Content Editor.  To do this, open the Table icon and click your cursor on the grid to determine your dimensions of the table.  After you have chosen your dimensions, you can still modify then on the content page.

Once your table is created, you can use the table properties option to further edit the specifications.  To do this, place your mouse cursor anywhere on the table and select the Table properties option from the dropdown.

Below are the various options and general properties that you can adjust on your table.  You can learn more about tables in Canvas here: https://community.canvaslms.com/docs/DOC-12912-415241504.

General Properties

• Width: The width of your table (in pixels or percent, e.g. 500px, 50%). Note that the table width may be adjusted manually by selecting the table until the adjustment handles appear around the perimeter of the table, then clicking and dragging the handles to adjust the size.    
• Height: The height of your table (in pixels or percent, e.g. 500px, 50%). Note that the table height may be adjusted manually by selecting the table until the adjustment handles appear around the perimeter of the table, then clicking and dragging the handles to adjust the size.  
• Cell Spacing: The space between individual cells as well as cells and table borders (in pixels, e.g. 3px). 
• Cell Padding: The space between the cell border and its content (in pixels, e.g. 5px).   
• Border: The thickness of your table border (in pixels, e.g. 5px).
• Caption: The table label is displayed on top of the table.  
• Alignment: The location of your table on the page.

Advanced Properties

• Style: The style of your table. You can add custom CSS styling to your table such as colors, borders, spacing, and alignment.
• Border Color: The color of your table border. You can either type in the hexadecimal RGB number for the color you want (in #nnnnnn format) or type in basic colors (red, pink, cyan, blue, green, yellow, brown, black, etc.)
• Background Color: The color of your table background. You can either type in hexadecimal RGB number for the color you want (in #nnnnnn format), or type in basic colors (red, pink, cyan, blue, green, yellow, brown, black, etc.) 

HTML Tables

The Rich Content Editor is a great introduction to tables, but it only provides a fundamental structure for your table.  If you want to further customize unique aspects of your table, then you likely will benefit from exploring HTML.  In HTML format, the code for a basic table will require defining the start and end of a table <table>, as well as the table row <tr> and the individual cells <td> (table cells are called table definitions in HTML).  Below is the code for a 2x2 table.  Feel free to modify the content in the individual cells and click Run Code.  [tip: refresh the screen if you want to reset the table HTML content]

Code <table border="1" style="border-collapse: collapse;"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>	Output

That code would give you a 2x2 table.  If you wanted to add another row, then add the following code below the second row in the code:

<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
</tr>

If you wanted to add another column, then you would add: <td>row X, cell 3</td> to each row (of course, replace the cell content with your own content).  Or in this case it would likely be easier to use the Rich Content Editor.  Below are several examples of what the HTML would looke like for various table dimensions.  Feel free to play with the code and modify the table dimensions through the code.  Note that on the last example, the border is set to 3 pixels.  Modify that value and see how it renders.  How does one pixel differ from 3 pixels, and what does a width of 15 pixels look like?  If you do not want any border, then either write it <table border="0"> or simply <table>. 

<p><strong>One column:</strong></p> <table border="1"> <tr> <td>100</td> </tr> </table> <p><strong>One row and three columns:</strong></p> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <p><strong>Two rows and three columns:</strong></p> <table border="3"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>

One column: 100 One row and three columns: 100 200 300 Two rows and three columns: 100 200 300 400 500 600

A basic note about html is that every time you open a tag, you must close it. So every <table> needs a </table>, and every <td> needs a closing </td>. Thus you need to keep track of all your <tr></tr>'s and <td></td>'s. 

Now to add a little more to the tables, it is really easy to include captions and headers. Headers are similar to putting <b>bold</b> within the cells, but is a more proper and much cleaner way to do so. You can assign any cell to be a header cell, but for continuity they are typically either vertically or horizontally aligned. Here are some examples of captions and headers:

<table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table> <table border="1"> <caption>Balance Sheets</caption> <tr> <td> </td> <td>Revenue</td> <td>Profit</td> </tr> <tr> <th>First Quarter</th> <td>$100m</td> <td>$21m</td> </tr> <tr> <th>Second Quarter</th> <td>$90m</td> <td>$17m</td> </tr> <tr> <th>Third Quarter</th> <td>$95m</td> <td>$18m</td> </tr> </table>

Monthly savings Month Savings January $100 February $50 Balance Sheets Revenue Profit First Quarter $100m $21m Second Quarter $90m $17m Third Quarter $95m $18m

Now suppose you want a cell that spans more than one column or more than one cell. You would define that within the cell by using the following tag: colspan="[the number of cells it should span]". A quick example below:

<p><strong>Cell that spans two columns:</strong></p> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Professor Awesome</td> <td>cell: 555 77 854</td> <td>office:555 77 855</td> </tr> </table> <p><strong>Cell that spans two rows:</strong></p> <table border="1"> <tr> <th>Name:</th> <td>Professor Awesome</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>cell: 555 77 854</td> </tr> <tr> <td>office:555 77 855</td> </tr> </table>

Cell that spans two columns: Name Telephone Professor Awesome cell: 555 77 854 office:555 77 855 Cell that spans two rows: Name: Professor Awesome Telephone: cell: 555 77 854 office:555 77 855

If you would like to include cell padding (which I almost always do), then you can include that information within the <table> tag. Cell padding is basically like putting space between the content of the cell and the border or wall of the cell. Some examples below:

<p><strong>Without cellpadding:</strong></p> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <p><strong>With cellpadding:</strong></p> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <p><strong>With lots of cellpadding:</strong></p> <table border="1" cellpadding="30"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>

Without cellpadding: First Row Second Row With cellpadding: First Row Second Row With lots of cellpadding: First Row Second Row

One final attribute I will cover in this blog post is defining widths and heights for tables or cells. There are two different ways to define the the attributes for the width or height. You can either specify pixels or percentages.  

Value	Description
pixels	Sets the width in pixels (example: width="50")
%	Sets the width in percent of the surrounding element (example: width="50%")

In case you are wondering what the code for the above table looks like:

<table width="100%" style="border: 1px solid DarkKhaki"> <tbody><tr style="background-color:beige" > <th width="10%" align="left">Value</th> <th width="90%" align="left">Description</th> </tr> <tr> <td><i>pixels</i></td> <td> Sets the width in pixels (example: width="50")</td> </tr> <tr> <td><i>%</i></td> <td> Sets the width in percent of the surrounding element (example: width="50%")</td> </tr> </tbody> </table>

This may seem like a lot of information, but with a little dedication and practice, styling tables in HTML can be easy.  Many times the Rich Content Editor is sufficient, but learning the fundamentals of HTML will give you the freedom to customize your tables.  You can further empower your coding skills by researching online to find tips and advice.  Some good starting points would be:

https://www.w3schools.com/html/html_tables.asp
http://divtable.com/generator/
https://www.quackit.com/html/html_table_generator.cfm
http://www.rapidtables.com/web/tools/html-table-generator.htm
 

Written by Dr. Sean Nufer, Director of Ed Tech for TCS Education System.

Technology Spotlight: H5P

tl;dr - H5P lets you create awesome content for your online classroom

H5P at a glance

H5P is an amazing open source HTML5 eLearning authoring tool.  Wait, did I lose you already?  All this web code is all so confusing, and you know what?  My degree was in psychology, not computers.  So let's make this simple.  If you would like to have some interesting and engaging interactions in your online classroom without having to worry about all that computer stuff then you should check out h5p.org.  It does the code stuff for you so that you can just focus on the content.  

You can create a free account and then start building interactions, games, presentations, flashcards, and many more awesome things.  They have a whole webpage that is a treasure trove full of examples and templates for you to explore: https://h5p.org/content-types-and-applications  To get you started, here is an example of an interactive video:

How can I use H5P in my class?

Your H5P interactions can be built and then placed within content pages in Canvas.  So any place where you have a Ruch Content Editor, such as a content page, a quiz question, a course announcement, etc., you can incorporate an H5P interaction.  So, for example, if you have a module overview page that you want to add some interesting content to, you can place a picture and put hotspots on it.  As students scroll over or click on certain areas of the picture, the content will interact with them.  Perhaps a definition will pop up or a video will play.  See the example on the right.

I could also create an interactive timeline or a memory game. I can organize a collage of images or embed a course presentation with interactive slides.  One of the interactions that I like is a sequential visual tool that allows the user to transition from one picture to the next.  It's an interaction called Agamotto (likely a nod to Dr Strange). You can explore the example below: 

Here is what I like best about H5P

A screenshot of an accordion menu that I was creating in H5P

For starters, H5P is open source and free.  People who are smart with web design and coding contribute to this platform and they make it incredibly easy for non-coders to use.  Everything is simple and fairly well explained.  They have installation guides to walk you through, and building out the content is easy.  Once you're ready to put it into your Canvas course, it's as simple as copy and paste.  This platform is great if you want to explore interactivity in your online classroom.  They have good documentation and an active community to support you.

Here is what I dislike about H5P

Do you happen to know a little about HTML?  If so then you might find this platform a little stifling.  What you gain in simplicity and ease, you sacrifice in customization and freedom.  This tool is really for a beginner audience.  Even so, you do have to know how to copy embed code and paste it into the HTML editor on your Canvas page.    That's a good amount of exploring and you may need to reach out to your instructional designer for help with that.  They have very good documentation for the Moodle LMS platform, and I wish Canvas support was more specific.

My recommendations

I say, go sign up for your free account and just begin exploring the examples and templates that they provide.  You can duplicate one of their examples and modify it, or if you have a good vision of what you want to create then start from scratch.  Start small and try to add to your collection over time.  There is a community available for you as well as a forum, if you want to reach out to other users.  This is a low-stakes high-reward platform, and I say: Go explore!

Written by Dr. Sean Nufer, Director of Ed Tech for TCS Education System.