Memrise card template [support thread]

Anki Card Design
197

A big update: v5.0 is here \o/

It focuses on making all the features of the template fully functional when studying cards directly on Ankiweb from a browser, adds tapping input for the cards and long-requested cloze deletion version of the template, as well as makes a series of quality-of-life improvements.

1. Tapping input

Original Memrise input mode, which might be convenient for practicing grammar and composition of entire sentences, requested by @wodwocrow and @butter_muffin:

tapping1
tapping1649×556 38.8 KB

Breaking of a sentence into parts can be controlled by interchanging between a normal space character and a non-breaking space (entered as   in the sentence field’s HTML):

nbsp
nbsp280×123 2.35 KB

Tapping using keyboard number keys is supported (and activated once any of them is pressed). Also, everything mentioned works with math cards as well (with the result being rendered as a complete equation):

tapping 3
tapping 31119×525 30.6 KB

The layout is also adjusted to not include the visual bug from Memrise, where the button row jumps 2px down on first input, and to make all buttons responsive:

cf-2

The shared deck provides two separate presets: Memrise (Lτ) Preset [Translation+Listenting | MultipleChoice+Typing] v5.0 generating typing and multiple-choice cards for each note (better suited for studying individual words) and Memrise (Lτ) Preset [Translation+Listenting | Tapping+Typing] v5.0 for typing and tapping (better suited for whole sentences). This, of course, can be adjusted to generate all three types of cards for each note / individually control the number and types of cards based on flags (e.g. to account for a Learnable being a word or a sentence within the same note type) and/or dynamically change the input type of any card (feel free to ask for detailed instructions in this thread).
Note that there was a slight change in the way the card input modes are specified in the code. To support the new third mode and make it easier to introduce more in the future, a universal "mode" attribute is added to the card container. Now the input mode is selected by defining mode="typing", mode="mchoice", or mode="tapping" for type-in, multiple-choice, and tapping cards, respectively, instead of using mch in the list of classes (when no mode is set explicitly, the template reverts to the old way, so it is should be backward-compatible with HTML layouts made for the previous versions of the template). Also, the nkeys class needs to be added for multiple-choice cards to keep button numbers being displayed from the start (otherwise, they will only appear after a first press of a number key on each card, just like for the tapping input).

2. Cloze template

While there was a cloze version of this template originally requested by @khong and published a while back, it was never updated to include all the features, such as multiple-choice input, spelling diffs, and stuff, introduced in the main template since then. Now that the template scripts are rewritten in a way to auto-adjust depending on which note type they are inserted into, supporting the cloze version to satisfy the multiple requests (by @butter_muffin, @HQYang, and @Vanquoc) became easy enough. So this (and all future versions of the) shared deck will include a template for cloze cards:

cloze mch
cloze mch926×669 21.1 KB

Keep in mind that in Anki, cloze deletion tests are a whole separate breed of note types, which use different rules to generate cards (based on the number of clozes instead of a predefined set of card types, as is the case with the usual note types), so they cannot be easily converted or mixed with each other. This doesn’t mean that any of the features of the main template cannot be activated in the cloze one, though, quite the opposite! While the note type included in the shared deck (Memrise (Lτ) Cloze Template v5.0) is set up to produce typing and multiple-choice cards (the former for clozes with even numbers and the latter for the odd ones), these rules can be adjusted, and tapping cards can be set up to be generated along the other two.

A couple of usage tips:

  • In the default setup, to make both multiple-choice and typing cards from the same part of text, it should be clozed twice using sequential numbers, like this:

    ...outside text {{c1::{{c2::clozed part}}}} outside text...

  • Hints/placeholders/synonyms can be added to any of the clozes to indicate what kind of answer is expected:

    outer {{c1::apple::fruit}} text

    which displays as:

    image
    image458×111 2.52 KB

3. Complete Ankiweb support

While serving as a central hub for the whole Anki ecosystem and connecting apps on every other platform together, AnkiWeb itself does not provide much in terms of reviewing cards. Even basic functionality, such as typing answers available in stock Anki note types, does not work when reviewing the same cards in a web browser.

This update completely fixes this issue, making all the features function universally, not only across all Anki apps, but in AnkiWeb as well: typing cards accept typed answers, autorate them, and provide spelling differences if there are any; multiple-choice cards (including images and LaTeX equations) work as expected; audiobuttons have their normal looks and animations (instead of appearing as <audio> tags, which is the default way on AnkiWeb)[1]; keyboard shortcuts – 1-0 for for answering cards, 1-4 for manually rating answers, Space for revealing the info screen, Tab and Enter for selecting and playing back audios – all work the same way they do in the desktop app; on-screen keyboard, Hint button, etc… all work[2]. This, of course, includes tapping input and cloze deletions introduced with this update (and even the combination of all of this at once):

FireFox
FireFox1255×975 91.2 KB

Voila!
Voila!1255×854 40.9 KB

