How to view the front of the current card?

Anki Help
1

I’m using Anki desktop on a Mac.

When viewing the back of the card, is there a way to flip it back to view the front again? I often want to do this when memorising a new card, but I can’t find a way to do it.

Apologies if this is a common issue - it seems kind of hard to search for because the answers are always about swapping the front and back of all the cards, which isn’t what I want to do. I just want to view the front of the card I’m currently studying.

1 Like
2

Normally your cards show the frontside and the answer, if you’re displaying the backside of the card.

Or maybe you’re looking for the default behavior of the again button?

3

I don’t know what you mean by “Normally your cards show the frontside and the answer”. After I click “show answer”, I see only the answer and not the front side of the card. All I want to do is switch back to seeing the front, so that I can look at it before looking at the answer again.

“Again” is not what I want. That puts the card back in the deck so that I will see it later, after some other cards. I do not want to see it later, I want to see it now. Look at the answer, then look at the question again, then look at the answer. Not move to a new card.

4

That means you’re using custom templates. You can add {{Frontside}} to the back template (at the top) and you’ll have both, question and answer, once you flip the card to the backside.

Else there’s maybe a javascript solution, though other people here would have to help with that.

Edit: Corrected missing { and }.

2 Likes
5

It’s {{FrontSide}} – with 2 curly braces . Field Replacements - Anki Manual

If you look at some of the default note types, you’ll see that the back template of a card usually starts with –

{{FrontSide}}

<hr id=answer>

Try adding that to the start of your back template.

3 Likes
6

Thank you - changing the card template will work, I’ll do that if there isn’t another way. But then I’ll see the front side of every card, every time I click “show answer”. For the deck I’m using that isn’t super convenient because there’s a picture and a bunch of other stuff on the front that takes up a lot of space, so if there is a way to do what I’m asking then it would still be really useful. Ideally I’d really like to switch between viewing the back and the front, not see both at once.

7

If you follow the template that was suggested to you, it’ll automatically scroll to the answer.

{{FrontSide}}

<hr id=answer>
2 Likes
8

There’s also this: Help with switching to the back of card. Maybe it can be used to switch back to the front as well (obviously with modifications).

2 Likes
9

Perhaps a button which you click to show a pop-up with the front side of the card could work? (Not switching to the front side, a pop-up which contains the content)

Possible solution

If it is possible to create a pop-up (I am not aware of how to do so, somebody else will have to tell), my solution would be using a MutationObserver to detect when the card is switched to the back and then copying the entire “qa” div (from what I’ve seen, switching to the back creates 3 MutationObserver events, the event which has div==“qa” and .removedNodes[0].nodeName == “style” is the one we need) and storing that as a variable to be used in the pop-up which is generated on click.
If somebody can tell how to generate a pop-up, I’d be happy to give you the code you need (just you’ll have to wait for around two weeks for me to become free enough to do this).

2 Likes
10

As a very simple implementation, the following would work:

Back template

{{Back}}

<div id="button_container">
	<button type="button" onclick="show_front()">Show Front</button>
</div>

<div id="front_popup" onclick="hide_front()">
	<div id="front_popup_text">{{FrontSide}}</div>
</div>


<script>
	function show_front() {
		document.getElementById("front_popup").style.display = "block";
	}
	function hide_front() {
		document.getElementById("front_popup").style.display = "none";
	}
</script>

CSS:

.card {
    font-family: arial;
    font-size: 20px;
    text-align: center;
    color: black;
    background-color: white;
}

#front_popup {
	display: none;
	position: fixed;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: white;
}

With this you’d study like so:

  1. View front card (question).
  2. Show back side (answer).
  3. If you want to see the question again, bress the “Show Front” button.
  4. If you want to close this front again, press anywhere on the screen.
1 Like
11

Even simpler:

<details>{{FrontSide}}</details>

I tested hint: but doesn’t work.

4 Likes