Add FSA progress bar and some bonus point counting

Resolves #14

web/index.html

@@ -91,7 +91,11 @@
 				</div>
 				<form>
 				</form>
-				<div id="fsateamcounttroll"></div>
+				<div id="fsastuff">
+					<div id="fsabonuspointsinfo"></div>
+					<div id="fsateamcounttroll"></div>
+					<div id="fsapointbar"><div></div></div>
+				</div>
 				<input type="button" value="Submit" onclick="submitQuiz()" style="background: #008029" id="quizSubmitButton">
 				<input type="button" value="Abort" onclick="abortQuiz()">
 				<span id="submitinfo"></span>

web/quiz.js

@@ -5,16 +5,14 @@ function showFSATeamCountTroll() {
 
 }
 
-function updateFSATeamCountTroll() {
+function updateFSATeamCountTroll(time) {
 
 	if (state.fsaTeamCountTroll > (128*Math.random())) {
 		showFSATeamCountTroll()
 		return
 	}
 
-	// `|| state.submitTime` is a workaround for saved Qs that don't have a time set yet
-	var time = state.questions[state.currentQuestion].time || state.submitTime
-	var timeratio = 1 - (state.submitTimer / time)
+	var timeratio = 1 - state.submitTimer / time
 	var slowAnswerChance = Math.random()*2*Math.pow(timeratio, 2)
 	var quickAnswerChance = (Math.random()+Math.sqrt(69/time))/4
 	var chance = Math.round(slowAnswerChance + quickAnswerChance)
@@ -26,6 +24,32 @@ function updateFSATeamCountTroll() {
 
 }
 
+function updateFSABonusPoints(time) {
+
+	if (state.waitNextQuestion)
+		return
+
+	var bonuspart = (state.submitTimer - 0.333 * time) / (time * 0.666)
+
+	var barel = document.querySelector('#fsapointbar > div')
+	barel.style.width = Math.round(bonuspart*100) + '%'
+
+	var bonusinfoel = document.getElementById('fsabonuspointsinfo')
+	var points = Math.round(bonuspart*10)
+	bonusinfoel.innerHTML = ((points > 0) ? points : 'No') + ' Bonus points'
+
+}
+
+function updateFSAStuff() {
+
+	// `|| state.submitTime` is a workaround for saved Qs that don't have a time set yet
+	var time = state.questions[state.currentQuestion].time || state.submitTime
+
+	updateFSABonusPoints(time)
+	updateFSATeamCountTroll(time)
+
+}
+
 function updateTotalTimer() {
 
 	var timerEls = document.querySelectorAll('.totaltimer')
@@ -39,7 +63,7 @@ function updateTotalTimer() {
 	localStorage.setItem('state', JSON.stringify(state))
 
 	if (state.style == 'FSA')
-		updateFSATeamCountTroll()
+		updateFSAStuff()
 
 }
 
@@ -88,22 +112,24 @@ function updateSubmitInfo() {
 	if (getRule('questionTimeout')) {
 		if (state.submitTimer > 0) {
 			if (getRule('allowQOvertime'))
-				si.innerHTML = ('Losing bonus points in ' + formatTime(state.submitTimer))
+				si.innerHTML = ('Next question timer starts in ' + formatTime(state.submitTimer))
 			else
 				si.innerHTML = ( 'Question failed in ' + formatTime(state.submitTimer))
 		} else {
 			if (getRule('allowQOvertime'))
-				document.getElementById('submitinfo').innerHTML = 'Bonus points lost.'
+				document.getElementById('submitinfo').innerHTML = 'Next question timer started.'
 		}
 	}
 
 	var lastQuestion = (state.currentQuestion == (state.questions.length - 1))
 
-	button.value = lastQuestion || !getRule('sequential') ? 'Submit Answers' : 'Next Question'
+	button.value = lastQuestion || !getRule('sequential') ? 'Submit Answers' :
+		((state.submitTimer > 0) ? 'Submit' : 'Next Question')
 
 }
 
 function resetQuestionResponse(qn) {
+
 	var q = document.querySelector('#quiz form #question' + qn)
 	var inputs = q.querySelectorAll('input')
 
@@ -118,6 +144,7 @@ function resetQuestionResponse(qn) {
 				break;
 		}
 	}
+
 }
 
 function updateSubmitTimer() {
@@ -196,6 +223,9 @@ function nextQuestion() {
 	if (state.style == 'FSA') {
 		state.fsaTeamCountTroll = 0
 		showFSATeamCountTroll()
+		// a lil' surprise
+		document.querySelector('#fsapointbar > div').style.background =
+			(Math.random() < 0.05) ? "left / auto 100% url('nyan.png')" : "darkred"
 	}
 
 	// Start next question
@@ -255,6 +285,9 @@ function renderQuiz() {
 
 	}
 
+	var fsastuffel = document.getElementById('fsastuff')
+	fsastuffel.style.display = (state.style == 'FSA') ? 'block' : 'none'
+
 }
 
 

web/style.css

@@ -189,8 +189,31 @@ input[type="radio"]:hover + p, input[type="checkbox"]:hover + p {
 	padding: 12px 0;
 }
 
+#fsastuff {
+	display: none;
+}
+
+#fsabonuspointsinfo {
+	float: left;
+	font-size: 15px;
+	font-style: italic;
+}
+
 #fsateamcounttroll {
 	text-align: right;
 	font-size: 15px;
 	font-style: italic;
 }
+
+#fsapointbar {
+	width: 100%;
+	height: 42px;
+	border: 1px solid black
+}
+
+#fsapointbar > div {
+	height: 100%;
+	background: darkred;
+	width: 100%;
+	transition: 1s linear width;
+}