Download the .js/.css files and place them in your collection.media folder (or set that up as a repo, but bear in mind anki does not accept subfolders in collection.media). Import the note type.
Every note creates one or two cards, no more (currently). Each card, in my terminology, has a front and a back, the front being the part of the card you see before you flip it, and the back being the part of the card that becomes visible once you flip it. (Please note that under this definition, the front is also visible once you flip it. In Anki's terms, {{FrontSide}} is included on the backside."> A Fields appear on the front of the first card, and on the back of the second card, should it be enabled. The reverse is true for B fields. Flipping the card is what you do when you press the "Check Answer" button. Whenever I write "add anything", I personally just usually add "y", but you are free to copy-paste the complete works of Shakespeare instead.
A_1, A_2, A_3 are just three fields for A content. There are multiple reasons why you would want to separate this into different fields, as should become apparent. The relevant B fields function analogously.
These are somewhat counterintuitive, but consistent. These will display as regular A/B fields on their respective front, but will create a Type: type field if they are on the back. If you experiment, you'll get the hang of it.
Same as the numbered A and B fields, but since these are always qualified in some way (Front, Back, FrontBack), these are not numbered
Takes any number of <img> elements and tries to display them prettily. Within reason, it will preserve the original image if only one is given, if more are given, it will flexbox them.
Only displays on the front of cards. If combined with A or B, only displays on that respective front side.
A field for information that is additional, is therefore rendered smaller and with less opacity.
A field for headings, which for me mostly end up being questions. For obvious reasons, only displays on the front side.
Display on front and back, duh.
Display before all the relevant Main fields (So A/B_1-3, _Main, Typable">
So, all the main fields (So A/B_1-3, _Main, Typable) are flexboxed. If you set this to "flexDirectionColumn", it will create a column, not a row. If you set this to "flexWrap", items will wrap nicely.
Will surround all the main fields that have content (So A/B_1-3, _Main, Typable) with a nice pretty box, and is necessary for some of the features. Add <div>s for each line if you want multiline boxes. To enable, enter "contentBox" (without quote-marks).
Input anything to add a reverse card. Without this, A fields are identical to Front, and B are identical to Back.
Selfexplanatory, will not render but can be used, for example, to track sources etc.
For example for Frequency information, or to preserve a sort order safely. Will not render on card.
Add anything to render a text notepad. Content is preserved when flipping, so can be used to check one's answer, or just as a place to do some thinking in writing.
Add anything to render a scientific calculator. Because that was the Anki feature everyone had been asking for.
Add anything to add a fully functional sketchpad for drawing, complete with different colors and font sizes. Useful for e.g. Kanji, formulae, flags, and answering the card "What does the Mona Lisa look like?" Preserves content when flipping card.
Add an image as a BG to the sketchpad, to draw over it. Generally, I would recommend image occlusion (by Glutanimate) for any image-based flashcards, but this might be useful in rare circumstances. Only accepts the filepath, it will error if you try inserting an img. Check that anki doesn't add weird HTML to this, or it will fail.
Add anything to randomize the field order of the main elements (So A/B_1-3, _Main, Typable). Usefull for multiple-choice, as will be explained in the Features section.
Add reorderText to have all <i> s be randomly shuffled, and become clickable to reorder them. In effect, you can make flashcards that are based on putting elements in a correct order, similar to Duolingo's word order tasks. Be sure to add all the text into one of the main fields (Ideally a FrontBack one, so you don't have to do it twice), and be sure to only use one main field, otherwise things will not work as intended.
Allows you to create boxes with <strike> and <u>. On the front, you can select which ones are correct, and once flipped, you will get feedback. Strike is defined as wrong, u as right. Combinable with reorderText.
On AnkiDroid, the button it generates should float to the top right of the screen. Have more than one audio file in your note? Tough luck.
In general, do not use multiple choice. But if you, like me, have some legacy multiple choice cards or can see some use in them (like in minimal pair testing), there is a multiple choice feature. Just enable contentBoxes and fill one of the FrontBack fields, and the card will assume you are doing multiple choice. Tap on the box you think it is and see if you're right or wrong!
See ReorderText
Cards can change color based on tag. Just add a line like this to the CSS file: "[data-tag*="$YOUR_TAG_OR_PART_OF_TAG_HERE"]~* { --dark-color: $R,$G,$B;}", with $R, $G, $B Being the desired color values. Be sure to check for uniqueness, `[data-tag*="ja"] will match "japanese" but also "favorite-places-in-jakarta" or "ways-to-spell-adjacent" or "jazzdance".
Ever not want to switch to cloze note type, or wanted to use the handy calculator (see above) in your clozes? Never fear, any element surrounded by <font> tags will render as a cloze on the front, and as bold on the back. Combine with FrontBack for profit!
<span class="highlightMain"> makes that text stand out like it's nobodies business.
<div class="key"><span>$YOUR_KEY_HERE</span></div> makes a nice-looking oversized keyboard key. Perfect for learning how to comment out code in your favorite IDE, only to realize that they assume you have a / button, but you're using a German keyboard.
If you give something the .ipa class, it will be surrounded by square brackets and have a somewhat more congenial line-height.
<code> tags should make your code look a little better. <pre><code> also has syntax highlighting courtesy of highlight.js.
Because highlight.js detection is not always great for short snippets, the card tries to detect what language the code is based on the tags. Specifically, it looks for "::$language_name" (hierarchical tags, see Glutanimates addon) and tries to match $language_name with an array of language names defined at the end of _highlight.pack.js.
If a field contains divs with the japanese colon ：, it will format them more congenially. Very alpha feature.
If you know much about the science of learning, you'll know that the more extreme images, the stronger the memory. But it's a bit awkward to review anki cards on public transportation and have a nsfw image pop up. Just add the class .nsfw to your img's and watch it become auto-hidden and revealable in one tap.
By default, a single image in the image section will display in its native proportions, at least up to a reasonable size. If you have more than one image, it will tile them at 2 per line. If you have multiple images that you need to display uncut (diagrams etc.), add the class fullsize-image to them
The fonts specified in the .css file, to be found for free at Google Fonts.
Anki loves to insert <div>s, <br>s, nbsps and other fun stuff that completely breaks the CSS. Be warned.
Some tags have gotten the good ol' CSS reset, and some have been appropriated for different uses. This isn't great semantically, but is great for quick card creation. If you want to use those tags (although I personally think they clash with the design), change the CSS to your liking.
Because I like refactoring, but anki loads .js async, and dealing with that is too much of a hassle.
This might be down to bad code on my part, or maybe you're missing one of the .js files. Nothing should be happening not contained in the HTML, CSS or JS.
Anki does not sync media changes by default. Take the Refresh Media References Addon found at https://github.com/Glutanimate/anki-addons-misc, download it, remove the clearMemoryCaches() line from the relevant python file, and move the folder to your addons folder. Thanks to an anonymous commenter on Ankiweb for the tip, and to Glutanimate for one of many, many amazing addons!
Sadly, I don't own an iOS device. If you can fix it, feel free to submit a pull request!
Yes. An edited version of the default Cloze one, as well as Image Occlusion Enhanced and Overlapping Clozes, both by Glutanimate. <3 Glutanimate.
暗記
This is amateur JS and CSS, and I also want to spend time studying with Anki, not just coding. If you find a bug or want to refactor the code in some way, or would like a feature, a issue tracker entry is appreciated, but I might not get to it soon (or perhaps ever). Should you want to submit a pull request, do open a issue first and discuss it with me, but in general, I'd be more than happy to accept them. Actually, should you want to improve this README, I'd love that, too. Writing documentation is not my favorite pasttime :P
Don't let this perfunctory and somewhat harsh README fool you: I do love y'all! <3
Glutanimate is simply the best thing that could have happened to Anki <3 Calculator adapted from: https://codepen.io/carbonhoarder/pen/zrJZPK by Carbonhoarder SVG color droplet: color by shashank singh from the Noun Project Math.js: https://mathjs.org/ Highlight.js: https://highlightjs.org/ Whoever on StackOverflow (or Github, I can't recall) figured out that there are different methods needed to save things on Android vs. Desktop, and what those are.