This demonstrates one method for creating JavaScript based Anki cards.
Tested on
- Anki for desktop computers version 2.1.13
- AnkiMobile (iOS) version 2.0.48
- Ensure you have synchronized all your Anki clients
- Open Anki for desktop computers
- Click Create Deck
- Enter
Test
for the desk name and click OK - Click the
Test
deck - Click
Add
- Click the Type button
- Click Manage → Add
- Select Clone: Basic and click OK
- Enter
Script
for Name and click OK - Close the window
- Select Script and click Choose
- Click Cards...
- Enter the following for Front Template:
NOTE: You can ignore the "Invalid HTML on card: ReferenceError: Front is not defined" error.
<div id="front" class="card">Loading front...</div> <script> var code = (function () {/* {{Front}} */}).toString(); code = code.slice(16, code.length - 4); eval(new DOMParser().parseFromString(code, "text/html").documentElement.textContent); </script>
- Enter the following for Back Template (ignore the "Invalid HTML on card: ReferenceError: Back is not defined" error):
NOTE: You can ignore the "Invalid HTML on card: ReferenceError: Back is not defined" error.
<div id="back" class="card">Loading back...</div> <script> var code = (function () {/* {{Back}} */}).toString(); code = code.slice(16, code.length - 4); eval(new DOMParser().parseFromString(code, "text/html").documentElement.textContent); </script>
- Click Close
- Enter the following for Front:
window.now = new Date(); document.getElementById('front').innerHTML = 'What is the current year?';
- Enter the following for Back:
document.getElementById('back').innerHTML = 'Current year: ' + window.now.getFullYear();
- Click Add
- Click Close
- Click Study Now → Show Answer
Even though this method works it seems kinda weird, given that the html+js framework already has many methods for passing data.
escape
the text and pass it in attributes, which could be retrieved later.This is especially beneficial with JSON data. Lately, I've been making cards that require some fields to be arrays, and Anki doesn't support arrays (not that I know of).
** You could also use jQuery depending on the platform.