Fallback cards

#########Front#######
<div id='flip' data-line='{{Sentence}}'><span>{{Expression}}</span></div>
<div style='font-size: 17px;'>{{Hint}}</div>

<script>
  //handle html that anki may put into the sentence field
  var s = document.getElementById("flip").dataset.line;
  if (s.length > 0) {
    s = s.replace(/<br>|<div>/ig, '\r\n');
    s = s.replace(/<[^<]*>/ig, '');
    document.getElementById("flip").dataset.line = s;

    //https://ankiweb.net/shared/info/1642550423
    document.addEventListener("keyup", e=>{
      if(e.shiftKey) {
       if(document.getElementById("flip").classList.contains("hover"))
         document.getElementById("flip").classList.remove("hover");
       else
         document.getElementById("flip").classList.add("hover");
      }
    });
  }
</script>
#########Front#######

#########Back########
{{FrontSide}}
<div style='font-size: 30px;'>{{Reading}}</div>
<hr id=answer>
<div style='font-size: 25px;'>{{Glossary}}</div>
<div style='font-size: 15px;'><br/></div>
<div style='font-size: 20px;'>{{Picture}}</div>
<div style='font-size: 25px;'>{{Sentence}}</div>
<div style='font-size: 20px;'>{{Pitch}}</div>
<div style='font-size: 20px;'>{{Audio}}</div>
#########Back########

#########Styling#########
.card {
 //whatever you like here
}

#flip[data-line]::after {
  position:absolute;
  font-size: 50%;
  content: "⇵";
}

#flip[data-line=""]::after {
    content: "";
}

#flip[data-line]:hover span, .hover[data-line] span {
  display:none;
}

#flip[data-line=""]:hover span, .hover[data-line=""] span {
  display:block;
}

#flip:hover::before, .hover::before {
  content: attr(data-line);
  white-space: pre;
}
#########Styling#########