#!/bin/bash

# This script was written on Debian Linux. Results may vary on different platforms.
# Instructions. Create a plain text file with your answer content between square brackets and use the file as an argument to this script.
# Fill in the blank. Up to five accepted answer options. Example:
	# [George Washington Carver, Washington, George, Carver, George Carver] invented many uses for peanuts.
# Multiple choice. The correct answer is marked with an asterisk. Example:
	# Which of the following is a country?
	# [Atlanta, South Africa*, South America, Caribbean, London]

# CHECK FOR ARGUMENT
if [ -z "$1" ]; then
	echo "Script needs the worksheet as the argument."
	exit 1
fi

# PROMP READER; GET OUTPUT AND INPUT FILES
read -p "Enter page title: " title
output_file=$(echo "${title}.htm" | sed 's/ /-/g;s/---/-/g;s/--/-/g;s/,//g' | tr '[:upper:]' '[:lower:]')

# EXIT IF FILE ALREADY EXISTS
if [ -e "$output_file" ]; then
	echo "The file already exists. Exiting..."
	exit 1
fi

get_answer_option () {
	if echo "$i" | grep -q '*'; then
		# multi-choice
		echo "$i" | tr ',' '\n' | tr '[:upper:]' '[:lower:]' | grep -F '*' | tr -d '*' | xargs
	else
		echo "$i" | cut -d, -f"$1" | xargs | tr '[:upper:]' '[:lower:]'
	fi
}

# HEADER
doc_header=$(cat << _EOF_
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
input[type="text"] { margin: 5px 0; border: 1px solid #aaa; padding: 5px; font-size: 1em; width: 175px; }
input[type="button"] { border: 1px solid #aaa; padding: 5px; font-size: 1em; width: 175px; }
body { margin: 25px; font-family: sans-serif; }
</style>
<title>$title</title>
</head>
<body>
<h1>$title</h1>
_EOF_
)

html_main_content=$(sed 's/\*/_cr_/g' "$1")
items=$(echo "$html_main_content" | grep -Po '(?<=\[).+?(?=\])' | sed 's/$/;/' | tr -d '\n' | sed 's/;$//')
IFS=';' read -ra items <<< "$items"
num=1
for i in "${items[@]}"; do
	html_id=_$(echo "${i}${num}" | tr '[:upper:]' '[:lower:]' | sed "s/[^[:alnum:]]//g")
	check_html_id="check${html_id}"
	((num++))

	# MAIN HTML
	if echo "$i" | grep -q '_cr_'; then
		# multi-choice
		radio_inputs=
		IFS=","
		for itm in $i; do
			itm=$(echo -n "$itm" | xargs)
			if echo "$itm" | grep -q '_cr_'; then
				itm=$(echo -n "$itm" | sed 's/_cr_//')
				radio_inputs="${radio_inputs}<label><input type=\"radio\" name=\"$html_id\" id=\"$html_id\">$itm</label>"
			else
				radio_inputs="${radio_inputs}<label><input type=\"radio\" name=\"$html_id\">$itm</label>"
			fi
		done
		radio_inputs="${radio_inputs}<span id=\"$check_html_id\"></span>"
		html_main_content=${html_main_content/\[$i\]/$radio_inputs}
	else
		text_input="<input type=\"text\" id=\"$html_id\"><span id=\"$check_html_id\"></span>"
		html_main_content=${html_main_content/\[$i\]/$text_input}
	fi

	# MAIN JAVASCRIPT VARIABLES
	if echo "$i" | grep -q '_cr_'; then
		jav_vars="${jav_vars}
		var $html_id = document.getElementById('$html_id').checked"
	else
		jav_vars="${jav_vars}
		var $html_id = document.getElementById('$html_id').value.toLowerCase().replace(/^\s\s*/, '').replace(/\s\s*$/, '');"
	fi

	# JAVASCRIPT IF STATEMENTS
	if echo "$i" | grep -q '_cr_'; then
			jav_if="${jav_if}
			if ($html_id == true) {"
	else
		num_answer_options=$(echo "$i" | grep -o , | wc -l); ((num_answer_options++))
		if [ "$num_answer_options" -gt 5 ]; then
			>&2 echo "Issue with vocab items on (too many or none): $i"
			exit 1
		fi
		if [ "$num_answer_options" -eq 5 ]; then
			answer_option1=$(get_answer_option 1)
			answer_option2=$(get_answer_option 2)
			answer_option3=$(get_answer_option 3)
			answer_option4=$(get_answer_option 4)
			answer_option5=$(get_answer_option 5)
			jav_if="${jav_if}
			if ($html_id == \"$answer_option1\" || $html_id == \"$answer_option2\" || $html_id == \"$answer_option3\" || $html_id == \"$answer_option4\" || $html_id == \"$answer_option5\") {"
		elif [ "$num_answer_options" -eq 4 ]; then
			answer_option1=$(get_answer_option 1)
			answer_option2=$(get_answer_option 2)
			answer_option3=$(get_answer_option 3)
			answer_option4=$(get_answer_option 4)
			jav_if="${jav_if}
			if ($html_id == \"$answer_option1\" || $html_id == \"$answer_option2\" || $html_id == \"$answer_option3\" || $html_id == \"$answer_option4\") {"
		elif [ "$num_answer_options" -eq 3 ]; then
			answer_option1=$(get_answer_option 1)
			answer_option2=$(get_answer_option 2)
			answer_option3=$(get_answer_option 3)
			jav_if="${jav_if}
			if ($html_id == \"$answer_option1\" || $html_id == \"$answer_option2\" || $html_id == \"$answer_option3\") {"
		elif [ "$num_answer_options" -eq 2 ]; then
			answer_option1=$(get_answer_option 1)
			answer_option2=$(get_answer_option 2)
			jav_if="${jav_if}
			if ($html_id == \"$answer_option1\" || $html_id == \"$answer_option2\") {"
		elif [ "$num_answer_options" -eq 1 ]; then
			answer_option1=$(get_answer_option 1)
			jav_if="${jav_if}
			if ($html_id == \"$answer_option1\") {"
		fi
	fi
		jav_if="${jav_if}
		   $check_html_id.innerHTML = bien;
		   num_right++;
		} else {
		   $check_html_id.innerHTML = ojo;
		}
		   num_total++;"
done

main_html=$(echo -e "\n$html_main_content" | sed '/^$/d;s:^:<p>:;s:$:</p>:')

# END OF MAIN HTML AND START OF JAVASCRIPT
jav_start=$'\n<p><input type="button" value="Revisar" onclick="check_answers()"></p>
<p id="number_correct"></p>
<script>
function check_answers() {
var bien = \'<span style="color: green;"> &#10004;</span>\';
var ojo = \'<span style="color: red;"> &#10006;</span>\';
var num_right = 0;
var num_total = 0;'

# END OF JAVASCRIPT AND END OF HTML
jav_end=$(cat << _EOF_
document.getElementById('number_correct').innerHTML = "Sacaste "+num_right+"/"+num_total+".";
}
document.onkeydown = function(e) {
if (e.code === "Enter") {
        check_answers(e);
    }
}
</script>
</body>
</html>
_EOF_
)

echo "${doc_header}${main_html}${jav_start}${jav_vars}${jav_if}${jav_end}" | tr -d '\t' > "$output_file"
