<!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];
			

			Array.from(form.elements).forEach((input) => {
				if (input.type=="text") {
					input.setAttribute("size", input.dataset.expected.length);
				}
			});
		}

		function validate() {
			const forms = document.querySelectorAll('form');
			const form = forms[0];
			

			Array.from(form.elements).forEach((input) => {
				console.log(input);
				if (input.type=="text" && input.value != input.dataset.expected) {
					input.setAttribute("style", "border-color:red");
					console.log('incorrect!')
				}
			});

			console.log('dupa');

			return false;
		}
	</script>
</head>
<body>
	<form class="Pensum_A" onsubmit="return validate();">
		{{pensum_content|safe}}
		<br>
		<input type="submit" value="Submit">
	</form>
	<script type="text/javascript">adjust_size();</script>
</body>
</html>