Memrise card template [support thread]

The template was updated to Version 4.2 on both GitHub and Ankiweb a while back, so here is the post detailing all the improvements from the previous versions of the template. This one is rather a big update (probably bigger than all the other updates posted here before combined), so, hopefully, it meets the expectations for all the requests it is intended to fulfill and is worth the long wait.


1) The single most significant change is the transition to a completely new system for typing and handling answers. This should keep all the existing things working exactly as before while removing several crucial limitations of the previous versions adding:

  • Full Anki Mobile (iOS) support
    All the features, such as multiple-choice questions, Memrise on-screen keyboard, spelling diffs, the hing button, etc. will now be functioning on iPhones and iPads (huge thanks to rean and amaccuish for all the assistance with testing and suggestions):

         

    Several minor differences with other platforms still remain, but none of them should limit the use of the template:

    Details
    1. Card flipping and answer auto-grading are unavailable on iOS, and, sadly, will likely remain that way unless the Anki Mobile app itself incorporates the necessary functionality. This doesn’t mean, however, that using the cards will require any extra decision-making with regards to the Anki grading buttons: the answer coloring is fully functioning, so one will simply have to make a habit of pressing the “Good” button whenever the typed answer shown in green, and “Again” otherwise. Similarly, the multiple-choice cards will have to be manually flipped after an answer is selected.
    2. The icons on the audio buttons look different, and the Hint button icon is omitted by default. This is due to the iOS web browser being behind all the other ones in supporting the respective dependency. It might catch up in the future, in which case all the cards made with the current template will automatically start to look as intended. In the meantime, if you want to display the icon for the hint button, you will need to replace manually the <path> on the front of the card
      image
      with the following code:
          <path d="M6.113 4.508c-.324-.892-.606-1.643-1.648-2.014.865-.54 1.18-1.296 1.448-1.937.083-.2.162-.39.252-.557.064.147.125.31.188.479.26.698.563 1.51 1.333 1.775-.863.658-1.24 1.315-1.573 2.254Zm2.37 2.702c.492.478 1.005.936 1.537 1.37.694-.851 2.16-2.522 2.16-2.522s-1.08-.948-1.676-1.34c-.216.171-2.129 2.387-2.021 2.492Zm2.1-3.379c.643.22 1.187.638 1.688 1.105.209.194.41.397.609.598.35.353.04.95-.23 1.322-.367.505-5.307 6.553-7.8 9.606l-1.144 1.4c-.198.243-.47.127-.715-.058l-1.618-1.225a1.407 1.407 0 0 0-.21-.13c-.102-.055-.168-.09-.275-.274-.165-.283-.204-.624.006-.868.22-.257 1.05-1.326 2.128-2.717 2.645-3.41 6.79-8.754 7.154-8.817a.835.835 0 0 1 .407.058ZM4.636 4.868c-.063.118-.116.26-.17.408-.128.343-.267.717-.576.893.442.312.63.734.8 1.212.112-.525.347-1.041.77-1.276-.378-.137-.53-.526-.667-.877-.051-.13-.1-.254-.157-.36Zm-2.1-.478c-.055.148-.108.29-.171.408-.057-.105-.106-.23-.157-.36-.137-.351-.29-.74-.667-.877.423-.234.658-.751.769-1.276.17.478.359.9.8 1.212-.308.176-.447.55-.574.893Z">
      
      I can also provide anyone interested with similar instructions to replace the audio icon.
    3. The layout on the backside of the cards is a bit different, centering all of the sections instead of aligning them to the left. This, probably, can be fixed, but will require someone with the Anki Mobile app to volunteer and perform the testing for potential solutions.
  • Images in multiple-choice questions
    The multiple-choice cards now work with practically any type of answers (save for audio) supporting formatted HTML (bold, italic, and colored text, lists, etc.), LaTeX (more on this below), and all image formats recognized by Anki (including animated gifs):

    Image and other kinds of choices can be filled in the exact same way as the plain text ones using the support addon. All the kinds can even be mixed with each other freely. In order to make several multiple-choice card types (e.g. one for image fields and one for text), one has to make several {{Choice}} fields and fill them accordingly, as described in this post.

    In regard to the images in general, the style for the “Your answer” section on the back of the card is also adjusted to account for image answers, and the style of images in the question sections is reworked to follow the Memrise design exactly.

  • Spelling diffs on Android now work independently of the input device
    image
    This means another limitation (mentioned in the fine print of the on-screen keyboard section in this post and also reported by @mthierst here) is no longer relevant.
    :triangular_flag_on_post: Please note :triangular_flag_on_post: , that with the new system, the “Type answer into the card” setting is now mandatory on AnkiDroid (otherwise Android keyboard won’t appear for typing):

    how to enable

    Although the new scripts are rewritten in a way that preserves backward compatibility, so if anyone finds a value in the old way of typing on Android, I can provide some instructions for reverting to it


