Keinsleif/flashcard.html

## flashcard.html
<!DOCTYPE html>
<html>
<head>
<title>FlashCard</title>
<style>
body {
	font-familiy: "Century Schoolbook",Times;
	text-align: center;
}
</style>
</head>
<body>
<input type="file" id="sfile">
<button id="reset" onClick="location.reload()" disabled>リセット</button>
<button id="switch">用語</button>
<br>
<pre id="status" style="font-size: large"> </pre>
<pre id="que" style="font-size: xx-large"> </pre>
<input type="text" id="ans" style="font-size: x-large" autofocus/><br>
<br>
<button id="submit" style="font-size: large">回答</button><br>
<br>
<input type="text" id="correct" style="font-size: x-large; border: none;background: #FFF;" disabled>
</body>
<script>
window.onload = async function(){
var answer = new Event("answer",{ bubbles:false, cancelable:false });
const eventPromisify = (eventTarget, eventName) => {
  return new Promise((resolve, reject) => {
    eventTarget.addEventListener(eventName, (...args) => resolve(...args));
  });
};
var sfile = document.getElementById("sfile")
var ans = document.getElementById("ans")
var que = document.getElementById("que")
var status = document.getElementById("status")
var correct = document.getElementById("correct")
var mode = document.getElementById("switch")
mode.addEventListener("click",function(e){if(e.target.innerText=="定義"){e.target.innerText="用語"}else{e.target.innerText="定義"}ans.focus()})
document.getElementById("submit").addEventListener("click",() => {ans.dispatchEvent(answer)});
ans.addEventListener("keydown",(e) => {if(e.code=="Enter"&& !e.isComposing){ans.dispatchEvent(answer)}})
status.reset = ()=>{status.innerText=" "}
ef=await eventPromisify(sfile,"change");
document.getElementById("reset").disabled=false;
sfile.disabled=true;
var file = ef.target.files;
var reader = new FileReader();
reader.readAsText(file[0])
await eventPromisify(reader,"load")

ans.focus()
cards=reader.result.split(/\r\n|\n/)
for (var i=0;i<cards.length;i++){
    if (cards[i].match(/\t/)){
        cards[i]=cards[i].split(/\t/).concat([0,0])
    }else {
		cards.splice(i,1)
	}
}
var failed = [];
var index = 0, delay = 5;
while (failed.length != 0 || index < cards.length){
	if (mode.innerText=="定義"){
		m=[0,1]
	}
	else{
		m=[1,0]
	}
	if (delay != 0 && index < cards.length){
		i = index;
		index++;
		if (failed.length != 0){
			delay--;
		}
	}
	else {
		i=failed.pop();
		if (failed.length==0){
			delay=5;
		}
	}
	que.innerText = cards[i][m[0]];
	await eventPromisify(ans,"answer")
	if (ans.value.toLowerCase() == cards[i][m[1]].toLowerCase()){
		status.innerText = "OK submit again to next"
		cards[i][2]++;
	}
	else {
		status.innerText = "Failed submit again to next"
		correct.value = cards[i][m[1]]
		cards[i][3]++;
		if (failed.length == 0){
			delay = 5;
		}
		failed.unshift(i)
	}
	await eventPromisify(ans,"answer")
	status.reset();ans.value="";correct.value="";
}
status.innerText = "Ended"
que.innerText = ""
ans.disabled=true
}
</script>
</html>

