Add total timer

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>
 

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)
 	}
 

src/style.css

@@ -104,10 +104,6 @@ input[type="radio"]:hover + p {
 	background: #ddd;
 }
 
-footer {
-	height: 200px;
-}
-
 #sharing a {
 	font-size: 16px;
 }