Back

<div class="body-upper" style="border-radius: 5px 5px 0px 0px;">
<div class="level">{{Level}}</div>
<div id="audio" style="display:none">{{FrontSound}}</div>
<div class="soundFront" onclick="playAudio()"></div>
{{Front}}
</div>

<div class="body-lower" style="border-radius: 0px 0px 5px 5px;">

<div class="type">{{WordType}}</div><div class="meaning"> {{Meaning}}</div>

<div id="senaudio" style="display:none">{{SentenceSound}}</div>

<div class="sentence">
{{Sentence}} <i class="fas fa-comment-dots" onclick="playSenAudio()"></i>
</div>


{{#Notes}}<div class="notes">
{{Notes}}
</div>{{/Notes}}

</div>



<script src="(replace with your own fontawesome link)" crossorigin="anonymous"></script>

<script>
    function playAudio(){
        var audioDiv = document.getElementById('audio');
        var audio = audioDiv.getElementsByTagName("*");
        audio[0].click();
    }
   function playSenAudio(){
        var audioDiv = document.getElementById('senaudio');
        var audio = audioDiv.getElementsByTagName("*");
        audio[0].click();
    }
</script>