2020-11-22 17:11:23 +01:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="la">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<title>Familia Romana – Pensum A</title>
|
|
|
|
|
|
<script type="text/javascript">
|
2020-11-23 01:41:22 +01:00
|
|
|
|
function adjust_size() {
|
|
|
|
|
|
const forms = document.querySelectorAll('form');
|
|
|
|
|
|
const form = forms[0];
|
2020-11-25 22:06:46 +01:00
|
|
|
|
|
2020-11-23 01:41:22 +01:00
|
|
|
|
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");
|
2020-11-23 01:41:22 +01:00
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2020-11-23 02:44:15 +01:00
|
|
|
|
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);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2020-11-22 17:11:23 +01:00
|
|
|
|
function validate() {
|
|
|
|
|
|
const forms = document.querySelectorAll('form');
|
|
|
|
|
|
const form = forms[0];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Array.from(form.elements).forEach((input) => {
|
2020-11-23 02:44:15 +01:00
|
|
|
|
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");
|
2020-11-23 02:44:15 +01:00
|
|
|
|
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");
|
2020-11-22 17:11:23 +01:00
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
return false;
|
|
|
|
|
|
}
|
2020-11-25 22:06:46 +01:00
|
|
|
|
|
|
|
|
|
|
function show_answers() {
|
|
|
|
|
|
const forms = document.querySelectorAll('form');
|
|
|
|
|
|
const form = forms[0];
|
|
|
|
|
|
|
|
|
|
|
|
Array.from(form.elements).forEach((input) => {
|
|
|
|
|
|
if (input.type=="text") {
|
|
|
|
|
|
input.setAttribute("value", input.dataset.expected);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
2020-11-22 17:11:23 +01:00
|
|
|
|
</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>
|
2020-11-22 17:11:23 +01:00
|
|
|
|
<form class="Pensum_A" onsubmit="return validate();">
|
2020-11-23 01:15:19 +01:00
|
|
|
|
{{pensum_content|safe}}
|
|
|
|
|
|
<br>
|
2020-11-25 22:06:46 +01:00
|
|
|
|
<input type="submit" value="Mitte"><button onclick="show_answers()">Responsa</button>
|
2020-11-22 17:11:23 +01:00
|
|
|
|
</form>
|
2020-11-23 01:41:22 +01:00
|
|
|
|
<script type="text/javascript">adjust_size();</script>
|
2020-11-22 17:11:23 +01:00
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
