From: Lanius Trolling <lanius@laniustrolling.dev>
Date: Tue, 15 Aug 2023 15:42:09 +0000 (-0400)
Subject: Add quizzes
X-Git-Url: https://gitweb.starshipfights.net/?a=commitdiff_plain;h=4c2b9903800d1cd35b35a77acb56edf0ae3ac1cb;p=factbooks

Add quizzes
---

diff --git a/src/main/kotlin/info/mechyrdia/Configuration.kt b/src/main/kotlin/info/mechyrdia/Configuration.kt
index adbffa5..0657293 100644
--- a/src/main/kotlin/info/mechyrdia/Configuration.kt
+++ b/src/main/kotlin/info/mechyrdia/Configuration.kt
@@ -16,6 +16,7 @@ data class Configuration(
 	val assetDir: String = "../assets",
 	val templateDir: String = "../tpl",
 	val jsonDocDir: String = "../data",
+	val quizDir: String = "../quizzes",
 	val scriptDir: String = "../funcs",
 	
 	val dbName: String = "nslore",
diff --git a/src/main/kotlin/info/mechyrdia/lore/parser_tags.kt b/src/main/kotlin/info/mechyrdia/lore/parser_tags.kt
index 87039f1..5765f7f 100644
--- a/src/main/kotlin/info/mechyrdia/lore/parser_tags.kt
+++ b/src/main/kotlin/info/mechyrdia/lore/parser_tags.kt
@@ -1,6 +1,8 @@
 package info.mechyrdia.lore
 
 import info.mechyrdia.Configuration
+import info.mechyrdia.JsonStorageCodec
+import kotlinx.serialization.builtins.serializer
 import kotlinx.serialization.json.JsonPrimitive
 import java.io.File
 
@@ -177,6 +179,14 @@ enum class TextParserFormattingTag(val type: TextParserTagType<Unit>) {
 			"<canvas data-model=\"$modelUrl\"$sizeAttrs></canvas>"
 		}
 	),
+	QUIZ(
+		TextParserTagType.Indirect { _, content, _ ->
+			val quizText = File(Configuration.CurrentConfiguration.quizDir, "$content.json").readText()
+			val quizJson = JsonStorageCodec.encodeToString(String.serializer(), quizText)
+			
+			"<script>window.renderQuiz(JSON.parse($quizJson));</script>"
+		}
+	),
 	
 	// Lists
 	UL(
diff --git a/src/main/resources/static/init.js b/src/main/resources/static/init.js
index a854c9f..5b733e6 100644
--- a/src/main/resources/static/init.js
+++ b/src/main/resources/static/init.js
@@ -204,6 +204,166 @@
 		}
 	});
 
