latin/app/templates/Pensum_cloze.html

103 lines
2.8 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="la">
<head>
<meta charset="UTF-8">
<title>{{pensum_title}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
2020-12-03 20:22:58 +01:00
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/LLPSI.css') }}">
<script type="text/javascript">
function adjust_size() {
const pensum = document.querySelector('#pensum_content');
const inputs = pensum.querySelectorAll('input');
inputs.forEach((input) => {
if (input.type=="text") {
input.setAttribute("value", "");
input.setAttribute("style", "width: " + input.dataset.expected.length + "em");
}
});
}
function nomacron_to_macron(char) {
var mapper = { 'A': 'Ā',
'a': 'ā',
'E': 'Ē',
'e': 'ē',
'I': 'Ī',
'i': 'ī',
'O': 'Ō',
'o': 'ō',
'U': 'Ū',
'u': 'ū'};
return mapper[char[0]];
}
function macron_to_nomacron(char) {
var mapper = { 'Ā': 'A',
'ā': 'a',
'Ē': 'E',
'ē': 'e',
'Ī': 'I',
'ī': 'i',
'Ō': 'O',
'ō': 'o',
'Ū': 'U',
'ū': 'u'};
return mapper[char];
}
function input_to_nomacron(input) {
return input.replace(/Ā|ā|Ē|ē|Ī|ī/, macron_to_nomacron);
}
function input_to_macron(input) {
return input.replace(/(\w)\1/, nomacron_to_macron);
}
function validate() {
const pensum = document.querySelector('#pensum_content');
const inputs = pensum.querySelectorAll('input');
inputs.forEach((input) => {
if (input.type=="text" && document.getElementById('vowel_length').checked == false) {
is_macron_ok = (input.value == input_to_nomacron(input.dataset.expected));
is_double_ok = false;
} else {
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-12-03 20:22:58 +01:00
input.setAttribute("class", "incorrect");
} else if (input.type=="text") {
2020-12-03 20:22:58 +01:00
input.setAttribute("class", "correct");
}
});
return false;
}
function show_answers() {
const pensum = document.querySelector('#pensum_content');
const inputs = pensum.querySelectorAll('input');
inputs.forEach((input) => {
if (input.type=="text") {
2020-12-07 01:28:25 +01:00
input.value = input.dataset.expected;
input.removeAttribute("class");
}
});
}
</script>
</head>
<body>
<h1><a href="/llpsi">Lingua Latina Per Se Illustrata</a></h1>
2020-11-25 18:16:27 +01:00
<h2>{{pensum_title}}</h2>
Quantitās: <input type="checkbox" id="vowel_length">
<div id="pensum_content">
<p>{{pensum_content|safe}}</p>
<br>
<button title="Check answers" onclick="return validate();">Mitte</button><button title="Show correct answers" onclick="return show_answers();">Responsa</button>
</div>
<script type="text/javascript">adjust_size();</script>
</body>
</html>