Hopefully these images will catch your attention enough to read more!! 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.
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!
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.
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.
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.
Maybe I'm just dreaming. . .
Each drill has an area for the student to select the options they would like to drill:
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):
Upon answering, they immediately get feedback:
And some fun facts:
When they get it correct, the score is updated:
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:
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):
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.