From 7581b5c3f07dcb43414160f7c3b6a294ce838904 Mon Sep 17 00:00:00 2001
From: Mischa POSLAWSKY <perl@shiar.org>
Date: Tue, 11 Jan 2022 06:53:54 +0100
Subject: [PATCH] word/quiz: report table to save user actions

Setup basic logging system to gather usage events serverside for debugging
and hopefully difficulty analysis later on.  Initially always enabled while
in private testing.
---
 word/memory.js      | 12 +++++++++---
 word/multichoice.js |  2 ++
 word/quiz.js        | 14 ++++++++++++++
 word/report.plp     | 12 ++++++++++++
 word/wijzer.js      |  9 +++++++--
 5 files changed, 44 insertions(+), 5 deletions(-)
 create mode 100644 word/report.plp

diff --git a/word/memory.js b/word/memory.js
index a6b1906..89fd853 100644
--- a/word/memory.js
+++ b/word/memory.js
@@ -5,6 +5,7 @@ class WordMemory extends WordQuiz {
 			// show an open card
 			this.turned.push(target);
 			put(target, '.turn');
+			this.log('pick', target.id, target.index);
 		}
 		else if (this.turned.length < 2) {
 			return; // keep open
@@ -30,6 +31,7 @@ class WordMemory extends WordQuiz {
 			this.turned = [];
 			if (Array.from(this.form.children).every(card => card.classList.contains('good'))) {
 				put(this.form, '.good');
+				this.stop('done');
 			}
 			return;
 		}
@@ -70,11 +72,15 @@ class WordMemory extends WordQuiz {
 				.map(e => e.toString())
 		}
 
-		cards.shuffle().forEach(word => {
+		cards.shuffle().forEach((word, seq) => {
 			let ref = Math.abs(word);
 			put(this.form,
-				'figure>img[src=$]<', `/data/word/32/${ref}.jpg`,
-				{onclick: e => this.turn(e), id: ref, className: word < 0 ? 'mirror' : ''}
+				'figure>img[src=$]<', `/data/word/32/${ref}.jpg`, {
+					onclick: e => this.turn(e),
+					id: ref,
+					className: word < 0 ? 'mirror' : '',
+					index: seq,
+				}
 			);
 		});
 	}
diff --git a/word/multichoice.js b/word/multichoice.js
index ca6843a..f0520f9 100644
--- a/word/multichoice.js
+++ b/word/multichoice.js
@@ -9,9 +9,11 @@ class WordMultiChoice extends WordQuiz {
 
 		let answers = [word[0], this.words[0][0], this.words[1][0], this.words[2][0]]
 			.shuffle()
+		this.log('ask', word[2], answers);
 		answers.forEach(suggest => {
 			let label = suggest.replace(/\/.*/, '');
 			let option = put(form, 'li', label, {onclick: () => {
+				this.log('pick', suggest, null, word[0]);
 				if (suggest != word[0]) {
 					// incorrect
 					put(option, '.wrong');
diff --git a/word/quiz.js b/word/quiz.js
index 2385455..bb12a83 100644
--- a/word/quiz.js
+++ b/word/quiz.js
@@ -58,7 +58,21 @@ class WordQuiz {
 		});
 	}
 
+	log(...args) {
+		this.history.push([new Date().toISOString(), ...args]);
+	}
+
+	stop(...args) {
+		this.log(...args);
+		window.onbeforeunload = null;
+		fetch('/word/report', {method: 'POST', body: JSON.stringify(this.history)});
+	}
+
 	constructor(dataurl) {
 		this.load(dataurl);
+		this.history = [];
+		window.onbeforeunload = e => {
+			this.stop('abort');
+		};
 	}
 }
diff --git a/word/report.plp b/word/report.plp
new file mode 100644
index 0000000..56d6188
--- /dev/null
+++ b/word/report.plp
@@ -0,0 +1,12 @@
+<:
+my $db = eval {
+	require Shiar_Sheet::DB;
+	Shiar_Sheet::DB->connect;
+} or Abort('Database error', 501, $@);
+
+$db->insert(report => {
+	agent   => $ENV{HTTP_USER_AGENT},
+	page    => $ENV{HTTP_REFERER},
+	address => $ENV{REMOTE_ADDR},
+	history => $PLP::read->($ENV{CONTENT_LENGTH}),
+});
diff --git a/word/wijzer.js b/word/wijzer.js
index 5f2a3bb..7446cc9 100644
--- a/word/wijzer.js
+++ b/word/wijzer.js
@@ -6,6 +6,7 @@ class WordWijzer extends WordQuiz {
 			this.form.querySelectorAll('li[onclick]').forEach(answer => {
 				answer.removeAttribute('onclick');
 			});
+			this.log('done');
 			return;
 		}
 
@@ -22,6 +23,7 @@ class WordWijzer extends WordQuiz {
 		console.log(this.question, answer);
 		let match = this.question.dataset.id == answer.dataset.id;
 		put(answer, match ? '.good' : '.wrong');
+		this.log('pick', answer.dataset.id, answer.index, this.question.dataset.id);
 		this.next();
 	}
 
@@ -32,10 +34,13 @@ class WordWijzer extends WordQuiz {
 
 		let answers = put(this.form, 'ul');
 		this.words
-			.forEach(answer => {
+			.forEach((answer, seq) => {
 				let label = answer[0].replace(/\/.*/, ''); // primary form
 				put(answers, 'li[data-id=$][onclick=""]',
-					answer[2], label, {onclick: e => this.verify(e)}
+					answer[2], label, {
+						onclick: e => this.verify(e),
+						index: seq,
+					}
 				)
 			});
 		this.words.shuffle();
-- 
2.30.0