Don Bryn

iFrames are your iFriend

Blog Post created by Don Bryn on Oct 15, 2017

Hopefully these images will catch your attention enough to read more!!  Screen Shot 2016-06-21 at 8.06.26 AM.png    I'll explain more below.These pictures show the SAME page inserted into canvas via an iFrame.Each one is displayed with a different theme which the students can select and change on the fly.

Screen Shot 2016-06-21 at 8.06.46 AM.pngScreen Shot 2016-06-21 at 8.06.58 AM.pngScreen Shot 2016-06-21 at 8.07.13 AM.png

 

If you want to see more without reading, there is a link to an example course below!

 

Why I Use iFrames

I recently wrote a post called "using PHP in your designs" that was probably jumping in the deep end for many people.  As I've been using my new approach, I realized that the most important step wasn't PHP, but just the fact that I was using iFrames in my page and question design.

 

An iFrame is simply an HTML element that holds a webpage inside another webpage.  Because it is a webpage, it can be designed like any other webpage--anything you see out there on the web is possible.  All of those cool styled web pages with animations, media players, links to databases, etc. .  ANYTHING is possible.  And Canvas allows iFrames!

 

In my quest to design in ways that just weren't simply possible in Canvas, an iFrame was the perfect solution.  Since the iFrame can hold content from any secure server, it is not bound by the rules that limit Canvas.  Canvas has limitations on HTML (regular webpage language), CSS (webpage styling language), and Javascript or other scripting languages.  None of those limitations apply to your iFrame.

 

There are a couple drawbacks to using iFrames that made me think hard about the idea before implementing it.  One was that I had to host all my own content on a different server.  That wasn't much of an issue for me because I already pay to host my own webpage with unlimited storage and access.  The second was that the size of an iFrame is always hard-coded.  In other words, while your content inside the iFrame can be flexible as the browser window is re-sized, the iFrame itself cannot.  This can result in scrollbars in your iframe.  If you are using your iFrame in a page, this can be overcome because your iFrame can fill the whole page.  But if you are using the iFrame in a question then size has to be carefully planned because the page will also hold other content handled by Canvas.

 

It is also impossible at this stage to pass any sort of answers or grades back to Canvas.  So I am reliant on Canvas' user interface for any type of answer boxes.

 

For me, the advantages far outweighed the drawbacks, so I jumped in and I'm very glad I did.  I will as much design as possible outside of Canvas and insert it via iFrames from now on.

 

There are other advantages:  It's much easier to re-use content when hosting it on my own server.  Using PHP is especially useful in that case, but even without PHP I can copy bits of pages around without having to work inside the tiny HTML editor in Canvas.  I also am not worried about future changes to Canvas (or if my institution ever decides to stop using Canvas) because my content is not stored in Canvas.  It is forever my own.

 

What is Possible with iFrames

I stated above the ANYTHING that is possible on the web is possible in an iFrame.  In other words, if you can design a webpage,  you can do this.  You don't need to be as complex as what I've done.  If you ever come across something you want to do in a page or question that you just can't accomplish directly in Canvas, most likely you will be able to do it in an iFrame.

 

The main chunks of web design that I wanted to use were:  CSS and Javascript.

 

CSS is the styling language of the web.  It determines the, position, size, and much more for each element in a webpage.  This is probably the most useful advantage of iFrames for designers.

Javascript is used for anything active in a webpage.  Scripting handles things like animations, changing elements on the fly, user interactions, and hidden functions like keeping a score in a variable.  I find this to be extremely useful, but has a much steeper learning curve for a designer.

 

The end of this post is just meant to show off some of what I've accomplished.  Hopefully it will give you some ideas of what is possible by using iFrames in Canvas.  I will post pictures, but you can explore the content interactively by visiting this course:  https://canvas.instructure.com/enroll/D4EHD7.  That is the only way to experience the animations.  AND, even if you are not a musician, you can feel free to click around, choose incorrect answers, whatever you like.

 

Pushing Canvas into the future

I realize that one of the advantages of an LMS is keeping interaction and interface simple.  There needs to be simple (and foolproof) ways of designing content in Canvas.  However, I would also like to see the capability to incorporate more advanced design capabilities for those who have the capability to use it.

 

This could be something as simple as providing variables that can be used inside the iFrame to pass answers back to Canvas--something like the way we use brackets to place answers for multiple drop-down questions.  I realize the Canvas developers would also have to provide code and an API for interacting between the page and the iFrame.  But just think of the possibilities that would be available if I could not only design my questions in full HTML, CSS and Javascript, but also pass the answers back to Canvas for grading!!    I would be able to design literally ANYTHING I wanted for questions and quizzes.  And by reserving the actual grading functions to Canvas, there is no concern that my iFrames will mess up the gradebook or student data.

 

Maybe I'm just dreaming. . .

 

Screenshots:

Each drill has an area for the student to select the options they would like to drill:

Screen Shot 2016-06-21 at 9.54.24 AM.png

The drill (and questions) show the starting note and buttons to select which instrument they would like to use to play the example (The player in this picture is playing the string sample):

Screen Shot 2016-06-21 at 9.51.21 AM.png

Upon answering, they immediately get feedback:

Screen Shot 2016-06-21 at 10.18.24 AM.png

And some fun facts:

Screen Shot 2016-06-21 at 10.17.33 AM.png

When they get it correct, the score is updated:

Screen Shot 2016-06-21 at 9.58.09 AM.png

 

In quiz questions, the students do not see feedback, and the scoring is done by Canvas.

At any point they can change their selections for the drill and start over.

 

Most interactions are animated:

Screen Shot 2016-06-21 at 9.49.36 AM.png

I realize that animations and fun facts are not integral to the task, but in these days of video games and web surfing, fluff can play a role in getting students interested.

 

Finally, students can change the theme of the drills and pages on the fly.  The style can be selected via the upper left menu on any page (including quiz questions):

Screen Shot 2016-06-21 at 9.51.51 AM.png

 

You can see each of the 4 styles I've designed so far in the screen shot above.  The new theme is automatically applied without reloading the page.  This theme will also apply to all future pages until changed via the menu.

 

Thanks for reading!

Outcomes