<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="stylesheet" type="text/css" href="/css" />
<meta name="viewport" content="user-scalable=no" />
<script type="text/javascript" id="flashcard-data"></script>
<script type="text/javascript">
onload = () => {
let data = document.querySelector("#flashcard-data");
data.onload = function () {
document.body.onselectstart = () => { return false; }
document.body.addEventListener('touchmove', e => {
e.preventDefault();
});
cards.forEach(c => {
c[1] = c[1].charAt(0) != "<" ? c[1].replaceAll(/\//g, "‌/‌") : c[1];
});
cards.forEach(c => { c[1] = c[1].replaceAll(/ - /g, "<br />"); });
var div = document.getElementById("data");
var idx = 0;
var word = 0;
(div.onclick = () => {
word = !idx ? Math.floor(Math.random() * cards.length) : word;
// word = !idx ? (!word ? cards.length : word) - 1 : word;
div.innerHTML = cards[word][idx];
idx = -idx + 1;
})();
};
data.onreadystatechange = function () {
if (data.readyState != "loaded" && script.readyState != "complete")
return;
data.onreadystatechange = null;
data.onload;
};
data.src = "/lab/javascript/flashcard-data/"
+ location.href.match(/\?(.*)/)[1] + ".js";
}
</script>
<style type="text/css">
html, body, div { height: 100vh; width: 100vw; }
body { display: table; }
div {
font-size: 100pt;
text-align: center;
display: table-cell;
vertical-align: middle;
}
html>body>div#data img {
max-width: 50%;
max-height: 50%;
object-fit: scale-down;
transform-origin: center middle;
transform: scale(2);
}
</style>
</head>
<body unselectable="on">
<div id="data"></div>
</body>
</html>