## testcard.txt
rapid economic growth	急速な経済成長
a shallow river	浅い川
vary in size	大きさの点で異なる
keep silent	沈黙を保つ
primitive art	原始芸術
the previous year	前年
the former mayor	前市長
measure the depth	深さを測る
the length of time	時間の長さ
faraway countries	遠い国
examine every aspect	あらゆる側面を調べる
a long distance	長い距離
decline the offer	その申し出を断る
ignore his advice	彼の助言を無視する
deny the existence	存在を否定する
refuse the invitation	招待を断る
reject the proposal	その提案を断る
furthermore, he continues	さらに彼は続ける
nevertheless remain the same	それにも関わらず同じままである
Otherwise, I will fail.	さもなければ、失敗するだろう。
unless necessary	もし必要でなければ
thus he became rich	だから彼は裕福になった
Meanwhile, it began to rain.	その間に、雨が振り始めた。
big, and moreover, heavy	大きく、その上に重い
demonstrate his ability	彼の能力を実証する
ensure safety	安全を保証する
confirm the appointment	約束を確認する
have authority	権限を持つ
administration of the building	建物の管理
command my dog to wait	自分の犬に待てと命令する
associate red with danger	赤で危険を連想する
assist the patients	患者を支援する
rescue the survivors	生存者を救出する
economic aid	経済援助
an auxiliary means	補助的な手段
a complement to his idea	彼の考えの補足
have an option	選択権がある
adopt his suggestion	彼の提案を採用する
an alternative solution	代わりの解決策
pick a winner	勝者を選ぶ
an outstanding characteristic	傑出した特徴
superior to any other	他の何よりも優れた
a fine view	すばらしい眺め
respect the elderly	老人を尊敬する
a prominent leader	卓越した指導者
an efficient method	効率的な方法
the awesome experience	すばらしい体験
deserve the punishment	罪に値する
compete with one another	互いに競争する
a complete victory	完全な勝利
conquer the land	その土地を征服する
my mother tongue	私の母国語
a bilingual speaker	２ヶ国語を話す人
be fluent in Chinese	中国語が流ちょうである
a unique phrase	独特の言葉づかい
a popular idiom	よく知られた慣用句
a dull speech	退屈なスピーチ
awkward silence	気まずい沈黙
jealous of his talent	彼の才能に嫉妬した
stum the audience	観客をびっくりさせる
	<!DOCTYPE html>
	<html>
	<head>
	<title>FlashCard</title>
	<style>
	body {
	font-familiy: "Century Schoolbook",Times;
	text-align: center;
	}
	</style>
	</head>
	<body>
	<input type="file" id="sfile">
	<button id="reset" onClick="location.reload()" disabled>リセット</button>
	<button id="switch">用語</button>
	<br>
	<pre id="status" style="font-size: large"> </pre>
	<pre id="que" style="font-size: xx-large"> </pre>
	<input type="text" id="ans" style="font-size: x-large" autofocus/><br>
	<br>
	<button id="submit" style="font-size: large">回答</button><br>
	<br>
	<input type="text" id="correct" style="font-size: x-large; border: none;background: #FFF;" disabled>
	</body>
	<script>
	window.onload = async function(){
	var answer = new Event("answer",{ bubbles:false, cancelable:false });
	const eventPromisify = (eventTarget, eventName) => {
	return new Promise((resolve, reject) => {
	eventTarget.addEventListener(eventName, (...args) => resolve(...args));
	});
	};
	var sfile = document.getElementById("sfile")
	var ans = document.getElementById("ans")
	var que = document.getElementById("que")
	var status = document.getElementById("status")
	var correct = document.getElementById("correct")
	var mode = document.getElementById("switch")
	mode.addEventListener("click",function(e){if(e.target.innerText=="定義"){e.target.innerText="用語"}else{e.target.innerText="定義"}ans.focus()})
	document.getElementById("submit").addEventListener("click",() => {ans.dispatchEvent(answer)});
	ans.addEventListener("keydown",(e) => {if(e.code=="Enter"&& !e.isComposing){ans.dispatchEvent(answer)}})
	status.reset = ()=>{status.innerText=" "}
	ef=await eventPromisify(sfile,"change");
	document.getElementById("reset").disabled=false;
	sfile.disabled=true;
	var file = ef.target.files;
	var reader = new FileReader();
	reader.readAsText(file[0])
	await eventPromisify(reader,"load")

	ans.focus()
	cards=reader.result.split(/\r\n\|\n/)
	for (var i=0;i<cards.length;i++){
	if (cards[i].match(/\t/)){
	cards[i]=cards[i].split(/\t/).concat([0,0])
	}else {
	cards.splice(i,1)
	}
	}
	var failed = [];
	var index = 0, delay = 5;
	while (failed.length != 0 \|\| index < cards.length){
	if (mode.innerText=="定義"){
	m=[0,1]
	}
	else{
	m=[1,0]
	}
	if (delay != 0 && index < cards.length){
	i = index;
	index++;
	if (failed.length != 0){
	delay--;
	}
	}
	else {
	i=failed.pop();
	if (failed.length==0){
	delay=5;
	}
	}
	que.innerText = cards[i][m[0]];
	await eventPromisify(ans,"answer")
	if (ans.value.toLowerCase() == cards[i][m[1]].toLowerCase()){
	status.innerText = "OK submit again to next"
	cards[i][2]++;
	}
	else {
	status.innerText = "Failed submit again to next"
	correct.value = cards[i][m[1]]
	cards[i][3]++;
	if (failed.length == 0){
	delay = 5;
	}
	failed.unshift(i)
	}
	await eventPromisify(ans,"answer")
	status.reset();ans.value="";correct.value="";
	}
	status.innerText = "Ended"
	que.innerText = ""
	ans.disabled=true
	}
	</script>
	</html>
	rapid economic growth 急速な経済成長
	a shallow river 浅い川
	vary in size 大きさの点で異なる
	keep silent 沈黙を保つ
	primitive art 原始芸術
	the previous year 前年
	the former mayor 前市長
	measure the depth 深さを測る
	the length of time 時間の長さ
	faraway countries 遠い国
	examine every aspect あらゆる側面を調べる
	a long distance 長い距離
	decline the offer その申し出を断る
	ignore his advice 彼の助言を無視する
	deny the existence 存在を否定する
	refuse the invitation 招待を断る
	reject the proposal その提案を断る
	furthermore, he continues さらに彼は続ける
	nevertheless remain the same それにも関わらず同じままである
	Otherwise, I will fail. さもなければ、失敗するだろう。
	unless necessary もし必要でなければ
	thus he became rich だから彼は裕福になった
	Meanwhile, it began to rain. その間に、雨が振り始めた。
	big, and moreover, heavy 大きく、その上に重い
	demonstrate his ability 彼の能力を実証する
	ensure safety 安全を保証する
	confirm the appointment 約束を確認する
	have authority 権限を持つ
	administration of the building 建物の管理
	command my dog to wait 自分の犬に待てと命令する
	associate red with danger 赤で危険を連想する
	assist the patients 患者を支援する
	rescue the survivors 生存者を救出する
	economic aid 経済援助
	an auxiliary means 補助的な手段
	a complement to his idea 彼の考えの補足
	have an option 選択権がある
	adopt his suggestion 彼の提案を採用する
	an alternative solution 代わりの解決策
	pick a winner 勝者を選ぶ
	an outstanding characteristic 傑出した特徴
	superior to any other 他の何よりも優れた
	a fine view すばらしい眺め
	respect the elderly 老人を尊敬する
	a prominent leader 卓越した指導者
	an efficient method 効率的な方法
	the awesome experience すばらしい体験
	deserve the punishment 罪に値する
	compete with one another 互いに競争する
	a complete victory 完全な勝利
	conquer the land その土地を征服する
	my mother tongue 私の母国語
	a bilingual speaker ２ヶ国語を話す人
	be fluent in Chinese 中国語が流ちょうである
	a unique phrase 独特の言葉づかい
	a popular idiom よく知られた慣用句
	a dull speech 退屈なスピーチ
	awkward silence 気まずい沈黙
	jealous of his talent 彼の才能に嫉妬した
	stum the audience 観客をびっくりさせる