To create the widget, I snagged the card images at Wikipedia, along with the link to the Wikipedia article for each card. Below each image, I've added a link back to this blog post. I've created two versions of the script: one that is 300 pixels wide (the width of the card images at Wikipedia), and also a smaller 200 pixel version suitable for blog sidebars. You can see the 300-pixel version below, and the 200-pixel version in the sidebar of this blog.
If you want to use the script yourself, you can copy-and-paste the information below.
300 Pixels:
<script src="https://widgets.lauragibbs.net/domains/tarot/tarot300.js" type="text/javascript"></script>
200 Pixels:
<script src="https://widgets.lauragibbs.net/domains/tarot/tarot200.js" type="text/javascript"></script>
You can also use the script in Canvas LMS or other javascript-hostile environments by pasting in this iframe version; that way the script is running outside of Canvas, which makes Canvas happy:
<iframe src="https://widgets.lauragibbs.net/canvas/tarot.html" width="350" height="800"></iframe>
Behold: a randomizing Tarot Deck inside a Canvas LMS Page.
You can see the spreadsheet I used to generate the script here, converting the HTML in the spreadsheet to javascript with RotateContent.com. Detailed instructions here: Turn HTML Tables into Javascripts.
Appendix: Reversed cards included
People have strong feelings sometimes about whether to play with reversed cards or not; I've created a separate script which has the reversed cards included:
<iframe src="https://widgets.lauragibbs.net/canvas/tarot.html" width="350" height="800"></iframe>
Behold: a randomizing Tarot Deck inside a Canvas LMS Page.
* * *
Appendix: Reversed cards included
People have strong feelings sometimes about whether to play with reversed cards or not; I've created a separate script which has the reversed cards included:
300 Pixels:
<script src="https://widgets.lauragibbs.net/domains/tarot/tarot300reversed.js" type="text/javascript"></script>
200 Pixels:
<script src="https://widgets.lauragibbs.net/domains/tarot/tarot200reversed.js" type="text/javascript"></script>
