first you listen, then you type, then you read

// Back Template

{{FrontSide}}
<hr id=answer>
{{Vocabulary-Audio}}
{{Sentence-Audio}}
<span style="font-size: 30px;">{{edit:Vocabulary-English}}</span>
<br>
<span style="font-size: 35px;" class="gothic">{{edit:Vocabulary-Kana}}</span>
<br>
<input type="text" id=enterfurigana class="gothic"　autofocus>
<br>
<span style="font-size: 14px;" class="gothic">{{Vocabulary-Pos}}</span>
<br>
<!--<span style="font-size: 40px;" class="hide" class="gothic">{{edit:furigana:Reading}}-->
<span style="font-size: 40px;" class="gothic hide expression">{{edit:furigana:Expression}}
</span>
<div class="hide english">
   <br>
   <span style="font-size: 25px; ">{{Sentence-English}}</span>
   <div style="display: none">
      <br>

      <br>
   </div>
</div>

<script type="text/javascript">
// this is giga meh
var createIframe = (type) => {
		const iframe = document.createElement('iframe');
		const selection = window.getSelection().toString();
		if (selection) type = "0";
		iframe.src = `https://jotoba.de/search/${selection ? selection : "{{edit:Vocabulary-Kanji}}"}?t=${type ? type : "1"}`;
		iframe.width = "100%";
		iframe.style.border = "none";
		iframe.style.height = "55vh";
		return iframe;
}
(() => {
document.querySelector("#enterfurigana").focus();
if (document.querySelector("body").classList.contains('customBackScriptHasRun')) return;
const controlPressed = (event) => {
		const el = document.querySelector("#enterfurigana");
		/*
		if (document.activeElement === el) {
				// el.disabled = true;
				el.blur();
				// window.focus();
				return;
		}
		*/
		// el.disabled = false;
		el.focus();
}

const shiftPressed = (event) => {
		const expression = document.querySelector(".expression");
		const english = document.querySelector(".english");
		if (!expression) return;
		if (event.type === 'keydown') {
				if (english && event.altKey && event.shiftKey) {
						english.classList.remove('hide');
				} else {
						expression.classList.remove('hide');
				}
		}
		if (event.type === 'keyup') {
				expression.classList.add('hide');
				if (english) english.classList.add('hide');
		}
}

const dontPropagate = (event) => {
		event.preventDefault();
		event.stopPropagation();
		event.stopImmediatePropagation();
}

const changeColor = (event) => {
		if (!(event.srcElement && event.srcElement.value)) return;
		const expression = document.querySelector(".expression");
		if (!expression) return;
		if (expression.textContent.replace(/\n/, '').trim() === event.srcElement.value.trim()) {
				event.srcElement.style.backgroundColor = '#aaffaa1a';
		} else {
				event.srcElement.style.backgroundColor = '';
		}
}

const spawnIframe = (type) => {
		const iframe = createIframe(type);
		const prev = document.querySelector("iframe");
		if (prev) {
				return prev.src = iframe.src;
		};
		document.body.appendChild(iframe);
}

const destroyIframe = () => {
		const iframe = document.querySelector("iframe");
		iframe && iframe.remove();
}

document.addEventListener('input', changeColor);
document.addEventListener('change', changeColor);
document.addEventListener('compositionstart', changeColor);
document.addEventListener('compositionupdate', changeColor);
document.addEventListener('compositionend', changeColor);

document.addEventListener('keydown', (event) => {
		// console.log(event);
		changeColor(event);
		switch(event.key) {
				case('Control'):
						controlPressed(event);
						// dontPropagate(event);
						break;
				case('Shift'):
						shiftPressed(event);
						dontPropagate(event);
						break;
				case('Alt'):
						shiftPressed(event);
						dontPropagate(event);
						break;
				case('F2'):
						destroyIframe();
						pycmd('ease1');
						dontPropagate(event);
						break;
				case('F3'):
						destroyIframe();
						pycmd("ease3");
						dontPropagate(event);
						break;
				case('F4'):
						pycmd('play:a:0');
						dontPropagate(event);
						break;
				case('F6'):
						pycmd('play:a:1');
						dontPropagate(event);
						break;
				case('F7'):
						spawnIframe('1');
						dontPropagate(event);
						break;
		}
});

document.addEventListener('keyup', (event) => {
		switch(event.key) {
				case('Shift'):
						shiftPressed(event);
						dontPropagate(event);
						break;
		}
});

setTimeout(() => {
		document.querySelector("body").classList.add('customBackScriptHasRun');
});
})()
</script>

// Styling

.card,
input {
 font-family: arial;
 font-size: 25px;
 text-align: center;
 // color: White;
 // background-color: Black;
}

.card .gothic,
.gothic,
input {
	font-family: IPAexGothic !important;
}

input#typeans {
　 font-family: IPAexGothic !important;
  font-size: 50px !important;
  height: 65px;
  width: 25%;
}

#typeans {
	font-family: IPAexGothic !important;
  font-size: 18px;
}

#enterfurigana {
	width: 60% !important;
	font-size: 40px !important;
  height: 50px !important;
}


.hide {
	opacity: 0;
}

/*
.hide:hover {
	opacity: 1;
}
*/