Become a Javascript Wizard in Canvas: HTTPS is the key

I’m taking a break today from the series of posts on Grading to share something fun: a Gaudium Mundo javascript for Latin holiday songs during the month of December. My school won’t let me teach Latin, but that doesn’t stop me from making javascripts and sharing them at my Bestiaria Latina blog.

In this post, I’ll explain the double-hack that mere mortals need to display javascripts inside Canvas. All it requires is the magic of HTTPS webspace so that you can host both the javascript and also the HTML webpage that you will use to sneak the javascript into Canvas. Here’s how it works:

1. Create your javascript. I use the wonderful free tool RotateContent.com to create my javascripts; I’ll write up a post later about just how that works. Zero programming required! You just create an HTML table of the content you want to use (date-based or random), and then¬†RotateContent generates the script for you. For Gaudium Mundo, I made two scripts: one 400 pixels wide, and one 200 pixels wide. New songs appear automatically each day of December; I don’t have to do anything. It’s automatic! ūüôā

2. Create an HTML webpage. Next, I create a vanilla HTML webpage which does nothing more than call the script. You can see the page here: Gaudium Java. When I said vanilla, I wasn’t kidding! All it does is call the script.

3. Use iframe in Canvas. Then, all you have to do is use iframe to embed the contents of the HTML page where you want it inside a Canvas page. For example, here I split the page and made the script display in the right-hand column: Javascript: Gaudium Mundo.

screen-shot-2016-12-02-at-10-37-53-am

If you are a Latin teacher and want to use my script and page, go ahead; I am glad to share! You will find the iframe code there on the Canvas page, and if you want the script for use in a blog where javascripts are allowed without the extra layer of the iframe, you can get the javascript here.

And whether or not you are a fan of Latin holiday songs, I hope this might inspire other Canvas users who have access to HTTPS webspace to experiment with creating javascripts and displaying them inside Canvas. It is a fun and easy way to add dynamic content to your classes! Plus, you can choose to share your scripts with others if you want. For more examples, see my Writing Motivation widget in Canvas, and … of course … the Growth Mindset cats in Canvas.

screen-shot-2016-12-02-at-10-36-08-am

Thanks as always to Reclaim Hosting for putting the magic power of HTTPS under my control. We can all be javascript wizards in Canvas this way!

screen-shot-2016-12-02-at-10-34-28-am

Crossposted at OU Canvas Community.


Here’s the script in action:

Canvas Hack: Repeated Quiz Content

Yesterday I explained how I have “hacked” the true-false quiz format to create a Grading Declaration system so that students do their own grading: Student Gradebook Declarations.¬†In today’s post, I want to explain another hack that helps me manage repeated quiz content that recurs from week to week. This hack might be useful to anyone who uses repeated quiz content from week to week for whatever reason, either in a Declaration-style system or for some other recurring purpose.

Here’s the problem: Canvas does not understand repeated content. If you have a quiz question one week and you repeat that quiz question in another week, they are completely separate entities. If¬†I copy quizzes, Canvas doesn’t understand that they are copies; if I use the question bank, Canvas does not update existing instances when you change a question bank question. The result: if I decide to make a change (to fix an error or to make any other change), I have to go to each quiz and edit the question again, and again, and again, week by week by week.¬†This was really frustrating for me. REALLY frustrating. I’m always trying to tinker with the language in the Declarations to make them as clear as possible and also to fix the inevitable typos, etc. Having to spend 30 minutes or more¬†just to correct one error in one Declaration, going click-click-click through one week after another, is¬†a terrible use of my time, not to mention the way that it¬†introduces even more opportunities for errors to creep in. Ugh.

In D2L, I did not have this problem. The D2L question bank was no help (it did not update quizzes containing questions if the questions were later edited), but if you used the D2L “copy” feature, D2L would remember that questions had been copied one from another. So, if I created a Declaration quiz for Week 1, and then copied that to Week 2 and Week 3 and so on, D2L understood the connection. If I needed to make a change or correction later on, D2L would ask me if I wanted to apply the change to all the other instances of the question. You could say yes or no, and I always said yes, so D2L would automatically update all instances of the repeated question (if you said “no,” then D2L would sever the connection, no longer considering the questions to be the same).

My Canvas hack.¬†So, after pondering this problem all summer, I came up with a solution, a weird solution, but it’s ended up working really well. Since Canvas refuses to let me create connected content, I decided that I would host the content remotely, and then display it via a remote-linked image, along with a link to the text for students who, for whatever reason, couldn’t read the image. You can see an example of what I did here in a Reading Declaration, one of 24 Reading Declarations that appear in each of my two classes (48 instances total per semester).¬†

screen-shot-2016-11-30-at-10-31-23-am

As you can see, the content of the Canvas quiz question is an image which is remote-hosted (image file) and displays as part of the quiz, along with a link to the quiz text (text file). This exact same remote image and link appears in each Declaration, week by week, matching¬†the assignment instructions. Even better: this solution¬†works across my two classes, which makes this hack even more efficient¬†than my D2L system (which required me to make the same changes to my two classes separately). So now, if I want to make a change to a Declaration, I just edit the assignment and update the image and the text file ‚ÄĒ presto, the new image appears in all the quizzes, and the link is the same link but it leads to the new text. I don’t even have to do anything in Canvas at all!

