Memrise card template [support thread]

[Eltaurus]

@keiyo

what I’m still missing is the ability to press the hint button with a key combination, or even better, with a single key. How can I do that?

Try adding the following to the frontside posterior scripts (this should make F1 the hint shorcut):

(function(){
  const defaultShortcuts = document.onkeydown;

  document.onkeydown = function(e) {
		var ev = window.event || e;
    if (ev.key === 'F1') {
      e.preventDefault();
      typeHint();
      return false;
    }

    if (typeof defaultShortcuts === 'function') {
      return defaultShortcuts.call(this, e);
    }
  };
})();

---

@keiyo

I would like to reduce the size of all the fields on the back of the card

The size is not a single thing, as it is contributed by multiple parameters, such as font size of a label, font size of field content, distance between the label and the content, size of the gap between different field sections, sizes of audio buttons and images, etc. What exactly would you like to change?

---

@keiyo

And I also need to remove the “Type the correct answer” on the front of the card and raise all the fields on this side a little higher

Add this to the user styles section:

.card-content.front {
	grid-template-rows: 0;
}

[keiyo]

For some reason, it didn’t work, after pressing F1, the Anki manual opens in my browser https://drive.google.com/file/d/1DbRKQaYcCO1GZao7xO-O5XDCAFZa8Grq/view?usp=sharing

[keiyo]

Thank you for your help with the solution of the inscription, after removing it, all the fields immediately automatically rose, which is what I needed, thank you As for my second question, I don’t fully understand what I need to reduce. I’m just a little uncomfortable with the fact that all the information I need doesn’t fit completely on the back (i.e., as I wrote earlier, I need to scroll with the mouse to see everything I’ve indicated). But when looking at your script, it helps me when I remove the following line <div class="card-content back"> in this script

<hr id="answer" class="sys">

<div id="backwrap" class="backside">

{{FrontSide}}

<button id="mem-flip" class="sys">flip</button>

 <div class="card-content back">

<div class="mem-alert"></div>

what action this line performs, because I just noticed that after deleting it, the margins between the fields decreased

[keiyo]

I realized that it would be enough for me to place the Picture field on the right parallel to the Learnable field and not under it, then I would be able to fit all the information. Can you help me with this? I have the following picture in mind:

[Eltaurus]

@keiyo

after pressing F1, the Anki manual opens in my browser

It means that this shortcut is already taken by Anki itself, so you’ll just need to find a different one which is free to use for the Hint function.
Alternatively, if you are using the template support add-on you can try adding F1 to the list of reserved keys in the configs, to unbind its default functionality and make it available for use in card scripts.

---

@keiyo

line <div class="card-content back"> in this script […] what action this line performs, because I just noticed that after deleting it, the margins between the fields decreased

This is a container for the whole backside of a card. This line and everything above fulfill several technical roles required by the scripts, so it’s not a good idea to modify their code. You can freely add, delete, move, or modify any elements inside this container. Or, if you want to remove the empty space above it, you can overwrite its default style by adding

.card-content {
    padding-top: 0;
}

---

As for the backside fields themselves, a couple of styles that can help make them more compact:

.mem-field {
	margin-bottom: 0.5rem;
}

.mem-field label {
	margin-top: 0;
	margin-bottom: 0;
}

---

@keiyo

I realized that it would be enough for me to place the Picture field on the right parallel to the Learnable field and not under it, then I would be able to fit all the information. Can you help me with this?

To add a two-column layout, structure the respective section of your backside code as follows:

<div class="two-column-layout">
  <div>
    <!-- your left column code-->
  </div>
  <div>
    <!-- your right column code-->
  </div>
</div>

then add

.two-column-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

to the styles.

Grid layouts can be fiddly, however, because of how many parameters are involved in defining their behavior, which depends on the content and the size of the window. So this might require quite a bit of further tweaking to get it right for every case.

[keiyo]

THANK YOU so much Everything is working as it should, and the most important thing is that I am satisfied with everything to the maximum, which is very rare in reality (unfortunately) I just want you to know that you gave me the motivation to continue studying the case, with the help of anki. It was something I had been burning for a very long time, but eventually I didn’t have the energy to do it anymore, and I didn’t have the time either, and the anki design made the situation even worse (I just didn’t want to go back to those monotonous cards). But you have given me a second wind, so I am extremely grateful for your help. You are incredible!!! Thank you very much