2) Dark mode and alternative themes

I’ve noticed from the screenshots (posted by @khong and @HQYang in this thread as well as several other people in GitHub issues) the template doesn’t look very good when Anki is switched to the dark mode. Since Memrise itself does not have a dark color scheme, I’ve decided to make one myself and incorporate it into the template:

For comparison, the look of the template in dark mode before the dedicated theme

Since this style is completely original, feedback on the change would be especially welcome. This update required a major refactor of the template’s CSS, but in the end allowed making more variations very simple. For example, here is an Anki theme for the template in the light mode:

It can be activated by typing its name in the “theme” attribute on the front of a card:

image

In addition to that, a default color scheme (for the case of this attribute being left empty) and two other ones (named “Forest” and “Sunset”) are included in the template styles. Each with proper light and dark modes:


These themes can be useful for color-coding cards with different translation directions/question types or for different courses/languages/etc. It is now possible to adjust any of the existing ones or make a completely new theme with minimal effort (refer to this post for the details).

On that note, is there anyone interested in a theme replicating the Classic Memrise look (circa 2014)?


3) Alternative answers

Alts can now be put inside any of the template fields (as requested by the Chrome extension users and also mentioned by amaxwell311 here). These alts function the same way as on Memrise – hidden when a field is used as a question, shown on the back of a card with smaller and fainter font, and properly processed when a submitted answer is being rated:


To add an alt to a field

In Anki editor open HTML code of the field by pressing the image icon in the top right corner, then after the main content type

<div part="alt">

and

</div>

putting the alts inside:

If several alts are needed, they can be separated by | symbol (as in the image above) or put into separate <div part="alt"> tags. The proper styles for the alts in the editor as well as a button for automating this action will be added in the upcoming version of the support addon. The <div part="alt"> can also be put on a card template itself (in particular, inside <data id="correctAnswer"> for the answer checked by the template) and used to combine several different fields for each to be accepted as a valid alternative.

In the current version, only plain text (and LaTeX) works properly with the <div part="alt"> (is there a need for other types of answers?), but it can be used with multiple-choice mode to make cards with several possible answers:


4) LaTeX (MathJax) support
Per request from @Zelkii the support for LaTeX expressions (entered as MathJax) has been added, and should work on all platforms:

Because LaTeX syntax does not play well with the default Memrise answer evaluation rules (it requires case-sensitivity, interprets commas and semi-colons differently, ignores spaces in certain places, etc.), this is implemented as a separate answer evaluation mode, which should be explicitly activated if a math card is manually created from a basic template. This is done by adding “eq” to the list of the card classes on the front of a card (the same way the multiple-choice cards are made):
image
(there is no need to add this class if a LaTeX expression is used as anything other than the answer of a card)

The LaTeX mode is not only compatible with multiple-choice questions but works well with type-in cards as well. It accordingly highlights mistakes in the LaTeX syntax of a typed expression (providing a display of a rendered typed expression to visualize differences), automatically adds enclosing \( and \) when needed, and accounts for multiple ways of typing the same equation (e.g. “x^2_3” and “x_3^2” are treated as identical expressions):

  


5) Number keys in multiple-choice cards

If you are using the support addon, since the last update number keys (from 1 to 0) can be used to select an answer in multiple-choice cards (as intended). This will work even with older versions of the template, as long as the addon itself is updated.

:triangular_flag_on_post: Important :triangular_flag_on_post: : in order to make these keys available for the template the addon removes them from the list of default Anki shortcuts. So number keys will no longer work for rating cards “Again”/“Good”/… on other templates without additional adjustments described below (already included in the Memrise template and are not needed if you do not use anything else)

