Anki card type templates (Chinese/pinyin/sound -> English) with Google images link and auto-advance

back.html

<div class="chinese">
<div id=character>{{Chinese character}}</div>
{{Back}}
{{tts zh_CN speed=.8 voices=Apple_Tingting:Chinese character}}
</div>
<script>
(() => {
  const chrs = document.querySelector('#character');
  chrs.innerHTML = [...chrs.textContent].map((chr) => {
    const a = document.createElement('a');
    a.textContent = chr;
    // a.href = 'https://www.archchinese.com/chinese_english_dictionary.html?find=' + chr;
    a.href = 'https://dictionary.writtenchinese.com/#sk=' + chr + '&svt=pinyin';
    return a.outerHTML;
  }).join('');
})();
</script>

<hr id=answer>

<div class="english">{{Front}}

<p class="tags">({{Tags}})</p>
</div>
<div id="buttons"></div>
<script>
  if (!document.documentElement.classList.contains('mobile')) {
    let selected = false;
    setTimeout(() => {
      if (!selected) {
        pycmd('ease1'); // again
      }
    }, 5000); // 5000 ms

    const eases = new Map([
      [1, 'again'],
      [2, 'hard'],
      [3, 'good'],
      [4, 'easy']
    ]);

    const buttons = document.querySelector('#buttons');
    [1, 2, 3, 4].forEach((ease) => {
      const button = document.createElement('button');
      button.className = eases.get(ease);
      button.textContent = eases.get(ease);
      button.addEventListener('click', () => {
        selected = true;
        pycmd('ease' + ease);
      });
      buttons.append(button);
    });
  }
</script>

front.html

<div class="chinese">
<div id=character>{{Chinese character}}</div>
{{Back}}

{{tts zh_CN speed=.8 voices=Apple_Tingting:Chinese character}}
<script>
(() => {
  const chrs = document.querySelector('#character');
  chrs.innerHTML = [...chrs.textContent].map((chr) => {
    const a = document.createElement('a');
    a.textContent = chr;
    // a.href = 'https://www.archchinese.com/chinese_english_dictionary.html?find=' + chr;
    a.href = 'https://dictionary.writtenchinese.com/#sk=' + chr + '&svt=pinyin';
    return a.outerHTML;
  }).join('');
})();
</script>
<script>
  function createTimer (delay) {
    setTimeout(() => {
      try {
        // AnkiDroid
        showAnswer();
      } catch {
        pycmd('ans');
      }
    }, delay);
  }
  createTimer(5000); // 5 seconds (5000 ms)
</script>
</div>

styling.css

.card {
    font-family: arial;
    /* font-size: 20px; */
    text-align: center;
    color: black;
    background-color: white;
}
#buttons button {
  color: white;
}
.again {
  background-color: red;  
}
.hard {
  background-color: orange;
}
.good {
  background-color: green;
}
.easy {
  background-color: blue;
}

.english {
  background-color: lightblue;
}
.english, .chinese {
  padding: 40px 40px;
}

.mac .tags {
  font-size: small;
}
.mac body {
  font-size: 32px;
}
.mobile .tags {
  font-size: 40px;
}
.mobile body {
  font-size: 60px;
}