Moves js to a separate file
This commit is contained in:
parent
ac3e6b62b9
commit
433873d5c9
83
app/static/js/cloze.js
Normal file
83
app/static/js/cloze.js
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
function adjust_size(divclass) {
|
||||||
|
const cloze = document.querySelector(divclass);
|
||||||
|
const inputs = cloze.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 to_nonmacron(input) {
|
||||||
|
return input.replace(/Ā|ā|Ē|ē|Ī|ī/, macron_to_nomacron);
|
||||||
|
}
|
||||||
|
|
||||||
|
function to_macron(input) {
|
||||||
|
return input.replace(/(\w)\1/, nomacron_to_macron);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function validate(divclass) {
|
||||||
|
const pensum = document.querySelector(divclass);
|
||||||
|
const inputs = pensum.querySelectorAll('input');
|
||||||
|
|
||||||
|
inputs.forEach((input) => {
|
||||||
|
if (input.type == "text") {
|
||||||
|
is_nonmacron_ok = false;
|
||||||
|
is_macron_ok = false;
|
||||||
|
if (document.getElementById('vowel_length').checked == false) {
|
||||||
|
is_nonmacron_ok = (to_nonmacron(input.value) == to_nonmacron(input.dataset.expected));
|
||||||
|
} else {
|
||||||
|
is_macron_ok = (input.value == input.dataset.expected);
|
||||||
|
}
|
||||||
|
if (is_nonmacron_ok || is_macron_ok) {
|
||||||
|
input.setAttribute("class", "correct");
|
||||||
|
} else {
|
||||||
|
input.setAttribute("class", "incorrect");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function show_answers(divclass) {
|
||||||
|
const cloze = document.querySelector(divclass);
|
||||||
|
const inputs = cloze.querySelectorAll('input');
|
||||||
|
|
||||||
|
inputs.forEach((input) => {
|
||||||
|
if (input.type=="text") {
|
||||||
|
input.value = input.dataset.expected;
|
||||||
|
input.removeAttribute("class");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
@ -5,91 +5,7 @@
|
|||||||
<title>{{pensum_title}}</title>
|
<title>{{pensum_title}}</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/LLPSI.css') }}">
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/LLPSI.css') }}">
|
||||||
<script type="text/javascript">
|
<script src="{{ url_for('static', filename='js/cloze.js') }}"></script>
|
||||||
function adjust_size() {
|
|
||||||
const exercitium = document.querySelector('.exercitium_content');
|
|
||||||
const inputs = exercitium.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 to_nonmacron(input) {
|
|
||||||
return input.replace(/Ā|ā|Ē|ē|Ī|ī/, macron_to_nomacron);
|
|
||||||
}
|
|
||||||
|
|
||||||
function to_macron(input) {
|
|
||||||
return input.replace(/(\w)\1/, nomacron_to_macron);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function validate() {
|
|
||||||
const exercitium = document.querySelector('.exercitium_content');
|
|
||||||
const inputs = exercitium.querySelectorAll('input');
|
|
||||||
|
|
||||||
inputs.forEach((input) => {
|
|
||||||
if (input.type == "text") {
|
|
||||||
is_nonmacron_ok = false;
|
|
||||||
is_macron_ok = false;
|
|
||||||
if (document.getElementById('vowel_length').checked == false) {
|
|
||||||
is_nonmacron_ok = (to_nonmacron(input.value) == to_nonmacron(input.dataset.expected));
|
|
||||||
} else {
|
|
||||||
is_macron_ok = (input.value == input.dataset.expected);
|
|
||||||
}
|
|
||||||
if (is_nonmacron_ok || is_macron_ok) {
|
|
||||||
input.setAttribute("class", "correct");
|
|
||||||
} else {
|
|
||||||
input.setAttribute("class", "incorrect");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function show_answers() {
|
|
||||||
const pensum = document.querySelector('.exercitium_content');
|
|
||||||
const inputs = pensum.querySelectorAll('input');
|
|
||||||
|
|
||||||
inputs.forEach((input) => {
|
|
||||||
if (input.type=="text") {
|
|
||||||
input.value = input.dataset.expected;
|
|
||||||
input.removeAttribute("class");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
@ -102,8 +18,8 @@
|
|||||||
<div class="exercitium_content">
|
<div class="exercitium_content">
|
||||||
<p>{{exercitium_content|safe}}</p>
|
<p>{{exercitium_content|safe}}</p>
|
||||||
<br>
|
<br>
|
||||||
<button title="Check answers" onclick="return validate();">Mitte</button><button title="Show correct answers" onclick="return show_answers();">Responsa</button>
|
<button title="Check answers" onclick="return validate('.exercitium_content');">Mitte</button><button title="Show correct answers" onclick="return show_answers('.exercitium_content');">Responsa</button>
|
||||||
</div>
|
</div>
|
||||||
<script type="text/javascript">adjust_size();</script>
|
<script type="text/javascript">adjust_size('.exercitium_content');</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
@ -5,91 +5,7 @@
|
|||||||
<title>{{pensum_title}}</title>
|
<title>{{pensum_title}}</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/LLPSI.css') }}">
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/LLPSI.css') }}">
|
||||||
<script type="text/javascript">
|
<script src="{{ url_for('static', filename='js/cloze.js') }}"></script>
|
||||||
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 to_nonmacron(input) {
|
|
||||||
return input.replace(/Ā|ā|Ē|ē|Ī|ī/, macron_to_nomacron);
|
|
||||||
}
|
|
||||||
|
|
||||||
function 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") {
|
|
||||||
is_nonmacron_ok = false;
|
|
||||||
is_macron_ok = false;
|
|
||||||
if (document.getElementById('vowel_length').checked == false) {
|
|
||||||
is_nonmacron_ok = (to_nonmacron(input.value) == to_nonmacron(input.dataset.expected));
|
|
||||||
} else {
|
|
||||||
is_macron_ok = (input.value == input.dataset.expected);
|
|
||||||
}
|
|
||||||
if (is_nonmacron_ok || is_macron_ok) {
|
|
||||||
input.setAttribute("class", "correct");
|
|
||||||
} else {
|
|
||||||
input.setAttribute("class", "incorrect");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function show_answers() {
|
|
||||||
const pensum = document.querySelector('.pensum_content');
|
|
||||||
const inputs = pensum.querySelectorAll('input');
|
|
||||||
|
|
||||||
inputs.forEach((input) => {
|
|
||||||
if (input.type=="text") {
|
|
||||||
input.value = input.dataset.expected;
|
|
||||||
input.removeAttribute("class");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
@ -102,8 +18,8 @@
|
|||||||
<div class="pensum_content">
|
<div class="pensum_content">
|
||||||
<p>{{pensum_content|safe}}</p>
|
<p>{{pensum_content|safe}}</p>
|
||||||
<br>
|
<br>
|
||||||
<button title="Check answers" onclick="return validate();">Mitte</button><button title="Show correct answers" onclick="return show_answers();">Responsa</button>
|
<button title="Check answers" onclick="return validate('.pensum_content');">Mitte</button><button title="Show correct answers" onclick="return show_answers('.pensum_content');">Responsa</button>
|
||||||
</div>
|
</div>
|
||||||
<script type="text/javascript">adjust_size();</script>
|
<script type="text/javascript">adjust_size('.pensum_content');</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
Loading…
Reference in New Issue
Block a user