Memrise card template [support thread]

[Eltaurus]

Sorry for taking a while with the updates and leaving several comments unanswered, everyone. Life happened, and I got preoccupied with other matters for the past few months. Fortunately, I have some more time to put into working on the template again. There are quite a few new features implemented, so hopefully, it all worth the wait.

---

Improved Android support

1. The bug with missing spaces found by @mthierst is fixed.
   Details

   It turned out to be a purely visual bug, caused by differences between default css in desktop and Android versions of Anki, which could be observed only under very specific conditions: an incorrect answer containing white space should be submitted to a question with a correct answer that also contains a white space between two different letters. On top of that, it requires the input text to be centered vertically, as in this Memrise card template, and otherwise does not manifest itself in any way (which is why it can’t be seen in the default Anki cards, for example).

   In any case, new version of the cards should be working fine on both desktop and Android. I also submitted an issue to the AnkiDroid GitHub, and it got patched. So even old cards should start working in the future releases of AnkiDroid.

2. The bug with an empty answer being accepted as correct, reported by @khong and @g0thi is also fixed.
   Details

   Despite looking very simple, it turned out to be quite an elaborate one. My current theory is that it is caused by some bug in LaTeX preprocessor of AnkiDroid, which gets triggered by escaped brackets in a regular expression in the card’s script (because in LaTeX same combinations of symbols mark beginning and end of an equation block). As a result, the source JS code gets messed up before it is executed. We may still get more info on it from this bug report.

   For this reason, the new version of cards uses a different RegEx notation in order to avoid this issue altogether. So it should be working regardless of whether the related AnkiDroid bug gets fixed or not.

3. Margins on the cards got adjusted to better fit narrow screens.
4. Correct answers now get auto-accepted as they do on desktop Anki.

Also note, that the Memrise-styled text input box can be enabled on cards instead of the default Android one. To do so, go to the Advanced section in the AnkiDroid settings and turn on the Type answer into the card option:

   

---

Audio cards

@lastdemocrat

I am also waiting for the audio cards!

Fully functioning audio cards are here:

Note, that there are two different Note types in the provided deck now:

1. Memrise Template (Lτ) v2.81 is the new version of the same core template, which is meant to be customized to fit everyone’s individual needs. By default, it looks almost the same as the previous version, but it has all new styles and scripts built in. If, for example, a card containing audio in the question field is created, as described in this post, it is now automatically formatted with all the appropriate Memrise-style buttons and animations on both the front and the back.

   This post contains some additional details on the ways of customizing the template. On top of that, there are several “hidden” styling options, such as making a font for a specific field larger, modifying the shape of an audio button, or making combined audio-and-text type questions, in case someone finds a use for that:
   

   
   
   I plan to write a tutorial post, describing all of that in more detail in the future, but in the meantime feel free to ask me any questions about customization (I would really appreciate that, as they will also help me to better understand what the planned tutorial should focus on).

2. Memrise Preset [Translation+Listening] (Lτ) v2.81 is a preset that is meant to serve as a specific example of the template customization and as a premade option for people who don’t want to get involved with customization themselves, only looking for a ready-to-use solution which provides both text and audio cards.

   This Note type is created from the template in basically the same way as described in the posts linked above. It is set up to produce two cards for each note (an entry in Anki database): one card for translating a word from a known language to a learned one, and another card for typing the learned word based on its audio.

Also, buttons are created with vector shapes, instead of PNGs, so they do not have rasterization artifacts:

---

Spelling corrections

@noty

In the current situation, it does not compare the input to the correct answer.

I thought about it a little more and decided, that it would be appropriate to revive the style from an older version of Memrise, which used to have this feature, even if the new Memrise no longer has it. So in the new version of the card template, the corrections to the typed answer are shown right below the expected correct one:

For comparison, older Memrise style:

---

The current version of the card template (v2.81) is available on the GitHub page (I don’t want to update the Ankiweb page right away since each edit takes it down for a day, and I still plan to upload more changes to the template and the aforementioned tutorial in the immediate future).

[Eltaurus]

I wrote an addon to support the card template:
https://ankiweb.net/shared/info/884199977

While it mostly contains stuff that will become relevant with the next version of the cards, it fixes an important issue with autorating answers in the current version as well.