[keiyo]

Not much time passed before I had another question I slightly modified the Type field visually https://drive.google.com/file/d/19knYFOiAzikTL9eTEsY5b8dBdLFdzkse/view?usp=sharing and accordingly, it changed the design on AnkiDroid https://drive.google.com/file/d/1RcsJ3weil0L7z-H4ONkc30Z3l--rsrXX/view?usp=sharing Is it possible to keep the updated design but revert to the old one for AnkiDroid only?

[Eltaurus]

There are specific classes you can add to your css selectors to limit styles to a certain platform.

[keiyo]

Thank you, everything worked out

[fabmir79]

Hello again,

I wondered if it was possible to get the audio to play automatically on the back page for multiple choice questions.

Kind regards,

Fabrice

[Eltaurus]

If you are referring to multiple-choice questions with no front audio – paste the following code into the “user posterior scripts” section on the back template:

audioButtonsBack = document.querySelectorAll('.card-content.back a.replay-button');
if (audioButtonsBack && audioButtonsBack.length > 0) {
	const randomAudio = audioButtonsBack[Math.floor(Math.random() * audioButtonsBack.length)];
	if (randomAudio.onclick) {
		randomAudio.click();
	} else {
		androidAutoplay(randomAudio);
	}
}

Alternatively, you can try simply enabling Anki autoplay in the deck settings, if it doesn’t cause other issues for you.

[trongan04032002]

Hello, i was amazed at your cards while testing your card and decide to move to Anki for learning vocab.

I want to ask sth:

For the first picture, I would like to ask how I can reduce the size of the content as i feel it doesn’t need to be that big.

For the second picture, could you show me how to fix the typeset issue and how increase the line spacing among the content in question part.

I use Anki desktop for editing the template

Thank you so much.

[Eltaurus]

It’s nice to see someone put the green color theme to use)

@trongan04032002

For the first picture, I would like to ask how I can reduce the size of the content as i feel it doesn’t need to be that big.

You can try lowering the level of the top headers by changing <h2> tags to <h3> and <h3> to <h4>. To adjust the font size for all headers of a certain size, you can add the following rule to the “user styles” section at the end of the styling tab:

.mem-field h4 {
	font-size: 0.75rem;
}

Adjust the header level and the font size accordingly.
There are also other parameters to adjust, such as font size of the labels, and different kinds of margins and line spacing, depending on how you would like the result to look.

@trongan04032002

could you show me how to fix the typeset issue and how increase the line spacing among the content in question part

---

Try adding the following style:

.mem-field :is(h2, h3, h4) {
    hyphens: none;
    overflow-wrap: normal;
}

You can change the values for the properties to get the look that you prefer.

[trongan04032002]

Oh and one more thing

If you type a wrong answer the box will go red and the info screen of the word will appear

How to enable the info screen when i type in a correct answer

[Eltaurus]

@Eltaurus

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.

Put this into “user prior scripts” section on the back side of the template. On desktop, if you are using the support add-on, you can also press Space after answer submission for a one-time display.

[Cobradile]

Hey, is it possible to make the auto grade/flip wait until the card audio finishes? It’s always cutting off and it goes to the next card.

[Eltaurus]

You can look for the options in this post:

Memrise card template [support thread]

To set the custom delay just put the following code into the user scripts section on your cards: flipDelay = 5; where 5 can be replaced by any number, that would define the duration of the delay in seconds. Unfortunately, there is no way to make the delay auto-tunable to fit the variable duration of audio files (because of how audio playback is handled in Anki), but there are some additional options for customizing the playback you might find useful, which are outlined in this post:

[Cobradile]

I added a new field called “Flip Delay” and set it to that + 1. Seems to work, though of course I need to set any phrases longer than 1 second to a value manually.

Thanks anyway!

[Cobradile]

What about not autoflipping whilst audio is being played instead? The flipDelay thing works but I have thousands of notes to go through manually, and I’d rahter not.

[Eltaurus]

As explained in the linked post, audio playback is handled by Anki in the background, so card scripts have no access to the current playback status and can’t flip based on that. You can still make a delay long enough for all cards and flip at the proper moment manually, or disable that Interrupt current audio when answering in global preferences. Also, since your flipDelay is already a dedicated field, if you are open to some scripting, automatically measuring durations of audio for each card should be relatively easy with ffprobe.