Template for Anki: German nouns - Deutsch Nomen

anki-deutsch-nomen-template.html

<!--
Fields: Übersetzung; Artikel; Nomen; Plural; Beispiel
-->

{{FrontSide}} <!-- {{Übersetzung}} -->

<hr id=answer>

<span class="{{Artikel}}"><b>{{Artikel}}</b> {{Nomen}}</span>

<br /><br />

<span id="pl-block">
  <b>Pl.:</b> <span id="pl-article">die</span> <span id="pl-word">{{Plural}}</span>
</span>

<hr>

<span id="example-block">{{Beispiel}}</span>

<!-- Script -->

<script>
  function color(str) {
    return `<em class="adjusted">${str}</em>`
  }

  function highlight() {
    const pluralEl = document.getElementById("pl-word");
    const pluralArtilcleEl = document.getElementById("pl-article");

    const plural  = "{{Plural}}";
    const nomen = "{{Nomen}}"
    const example = "{{Beispiel}}"

    let adjustedPlural = ""
    for (let i = 0; i < plural.length; i++) {
      const char = plural[i] === nomen[i] 
        ? plural[i] 
        : color(plural[i])

      adjustedPlural = adjustedPlural + char
    }

    if (adjustedPlural != plural) {
      pluralEl.innerHTML = adjustedPlural;
    } else {
      pluralArtilcleEl.innerHTML = '<em class="adjusted">die</em>'
    }

    if (plural === ""){
      document.getElementById("pl-block").style.display = "none";
    }

    if (example !== "") {
      const replacePatter = `${nomen}|${plural}`
      const regexp = new RegExp(`\\b(${replacePatter})\\b`, "g")
      const adjustedExample = example.replace(regexp, color("$&"))

      document.getElementById("example-block").innerHTML = adjustedExample
    }
  }

  highlight()
</script>

<!-- Style -->

<style>
  .card {
    font-family: arial;
    font-size: 20px;
    text-align: left;
    color: black;
    background-color: white;
    background-color: #ff0000;
  }

  .der, .die, .das {
    padding: 5px;
  }

  .der {
    background-color: rgb(27, 122, 223);
  }

  .die {
    background-color: #ff25fc;
  }

  .das {
    background-color: gray;
  }

  .adjusted {
    color: orange;
  }
</style>

Reverse card template

{{FrontSide}} <!-- <span class="{{Artikel}}"><b>{{Artikel}}</b> {{Nomen}}</span> -->

<hr id=answer>

{{Übersetzung}}

<br /><br /><hr>

<span id="pl-block">
  <b>Pl.:</b> <span id="pl-article">die</span> <span id="pl-word">{{Plural}}</span>
</span>

<hr>

<span id="example-block">{{Beispiel}}</span>

<!-- Script -->

<script>
  function color(str) {
    return `<em class="adjusted">${str}</em>`
  }

  function highlight() {
    const pluralEl = document.getElementById("pl-word");
    const pluralArtilcleEl = document.getElementById("pl-article");

    const plural  = "{{Plural}}";
    const nomen = "{{Nomen}}"
    const example = "{{Beispiel}}"

    let adjustedPlural = ""
    for (let i = 0; i < plural.length; i++) {
      const char = plural[i] === nomen[i] 
        ? plural[i] 
        : color(plural[i])

      adjustedPlural = adjustedPlural + char
    }

    if (adjustedPlural != plural) {
      pluralEl.innerHTML = adjustedPlural;
    } else {
      pluralArtilcleEl.innerHTML = '<em class="adjusted">die</em>'
    }

    if (plural === ""){
      document.getElementById("pl-block").style.display = "none";
    }

    if (example !== "") {
      const replacePatter = `${nomen}|${plural}`
      const regexp = new RegExp(`\\b(${replacePatter})\\b`, "g")
      const adjustedExample = example.replace(regexp, color("$&"))

      document.getElementById("example-block").innerHTML = adjustedExample
    }
  }

  highlight()
</script>