summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authortomsmeding <tom.smeding@gmail.com>2017-11-23 22:18:50 +0100
committertomsmeding <tom.smeding@gmail.com>2017-11-23 22:18:50 +0100
commit7068ba98fb668d7ec32ab3be39b2928cf2601522 (patch)
tree2a5b1b48d194903f090b1a82f21fbd6dc4ace497
parent0c52c7e2b604f15c67a0ae127704e7c4d5848a1b (diff)
zelfoverhoor: Improve qs interface
-rw-r--r--modules/zelfoverhoor/qs.html5
-rw-r--r--modules/zelfoverhoor/qs.js25
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){