AnkiNoteTemplate/templates/Japanese sentences/Recognition/front.html

<!--
mpvacious cards, version 13.0
Sat Nov 27 11:10:04 AM UTC 2021
-->

<div class="wrap">

<header>
    {{#MorphManFocus}}
    <div class="tags">{{MorphManFocus}}</div>
    {{/MorphManFocus}}
    {{#Tags}}
    <div class="tags">{{Tags}}</div>
    {{/Tags}}
</header>

<div class="sent-center">
<div class="jpsentence" lang="ja">
    {{edit:morphHighlight:furigana:SentKanji}}
    {{^SentKanji}}
    <nokana>{{edit:kanji:SentFurigana}}</nokana>
    {{/SentKanji}}
</div>
</div>

</div> <!-- /wrap -->

<div style="display:none;">
    <div id="pitchnum_hidden">{{VocabPitchNum}}</div>
    <div id="kanaword_hidden">{{kana:VocabFurigana}}</div>
</div>

<script>
    /* Paints the question word according to its Pitch Accent number.
     * blue for 平板
     * red for 頭高
     * orange for 中高
     * green for 尾高
     */
    function markPitch() {
        let pitchNumber = document.getElementById("pitchnum_hidden");
        if (pitchNumber === null) {
            return;
        } else {
            pitchNumber = pitchNumber.innerHTML.match(/\d/);
        }
        if (pitchNumber === null) {
            return;
        } else {
            pitchNumber = Number(pitchNumber);
        }

        /* Then decide what color to use and change font color accordingly. */
        if (pitchNumber == 0) {
            // use blue for 平板
            paintTargetWord("#3366CC");
        } else if (pitchNumber == 1) {
            // use red for 頭高
            paintTargetWord("red");
        } else if (pitchNumber > 1) {
            if (odaka(pitchNumber)) {
                // use green for 尾高
                paintTargetWord("green");
            } else {
                // use orange for 中高
                paintTargetWord("#ff6207");
            }
        }
    }

    function paintTargetWord(color) {
        for (sentence of document.getElementsByClassName("jpsentence")) {
            for (word of sentence.getElementsByTagName("b")) {
                word.style.color = color;
            }
        }
    }

    function odaka(pitch_num) {
        // word is odaka if number of moras is equal to pitch accent position
        const vocab_kana = document.getElementById("kanaword_hidden");
        if (vocab_kana === null) {
            return false;
        }
        // small っ is one mora; ゃゅょ are parts of single mora
        const n_moras = vocab_kana.innerHTML.replace(/[ャュョゃゅょ]/g, '').length;
        if (n_moras == pitch_num) {
            return true;
        } else {
            return false;
        }
    }

    /* Splits tags into separate divs */
    function splitTagDiv() {
        const header = document.querySelector("header");
        if (!header) return;
        const split = `{{MorphManFocus}} {{Tags}}`.split(' ');

        header.innerHTML = "";

        for (const tag of split) {
            if (tag.length < 1)
                continue;
            const tag_elem = document.createElement("div");
            tag_elem.className = "tags";
            tag_elem.innerHTML = tag;
            header.appendChild(tag_elem);
        }
    }

    markPitch()
    splitTagDiv()
</script>