From 58118abb7768242bd34c8ed023fc728daf376ddf Mon Sep 17 00:00:00 2001
From: Oskar <o.winkels@fasttube.de>
Date: Wed, 15 Jan 2020 18:02:00 +0100
Subject: [PATCH] Add total timer

---
 src/index.html |  4 +-
 src/main.js    | 99 +++++++++++++++++++++++++++++++++++++-------------
 src/style.css  |  4 --
 3 files changed, 76 insertions(+), 31 deletions(-)

diff --git a/src/index.html b/src/index.html
index c530b8d..ed22496 100644
--- a/src/index.html
+++ b/src/index.html
@@ -46,6 +46,7 @@
 
 			<div id="quiz" class="view">
 				<h1></h1>
+				<h3 class="totaltimer">0:00</h3>
 				<div id="sharing">
 					<input type="button" value="Share This Quiz" onclick="shareQuiz()" class="center">
 					<br><a id="shareLink"></a><br>
@@ -58,7 +59,8 @@
 
 			<div id="postscreen" class="view">
 				<h1></h1>
-				<input type="button" value="Restart" onclick="startQuiz()" class="center">
+				<h3 class="totaltimer">0:00</h3>
+				<input type="button" value="Restart" onclick="reStartQuiz()" class="center">
 				<input type="button" value="Create New Quiz" onclick="changeView('spreadsheet')" class="center">
 			</div>
 
diff --git a/src/main.js b/src/main.js
index c97e9d8..dd2ec2b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,9 +3,11 @@ const defaultState = {
 	id: null,
 	title: null,
 	questions: [],
-	timer: 0,
-	interval: null,
-	success: 0
+	success: 0,
+	submitTimer: 0,
+	submitInterval: null,
+	totalTimer: 0,
+	totalInterval: null,
 }
 
 var state = defaultState
@@ -91,38 +93,66 @@ async function shareQuiz() {
 }
 
 
-function updateTimer() {
+function updateTotalTimer() {
 
-	var button = document.getElementById('quizSubmitButton')
+	var timerEls = document.querySelectorAll('.totaltimer')
 
-	if (state.timer > 0) {
+	var minutes = Math.floor(state.totalTimer / 60)
+	var seconds = state.totalTimer % 60
 
-		button.value = 'Wait ' + state.timer + 's'
-		button.disabled = true
-		state.timer -= 1
+	var text = minutes + ':' + ('0' + seconds).slice(-2)
 
-	} else {
+	for (timerEl of timerEls)
+		timerEl.innerHTML = text
 
-		button.value = 'Submit Answers'
-		button.disabled = false
-		clearInterval(state.interval)
-
-	}
+	state.totalTimer++
 
 	localStorage.setItem('state', JSON.stringify(state))
 
 }
 
 
-function startTimer(time) {
+function startTotalTimer() {
 
-	state.timer = time || 30
+	console.log('Setting totalTimer to ' + state.totalTimer + ' seconds.')
 
-	console.log('Setting timer to ' + state.timer + ' seconds.')
+	updateTotalTimer()
 
-	updateTimer()
+	state.totalInterval = setInterval(updateTotalTimer, 1000)
 
-	state.interval = setInterval(updateTimer, 1000)
+}
+
+
+function updateSubmitTimer() {
+
+	var button = document.getElementById('quizSubmitButton')
+
+	if (state.submitTimer > 0) {
+
+		button.value = 'Wait ' + state.submitTimer + 's'
+		button.disabled = true
+		state.submitTimer -= 1
+
+	} else {
+
+		button.value = 'Submit Answers'
+		button.disabled = false
+		clearInterval(state.submitInterval)
+
+	}
+
+}
+
+
+function startSubmitTimer(time) {
+
+	state.submitTimer = time || 30
+
+	console.log('Setting submitTimer to ' + state.submitTimer + ' seconds.')
+
+	updateSubmitTimer()
+
+	state.submitInterval = setInterval(updateSubmitTimer, 1000)
 
 }
 
@@ -230,15 +260,30 @@ function startQuiz() {
 
 	changeView('quiz')
 
-	if (state.timer > 0)
-		startTimer(state.timer)
+	if (state.submitTimer > 0)
+		startSubmitTimer(state.submitTimer)
 	else
-		updateTimer()
+		updateSubmitTimer()
+
+	startTotalTimer()
 
 	console.log('Quiz started/resumed')
 
 }
 
+function reStartQuiz() {
+
+	console.log('Restarting quiz');
+
+	state.totalTimer = 0
+	state.submitTimer = 0
+	state.success = 0
+
+	startQuiz()
+
+}
+
+
 function updateTitles() {
 	document.querySelector('#prescreen h1').innerHTML = state.title || ''
 	document.querySelector('#quiz h1').innerHTML = state.title || ''
@@ -275,8 +320,10 @@ function endQuiz() {
 	document.querySelector('#quiz form').innerHTML = ''
 	changeView('postscreen')
 
-	if (state.interval)
-		clearInterval(state.interval)
+	if (state.submitInterval)
+		clearInterval(state.submitInterval)
+
+	clearInterval(state.totalInterval)
 
 	console.log('Quiz ended')
 
@@ -335,7 +382,7 @@ function submitQuiz() {
 
 	if (!state.success) {
 		renderQuiz()
-		startTimer()
+		startSubmitTimer()
 		alert(text)
 	}
 
diff --git a/src/style.css b/src/style.css
index 2cc41ac..7977139 100644
--- a/src/style.css
+++ b/src/style.css
@@ -104,10 +104,6 @@ input[type="radio"]:hover + p {
 	background: #ddd;
 }
 
-footer {
-	height: 200px;
-}
-
 #sharing a {
 	font-size: 16px;
 }