gistfile1.txt

<span class="reading">
  <a href="http://jisho.org/search/{{kanji:Expression}}">
     <span id="expression-content">{{Expression}}</span>
    <span class="hidden" id="reading-content">{{furigana:Reading}}</span>
  </a>
</span>

<script>
 function linkHit (e) { 
      e.preventDefault();
      e.stopPropagation();
      reading.classList.remove('hidden');
      expression.classList.add('hidden');
  }

  var reading    = document.getElementById("reading-content");
  var expression = document.getElementById('expression-content');
  var clicked = false;
  expression.addEventListener('click', function(e){
     if (reading.innerText !== expression.innerText && !clicked) {
       clicked = true;
       linkHit(e);
     }
  });
document.addEventListener('keydown', function(e) {
  if(e.keyCode === 96){
	linkHit(e);
  }
}); 
</script>










.card{
font-family: arial;
text-align: center;
font-size: 50px; 
}

#type-box *{
 display: inline-block;
 text-align: center;
}

tts {display: none;}

body, .night_mode{
 background-color: #202020 !important;

}

.card a{
 background-color: #202020 !important;
 text-decoration: none;
 font-size: 50px;
 color: #FFFFFF;
}

.audio {
 font-family: Arial; 
 font-size: 44px;
 display: inline;
}

.light{
 color: #FAFAFA;
}

.big *{
 font-size: 50px !important;
}

.small{
 font-size: 22px !important;
}
.hint{
  font-size: 22px !important;
 text-decoration: underline !important;
}

div [id^=hint] {
 font-size: 50px !important;
 text-decoration: none!important; 
}

.hidden {
  display: none;
}














<span class="reading">
  <a href="http://jisho.org/search/{{kanji:Expression}}">
    {{furigana:Reading}}
  </a>
</span>


<hr id=answer>

<span  class="reading">
  <a href="http://jisho.org/search/{{kanji:Expression}}">
    {{furigana:Meaning}}
  </a>
</span>
<div class="tts">{{Audio}}</div>