Anki JavaScript Cards

README.md

Anki JavaScript Cards

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

Instructions

1. Ensure you have synchronized all your Anki clients
2. Open Anki for desktop computers
3. Click Create Deck
4. Enter Test for the desk name and click OK
5. Click the Test deck
6. Click Add
7. Click the Type button
8. Click Manage → Add
9. Select Clone: Basic and click OK
10. Enter Script for Name and click OK
11. Close the window
12. Select Script and click Choose
13. Click Cards...
14. Enter the following for Front Template:

    <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>

    NOTE: You can ignore the "Invalid HTML on card: ReferenceError: Front is not defined" error.
15. Enter the following for Back Template (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>

    NOTE: You can ignore the "Invalid HTML on card: ReferenceError: Back is not defined" error.
16. Click Close
17. Enter the following for Front:

    window.now = new Date();
    
    document.getElementById('front').innerHTML = 'What is the current year?';

18. Enter the following for Back:

    document.getElementById('back').innerHTML = 'Current year: ' + window.now.getFullYear();

19. Click Add
20. Click Close
21. Click Study Now → Show Answer

For the the content of the <script> tag in the card template, I was unable to use variable declaration keywords (ex. var, let) without wrapping the script body in a function to nest in scope.

<script>
// nest in scope by executing anonymous function
(function () {
  var code = document.getElementById('code').innerText
  eval(code)
})()
</script>

That's weird it worked fine on my side. anyways, using an IIFE is a good solution