By default, Anki interprets “Enter” as a command to rate a card “Good”, overwriting the automatic rating provided by the card scripts. This Add-on prevents it from happening so that pressing “Enter” right after submitting an incorrect answer will take you immediately to the info screen instead of the next card (as intended) while pressing “Enter” on the info screen will autorate the card “Again” instead of “Good” (as intended).
Note that you will still be able to manually rate a card from an info screen as correct by using the Anki buttons or by pressing respective number keys 2-4.

Steps for installing the Add-on:

1. In the main Anki menu go to Tools → Add-ons (or press Ctrl+Shift+A)
2. Press Get Add-ons
3. Paste the number 884199977 into the text field and click Ok
4. Restart Anki

_{Might interfere with Customize Keyboard Shortcuts Add-on - ask me if you want to make both of them work together.}

[asiasiaa]

Hello, I don’t know English but I wanted to thank you for everything you’re doing.
I was wondering if you could help me with personalizing this template, it would be very helpful if the content from ‘extra’ and 'extra 2 fields appeared even after typing the correct answer.
I also have a problem with using AnkiDroid because after I type in the wrong word it only shows me ‘learnable’, ‘definition’ and ‘audio’.
I hope that you can understand what I mean

[Eltaurus]

@asiasiaa

it would be very helpful if the content from ‘extra’ and 'extra 2 fields appeared even after typing the correct answer

I’ve answered a similar question before. Maybe this solution will work for you as well, just with Extra and Extra 2 sections instead of Audio:

@Eltaurus

You can do this by moving the audio section out of the div that hides extra info from being displayed on the back of a card right away. So change this:

into this:

(although by default the Extra field should already be displayed at the top if it is not empty and the screen is wide enough not to omit this section)

---

@asiasiaa

I also have a problem with using AnkiDroid because after I type in the wrong word it only shows me ‘learnable’, ‘definition’ and ‘audio’.

Does the card you are reviewing has anything in the other fields? Because they won’t show up if they are empty. Are those fields displayed for you for the same card on desktop?

---

@asiasiaa

I don’t know English

Just out of curiosity, what is your native langage?

[asiasiaa]

Hello, thank you for your answer.
My native language is Polish and I just feel awkward with using English

Moving sections helped now I can see ‘extra’ even after writing correctly, I’m really thankful

I still have a problem with AnkiDroid because after I type wrong answer it doesn’t show ‘your answer’ I mean it does but only for a moment so short that I had to screenrecord to catch it, then it changes to the second screenshot.

I don’t want to abuse your kindness, but would it be possible to change the colours of the font in your template? I don’t know if original memrise had it but quizlet premium has this option where you can highlight some words… Is it possible to do for someone that can’t code?

[Eltaurus]

@asiasiaa

My native language is Polish and I just feel awkward with using English

Your English seems to be completely fine to me, but if it makes you feel more comfortable you can ask questions in Polish – it is understandable for me to a little degree, and I can always use translators as well (I will answer in English, though, to avoid any extra confusion associated with me not using the language correctly).

---

@asiasiaa

I don’t want to abuse your kindness, but would it be possible to change the colours of the font in your template?

Don’t worry about it, I genuinely appreciate any activity here, and sure, you can customize colors in the template. For the main text color you need to edit this line in the Styling tab when editing the template:

To find the code of a color you’d like the text to have you can use tools such as this one: Color Picker — HTML Color Codes the value that you need is at the top-left next to the word HEX:

All you need is to copy the value (including # symbol) and paste it after the --mem-text variable as shown above.

@asiasiaa

quizlet premium has this option where you can highlight some words

If you want to highlight individual words on specific cards, instead of the template in general, you can simply use Anki editing tools. If you open the card browser and select a card you want to edit all standard text formatting options, including highlighting and coloring the words, will be there:

(this is for the desktop version, there are ways to do this on Android too. They are more tricky, but I can provide instructions for that as well if you are interested)

---

@asiasiaa

I still have a problem with AnkiDroid because after I type wrong answer it doesn’t show ‘your answer’

I’m not exactly sure, what happened there. The answer is supposed to be shown at the top of the info screen:

   

Was it working for you like this before you edited the template? Also, does it happen on all of the other cards as well?

---

@asiasiaa

but only for a moment so short

I know it’s not the main point, but if the short interval bothers you, it can easily be increased.

[asiasiaa]

Once again thank you for your kindness

I would love to know how to change the colours of individual words in AnkiDroid, if you have time please tell me.

My cards never looked like the one you showed How can I update my cards to the newest version of this template? I’m afraid that deleting and downloading again will damage my flashcards.

[Eltaurus]

@asiasiaa

I would love to know how to change the colours of individual words in AnkiDroid, if you have time please tell me.

The way I would do that is to create a dedicated button for this purpose. When editing a card on AnkiDroid, on the very right of the bottom toolbar you should see a + icon:

If you press it the dialog for making a button will show up. In the first field, you’ll need to enter a name the button will have on the toolbar. It should be short, so emojis are good for this purpose (like the on the image above, or for coloring you might want to use something like ). In the second field, you put this piece of code (you can choose the value for color the same way I described in the previous post):

<span style="color: #886ce4">

and in the last field this one:

</span>

After clicking Create the button should appear on the toolbar, and you’ll be able to use it to color any selected part of text (it won’t look like this in the editor – it will display the source code – but during reviews/previews or in the desktop editor you’ll see the words accordingly colored).

Keep in mind, however, that I don’t often use AnkiDroid myself, so a better solution which I’m simply not aware of might exist. You might want to ask about it in the respective forum thread, where people more knowledgeable about this stuff will be able to help you: AnkiDroid (Android) - Anki Forums

---

@asiasiaa

My cards never looked like the one you showed How can I update my cards to the newest version of this template? I’m afraid that deleting and downloading again will damage my flashcards.

Try following these steps: GitHub - Eltaurus-Lt/Anki-Card-Templates: Decks of templates + source code for Anki cards (I’m assuming that you have Anki desktop as well since you were able to modify the template earlier). It is a good idea to create a backup (File → Create Backup) before doing such significant changes to your collection, so that you would always be able to easily revert back in case anything goes wrong.

[noty]

Where is the code that determines what the keyboard language is located?

[Eltaurus]

If you are talking about the on-screen keyboard from today’s update then look for the settings “static_keys” and “random_keys” at the very beginning of the code on the Front of a card.

The former determines the characters that will always be present on the keyboard. The latter is a set that (if present) is used to be mixed with the characters necessary to spell the correct answer (in order to make it less obvious).

I am writing the full post about the update now. I will describe it there in more detail.

[Eltaurus]

Another update is here. Now the template has a functional on-screen keyboard with the hint button, the option to change an input mode from typing-in answer to multiple-choice, as well as some styles for images:

---

1. On-screen keyboard

as requested by

@Windance

So, I was hoping that as in Memrise, I can have the foreign characters below the box for clicking to type, Spanish and Hebrew as in Memrise when typing character is required.

The keyboard is set up at the top of the card’s front. There are two complementary settings, which determine what keys will appear on the screen:

1. Static Keys:
   

   All characters entered here will always appear on each card of this type, the order is fixed:
   

   It can be useful for specifying special characters, such as letters with diacritics, to work as a supplement for a physical keyboard, that doesn’t have some of the needed characters.

2. Random Keys:
   

   Basically, this is an alphabet for the target language (or any reasonable-sized subset of characters the language uses – it is probably a good idea to include only the most often-used characters for languages such as Chinese). If not empty, the keyboard will be filled with all characters necessary to spell the answer + a number of other unique characters selected from this set, the order is randomized:
   

   This option can be used to make cards self-sufficient – every answer will be possible to type using only the on-screen keyboard.

The two options can be used in combination (or left empty, in which case the keyboard will not appear on the screen).

The sets of characters are defined for each Card Type individually because in some cases one might want to have different keyboards for different cards within the same Note Type (such as typing with kanji for translations into Japanese, and with pure kana for word readings).

There are also many little fixes relative to the Memrise keyboard layout...

1. Buttons react when being pressed:
   

2. Better character centering on the keys (baseline instead of middle of the bounding box):
   

3. No aliasing artifacts in the corners of the buttons:
   

_{Unfortunately, there is currently an issue in AnkiDroid which, in some cases, will make
the spelling corrections (shown after a wrong answer is submitted) to be inconsistent with what was typed using the on-screen keyboard. This issue is purely visual and should not affect how cards function and are graded. Hopefully, this will be changed in future AnkiDroid versions. Fixing this behavior within the card code only is also possible, but will take quite a big amount of work for such a minor thing.}

---

2. Hint button

as requested by

@wodwocrow

1. Hint button
2. Limited alphabet from which to choose letters

The button works practically the same as it does on Memrise, except the answer is not automatically accepted right away when it is spelt completely – it only will be submitted after the Hint button is pressed one more time (the card will be autorated Good).

If you want to disable this button, type “off” in the list of its classes:

(or simply delete the whole line to remove it from the keyboard completely, if you are sure you won’t need the button in the future)

_{The placement of the Hint button on the keyboard is intentionally a bit different from the original Memrise layout. Let me know, if you consider this an issue.}

---

3. Multiple-Choice cards

@wodwocrow

4. Option to choose correct answer from four or six possible (similar) answers

For a multiple-choice card to be generated, a field {{Choices}} on the respective note should be populated with alternative answers that will appear as choices in addition to the correct one. This can be done in one of the two ways:

1. Fill in the alternative answers manually, separating them with ‘|’ (spaces can also be added to improve readability, but are not necessary). This way you can target specifically the words that you often confuse with each other, so that this type of card will serve as a memory boost for especially difficult cases.
   

2. Fill the alternatives using the support addon. If you have it installed, an option Fill Choices will appear at the bottom of the context menu when you select and right-click a set of cards:
   
   This will mix the selected cards, putting words from each card as an alternative answer for the other ones. You can do this in small batches, e.g. by Memrise level to keep alternative answers thematically close to each other, or just mix a whole deck (course) in one go, if purely random alternative answers are what you want.

   Additional info

   You can also combine the two methods. For example, generating an initial set of choices automatically and then manually removing all alternatives that are too obvious to be incorrect (since in Anki you can edit cards during the reviews, you can even do the removal on the go each time you see an easily recognizable wrong option. This will naturally increase the difficulty of a card the more you review it).

   I might also be able to add a feature that will add a submitted answer to the choice field each time a wrong answer is typed.

   Fill Choices settings

   The dialog option for Fill Choices contains three options:

   

   1. Source Field – is the field you are setting to be tested on by the card.
   2. Choices Field – is the field where all alternative answers will be stored. Potentially you might want to have several Multiple-Choice cards for one Note that test on different fields. In this case, more {{Choices}} fields should be added to the Note type and their contents filled accordingly.
   3. Action: Append adds newly generated choices to the ones already present in the selected choices field. Overwrite will remove all existing choices and leave only the ones generated with the current settings. If the {{Choices}} field is empty, both options will lead to the same result

This setup has to be done only once, so don’t worry about the addon being unavailable for Android. If the choices are filled and the collection is synced, the Multiple-Choice cards will work on both desktop and phone:

As with the previous version, the Anki package for v3.32 contains two Note Types:

1. Memrise (Lτ) Preset [Translation+Listenting | Typing+MultipleChoice] v3.32 is a ready-to-use option made to produce four cards (one per combination of question and input types) for each Note (provided it has all necessary fields filled, including {{Choices}}, as described above);

2. Memrise (Lτ) Template v3.32 is the most basic version of the template – you can take either this one or the Memrise (Lτ) Preset... Note Type and customize it to your individual preferences, adding or removing Types of Cards and changing their contents. I’ve already described the most common modifications in my previous posts. The main new thing in this version of the template is the customization of an input method (Typing vs Multiple Choice):

   Making a Multiple-Choice Card

   In order to change the input method of a Card Type from Typing to Multiple Choice you need to change three things on the Front of a Card:

   1. Add mch to the list of classes for the following element:
      
      (this is the main toggle that enables Multiple-Choice keyboard)

   2. Add {{#Choices}} and {{/Choices}} to the beginning and the end of the first block respectively:
      
      This tells Anki not to create cards that have no alternative {{Choices}} specified (otherwise such cards would show up with only one button to press, which would be rather pointless).
      
      If you are designing a Note Type with several different Multiple-Choice cards, make sure to use the respective {{Choices}} field in this step, as well as putting the same field into this part of settings:
      

   3. Similarly make sure, that the field the card will test on (the one that contains the correct answer) is indicated in these two places accordingly:
      

   Optionally, you might want to rewrite the card prompt as well
   

   Also don’t forget to remove empty cards after the editing (Tools → Empty Cards…)

More differences with the original Memrise design

4. The pressed button stays pressed instead of jittering back:
   

5. The color scheme is consistent with the overall style (the graying-out effect is removed, the correct and pressed buttons are recolored to match the good and bad answers in typing questions):
   

   

6. Number labels are better centered:
   

7. Multiple-choice questions are ensured to have only unique options, unlike their implementation at Memrise:
   

---

4. Images

The images that are placed into question and extra fields are now properly scaled and styled:

Images in the multiple-choice fields will not work in the current version. If requested, this can probably be implemented in the future.

---

The latest version (3.32) is available, as usual, on the GitHub page:

GitHub - Eltaurus-Lt/Anki-Card-Templates: Decks of templates + source code...

Ankiweb still has an old version. The new one will be uploaded there after I finish updating the documentation.

---

With the growing number of features the template supports it becomes increasingly hard to test single-handedly every configuration and combination of settings/use cases/platforms/etc., so any feedback will be greatly appreciated.

[Eltaurus]

The AnkiWeb version is brought up to date:
https://ankiweb.net/shared/info/510199145

---

If someone already used this to convert community courses from Memrise, I would encourage them to share the created decks via AnkiWeb as well (with the name referencing the original author and indicating that it is converted from Memrise). There is probably a number of widely used community courses that many people will look for, so sharing those will save others a bit of work.

[Makoto]

Fill Choices does not work for me.

[Eltaurus]

Could you please be a little bit more specific?

What is the sequence of actions that you take, and which step leads to what unexpected result?
What Cards are you using it with? Which Note Type from the template deck do you utilize, and did you customize anything in it before generating choices?
Also, what are your Anki version and operating system?

[Makoto]

I’m using this template to create cards, no customizing.

Then I follow the guide on the thread. But the Choices field is still empty.
I’m using v23.12.1 on Windows 10.

[Makoto]

Is this the correct button?

[Eltaurus]

Yes, but you need to select multiple cards before using it.

The choices on each card are generated from the contents of the other cards within the selected group. Self-references are excluded, which is why calling it on a single card is not supposed to do anything.

[Makoto]

That works. Thanks.

[noty]

Hello!
I want the audio animation

What do I need to add for this??

I have this in a card format

front

<div class="card-content front">
    <div class="overhead">
		   <div class="mem-instruction">תרגם את המילה     </div>
		
    </div>
  <div class="mem-field">
			<label>English</label>
			<h2>{{English}}</h2>
		</div>   
   
    </div>
</div>

back

	<button id="mem-flip" style="opacity: 0;">flip</button>

	<div class="card-content back">  
		<div class="mem-alert"></div>   
		<div class="mem-field">
			<label>עברית</label>
			<h2>{{עברית}}</h2>
			<span id="spellcheck"></span>
		</div>   
		<div class="mem-field">
			<label>English</label>
			<h3>{{English}}</h3>
		</div>

		<div class="sep"></div>

		{{#הגייה}}
			<div class="mem-field">
				<label>הגייה</label>
				<h4>{{הגייה}}</h4>      
			</div>
		{{/הגייה}}
		{{#Extra 2}}
			<div class="mem-field">
				<label>Extra 2</label>
				<h4>{{Extra 2}}</h4>
			</div>
		{{/Extra 2}}
		{{#אודיו}}
			<div class="mem-field">
				<label>Audio</label>
				<h4>{{אודיו}}</h4>
			</div>
		{{/אודיו}}
  </div>	
</div>

[Eltaurus]

@noty

What do I need to add for this??

That depends on what version of the template your modification is based on. If it is made from the latest one, then simply adding

<script>
//Audio buttons animation
audioButtons = document.querySelectorAll('.card-content.back a.replay-button');
audioButtons.forEach((a) => {
	a.addEventListener("click", () => {
		audioButtons.forEach((b) => {
			b.classList.remove('active');
		});
    a.classList.add('active');

		a.classList.remove('pulse');
		void a.offsetHeight;
		a.classList.add('pulse');
	});
});
</script>

at the very end of your back code should suffice.

If the original card you were modifying predates the first one with audio animations (v2.something), then you’ll need to update styles as well. If you didn’t change anything there yourself, the easiest way would be simply to replace the whole contents of the “Styling” tab in your Note Type with the new one, which is stored as Template Styling.css here:

Anki-Card-Templates/Source code at main · Eltaurus-Lt/Anki-Card-Templates