The magic of HTTPS. The key to making this solution work is having HTTPS¬†webspace so that the images I use in Canvas will not be blocked out according to the mixed-content rules which require that remote linked images come via HTTPS. I am so lucky that the Domain of One’s Own project at my school, powered by Reclaim Hosting, gives me access to HTTPS webspace. That’s also the key to making my javascripts run in Canvas; I’ve written about that here: New Countdown Widget on Homepage.

Final thoughts.¬†So, I am really pleased with this solution… but the failure of Canvas to support quiz content reuse is very frustrating. One of the boons of digital content is distributed content for effective editing and reuse, but the folks at Canvas don’t seem to have figured that out. They could take a lesson from D2L in this regard: the way D2L handled quiz question reuse was not ideal, but it was far (FAR) better than the lack of support for quiz question reuse in Canvas.

Of course, this quiz question conundrum is part of a much larger problem with content reuse, as I explained here: Open Content: Resources, not Courses. Digital tools should encourage us to review and improve our work, and also to distribute it widely, sharing with others. Unfortunately, the Canvas approach does not encourage you to improve and reuse content; just the opposite: it creates a burden that can discourage people from reviewing and improving, deterred by the click-click-click of mindlessly having to do the work of the machine ourselves.

This growth mindset cat is ready to review and improve! ūüôā

20283272652_ef8715bb7e_o-1

 

Crossposted at OU Canvas Community.

 

Think Before You Link: Creating a Canvas URL

Today I want to write about something that may look small, but it is actually really important: how to create¬†your own custom URLs to counteract the disposable course approach¬†of the LMS. If your school is like mine, the LMS is going to create a new course space for you semester after semester, even when the course is the same. Instead of removing the current students and loading in the new students, there is going to be a completely new course space: an empty space, on the assumption that nothing you have from last semester is worth keeping (sad, isn’t it?). Sure, you¬†can copy your course content over to the new space, but it’s a new course, with new URLs, as if your old course never even existed. Disjointed, disconnected. Like so much of the school experience. In this way, as¬†in so many other ways too, the LMS is a tool for school administrators, not for instructors, and it does not care about giving you any course space stability.

But if you create your own URL and then point it to your course, you can then repoint the URL each semester. Your course URL can remain the same, even if Canvas insists on throwing out your course and creating a new one every semester.

So, for example, one of the first things I did as a Canvas user at my school was to create URLs for the two courses that I teach every semester; they are totally open courses, so go ahead and click and see:
Myth.MythFolklore.net for Mythology and Folklore
India.MythFolklore.net for Indian Epics

You’ll see those are both subdomains on my MythFolklore.net, which is a domain name I own and control (I keep my “omnifeed” on display there as my personal homepage). All I had to do was create the two subdomains (that takes about a minute), and then create a little redirect file (that takes about another minute). All done.

Those are clickable links, easy to type, and easy to share. You can see how they redirect here:

Myth.MythFolklore.net resolves to:
https://canvas.ou.edu/courses/23183/wiki

India.MythFolklore.net resolves to:
https://canvas.ou.edu/courses/19837/wiki

Those are my Canvas courses for Fall 2016, code names “23183” and “19837” (I have no idea where those numbers come from; they just are what they are). If you are curious why I redirect to the wiki homepage for each course, you can find out all about that here: ¬†Blogger Announcements as Canvas Homepage.

My Spring 2017 course spaces already exist in Canvas: the Myth course is going to have the magic number 31878, and the India course is going to have the magic number 31889. So, after the Fall semester is over, I will go into my MythFolklore.net control panel and update the redirect file, changing the magic number of the Fall edition to the magic number of the Spring edition. That will take me all of one minute to do. Presto: my old URLs will resolve to the Spring 2017 web space for each course.

As a result, my custom URLs will continue to work anywhere and everywhere that I have shared them, semester after semester, always taking people to the current version of each course. Since I don’t have any content in my courses, that solution is good enough for me; I don’t need to share more than just the basic URL.

IMPORTANT:¬†If you are putting actual content in your Canvas courses, I would strongly urge you to think about creating a freestanding resource site instead of dealing with the nightmare of all your course content having new URLs every semester; you can read more about that here: Open Content: Resources, not Courses.¬†This URL, for example ‚ÄĒ Canvas.MythFolklore.net ‚ÄĒ goes to a Canvas space I have created as a permanent content resource (a demonstration course for growth mindset and live¬†content), not as a disposable course.

For this little hack to work, you need to be able to create custom URLs in a space you control. At my school, we are so lucky to have Reclaim Hosting’s Domain of One’s Own program, branded OUCreate, which gives faculty, staff, and students their own web space.

web_bug_script_red

You can get a very inexpensive domain of your own, or you can use a create.edu subdomain of your own for free. You can host your own blog (like the blog you are reading right now), build websites and wikis, and you can also run database-driven applications, etc. I hope every OU faculty member will consider making use of OUCreate, even if it is just to give yourself some URL stability in a world of Canvas chaos!

