Create flashcards in Canvas using Microsoft Sway

DrNufer
Community Coach
Community Coach
11
7715

As I'm learning Microsoft Sway, a lightbulb flashed during one of the tutorials.  You can compare two pictures by sliding a line to the right and left.  This is nothing new; websites have been doing this for years now (see: 27 Before And Afters That Show The Power Of Special Effects).  And now we can utilize this effect through Sway.  But what I thought is that we can use this feature not just for comparing before and after features, but we can create decks of flashcards.  Now this is not as streamlined as if you had a dedicated program for making flashcards.  But it works.  This is akin to how you can use a screwdriver to open a can of paint - it's not exactly what a screwdriver is made for, but it can work as such.

The first thing I did was to create a 600x400px canvas in photoshop.  If you don't have that program then gimp is a free alternative.  I put a marker at 50% horizontal just as a reference, and then I put a question on the left half and an answer on the right half.

photoshop.png

I created three question cards and then one card to go on top with the words: Slide right for answer.

question.png

question copy.png

question copy 2.png

answer.png

Next I logged into https://sway.com/my​ and created a new Sway.

sway.png

Select Comparison under Cards > Group.

comparison group.png

This will give you a card that allows you to select the two images that you want to compare.

add an image.png

Click on Add and image and upload the images you created.  Select the content card as the top image and your [Slide right for answer] card as the bottom card.

upload.png

first comparison.png

Now you should be good to go with flashcards in your Sway.

flashcard1.gif

flashcard2.gif

flashcard3.gif

Grab your embed code by clicking (upper right corner) Share > Get embed code.

embed code.png

Put the embed code in the html editor of a content page in Canvas and the entire Sway will load right in the course.  If you make changes to your Sway, they will be immediately reflected in the Canvas course.

embedded.png

11 Comments
DaleDrees
Community Champion

Impressive snufer​ and thanks so much for the detailed notes and images. I have not used Sway and it looks very promising!

GideonWilliams
Community Champion

This is genius  snufer​ Thanks so much for the detailed, step by step guide too. Great to see another tool that embeds in Canvas

biray
Instructure Alumni
Instructure Alumni

Great blog post, snufer. In this CanvasLIVE​ video:

This video is currently being processed. Please try again in a few minutes.
(view in My Videos)
​,  @jperkins  also showcases SWAY and how you can easily embed content into pages to make them dynamic! Smiley Happy

DrNufer
Community Coach
Community Coach
Author

Awesome.  I'm watching the video right now.

jbrady2
Community Champion

snufer​ As someone who works for an institution that supplies Office365 to students, faculty, and staff, I had noticed Sway in my account, along with other tools, but I was uncertain how I might use them.  Thanks for providing me with a place to start for finding ways to employ Sway in classes.

DrNufer
Community Coach
Community Coach
Author

Your welcome.  There are actually many good platforms that Microsoft provides to institutions with O365.  I was wary of their business model initially - though it seems like most platforms are going to cloud based subscriptions.  But Microsoft is actually providing a lot of value to institutions.

2016-08-24_13-59-32.png

Many of these services either integrate right into Canvas via LTI, or they embed very cleanly onto a content page. 

Bobby2
Community Champion

Far out. This is way cool.

I just embedded my first sway and was so impressed with how it looked. Then I find this magic. Wow!

Thanks Sean!

kmeeusen
Community Champion

snufer‌, as always, you ROCK!

Thanks, and now off to play with this new toy!

Hey, wait just a minute, your post is from 2016! Where the heck have I been? Hiding in a closet, on Mars, during a dust storm?

Now I have to scroll through and see if I responded in the distant past and just forgot. Man, old age is not for the faint-of-heart!

Kelley

Bobby2
Community Champion

Just as well it resurfaced  @kmeeusen 

Have fun experimenting.

kmeeusen
Community Champion

At least my quick check did not show that I had already been here and done that two years ago. Whew! Dodged that bullet,  @Bobby2 !

venitk
Community Champion

This looks very impressive. Is it possible to add alt-text to make it accessible?