Required adjustments
  1. Go to ToolsManage Note Types → Select a Note Type you need to modify → Click Cards (or simply click Cards in Anki browser when any of the cards belonging to the Note Type is selected)

  2. Switch to Back Template and search for “document.onkeydown” to check if your template already uses any keyboard shortcuts (most of the templates do not, in particular, none of the Anki basic templates do). Also, if there is “{{FrontSide}}” on the Back Template tab, the front side should be checked as well.

  3. If the “document.onkeydown” is not present on the card, simply add

    <script>
    document.onkeydown = function (e) {
    	var ev = window.event || e;
    	if ("1234".includes(ev.key)) {
    		try {
    			pycmd('ease' + ev.key);
    		} catch(err) {}
    	}
    }
    </script>
    

    to the very end of the Back Template code.

    However, if the “document.onkeydown” is somewhere on the card, you will have to merge the two, copying the inner part of the code above into the function already included in your template and renaming “ev” to match the variable in that function (ask me for instructions if unsure).

  4. Repeat the steps 2-3 for each Card Type in your Note (switched at the very top of the window) and click Save


    You might want to also restore the functionality for “Enter” and “Space” to flip the cards and rate them “Good”. In that case, the code for the front side is

    <script>
    document.onkeydown = function (e) {
    	var ev = window.event || e;
    	if (ev.key === 'Enter' || (ev.code === 'Space' && document.activeElement.tagName.toLowerCase() !== 'input')) {
    		try {
    			pycmd("ans");
    		} catch(err) {}
    	}
    }
    </script>
    

    and the full code for the back is

    <script>
    document.onkeydown = function (e) {
    	var ev = window.event || e;
    	if (ev.key === 'Enter' || ev.code === 'Space') {
    		try {
    			pycmd('ease3');
    		} catch(err) {}
    	}
    	if ("1234".includes(ev.key)) {
    		try {
    			pycmd('ease' + ev.key);
    		} catch(err) {}
    	}
    }
    </script>
    

If you do not wish to modify other templates this feature can simply be turned off, by going to the add-on configs (ToolsAdd-onsMemrise Cards (Lτ)Config) and removing all relevant keys from the “reserved keys” list.


6) Several improvements that facilitate scripts and styles customization

  • There are now dedicated sections for user scripts on the front and back cards, as well as in the styling tab. This should make transferring personal modifications when updating the template’s version easier (it is planned to add the functionality making such transfer fully automatic to the support addon in the future)

  • In addition to the “.large” and “.off” classes mentioned in the thread before, several other classes for common customizations were added. The full list now consists of “.large”, “.blob”, “.off”, “.desk-off”, “.mobile-off”, and “.no-alts”. Details and usage examples for each one will be provided in the upcoming customization post.

  • Similarly, the template now checks several special JS variables. They are intended to be put inside the “user script” sections mentioned above, and made to control certain aspects of the scripts without digging deep into the code:

    • alwaysShowInfo is a variable that allows displaying the info screen (back of the card) even when a correct answer is submitted (instead of automatically transitioning to the next card) simply by adding

      alwaysShowInfo = true;
      

      to a card. It is intended to accommodate needs similar to the requests made by @Luze94, @Hosoy99, @mthierst, @koracito, and @asiasiaa asking for various ways of viewing extra fields on passed cards. In contrast to the original Memrise style, the info screen with the correct answer displays it in green (as a reminder that it will be autorated “Good” on the next press of “Enter”). This is a default behavior on iOS (since, as mentioned above, automatic grading does not work there anyway).
      In addition to that, opening the info screen after correct answers can be done on a card-to-card basis simply by pressing “Space” instead of “Enter” – this way no changes to the code are needed, and the cards can still be immediately flipped to the next by pressing “Enter”.

    • flipDelay is the variable to adjust the delay before a card is auto flipped to the next one or the info screen (depending on the submitted answer and the card settings). Instead of the instructions I provided before in responses to @asiasiaa, @mthierst, and @butter_muffin, in the new version of the template this adjustments is done simply by putting

      flipDelay = 5;
      

      into the “User Scripts” section (the number 5 corresponds to the desired delay in seconds and can be adjusted accordingly).

    • other variables cover adjustments such as changing the number of keys on the card’s on-screen keyboard (randomKeysN), the maximum number of options in a multiple-choice card (mchOptionsN), and the number of columns in multiple-choice cards (details and usage examples for each variable will be provided in the upcoming customization post)


7) ALL known bugs have been fixed
This includes:

1 Like