Anki template for cloze sentences with normal note type

[Publius]

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!

 

Styling:

.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:

<div class="question"><span class="gloss">{{Vocab-Meaning}}</span>
{{#Part-of-Speech-Detail}} <span class="pos">{{Part-of-Speech-Detail}}</span>{{/Part-of-Speech-Detail}}
{{^Part-of-Speech-Detail}}{{#Part-of-Speech}} <span class="pos">[{{Part-of-Speech}}]</span>{{/Part-of-Speech}}{{/Part-of-Speech-Detail}}
{{#Hint}} <span class="hinto">({{Hint}})</span>{{/Hint}}</div>

<div>{{Sentence-Image}}</div>

<div class="cloze_container"><span class="hidden cloze nofurigana" onclick="this.setAttribute('class', 'cloze nofurigana');">{{furigana:Sentence}}</span></div>
<div class="trans">{{Sentence-Meaning}}<div>

{{#REMOVE THIS LINE TO SHOW WORD STRUCTURE HINT}}
{{#word structure}}<div class="hint">{{hint:word structure}}</div>{{/word structure}}
{{/REMOVE THIS LINE TO SHOW WORD STRUCTURE HINT}}

Back Template:

{{FrontSide}}

<hr>

<div class="vocab_container"><span class="vocab kanji">{{kanji:Vocab}}</span>
{{#Vocab-Reading}} <span class="vocab kana">【{{kana:Vocab}}】</span>{{/Vocab-Reading}}
{{^Vocab-Reading}}{{#Kanjified}} <span class="vocab kanjified">《{{Kanjified}}》</span>{{/Kanjified}}{{/Vocab-Reading}}
{{#Pitch-Accent}} <span class="accent" id="accent">[{{Pitch-Accent}}]<span class="tooltip" id="tooltip">{{kana:Vocab}}</span></span>{{/Pitch-Accent}}
<span class="arrow"> &rArr; </span><span class="gloss">{{Vocab-Meaning}}</span>
{{#Part-of-Speech-Detail}} <span class="pos">{{Part-of-Speech-Detail}}</span>{{/Part-of-Speech-Detail}}
{{^Part-of-Speech-Detail}}{{#Part-of-Speech}} <span class="pos">[{{Part-of-Speech}}]</span>{{/Part-of-Speech}}{{/Part-of-Speech-Detail}}</div>

<div class="footer">───── &nbsp;{{Notes}}&nbsp; ─────</div>
<div class="misc">
{{#Frequency}}Frequency: {{Frequency}}<br>{{/Frequency}}
{{#Heisig-Key}}Heisig: {{Heisig-Key}}<br>{{/Heisig-Key}}
</div>

{{Vocab-Audio}}
{{Sentence-Audio}}

<!-- reset to normal -->
<style>
    .hidden { background-color: inherit; color: inherit; cursor: auto; }
    .cloze b { visibility: visible; }
    .cloze b::after { visibility: hidden; }
    .nofurigana ruby rt { opacity: 1; }
</style>

<!-- picth accent tooltip -->
<script>
    function toMora(kana) {
        var mora = kana.split("");
        for (var i = 0; i < mora.length; i++) {
            if ("ぁぃぅぇぉゃゅょゎァィゥェォャュョヮ".search(mora[i]) > -1) {
                mora[i - 1] += mora[i];
                mora.splice(i--, 1);
            }
        }
        return mora;
    }
    function markAccent(text, pos) {
        var mora = toMora(text);
        var s = (pos == 1) ? "" : "<span>" + mora[0] + "</span>";
        var i = (pos == 1) ? 0 : 1;
        if (isNaN(pos) || pos < 0 || pos > mora.length) {
            return "ʅ（´◔౪◔）ʃ";
        }
        if (pos == 0) {
            for (; i < mora.length; i++) {
                s += "<span class='accent_plain'>" + mora[i] + "</span>";
            }
        } else {
            for (; i < pos - 1; i++) {
                s += "<span class='accent_plain'>" + mora[i] + "</span>";
            }
            s += "<span class='accent_top'>" + mora[i++] + "</span>";
            for (; i < mora.length; i++) {
                s += "<span>" + mora[i] + "</span>";
            }
        }
        return s;
    }
    var accent = document.getElementById("accent");
    var tooltip = document.getElementById("tooltip");
    var i, str = accent.innerHTML.substr(0, accent.innerHTML.search(/<span /));
    var arr = str.replace(/(\[|\]|\(|\))/g, "").split(/\D+/);
    for (i = 0, str = ""; i < arr.length; i++) {
        str += markAccent(tooltip.innerHTML, arr[i]) + "<br />";
    }
    tooltip.innerHTML = str;
    for (i = 0, str = ""; i < arr.length; i++) {
        str += "[" + arr[i] + "]";
    }
    accent.innerHTML = str + accent.innerHTML.substr(accent.innerHTML.search(/<span /));
    tooltip = document.getElementById("tooltip");    /* neccesary */
    tooltip.style.left = (accent.offsetWidth - tooltip.offsetWidth) / 2 + "px";
</script>

 

[Publius]

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

 

[Manuel]

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.