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 web browser, adds tapping input for the Cards and the long-requested cloze deletion version of the template, as well as makes a series of quality-of-life improvements.

1. Tapping input

An input method from the original Memrise site, convenient for practicing grammar and composition of entire sentences, requested by @wodwocrow and @butter_muffin:

Tapping input
Tapping input649×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):

non-breaking space
non-breaking space280×123 2.35 KB

Tapping using keyboard number keys is supported (and activated once any of them is pressed, like on Memrise). Everything mentioned works with LaTeX answers (with the result being rendered as a complete equation):

LaTeX tapping
LaTeX tapping1119×525 30.6 KB

The layout is also adjusted to avoid the visual bug from Memrise, where the button row jumps 2px down on first input. Also, all buttons look pressed while being clicked:

Memrise tapping vs Anki tapping

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 method 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 methods are specified in the code. To support the choice of tapping and make it easier to introduce new methods in the future, a universal "mode" attribute is added to the card container element. 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, 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 wasn’t yet updated to include all the features introduced in the main template since then (such as multiple-choice input, spelling diffs, etc.). Now that the template is rewritten in a way which makes all scripts 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 version of the template for cloze Cards:

Multiple-choice cloze-deletion
Multiple-choice cloze-deletion926×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 regular Note Types). Cloze and regular Note Types 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 version. While the cloze Note Type included in the shared Deck (Memrise (Lτ) Cloze Template v5.0) is set up to produce only typing and multiple-choice Cards (the former for clozes with even ordinal numbers and the latter for the odd ones), these setup can be adjusted to generate Tapping Cards along the other two input methods.

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

    During reviews it will be displayed as:

    Cloze hint
    Cloze hint458×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 on AnkiWeb)[1]; all 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 audio) function the same way they do in the desktop app; on-screen keyboard, Hint button, etc… everything works[2]:

Reviewing a Card on AnkiWeb (Firefox)
Reviewing a Card on AnkiWeb (Firefox)1255×975 91.2 KB

This includes tapping input and cloze deletions introduced with this update, so all three features can be combined:

Cloze-deletion tapping Card on AnkiWeb (Chrome)
Cloze-deletion tapping Card on AnkiWeb (Chrome)1255×854 40.9 KB

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

AnkiWeb interface buttons
AnkiWeb interface buttons1193×864 131 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 rate button):

Automatic rating highlights
Automatic rating highlights384×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 hand, however, each card will have to be loaded on the fly, meaning it will require constant connection and, for Cards with a lot of media (like multiple-choice cards with a large number of potential image choices), can take some extra time during reviews if the internet is not fast enough.

4. Audio

There have been several improvements 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). The updates include:

  • 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 the account’s collection in general. This way has a couple caveats, however: 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 there is the obvious risk of losing the audio in a Card if the resource it is liked to changes URL or deletes the file. External audio might also take more time to load in each review if the internet is slow. This will be indicated by a new loading style for audio buttons:

    Audio loading
    Audio loading1345×641 55.7 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 answer submission), 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, so that they can be replayed manually).

    In case a default Anki autoplay interferes with the random autoplay invoked by the template scripts (a portion of a separate audio might be heard before the randomized autoplay kicks in, which is more noticable on mobile devices), disabling autoplay in deck options is the way to solve it (turning deck audio autoplay off 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 update 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 format attributes. Even though 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 of Anki (updating straight to 25.02.4 and onwards should be fine), to reduce the likelihood of any similar breakages in the future, the Add-on is modified to use class="alt" as the means to mark alternative answers. If you have the Add-on installed, you should have received the update automatically. The Card template itself continues to support both the old and the new 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 search table
  • 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

  • Fields containing HTML formatting are now 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
  • A bug that caused some LaTeX alts not to be accepted as correct answers is fixed
  • 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 an unrelated 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. If an audio Card is the first Card opened when a Deck review is initiated, the audio won’t immediately autoplay after loading. It will play back only after the Card is interacted with in some way: clicked in any place or anything is typed into the input field. This happens because of web browsers’ default autoplay policy intended to minimize the impact of unwanted ads on websites. The same holds for linked audio from external sources when reviewing in Anki apps. The autoplay policy settings can be changed in the web browser settings. ↩︎

  2. tested in Chrome and Firefox on desktop (Windows), as well as in the mobile version of Chrome on Android and Safari on an iPhone ↩︎

4 Likes