Skip navigation
All Places > Instructional Designers > Blog > 2015 > July
2015

At Instructurecon this year, I presented a session on badges. While there are several solutions for badging that integrate with Canvas and more being developed, my current favorite is Canvabadges. More than platform and how to make badges, I think it is important to talk about why you would use badges in a course (or institution), how they would impact your current teaching and student learning practices, and how to structure them to maximize student impact. Badges are growing in popularity in K12 and Higher Ed and I think as we begin to talk about them and use them in our schools, we need to make sure we have all of the information needed to get it right.

 

My presentation focused more on these pedagogical questions and less on the actual process of setting up and creating badges.

 

You can see my presentation here: How to Succeed with Badges Without Really Trying

 

You can download a copy of my slides from the presentation here: Badges For Learning - Google Slides

 

As you get started with Canvabadges, here are some templates that are ready to be imported and labeled with your own title: Sample Canvas Badges

 

If you want to design your own badges, here are a couple of badge designing sites that can make that part of the process a little bit easier. (Just remember to add your image as the base/background file in the badge designer in Canvabadges to ensure your badge will go cleanly to Mozilla Backpack.)

 

Makebadges - the badge design tool for schools - by Makewaves (super easy and simple.)

OpenBadges.me  (the same platform used in Canvabadges, but sometimes this interface is a little easier to use.)

ClassBadges (templates, preloaded images, wicked easy)

 

If you want to learn more about how to integrate badges in your courses, watch for another course on the topic to begin soon in our CanvasLIVE course offerings (I am shooting for September).

 

One of the things I love about Canvas is that it plays nice with other open platforms. So, rather than tell you how badges work and lock you into our system of badging, you can find solutions that fit your needs and build integrations that best serve your students and teachers. One of the most exciting developments that is upcoming is an integration with The specified item was not found.. Look for more information about that soon on our website and in the CanvasLIVE I will be teaching in September.

 

Finally, for those of you who like to see everything before you get started, I am including 3 screenshots of our current Canvabadges integration in the attachments below.

 

I love hearing about what our users are doing with badges in their courses or schools, so please share your thoughts (or questions) in the comments.

 

Happy badging,

Jared.

Updated 9/16/16 with new screen shots to reflect changes in user interface and rich content editor.

 

I anticipate that this could be a problem on our campus as most of our courses are converted WebCT 6 courses.  One of our instructors gracious allowed me to use screenshots from her course.  I hope everybody finds this useful.

Why Convert HTML Content?

The course file system got a major upgrade per the June 6, 2015 release notes. One of the changes affects instructors’ ability to edit HTML pages in course files. Previously there was option to edit HTML files directly in Canvas course files; however, this option has been removed in the new file interface. In order to edit HTML pages instructors will need to download the file and edit the file in Notepad or some other type of HTML editor like Dreamweaver. This will require some knowledge of HTML to make the changes to the content. See the following Canvas guide for details on how to edit HTML files.

 

This content can be converted to Canvas pages relatively easy. It does require quite a few steps for each page; however, once the pages are converted, there will be more page editing functionality in the rich content editor and the content will easier to maintain as well. Follow the steps below.

How to Identify HTML Content in Your Course

Links to the content on Canvas pages will appear with the page title and extension .HTM or .HTML.

2016-09-16_13-51-20.png

In modules any content from files will display with a cloud icon and this could be an HTML file.

 

2016-09-16_13-49-51.png

When the link is clicked the HTML page will be framed by Canvas and the edit option will not be available. Note that the breadcrumbs display the file name and extension (html) and there is an inside scroll bar as well.

2016-09-16_13-53-28.png

 

Steps to Convert the Content

Step 1: Select and Copy the Content in the HTML Page

Copy select all the text on the page by positioning the mouse at the top of the page. Then click and drag with the mouse until all content is selected. Right-click anywhere over the selected text and choose Copy.

2016-09-16_13-56-04.png

 

Step 2: Create a Page in Canvas

From Pages

The next step will be to create a new page. You can create pages from a couple of locations in a Canvas course. Review the Canvas Guides for more details on creating and editing pages.

 

How do I use the Pages Index Page?

How do I create a new page in a course?

How do I edit a page in a course?

How do I add assignment types, pages, and files as module items?

Step 3: Paste the Text in Rich Content Editor

Once the new page is created click the title to display the page. Note: In this example a new page was created in the module.

2016-09-16_13-58-26.png

 

When the page displays click Edit.

2016-09-16_14-00-33.png

 

In the rich content editor place the cursor where the text should display on the page. (1) Right-click and select paste. (2) You can click Save & Publish to publish the page so students can see the page OR click Save to save a draft of the page. Drafts cannot be seen by students. Continue this process for each page.

2016-09-16_14-03-42.png

Additional Tips

Formatting

Please note some formatting may not appears as it did previously and may require some reformatting. Review the links below for tips and ideas on making the pages pretty.

 

Course Files Clean-up

Once you have converted the content to Canvas pages you may want to review the content that is available in course files. Remove or hide content that students don’t need to see. (1) Select content by holding down the CTRL (Command) key while selecting files. If multiple files are selected click the trash can icon above the list of files. If an individual file is selected click the gear icon and select Delete(2) To Hide content click the cloud icon and choose the option to make files hidden but available if you decide to link to any of the hidden content. Review the linked guides below for more help on using course files.

2016-09-16_14-13-44.png

What are Files?

How do I use Files as an instructor?

How do I view course files as an instructor?

How do I move and organize my files as an instructor?

How do I restrict files and folders to students in Canvas?