+	window.renderQuiz = function (quiz) {
+		const quizFunctions = {};
+		const quizRoot = document.createElement("table");
+		const questionAnswers = [];
+
+		quizFunctions.clearRoot = function () {
+			while (quizRoot.hasChildNodes()) {
+				quizRoot.firstChild.remove();
+			}
+		};
+
+		quizFunctions.renderIntro = function () {
+			quizFunctions.clearRoot();
+
+			const firstRow = document.createElement("tr");
+			const firstCell = document.createElement("td");
+			firstCell.style.textAlign = "center";
+			firstCell.style.fontSize = "1.5em";
+			firstCell.style.fontWeight = "bold";
+			firstCell.append(quiz.title.toString());
+			firstRow.appendChild(firstCell);
+			quizRoot.appendChild(firstRow);
+
+			const secondRow = document.createElement("tr");
+			const secondCell = document.createElement("td");
+			secondCell.style.textAlign = "center";
+			secondCell.appendChild(document.createElement("img")).src = quiz.image;
+			for (const paragraph of quiz.intro.toString().split('\n')) {
+				secondCell.appendChild(document.createElement("p")).append(paragraph);
+			}
+			secondRow.appendChild(secondCell);
+			quizRoot.appendChild(secondRow);
+
+			const thirdRow = document.createElement("tr");
+			const thirdCell = document.createElement("td");
+			thirdCell.style.textAlign = "center";
+			const beginLink = thirdCell.appendChild(document.createElement("a"));
+			beginLink.href = "#";
+			beginLink.append("Begin Quiz");
+			beginLink.onclick = e => {
+				e.preventDefault();
+				quizFunctions.renderQuestion(0);
+			};
+			thirdRow.appendChild(thirdCell);
+			quizRoot.appendChild(thirdRow);
+		};
+
+		quizFunctions.renderOutro = function (outcome) {
+			quizFunctions.clearRoot();
+
+			const firstRow = document.createElement("tr");
+			const firstCell = document.createElement("td");
+			firstCell.style.textAlign = "center";
+			firstCell.style.fontSize = "1.5em";
+			firstCell.style.fontWeight = "bold";
+			firstCell.append(outcome.name.toString());
+			firstRow.appendChild(firstCell);
+			quizRoot.appendChild(firstRow);
+
+			const secondRow = document.createElement("tr");
+			const secondCell = document.createElement("td");
+			secondCell.style.textAlign = "center";
+			secondCell.appendChild(document.createElement("img")).src = outcome.img;
+			for (const paragraph of outcome.desc.toString().split('\n')) {
+				secondCell.appendChild(document.createElement("p")).append(paragraph);
+			}
+			secondRow.appendChild(secondCell);
+			quizRoot.appendChild(secondRow);
+
+			const thirdRow = document.createElement("tr");
+			const thirdCell = document.createElement("td");
+			thirdCell.style.textAlign = "center";
+			const moreInfoLink = thirdCell.appendChild(document.createElement("a"));
+			moreInfoLink.href = outcome.url;
+			moreInfoLink.append("More Information");
+			thirdRow.appendChild(thirdCell);
+			quizRoot.appendChild(thirdRow);
+		};
+
+		quizFunctions.calculateResults = function () {
+			const total = {};
+			for (const result of questionAnswers) {
+				for (const resKey of Object.keys(result)) {
+					if (total[resKey] == null) {
+						total[resKey] = 0;
+					}
+					total[resKey] += result[resKey];
+				}
+			}
+
+			let maxKey;
+			let maxValue = null;
+			for (const key of Object.keys(total)) {
+				const result = total[key];
+				if (maxValue == null || result > maxValue) {
+					maxKey = key;
+					maxValue = result;
+				}
+			}
+
+			return quiz.outcomes[maxKey];
+		};
+
+		quizFunctions.renderQuestion = function (index) {
+			quizFunctions.clearRoot();
+
+			const question = quiz.questions[index];
+
+			const firstRow = document.createElement("tr");
+			const firstCell = document.createElement("td");
+			firstCell.style.textAlign = "center";
+			firstCell.style.fontSize = "1.5em";
+			firstCell.style.fontWeight = "bold";
+			firstCell.append(question.asks.toString());
+			firstRow.appendChild(firstCell);
+			quizRoot.appendChild(firstRow);
+
+			for (const answer of question.answers) {
+				const secondRow = document.createElement("tr");
+				const secondCell = document.createElement("td");
+				secondCell.style.textAlign = "center";
+				const answerLink = secondCell.appendChild(document.createElement("a"));
+				answerLink.href = "#";
+				answerLink.append(answer.answer.toString());
+				answerLink.onclick = e => {
+					e.preventDefault();
+					questionAnswers[index] = answer.result;
+					if (index === quiz.questions.length - 1) {
+						quizFunctions.renderOutro(quizFunctions.calculateResults());
+					} else {
+						quizFunctions.renderQuestion(index + 1);
+					}
+				};
+				secondRow.appendChild(secondCell);
+				quizRoot.appendChild(secondRow);
+			}
+
+			const thirdRow = document.createElement("tr");
+			const thirdCell = document.createElement("td");
+			thirdCell.style.textAlign = "center";
+			const prevLink = thirdCell.appendChild(document.createElement("a"));
+			prevLink.href = "#";
+			prevLink.append("Previous Question");
+			prevLink.onclick = e => {
+				e.preventDefault();
+				if (index === 0) {
+					quizFunctions.renderIntro();
+				} else {
+					quizFunctions.renderQuestion(index - 1);
+				}
+			};
+			thirdRow.appendChild(thirdCell);
+			quizRoot.appendChild(thirdRow);
+		};
+
+		document.currentScript.after(quizRoot);
+
+		quizFunctions.renderIntro();
+	};
+
 	window.addEventListener("load", function () {
 		// Comment previews
 		async function commentPreview(input, output) {