zelfoverhoor: Improve qs interface

2 files changed, 26 insertions, 4 deletions

diff --git a/modules/zelfoverhoor/qs.html b/modules/zelfoverhoor/qs.html
index 32c9099..7191aeb 100644
--- a/modules/zelfoverhoor/qs.html
+++ b/modules/zelfoverhoor/qs.html
@@ -43,7 +43,7 @@ var questionset=/*###QUESTIONSET###*/;
 <div id="qsetdescr"></div><br>
 <br><br>
 <div id="qcontainer">
-	<b>Vraag:</b><br>
+	<b>Vraag:</b> <small>(<span id="progress"></span>)</small><br>
 	<div id="question"></div><br>
 	<br>
 	<input type="button" id="showAnswerButton" onclick="showAnswer()" value="Laat antwoord zien!">
@@ -56,8 +56,9 @@ var questionset=/*###QUESTIONSET###*/;
 </div>
 <div id="rescontainer">
 	<b>Je hebt alle vragen gehad!</b><br>
-	<p>Je had <span id="numcorrect"></span> vragen goed van de in totaal <span id="numtotal"></span> vragen.</p>
+	<p>Je had <span id="numcorrect"></span> <span id="numcorrectvraag"></span> goed van de in totaal <span id="numtotal"></span> <span id="numtotalvraag"></span>.</p>
 	<p id="allcorrectp"><b>Gefeliciteerd met je prestatie! :D</b></p>
+	<p id="allwrongp"><b>Niet erg, gewoon nog een keer proberen!</b></p>
 	<input type="button" onclick="startQuiz()" value="Nog een keer?">
 </div>
 </body>
diff --git a/modules/zelfoverhoor/qs.js b/modules/zelfoverhoor/qs.js
index 6b04487..43d68f0 100644
--- a/modules/zelfoverhoor/qs.js
+++ b/modules/zelfoverhoor/qs.js
@@ -15,15 +15,29 @@ function startQuiz(){
 	showCurrent();
 }
 
+function simpleFormat(text){
+	return text
+		.replace(/&/g,"&amp;")
+		.replace(/</g,"&lt;")
+		.replace(/>/g,"&gt;")
+		.replace(/\n/g,"<br>");
+}
+
+function pluralVraag(n){
+	if(n==1)return "vraag";
+	else return "vragen";
+}
+
 function showCurrent(){
 	document.getElementById("qcontainer").classList.remove("invisible");
 	document.getElementById("rescontainer").classList.add("invisible");
 	document.getElementById("answercontainer").classList.add("invisible");
 	document.getElementById("showAnswerButton").classList.remove("invisible");
+	document.getElementById("progress").innerHTML=(currentidx+1)+"/"+questions.length;
 
 	var qdiv=document.getElementById("question");
 	clearElement(qdiv);
-	qdiv.appendChild(document.createTextNode(questions[currentidx].q));
+	qdiv.innerHTML=simpleFormat(questions[currentidx].q);
 }
 
 function showAnswer(){
@@ -32,19 +46,26 @@ function showAnswer(){
 
 	var adiv=document.getElementById("answer");
 	clearElement(adiv);
-	adiv.appendChild(document.createTextNode(questions[currentidx].a));
+	adiv.innerHTML=simpleFormat(questions[currentidx].a);
 }
 
 function finishQuiz(){
 	document.getElementById("qcontainer").classList.add("invisible");
 	document.getElementById("rescontainer").classList.remove("invisible");
 	document.getElementById("numcorrect").innerHTML=numcorrect;
+	document.getElementById("numcorrectvraag").innerHTML=pluralVraag(numcorrect);
 	document.getElementById("numtotal").innerHTML=questions.length;
+	document.getElementById("numtotalvraag").innerHTML=pluralVraag(questions.length);
 	if(numcorrect==questions.length){
 		document.getElementById("allcorrectp").classList.remove("invisible");
 	} else {
 		document.getElementById("allcorrectp").classList.add("invisible");
 	}
+	if(numcorrect==0){
+		document.getElementById("allwrongp").classList.remove("invisible");
+	} else {
+		document.getElementById("allwrongp").classList.add("invisible");
+	}
 }
 
 function advance(corr){