Animated Gifs

We've all seen animated gifs on the internet. They are nice because it's a short animation without the need of hosting a video file somewhere like YouTube. I've been using them in some of my Technology Training courses when a felt like a screenshot just isn't enough to show a step in a process. They can also be used for humorous purposes.

cat.gifSource(www.reddit.com)

 

Video to Animated Gif

  1. First, you will need a video file of what you are demonstrating. Preferably something short, around 6 seconds or so. I use Camtasia Studio to do screencasts if it's something I'm showing on a computer. As long as the recording is in MP4 or AVI, you can use it.
  2. Once you have your video file (under 50MB), you can use a site like www.ezgif.com to convert your video file into an animated gif. Browse to your file and click the upload button.
    1. upload.jpg
  3. After the upload completes, you can set a start and stop time for the gif if you want to cut some of the beginning or end of the video.
    1. startstop.jpg
  4. After the conversion, you will be given many options to edit the gif.
    1. save.jpg
    2. Crop - Cut out parts of the gif on the sides or top/bottom.
    3. Resize - Make the gif smaller and take up less of the screen.
    4. Optimize - These settings will allow you to decrease the file size of the gif by removing frames or reducing the number of colors.
    5. Effects - This will allow you to do things like:
      1. Set a color in the gif as transparent so a background image can show through.
      2. Transform or rotate the gif.
      3. Play the gif in reverse.
      4. Add filters.
    6. Speed - Add a delay between each frame so the gif is slower.
    7. Split - Split the gif into frames so you can edit each frame separately in an image editor.
    8. Write - Add a text overlay on top of the gif file.
  5. Finally, you can click the save button to save the file after all changes are made.
  6. The gif file can be added to a Canvas Page just like any other image file. You can see an example of one I used towards the bottom of a page in my Image Editing course.

Please note that most of these features do not work anymore as Instructure is actively working to remove jQuery from Canvas. This is an old post and probably should not be used in current designs. Some work arounds to continue using these features are in the comments, but this type of functionality that is dependent on jQuery began being deprecating in Aug 2016.

 

A couple of weeks ago, it came to my attention from Community Member Amanda Webster that we have code built into Canvas that allows for running some jQuery content like tabs and accordions. I was under the impression, even as a Canvas Trainer, that the only way to leverage these was to use custom Javascript. It turns out that I was wrong. I was digging around in Github and found a lot of awesome code related to this enhanceable_content. See the original file here. Be aware that at the time of this post these will not respond the same on mobile devices.

 

Also, be aware that you will probably need some HTML background to really leverage these tools. If you want a good tool to get some basics of HTML, I recommend this Codecademy Course. I've modified the tags slightly from the source file to include padding around elements for better aesthetics.

 

Note! - If the code is different in the sample page than the code listed below, I include the code on the sample page. The code on this page was kept basic to better illustrate how the code works, not to be an example of what you can do with the code.

 

  • Tabs - See this in action here. Be aware that you'll want to use paragraph and header tags for text inside of the content <div> tags. Also, this looks very different in the Rich Content Editor than it does after it is saved.

<div class="enhanceable_content tabs">

    <ul>

        <li><a href="#fragment-1"><span>One</span></a>

        </li>

        <li><a href="#fragment-2"><span>Two</span></a>

        </li>

        <li><a href="#fragment-3"><span>Three</span></a>

        </li>

    </ul>

    <div id="fragment-1">

        <p>First tab is active by default: This is Tab 1 Content.</p>

    </div>

    <div id="fragment-2">

        <p>Tab 2 Content: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

    </div>

    <div id="fragment-3">

        <p>Tab 3 Content: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

    </div>

</div>

 

 

  • Accordion - See this in action here. Notice that content areas will be as big as the largest content area in any section of the Accordion. This is because of the version of jQuery that Canvas is running. No easy way to fix it. If you find a way, let me know!

<div class="enhanceable_content accordion">

    <h3><a href="#">Section 1</a></h3>

    <div style="padding: 15px;">

        <p>Section 1 Content</p>

    </div>

    <h3><a href="#">Section 2</a></h3>

    <div style="padding: 15px;">

        <p>Section 2 Content</p>

    </div>

    <h3><a href="#">Section 3</a></h3>

    <div style="padding: 15px;">

        <p>Section 3 Content</p>

        <ul>

            <li>List item one</li>

            <li>List item two</li>

            <li>List item three</li>

        </ul>

    </div>

</div>

 

 

  • Popup Dialog - See this in action here. Just FYI, the popup is defined as only being 300px wide. The class defining this width is ui-dialog. If you figure out how to adjust the width with or without additional Javascript/CSS I'd love to know! I have not tested this on Mobile. I do not know how this will appear to Students using the Canvas App.

<div id="dialog_for_link1" class="enhanceable_content dialog">dialog for link 1</div>

<a href="#dialog_for_link1" id="link1">link 1</a>

 

                <div class="enhanceable_content draggable" style="width: 100px;">draggable</div>

 

  • Resizable Elements - See this in action here. This adds the lines in the bottom left corner of a <div> tag to adjust the size of an element.

               <div class="enhanceable_content resizable" style="width: 100px;">resizable</div>

 

  • Sortable Elements - See this in action here. This code allows for the drag and drop resorting of items, like in Modules, or Assignment Groups.

<ul class="enhanceable_content sortable" style="display: none;">

        <li>item 1</li>

        <li>item 2</li>

</ul>

 

Just wanted to share with everyone! I figure this is easier to find as a blog post then being buried in a question discussion.

Filter Blog

By date: By tag: