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

<!--
Simple Word Cards, version 5.0
Thu Feb  4 01:06:07 AM UTC 2021
-->
<div class="wrap">
    {{#Tags}}
        <header>
            <div class="tags">{{Tags}}</div>
        </header>
    {{/Tags}}
    <div class="japanese" id="question">
        {{edit:furigana:VocabKanji}}
    </div>
</div>

<script>
    function applyQuizFont() {
        const tags = `{{Tags}}`;
        const questionword = document.getElementById("question");
        // Add this tag if you notice that letters don't render properly
        if (tags.includes("DisableGyousyo")) {
            // nuke ID to remove specified font styling.
            questionword.removeAttribute("id");
        }
    }

    function highlightNames() {
        const tags_elems = document.getElementsByClassName("tags");
        for (const tag_elem of tags_elems) {
            if (tag_elem.innerHTML.includes("キャラ") || tag_elem.innerHTML.includes("有名人")) {
                tag_elem.style.backgroundColor = "brown";
            }
        }
    }

    function splitTagDiv() {
        const header = document.getElementsByTagName("header")[0];
        if (!header) return;
        const tags = `{{Tags}}`.split(" ");
        header.innerHTML = "";
        for (const tag of tags) {
            const tag_elem = document.createElement("div");
            tag_elem.className = "tags";
            tag_elem.innerHTML = tag;
            header.appendChild(tag_elem);
        }
    }


    splitTagDiv()
    highlightNames()
    applyQuizFont()
</script>

<script>
    // Hides DisableGyousyo from tags.

  document.addEventListener('DOMContentLoaded', tagActions(), false);

  function hidedisablegyousyo() {
    const tags_elems = document.getElementsByClassName("tags");
    for (const tag_elem of tags_elems) {
      if (tag_elem.innerHTML.includes("DisableGyousyo")) {
        tag_elem.style.display = "none";
      }
    }
  }

  function tagActions() {  
    hidedisablegyousyo()
  }
</script>