Interactivity and Creativity in Canvas Pages

[GideonWilliams]

A focus for me next academic year is to develop our use of Canvas Pages. The best way (I think) to encourage staff to develop their confidence, is to show them just how interactive a Canvas page can be by bringing in a range of different tools from the outside. As such, I've started to make a list of great (free) interactive resources that we can embed.

As interactivity and engagement is the theme, I've designed them as flip cards using the Flip Card idea - How To Create a Flip Card with CSS (w3schools.com) The link takes you to a separate page where there are some help guides on how to make them as well as some examples.

Would anyone like to share the free interactives they use that can embed on Canvas Pages?

24/5: Just added DotStorming: Create and use Voting Boards for collaborative brainstorming and planning then vote for ideas - great for Design Thinking!

24/5: Considering Flippity.net but you would have to use an iframe generator plus requires personal Google account (we are Microsoft) :O(

Here is a brief video of how our page views and looks:

[jesmsmit74]

This is great! Thanks for sharing.  

[GideonWilliams]

Happy to share and hope to add more

[sfrizelle]

This is brilliant! I have been wanting to do this for so long. Thank you! 👏🏻👏🏻👏🏻

[GideonWilliams]

Many thanks

[jesmsmit74]

What about Book Creator?

[GideonWilliams]

This sounds interesting - many thanks! Would need to be web based as we have BYOD so not all have access to app.

[penny_christens]

Gideon - you are prolific!
Allow me to ask an elementary question, I know where to add HTML, but where/how to I apply CSS to a page?

[GideonWilliams · Accepted solution]

Just like to share stuff and so much I have learned, has come from people sharing too!

You have to add the CSS centrally to your site and to do this you need to be Admin, have admin permissions or to be very good friends with the Admin :O) This can be challenging as CSS is applied across all areas linked to the Admin! (maybe there is a way to have sub-level styles and themes but don't think our own set up allows this).

Fortunately, in my role, I am also the Admin to our Canvas instance so I have access to the Themes are and can upload a CSS file. I don't have any particular programming skills just some interest, curiosity and a willingness to try things out.

I experiment a bit on our beta instance to see what I can alter. Most of the css changes are cosmetic but have helped personalise our instance and some of the stuff I have outlined here - A bit of Modding of the Module - Playing about wi... - Instructure Community - 588090 (canvaslms.com...

The flip feature I just added from the W3C site I mentioned in the post but made a few minor modifications.

On the actual Canvas page, to get the boxes to line up, I found some <div> coding on the Community for creating tables:

<div class="content-box">
<div class="grid-row">
<div class="col-xs-12 col-md-4" style="padding: 0;">

See - Use Divs Instead of Tables on Home Page - Instructure Community - 209087 (canvaslms.com) for more details

I also adapted some great ideas for page borders from Lauren's (Canvas Queen) YouTube site - Create a Canvas Home Page Quickly with Canva (youtube.com)

I've added a brief video of how the page views and works above...

[GideonWilliams]

I posted a similar page on LinkedIn. Some suggestions that have come from there include:

• TES Blendspace
• Pearltrees
• Symbaloo
• Flipgrid
  
• Genial.ly (Some amazing Escape Rooms done by my colleagues and others - not sure how much you can do with the free account)
• Thinglink (I confess that I press the H5P tool but its been a while and will go back to see what has changed)
• Mentimeter
• Emaze
• Kami
• Desmos (I like a lot but did not include it in the list as more subject specific - interesting I use this for students to create their own graphs from live data gather from an experiment - it is their go to - no longer Excel!)
• Kahoot (I have embedded this before but needs an iframe generator to do so)
• PHeT (I like a lot but did not include it in the list as more subject specific)
• Canva (How could I forget this! And soon to be joined by Lucid)
• Pear Assessment (previously known as Edulastic)

[ryan_corris]

This is quite a list @GideonWilliams.  You must enjoy playing with all of these and finding creative ways to integrate them.  I am curious to know what vetting process you go through when using your apps.  In our K-12 environment we have so many restrictions due to privacy, student data, and security.  Our district even gets vendors to sign agreements prior to the apps being approved for use.  Wondering what your process is for app approval.

[GideonWilliams]

Those are great points. All the tools that I've used are 'additional' to our core ones. I have created accounts with them and made the resource. They are chosen because they embed within Canvas pages. None of the tools require student username and password or to create an account. If students do add data to them, it is done so under clear guidelines about how they are used and what data they enter and share. Checking site policies on data storage too. Sensible discussions with students about data privacy and footprints in PSHE lessons helps too.  

[ryan_corris]

So much to think about these days!