Saving progress when tab is refreshed or closed

js/main.js

@@ -1,19 +1,71 @@
+let new_test = false
+
 window.onbeforeunload = function (e) {
-	e = e || window.event
+    e = e || window.event;
+    if(!new_test) localStorage.setItem('close_time', Date.now() - start_time)
 
 	// For IE and Firefox prior to version 4
 	if (e) {
 		e.returnValue = 'Sure?'
 	}
 
-	// For Safari
-	return 'Sure?'
+    // For Safari
+    return 'Sure?';
+};
+
+const saveState = (key, value) => {
+    localStorage.setItem(key, value)
 }
+
+let questions_array = []
+let user_answers_array = []
+let real_answers_array = []
+let right_or_wrong_array = []
+let marks = 0;
+let current_q_no = 1;
+let start_time
+let close_time
+let end_time
+
+window.onload = function () {
+    user_answers_array = JSON.parse(localStorage.getItem('user_answers_array')) || []
+    student_name = localStorage.getItem('student_name') || ""
+    amount_of_questions = parseInt(localStorage.getItem('amount_of_questions')) || null
+
+    if(student_name !== "" && amount_of_questions > user_answers_array.length) {
+        questions_array = JSON.parse(localStorage.getItem('questions_array')) || []
+        real_answers_array = JSON.parse(localStorage.getItem('real_answers_array')) || []
+        right_or_wrong_array = JSON.parse(localStorage.getItem('right_or_wrong_array')) || []
+        marks = parseInt(localStorage.getItem('marks')) || 0
+        current_q_no = parseInt(localStorage.getItem('current_q_no')) || 1
+        q_type = localStorage.getItem('q_type') || ""
+        diff_lvl = localStorage.getItem('diff_lvl') || ""
+        negative_marking = JSON.parse(localStorage.getItem('negative_marking')) || null
+        close_time = parseInt(localStorage.getItem('close_time')) || 0
+        main_form_div.remove()
+        start_test_div.style.display = 'flex'
+        createTestpage()
+        return
+    }
+
+    localStorage.clear()
+}
+
 // TEST FORM NODES REFERENCES
 const main_form_div = document.querySelector('.test_form')
 const form_submit_btn = document.querySelector('#submit_test_form')
 form_submit_btn.addEventListener('click', (e) => {
     e.preventDefault()
+    localStorage.clear()
+    questions_array = []
+    user_answers_array = []
+    real_answers_array = []
+    right_or_wrong_array = []
+    marks = 0;
+    current_q_no = 1;
+    start_time
+    close_time
+    end_time
     getValues()
 })
 
@@ -65,13 +117,6 @@ next_btn.addEventListener('click', nextQuestion)
 // 5. Keep the number of question in check
 // 6. Keep changing the time countdown above
 
-let questions_array = []
-let user_answers_array = []
-let real_answers_array = []
-let right_or_wrong_array = []
-let marks = 0
-let current_q_no = 1
-
 function get_min_max_numbers(diff_lvl) {
     let maximum_num;
     let mininum_num;
@@ -165,15 +210,22 @@ function getAnswer(){
         user_answers_array[current_q_no - 1] = ans_of_user;
     else user_answers_array.push(ans_of_user);
 
-    current_q_no = current_q_no+1
+    current_q_no = current_q_no + 1
+
+    saveState("current_q_no", current_q_no)
+    saveState("questions_array", JSON.stringify(questions_array))
+    saveState("user_answers_array", JSON.stringify(user_answers_array))
+    saveState("real_answers_array", JSON.stringify(real_answers_array))
+    saveState("right_or_wrong_array", JSON.stringify(right_or_wrong_array))
+    saveState("marks", marks)
+    saveState("current_q_no", current_q_no)
 
     if (current_q_no == amount_of_questions + 1) {
         sound_player("final_question", "start")
         end_time = Date.now()
-
         return resultGenerator()
     }
-    
+
     questionBoxGenerator()
 }
 
@@ -223,8 +275,10 @@ function examiner(up_number, down_number, sign_of_question, answer_of_student) {
 	real_answers_array.push(real_answer)
 }
 
-function resultGenerator() {
-	total_time = end_time - start_time
+function resultGenerator()  {
+    isNaN(close_time) ? total_time = end_time - start_time : total_time = (end_time - start_time) + close_time
+
+
 	time_taken_seconds = parseInt(total_time / 1000)
 	time_taken_minutes = 00
 	time_taken_hours = 00
@@ -330,9 +384,7 @@ function resultGenerator() {
 
 	result_page.style.display = 'flex'
 }
-
-function questionBoxGenerator(){
-
+function questionBoxGenerator() {
     const quotientBox =  document.querySelector('.quotient_from_user');
     const remainderBox = document.querySelector('.remainder_from_user');
     const answerBox = document.querySelector('.answer_from_user');
@@ -424,8 +476,9 @@ function volume_updater() {
 	}
 }
 
-function createTestpage(){
+function createTestpage() {
     start_time = Date.now()
+
     sound_player("click_sound", "start")
     sound_player("background_music", "stop")
     sound_player("test_page_bg_music", "start", "loop")
@@ -491,6 +544,12 @@ function getValues() {
     diff_lvl = document.querySelector('#difficulty').value;
     amount_of_questions = parseInt(document.querySelector('#no_of_ques').value);
     negative_marking = document.querySelector('#negmarking').checked;
+
+    saveState('student_name', student_name)
+    saveState('q_type', q_type)
+    saveState('diff_lvl', diff_lvl)
+    saveState('amount_of_questions', amount_of_questions)
+    saveState('negative_marking', negative_marking)
 
     max_questions = parseInt(document.querySelector('#no_of_ques').getAttribute('max'))
     if (student_name.length < 1 || isNaN(amount_of_questions) || amount_of_questions > max_questions){
@@ -523,8 +582,7 @@ function prevQuestion() {
 }
 
 function nextQuestion() {
-	if (current_q_no === amount_of_questions || !questions_array[current_q_no])
-		return
+	if (current_q_no === amount_of_questions || !questions_array[current_q_no]) return
 
 	current_q_no++
 	sound_player('click_sound')
@@ -540,6 +598,9 @@ function retakeTest() {
 	right_or_wrong_array = []
 	marks = 0
 	current_q_no = 1
+    start_time = 0
+    end_time = 0
+    close_time = 0
 
 	const answer_divs = document.querySelectorAll('.q_no_div')
 
@@ -553,6 +614,8 @@ function retakeTest() {
 }
 
 function newTest() {
+    localStorage.clear()
+    new_test = true
 	window.location.reload()
 }