Jump to content
Learn Chinese in China

  • Why you should look around

    Since 2003, Chinese-forums.com has been helping people learn Chinese faster and get to China sooner. Our members can recommend beginner textbooks, help you out with obscure classical vocabulary, and tell you where to get the best street food in Xi'an. And we're friendly about it too. 

    Have a look at what's going on, or search for something specific. We hope you'll join us. 

Anki template for cloze sentences with normal note type

Recommended Posts


I know this is not about Chinese, but it's about Anki, and lots of people use Anki. I just want to share my recent experience experimenting with Anki...


Anki's built-in cloze type has a serious limitation: You can only have one card per note. It's really frustrating.


Then I got some idea from the Japanese Core10k Further Optimized deck. But its styling is supremely ugly. It looks like this:



Some guy on the internet teaches people how to customized that deck.



His card looks definitely better. You click the grey box to reveal the hidden text. But there's still a big black box which is an eyesore in my opinion.


And this is my card:



Still you click the grey box to reveal the hidden text. But now it looks more like what a cloze sentence is expected to look like: 私は絵を__のが好きです。

So you can produce a cloze sentence card using any note type. The only thing you need to do is mark the keyword as bold (like 私は絵を見るのが好きです。). I'll share with you my templates below. The cloze effect is achieved through pure CSS. The javascript part is to manipulate the tooltip text on the back side of the card. It's me having fun with some coding. Nothing to do with cloze or tooltip per se. Cheers!



.card { font-family: Calibri; font-size: 20px; text-align: center; }
/* background image */
/*.card::after {
    content: "";
    background: url("_itsukushima_shrine.jpg");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: ghostwhite;
    opacity: 0.2;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;     

/* general styling */
.sentence, .cloze { font-family: Meiryo, MS Gothic; font-size: 120%; }
.vocab { font-family: Meiryo UI, MS PGothic; font-size: 90%; }
.kanji, .kana, .kanjified { color: blue; }
.accent { color: darkorchid; font-size: 80%; }
.arrow { font-size: smaller; }
.pos { color: brown; font-size: 80%; }
.question { color: blue; font-size: 150%; }
.hinto { color: orange; font-size: 80%; }
.footer { font-size: 55%; margin-top: 2em; margin-bottom: 1em; }
.misc { font-size: 70%; color: green; }

/* special effect */
.sentence b, .cloze b { font-weight: normal; color: blue; }
.nofurigana ruby rt { opacity: 0; }
.hidden { background-color: lavender; color: transparent; cursor: help; }
.cloze b { visibility: hidden; position: relative; display: inline-block; }
.cloze b::after {
    content: "________________________________________";
    width: 100%;
    overflow: hidden;
    visibility: visible;
    position: absolute;
    z-index: -1;
    left: 0%;
    bottom: 0%;    /* top does not work */

/* minor ajustment */
.vocab_container { margin-top: 0.2em; }
img { margin-top: 0.3em; }
.hint { color: red; height: 1em; }    /* used by Anki */

/* pitch accent tooltip */
.accent {    /* parent container */
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    cursor: default;
.accent .tooltip {    /* tooltip text */
    visibility: hidden;
    font-family: MS Gothic, Meiryo;
    background-color: royalblue;
    color: white;
    text-align: center;
    min-width: 50px;
    white-space: nowrap;    /* for Firefox */
    padding: 5px 10px;
    border-radius: 5px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
/*    margin-left: -35px;    /* 1/2 width + left padding; but no good with javascript setting the position */
    opacity: 0;
    transition: opacity 1s;    /* not supported by Anki */
.accent .tooltip::after {    /* downward arrow */
    content: " ";
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: royalblue transparent transparent transparent;
.accent:hover .tooltip {
    visibility: visible;
    opacity: 1;
span.accent_plain {
    border-top: solid 1px yellow;
    padding-top: 0px;
span.accent_top {
    border-top: solid 1px yellow;
    border-right: solid 1px yellow;
    padding-top: 0px;
    margin-right: 1px;
    padding-right: 1px;

Front Template:

 class="question"> class="gloss">{{Vocab-Meaning}}
{{#Part-of-Speech-Detail}}  class="pos">{{Part-of-Speech-Detail}}{{/Part-of-Speech-Detail}}
{{^Part-of-Speech-Detail}}{{#Part-of-Speech}}  class="pos">[{{Part-of-Speech}}]{{/Part-of-Speech}}{{/Part-of-Speech-Detail}}
{{#Hint}}  class="hinto">({{Hint}}){{/Hint}}
class="cloze_container"> class="hidden cloze nofurigana" onclick="this.setAttribute('class', 'cloze nofurigana');">{{furigana:Sentence}}
{{#REMOVE THIS LINE TO SHOW WORD STRUCTURE HINT}} {{#word structure}} class="hint">{{hint:word structure}}

Back Template:


class="vocab_container"> class="vocab kanji">{{kanji:Vocab}} {{#Vocab-Reading}} class="vocab kana">【{{kana:Vocab}}】{{/Vocab-Reading}} {{^Vocab-Reading}}{{#Kanjified}} class="vocab kanjified">《{{Kanjified}}》{{/Kanjified}}{{/Vocab-Reading}} {{#Pitch-Accent}} class="accent" id="accent">[{{Pitch-Accent}}] class="tooltip" id="tooltip">{{kana:Vocab}}{{/Pitch-Accent}} class="arrow"> class="gloss">{{Vocab-Meaning}} {{#Part-of-Speech-Detail}} class="pos">{{Part-of-Speech-Detail}}{{/Part-of-Speech-Detail}} {{^Part-of-Speech-Detail}}{{#Part-of-Speech}} class="pos">[{{Part-of-Speech}}]{{/Part-of-Speech}}{{/Part-of-Speech-Detail}}
class="footer">─────  {{Notes}}  ─────
class="misc"> {{#Frequency}}Frequency: {{Frequency}}
{{/Frequency}} {{#Heisig-Key}}Heisig: {{Heisig-Key}}
{{Vocab-Audio}} {{Sentence-Audio}}


  • Like 1

Share this post

Link to post
Share on other sites
Site Sponsors:
Pleco for iPhone / Android iPhone & Android Chinese dictionary: camera & hand- writing input, flashcards, audio.
Study Chinese in Kunming 1-1 classes, qualified teachers and unique teaching methods in the Spring City.
Learn Chinese Characters Learn 2289 Chinese Characters in 90 Days with a Unique Flash Card System.
Hacking Chinese Tips and strategies for how to learn Chinese more efficiently
Popup Chinese Translator Understand Chinese inside any Windows application, website or PDF.
Chinese Grammar Wiki All Chinese grammar, organised by level, all in one place.


And... this is the most stripped-down version. Very simple. See for yourself.




Share this post

Link to post
Share on other sites

I know close to nothing about css but that looks pretty interesting.


Cloze type notes can have more than one card automatically generated per note, depending on the number of cloze placeholders present. I have not looked into your solution carefully yet I'm guessing it only supports one cloze per note (ie no automatic cloze card generation). Since you already have this working, would you be happy to share a deck containing a few notes to demonstrate your idea?


ATM I'm just using extra fields where I paste the original Chinese text with some characters replaced with underscores. In the answer I simply show the original complete Chinese sentence. I have 9 such fields for up to nine cloze cards per note, which seems adecuate as I've never used more than seven. Sure, it's an inelegant solution but it works well. I'm wondering if your solution could replace this.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and select your username and password later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Click here to reply. Select text to quote.

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Create New...