{{type:cloze:Text}} area not showing on Anki iOS app

AnkiMobile (iPhone/iPad)
1

Hello, I recently bought the mobile app and I’m trying to sync my desktop cards, however, my Cloze cards are not showing up properly.

Regular cards and regular type-in cards show fine.

I’m attaching some screenshots of my deck.
Config:

IMG-5561
IMG-5561750×1334 73.8 KB

Display:

IMG-5560
IMG-5560750×1334 89.6 KB

I read this topic and this one but neither of those helped.

The ‘never type answer’ option is not enabled on my app.

This is my front template:

<link rel="stylesheet" href="_default.css">
<script src="_highlight.pack.js"></script>
<script src="_highlight_automatic.js"></script>
<pre><code class="{{Language}}">{{type:cloze:Text}}</code></pre>
{{Front Context}}

Back Template:

{{cloze:Text}}<br>

{{type:cloze:Text}}

{{Back Extra}}

Styling:

@import url(_styles_for_syntax_highlighting.css);

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


.cloze {
 font-weight: bold;
 color: teal;

}
.nightMode .cloze {
 color: cyan;
background-color: black;

}

pre {
  text-align: center;
padding: 25px;
background-color: black;
}

Any help would be appreciated!

2

AnkiMobile currently uses a separate typing area for the text input, so it is not possible to customize its position or styling like in the computer version. This may change at some point in the future.

When typing in a cloze answer, you’ll probably also want to add {{cloze:Text}} to your front template, so you can see the context of what you’re supposed to type in. This applies to both the computer version and AnkiMobile.

3

Okay, thanks for the advice. It does help to add that but now it’s double on my computer version.

Is there a way to specify a mobile-only layout?

Also, is there a way to specify mobile-only CSS? because the formatting doesn’t carry over smoothly

4

I suspect you’ve installed some add-on that is altering things, as the standard Anki behaviour would not show the cloze unless you add the line above. While it is possible to use platform-specific styling, removing the add-on should get you consistent results.

https://docs.ankiweb.net/templates/styling.html#platform-specific-css

5

Sorry for the confusion, it’s wasn’t showing the close, only the input box, that was the original problem.

The issue is that when I add that code I now have two cloze sections on the desktop version. Wrapping {{cloze:Text}} in <div class=mobile>{{cloze:Text}}</div> does not solve the issue of it displaying twice on the desktop version of the app.

6

Please start Anki while holding down the shift key to temporarily disable all add-ons, and then view the card again - I suspect you’ll find that the cloze is no longer duplicated.

7

Yes, it’s true that it’s no longer duplicated but I’ve lost the proper cloze functionality. When I submit my answer, it no longer compares it with the actual value, it’s just blank

8

It works for me - I presume you added the missing {{type:cloze:Text}} to the back template after writing your post?

9

Yes, my card looks like this:

<link rel="stylesheet" href="_default.css">
<script src="_highlight.pack.js"></script>
<script src="_highlight_automatic.js"></script>
<pre><code class="{{Language}}">{{type:cloze:Text}}</code></pre>

<!--
<div class=mobile>{{cloze:Text}}</div>
-->

{{Front Context}}

And now it’s not comparing and it’s also not recognising when I push the ‘enter’ key to check the answer

10

You have the cloze:Text commented out. Removing the <!-- and --> should allow it to display on the front side.

11

I ran into the same problem and here was what I did:

  1. I add an additional {{cloze:Text}} to my Front Template, so that I can see the card question while using AnkiMobile
  2. I make a special css class “.mac .hidden” in the card styling to wrap around {{cloze:Text}}, so that it is hidden during my Mac Anki use and avoid duplicate

Here is my typing cloze card’s settings

Front Template:

{{cloze:Text}}
{{type:cloze:Text}}

Back Template:
{{cloze:Text}}

{{Extra}}

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

.cloze {
font-weight: bold;
color: blue;
}
.mac .hidden{
display:none;
}

1 Like