From 433873d5c96d2d017408bb4e1ab490a432d395f5 Mon Sep 17 00:00:00 2001
From: sergiusz <sergiusz.warga@gmail.com>
Date: Thu, 7 Jan 2021 22:33:50 +0100
Subject: [PATCH] Moves js to a separate file

---
 app/static/js/cloze.js              | 83 ++++++++++++++++++++++++++
 app/templates/Exercitium_cloze.html | 90 +----------------------------
 app/templates/Pensum_cloze.html     | 90 +----------------------------
 3 files changed, 89 insertions(+), 174 deletions(-)
 create mode 100644 app/static/js/cloze.js

diff --git a/app/static/js/cloze.js b/app/static/js/cloze.js
new file mode 100644
index 0000000..de8dc98
--- /dev/null
+++ b/app/static/js/cloze.js
@@ -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");
+		}
+	});
+}
\ No newline at end of file
diff --git a/app/templates/Exercitium_cloze.html b/app/templates/Exercitium_cloze.html
index 178435f..a41b0c6 100644
--- a/app/templates/Exercitium_cloze.html
+++ b/app/templates/Exercitium_cloze.html
@@ -5,91 +5,7 @@
 	<title>{{pensum_title}}</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1"/>
 	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/LLPSI.css') }}">
-	<script type="text/javascript">
-		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>
+	<script src="{{ url_for('static', filename='js/cloze.js') }}"></script>
 </head>
 <body>
 	<header>
@@ -102,8 +18,8 @@
 	<div class="exercitium_content">
 		<p>{{exercitium_content|safe}}</p>
 		<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>
-	<script type="text/javascript">adjust_size();</script>
+	<script type="text/javascript">adjust_size('.exercitium_content');</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/app/templates/Pensum_cloze.html b/app/templates/Pensum_cloze.html
index eec9ece..d377c74 100644
--- a/app/templates/Pensum_cloze.html
+++ b/app/templates/Pensum_cloze.html
@@ -5,91 +5,7 @@
 	<title>{{pensum_title}}</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1"/>
 	<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 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>
+	<script src="{{ url_for('static', filename='js/cloze.js') }}"></script>
 </head>
 <body>
 	<header>
@@ -102,8 +18,8 @@
 	<div class="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>
+		<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>
-	<script type="text/javascript">adjust_size();</script>
+	<script type="text/javascript">adjust_size('.pensum_content');</script>
 </body>
 </html>
\ No newline at end of file