#typing-japanese.md

🎎 Typing Japanese Practice

This app allows you to practice typing the romanized Japanese in 3 different sets: A-NA, HA-WA, and Digraphs.

Next features

• Katakana sets
• Stores times and "completion" ratings (bronze, silver, gold)
• Writing Homework Random Generation
• Vocabulary writing

typing-japanese.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container text-center mt-3">
  <div id=sets></div>

  <div id=contents></div>

  <p id=o style="font-size: 50px;"></p>

  <div class="w-50 mx-auto">
    <input type=text id=input class="form-control text-center" onkeyup=enterVal(event) style=display:none>
  </div>

  <input id=enableSpeak type="checkbox" checked="checked" onchange=setEnableSpeak(this.checked) /> Enable Speak

  <div id=msg></div>

  <div id=log></div>
</div>

<script>
const shuffle = arr => arr.map(val => ({ val, sort: Math.random() }))
  .sort((a, b) => a.sort - b.sort)
  .map(({val}) => val)
;

const message = (str, color) => msg.innerHTML = `<span class="text-${color}">${str}</span>`;
let enableSpeak = true;
let currVal = null;
let currSet = null;
const setEnableSpeak = isEnabled => enableSpeak =isEnabled;

const hiragana = "あ,a,い,i,う,u,え,e,お,o,か,ka,き,ki,く,ku,け,ke,こ,ko,さ,sa,し,shi,す,su,せ,se,そ,so,た,ta,ち,chi,つ,tsu|tu,て,te,と,to,な,na,に,ni,ぬ,nu,ね,ne,の,no,は,ha,ひ,hi,ふ,hu|fu,へ,he,ほ,ho,ま,ma,み,mi,む,mu,め,me,も,mo,や,ya,ゆ,yu,よ,yo,ら,ra,り,ri,る,ru,れ,re,ろ,ro,わ,wa,を,wo,ん,n,が,ga,ぎ,gi,ぐ,gu,げ,ge,ご,go,ざ,za,じ,ji,ず,zu,ぜ,ze,ぞ,zo,だ,da,ぢ,ji,づ,zu|du,で,de,ど,do,ば,ba,び,bi,ぶ,bu,べ,be,ぼ,bo,ぱ,pa,ぴ,pi,ぷ,pu,ぺ,pe,ぽ,po,きゃ,kya,きゅ,kyu,きょ,kyo,しゃ,sha,しゅ,shu,しょ,sho,ちゃ,cha,ちゅ,chu,ちょ,cho,にゃ,nya,にゅ,nyu,にょ,nyo,ひゃ,hya,ひゅ,hyu,ひょ,hyo,みゃ,mya,みゅ,myu,みょ,myo,りゃ,rya,りゅ,ryu,りょ,ryo,ぎゃ,gya,ぎゅ,gyu,ぎょ,gyo,じゃ,ja,じゅ,ju,じょ,jo,びゃ,bya,びゅ,byu,びょ,byo,ぴゃ,pya,ぴゅ,pyu,ぴょ,pyo".split`,`;
const hiraganaList = hiragana.reduce((prev, curr, i) => {
  if (i % 2) prev.push({ja: hiragana[i-1], ro: curr});
  return prev;
}, []);
const hiraganaSets = {
  "A-NA": hiraganaList.filter(({ro}) => "aiueokstn".includes(ro[0]) && ro[1] !== "y"
    && !["sha", "shu", "sho"].includes(ro)),
  "HA-WA": hiraganaList.filter(({ro}) => "hmyrw".includes(ro[0]) && ro[1] !== "y" || ro === "n"),
  //"Non-Digraphs": hiraganaList.filter(({ro}) => ro[1] !== "y"),
  "Digraphs": hiraganaList.filter(({ro}) => ro[1] === "y"),
};
const startSet = setName => {
  input.value = log.innerHTML = "";
  message("");
  contents.innerHTML = hiraganaSets[setName].map(({ro}) => ro).join(", ");
  currSet = shuffle(hiraganaSets[setName]);
  input.style.display = "";
  currVal = currSet.pop();
  showProblem();
};
//------------------
/*
Sources:
* https://manu.ninja/using-the-speech-synthesis-interface-of-the-web-speech-api/
* https://css-tricks.com/using-the-web-speech-api-for-multilingual-translations/
* https://www.zeolearn.com/magazine/the-new-speech-synthesis-web-api
*/
let syn = speechSynthesis, voice, attempts = 0;
const initJpVoice = () => {
  attempts++;
  voice = syn.getVoices().find(_voice => /ja[-_]JP/.test(_voice.lang));
  if (!voice) {
    if (attempts < 10) setTimeout(() => initJpVoice(), 250);
    else alert('`ja-JP` voice not found.');
  }
};
initJpVoice();
const speak = s => {
  if (!voice || !syn || syn.speaking) return;
  const utter = new SpeechSynthesisUtterance(s);
  utter.voice = voice;
  syn.speak(utter);
};
//------------------
const render = () => sets.innerHTML = (Object.keys(hiraganaSets).map(s => `<button class="btn btn-info mx-1" onclick="startSet('${s}'); return false;">${s}</button>`).join``);

const enterVal = e => {
  const { value } = e.target;
  if (currVal.ro.split`|`.includes(value)) {
    if (currSet.length === 0) {
      message("Done!", "success");
      input.style.display = "none";
      o.innerHTML = "";
      return;
    }
    currVal = currSet.pop();
    message("Correct!", "success");
    input.disabled = true;
    showProblem();
    setTimeout(() => {
      input.disabled = false;
      input.value = "";
      input.focus();
      log.innerHTML += `${log.innerHTML ? ", " : ""}<span>${value}</span>`;
    }, 1000)
  }
};

const showProblem = () => {
  render();
  if (!currSet) return;
  if (!currVal) currVal = currSet.pop();
  if (enableSpeak) speak(currVal.ja);
  o.innerHTML = currVal.ja;
};
showProblem();
</script>