latin/app/templates/LLPSI/Pensum_cloze.html

69 lines
1.9 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="la">
<head>
<meta charset="UTF-8">
<title>Familia Romana Pensum A</title>
<script type="text/javascript">
function adjust_size() {
const forms = document.querySelectorAll('form');
const form = forms[0];
2020-11-23 08:43:39 +01:00
console.log('dupa');
Array.from(form.elements).forEach((input) => {
if (input.type=="text") {
2020-11-25 18:16:27 +01:00
console.log(input.dataset.expected.length)
input.setAttribute("style", input.getAttribute("style") + "; width: " + input.dataset.expected.length + "em");
}
});
}
function mapper(char) {
var mapper = { 'A': 'Ā',
'a': 'ā',
'E': 'Ē',
'e': 'ē',
'I': 'Ī',
'i': 'ī',
'O': 'Ō',
'o': 'ō',
'U': 'Ū',
'u': 'ū'};
return mapper[char[0]];
}
function input_to_macron(input) {
return input.replace(/(\w)\1/, mapper);
}
function validate() {
const forms = document.querySelectorAll('form');
const form = forms[0];
Array.from(form.elements).forEach((input) => {
is_double_ok = (input_to_macron(input.value) == input.dataset.expected);
is_macron_ok = (input.value == input.dataset.expected);
if (input.type=="text" && !(is_double_ok || is_macron_ok)) {
2020-11-25 18:16:27 +01:00
input.setAttribute("style", input.getAttribute("style") + "; border-color:red");
console.log('expected: ' + input.dataset.expected);
console.log('input: ' + input_to_macron(input.value));
} else if (input.type=="text") {
2020-11-25 18:16:27 +01:00
input.setAttribute("style", input.getAttribute("style") + "; border-color:green");
}
});
return false;
}
</script>
</head>
<body>
2020-11-25 18:16:27 +01:00
<h1><a href="/latin/llpsi">Lingua Latina Per Se Illustrata</a></h1>
<h2>{{pensum_title}}</h2>
<form class="Pensum_A" onsubmit="return validate();">
{{pensum_content|safe}}
<br>
2020-11-25 18:16:27 +01:00
<input type="submit" value="Mitte">
</form>
<script type="text/javascript">adjust_size();</script>
</body>
</html>