Using jQuery dialog to create vocabulary study cards

jacob_standish · ‎01-17-2016

I've been playing with ways to leverage the available jQuery elements in Canvas and when I came across the pop-up dialogs, it seemed like a great way to create a simple vocabulary study sheet. The purpose of this is different than using a quiz. A quiz tells the student when they are correct and no matter how you configure it, it can give the student the perception that they are being assessed by the teacher. For this I want students to be able to self-assess and choose which words they want to study. This also doesn't put any pressure on the student by seeing how many they got right or wrong. This is simply the digital equivalent of flash cards.

In order to help teachers easily create their own interactive vocabulary lists, I've make a Google Spreadsheet that can produce the necessary html code to make the vocabulary pop-up dialogs. I've added functions to the spreadsheet to import definitions from Merriam-Webster's website just to generate quick definitions for my examples but it may suffice for some vocabulary lists.

Copy the Spreadsheet

jordan · ‎01-19-2016

@jacob_standish this is awesome! Thanks for sharing!

I was wondering how one could do something like this, but have images in the popup. Possible?

jacob_standish · ‎01-20-2016

Deactivated user

yes images can be inserted. You just need to add <img src="..."/> to the button or popup code area. I have a plan to add it to the spreadsheet with tow columns for users to paste urls to to images they want to display. There is a default 300px width of the popup by default so adding width="300px" to the <img> tag will help make it display nicely.

jordan · ‎01-20-2016

Thank you for the prompt reply! I'd love to see what this looks like in action! Would you also set the height to ="auto" ?

I'd also love to see you add to your original post any code snippets that you've used here. ⬅︎ some basic step-by-step instructions for the "average joe" 😉

canvas_admin · ‎02-04-2016

Thank you so much for sharing this! This is absolutely wonderful! I was able to add font family and font size to the code and make some Hebrew "flash cards" that are in unicode so no special fonts need to be downloaded. I even put them inside a table so the words wouldn't run off the screen.

2016-02-04 01.17.55 pm.png