When reviewing cards from this template, the AnkiWeb interface is also adjusted, conforming to the overall aesthetic (with the show answer button practically functioning as the [>] Next / [?] I don't know / [>] Check Answer button from the Memrise):

Google Chrome and AnkiWeb interface buttons
Google Chrome and AnkiWeb interface buttons1193×864 121 KB

The rate buttons on the back of a card highlight the automatically pre-selected rating for the answer (which can be confirmed by pressing Enter or overruled by manually pressing any other button):

ratings
ratings384×215 8.64 KB

As opposed to using any Anki app, reviewing from AnkiWeb does not require downloading your collection locally, which might be beneficial for mobile devices, as it allows saving some storage. It can also serve as a way to review the cards on an iPhone without Anki iOS app restrictions, such as unavailable automatic rating and multiple-choice autosubmit functions. On the other side, however, each card will have to be loaded on the fly, so it will require constant connection and, for cards with a lot of media (like multiple-choice cards with a large number images in potential choices), can take some extra time during reviews if your internet speed is not high enough.

4. Audio

There have been several updates to audio buttons (to make them work on the AnkiWeb website and also as a step towards multiple-choice cards with audio options, which is another long-requested feature).

  • Support for audio files not included in the Anki collection

    Now audio, inserted into card fields as

    <audio controls=""><source src="%external_audio_url%" type="audio/mpeg"></audio>

    as opposed to the default way of adding them to the Anki collection and referencing as [sound:%audio_file%], should become functional and have the exact same buttons and animations. This might be helpful for files, which are too large to be used with free Anki cloud storage, or to save on the size of your collection in general. On the other hand, this way has a couple caveats of its own: the audio will look different when editing a card (and might be a little less convenient to copy and paste, but more convenient to playback), and they bring the obvious risk of losing the audio in your card if the resource it is liked to changes URL or deletes the file. They might also take some time to load in each review if the connection is slow. This will be indicated by new loading style for audio buttons:

    Loading audio
    Loading audio1345×613 47 KB

  • Playback for audio questions is randomized

    Previously, if a card had multiple audio files, all of them were autoplaying in the beginning (and after the flip to the back of the card), while the manual replay using the button on the front side always replayed only the first audio. Now, following the functionality of the original Memrise audio questions, the playback is randomized: a single random audio is autoplayed when a card is revealed or flipped, and repeatedly pressing the front button will always replay the same randomly-selected file (the backside still includes all buttons for each of the audio files in the card, that can be played back manually).

    In case a default Anki autoplay interferes with the random autoplay the template tries to invoke (a portion of a separate audio might be heard before the randomized autoplay kicks in, which is especially relevant for mobile devices), disabling autoplay in deck options is the way to solve it (and will not prevent the template from autoplaying a random audio).

  • The style for displaying audio buttons on the backside is improved to account for cards with very large numbers of buttons.

5. Cooldown

As discussed with @mthierst, this version adds a small cooldown after automatic card flips, to prevent accidental submission of empty answers (the exact delay can be adjusted in the code).

6. Add-on updates:

  • After the alt-formatting functionality was introduced to the support addon, there have been a couple of minor Anki updates that interfered with that formatting. While these changes are reverted now, and you should not notice any differences if you didn’t install versions 25.02.1 and 25.02.2 (updating straight to 25.02.4 and onwards should be fine), to reduce the likelihood of any similar breakages in the future, the addon is modified to use class="alt" as the means to mark alternative answers. If you have the addon installed, you should have received the update automatically, and the card template itself continues to support both old and new ways of formatting, so this only makes a difference when manually editing a field’s HTML code and should serve as a replacement for the original instruction included in the feature’s initial release.
  • Formatting is slightly adjusted to insert a space between the main value and the alt when displayed in the Anki spreadsheet
  • Redundant newlines, sometimes inserted by the Anki editor at the end of a field when formatting alts using add-on buttons, are now automatically cleaned up.
  • There is now a warning when trying to execute the Fill Choices function on a single card.

7. Other minor things:

  • Fields containing HTML formatting are better cleaned up when used in typing and tapping questions
  • The Hint button is now properly centered when the on-screen keyboard has no other keys
  • Fixed a bug that caused some LaTeX alts not to be accepted as correct answers
  • Note that the HTML id for the element, showing the differences between the typed answer and the expected answer (“You wrote: …”), is changed from “spellcheck” to “spelldiff”, to avoid confusion with a separate HTML input attribute, and when referring to it in template discussions. This might be important to keep in mind when updating to the new version via copy-pasting the customized HTML section, or when transferring custom styles for this element

The shared deck with v5.0 templates and presets can be downloaded here (AnkiWeb page and the releases section will be updated shortly):

  1. When the first reviewed card is an audio card, the audio will autoplay after simply opening the card, but only after an interaction with it (clicking anywhere or starting to type the answer). This is due to browsers’ default autoplay policy intended to minimize the impact of unwanted ads on websites. This behavior can be adjusted in the settings of your browser. The same holds for linked external audios when reviewing in Anki apps ↩︎

  2. tested in Chrome and Firefox on desktop, as well as in the mobile version of Chrome for Android. Any feedback regarding Safari and iPhones is requested and welcome! ↩︎

3 Likes