So, think before you link! By creating your own custom URLs, you can give your Canvas courses a lasting identity, instead of a disposable one.

I have control.

control

 

Crossposted at OU Canvas Community.

New Countdown Widget on Homepage

As we get near the end of the semester (as of today, there are five weeks of class remaining), I wrote up a new “countdown” widget for my class, and I thought that would be something good to share here as an example of simple date-based widget. In this post, I’m going to focus on the nitty-gritty of how to make the widget. Meanwhile, you can see that this widget is also related to time management; more about that here: time management posts.

How does the widget¬†work? I created this date-based text widget using RotateContent.com, a free online tool that converts HTML tables to javascripts. As you can see, the countdown widget “counts down” the days until the end of the semester, and alerts students how many points, more or less, they should have based on whether they are trying to finish the class with an A by the end of Week 15 or if they want to finish up before Dead Week in order to have a week off at the end of the semester to prepare for exams in their other classes (Dead Week is has long been a sore spot at my school, as you can read in the student newspaper).

So, voil√†, you can see the widget at work¬†in the side bar of the blog here: Class Announcements.¬†Because I use that blog as my Canvas homepage, you can see how it looks here in one of my classes; the countdown widget is under the growth cat and above the Twitter stream; I don’t want to make a big deal about it, but I do want it to be there persistently, updating automatically day by day as we get closer to the end of the semester. My classes are open, so feel free to click and take a look; no log-in required: India.MythFolklore.net:

screen-shot-2016-10-31-at-10-02-02-am

 

Making the widget.¬†Here’s a step by step guide:

STEP ONE. Create an HTML table.¬†The content is dynamic with a date that responds to the system clock, but it doesn’t require any fancy programming. Instead, you create the widget by generating a simple HTML table with the dates you want in the left-hand column and the corresponding HTML content (which can be anything: text, links, images, etc.) in the right-hand column: countdown.html. I actually wrote this using a spreadsheet since the content is basically a kind of formula that repeats, although the formula shifts during Thanksgiving Break and then during Week 15 when it’s no longer possible to finish before Dead Week. So, the content is partly automated (I used the spreadsheet to fill in the dates, the points, and most of the text), but also something I manually tweaked in the resulting HTML table.

STEP TWO. Convert to javascript. After you prepare the HTML table, RotateContent.com converts the HTML table into a javascript. You then need to upload the javascript to your own webspace (RotateContent.com converts the javascript but does not host it for you; you need to do that yourself). If you want to use the widget in Canvas, you need to make sure that you have https webspace so that the javascript and its assets (image assets, for example) will have https addresses that will display properly in Canvas.

STEP THREE. Insert the javascript.¬†Then, you use the https address of your javascript to insert it wherever it is going to go. I happen to put it in the sidebar of my class announcements blog, but I could also put it into a Canvas Page, for example; you can see examples of javascript widgets in Canvas pages in this demo course I created last summer: Canvas.MythFolklore.net. There’s information there about calendar-based widgets, random widgets, and also about¬†how to randomly display a date-based calendar widget (it’s like having two widgets for the price of one).

Thanks to Reclaim Hosting!¬†As always, I am very grateful to Reclaim Hosting and the Create project at my school ‚ÄĒ check it out at Create.ou.edu ‚ÄĒ which gives students, faculty, and staff access to their own web hosting space, including an https option that is very (VERY) simple to use.

Aside:¬†I’m also using my Create domain to host this blog so that I can learn more about WordPress in order to provide better support to my students who are also experimenting with WordPress in my classes.

The power of dynamic content.¬†Creating dynamic content like this is one of my favorite things to do! Unlike static content that students have to find manually (click-click-click, where you risk losing them at every click), dynamic content allows you to present fresh content to students automatically either based on the date (something new each day, like this countdown widget) or at random (like the growth mindset cats, with a new cat whenever the page loads). On days when they are doing a lot of work for my class, students might visit Canvas multiple times, and I want to take advantage of that by presenting them with new content. And it’s easy: I just create and insert the widget, and it is ready to go-go-go at any hour of the day or night. I like to get a good night’s sleep… but my widgets are always awake! ūüôā

THANK YOU, RANDY HOYT!¬†And, finally, a big shout-out to Randy Hoyt who created the RotateContent.com tool many years ago and continues to make it freely available to everyone online. Randy is an OU alum, a web-maker extraordinaire, and is also a founder of Foxtrot Games, maker of beautiful board games. If you give RotateContent.com a try for yourself, you can say thanks to Randy over at Twitter where he’s @randyhoyt.

Plus… cats.¬†¬†I also want to sing the praises of Josh Walcher’s¬†writtenkitten.co. I used that to write up the first draft of this blog, and it rewarded me with kittens throughout. Why are my blog posts so long? Blame the kittens! And if you want to thank Josh for helping cats take over the Internet, you can find him at @Josh_Walcher.

screen-shot-2016-10-31-at-10-40-06-am

Crossposted at OU Canvas Community.