Pages

June 8, 2019

Tarot Card Javascript

For the upcoming Domains conference (whoo-hoo! and yes, this is for you, Autumm...), I built a new randomizing widget using the Rider-Waite-Smith tarot deck drawn by the remarkable Pamela Colman Smith.





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:

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>




No comments:

Post a Comment

If the comment form misbehaves, you can also find me at Twitter: @OnlineCrsLady. (Sometimes convos are faster and easier there in fact.)