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

121 lines
3.4 KiB
HTML

<!--
mpvacious cards, version 14.0
Thu Oct 20 02:37:35 PM UTC 2022
-->
<div class="wrap">
<header>
{{#Focus}}
<div class="tags">{{Focus}}</div>
{{/Focus}}
{{#Tags}}
<div class="tags">{{Tags}}</div>
{{/Tags}}
</header>
<div class="sent-center">
<div class="jpsentence" lang="ja">
{{edit:furigana:SentKanji}}
{{^SentKanji}}
<nokana>{{edit:kanji:SentFurigana}}</nokana>
{{/SentKanji}}
</div>
</div>
{{#Image}}<div class="images on-front">{{Image}}</div>{{/Image}}
</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 (const word of document.querySelectorAll(".jpsentence b, .jpsentence strong")) {
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 = `{{Focus}} {{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.innerText = tag;
header.appendChild(tag_elem);
}
}
function setImageOnFront() {
const tags = `{{Tags}}`.split(" ");
const front_img = document.querySelector("div.images.on-front");
if (front_img && tags.includes("imageonfront")) {
front_img.classList.toggle("on-front");
}
}
markPitch();
splitTagDiv();
setImageOnFront();
</script>