From abfa7b21bacc74bd6226a87f9b1f0ecde581dfec Mon Sep 17 00:00:00 2001 From: viveksantayana Date: Wed, 1 Dec 2021 00:48:38 +0000 Subject: [PATCH] Finessing of client. --- ref-test/quiz/static/js/quiz.js | 132 +++++++++++++---------- ref-test/quiz/templates/quiz/client.html | 12 +-- 2 files changed, 83 insertions(+), 61 deletions(-) diff --git a/ref-test/quiz/static/js/quiz.js b/ref-test/quiz/static/js/quiz.js index b71ed0e..344d849 100644 --- a/ref-test/quiz/static/js/quiz.js +++ b/ref-test/quiz/static/js/quiz.js @@ -21,20 +21,23 @@ $("#btn-toggle-navigator").click(function(event){ if ($quiz_navigator.is(":hidden")) { if ($quiz_settings.is(":visible")) { toggle_settings = true; - $quiz_settings.hide(); + $quiz_settings.fadeOut(); } - $quiz_render.hide(); - $quiz_navigator.show(); - $(".navigator-text").show(); - $(".review-text").hide(); + $quiz_render.fadeOut(); + $quiz_navigator.fadeIn(); + $(".navigator-text").fadeIn(); + $(".review-text").fadeOut(); toggle_navigator = false; + $quiz_navigator.focus(); } else { - $quiz_navigator.hide(); + $quiz_navigator.fadeOut(); if (toggle_settings) { - $quiz_settings.show(); + $quiz_settings.fadeIn(); + $quiz_settings.focus() toggle_settings = false; } else { - $quiz_render.show(); + $quiz_render.fadeIn(); + $question_title.focus(); } } event.preventDefault(); @@ -44,27 +47,31 @@ $("#btn-toggle-settings").click(function(event){ if (($quiz_settings).is(":hidden")) { if ($quiz_navigator.is(":visible")) { toggle_navigator = true; - $quiz_navigator.hide(); + $quiz_navigator.fadeOut(); } - $quiz_render.hide(); - $quiz_settings.show(); + $quiz_render.fadeOut(); + $quiz_settings.fadeIn(); + $quiz_settings.focus() toggle_settings = false; } else { - $quiz_settings.hide(); + $quiz_settings.fadeOut(); if (toggle_navigator) { - $quiz_navigator.show(); + $quiz_navigator.fadeIn(); toggle_navigator = false; + $quiz_navigator.focus(); } else { - $quiz_render.show(); + $quiz_render.fadeIn(); + $question_title.focus(); } } event.preventDefault(); }); $(".btn-quiz-return").click(function(event){ - $quiz_navigator.hide(); - $quiz_settings.hide(); - $quiz_render.show(); + $quiz_navigator.fadeOut(); + $quiz_settings.fadeOut(); + $quiz_render.fadeIn(); + $question_title.focus(); toggle_settings = false; toggle_navigator = false; event.preventDefault(); @@ -78,8 +85,9 @@ $("#navigator-container").on("click", ".q-navigator-button", function(event){ check_answered(); update_navigator(); current_question = parseInt($(this).attr("name")); - $quiz_render.show(); - $quiz_navigator.hide(); + $quiz_render.fadeIn(); + $question_title.focus(); + $quiz_navigator.fadeOut(); toggle_navigator = false; toggle_settings = false; render_question(); @@ -100,8 +108,8 @@ $(".q-question-nav").click(function(event){ } } else if ($(this).hasClass("q-navigator-button")) { current_question = $(this).attr("name"); - $quiz_render.show(); - $quiz_navigator.hide(); + $quiz_render.fadeIn(); + $quiz_navigator.fadeOut(); toggle_navigator = false; toggle_settings = false; } @@ -126,12 +134,6 @@ $("#q-nav-flag").click(function(event){ }); $("#btn-start-quiz").click(function(event){ - $(this).hide(); - $(".btn-quiz-return").show(); - $(".quiz-console").show(); - $("#quiz-settings").hide(); - $("#quiz-navigator").hide(); - $(".quiz-start-text").hide(); $.ajax({ url: `/api/questions/`, @@ -139,6 +141,12 @@ $("#btn-start-quiz").click(function(event){ data: JSON.stringify({'_id': _id}), contentType: "application/json", success: function(response) { + $(this).fadeOut(); + $(".btn-quiz-return").fadeIn(); + $(".quiz-console").fadeIn(); + $("#quiz-settings").fadeOut(); + $("#quiz-navigator").fadeOut(); + $(".quiz-start-text").fadeOut(); time_limit = response.time_limit; start_time = response.start_time; questions = response.questions; @@ -149,15 +157,32 @@ $("#btn-start-quiz").click(function(event){ render_question(); build_navigator(); check_flag(); - if (time_limit != 'null') { + if (time_limit != 'null' && time_limit != null) { + $("#q-timer-widget").fadeIn(); time_remaining = get_time_remaining(); clock = setInterval(timer, 1000); - } else { - $("#q-timer-widget").hide(); } }, error: function(response) { - console.log(response); + if (typeof response.responseJSON.error === 'string' || response.responseJSON.error instanceof String) { + alert.innerHTML = alert.innerHTML + ` + + `; + } else if (response.responseJSON.error instanceof Array) { + for (var i = 0; i < response.responseJSON.error.length; i ++) { + alert.innerHTML = alert.innerHTML + ` + + `; + } + } } }); @@ -177,20 +202,21 @@ $("#q-review-answers").click(function(event){ if ($quiz_navigator.is(":hidden")) { if ($quiz_settings.is(":visible")) { toggle_settings = true; - $quiz_settings.hide(); + $quiz_settings.fadeOut(); } - $quiz_render.hide(); - $quiz_navigator.show(); - $(".navigator-text").hide(); - $(".review-text").show(); + $quiz_render.fadeOut(); + $quiz_navigator.fadeIn(); + $(".navigator-text").fadeOut(); + $(".review-text").fadeIn(); toggle_navigator = false; + $quiz_navigator.focus(); } else { - $quiz_navigator.hide(); + $quiz_navigator.fadeOut(); if (toggle_settings) { - $quiz_settings.show(); + $quiz_settings.fadeIn(); toggle_settings = false; } else { - $quiz_render.show(); + $quiz_render.fadeIn(); } } event.preventDefault(); @@ -460,12 +486,12 @@ function update_navigator() { } function start() { - $("#btn-start-quiz").hide(); - $(".btn-quiz-return").show(); - $(".quiz-console").show(); - $("#quiz-settings").hide(); - $("#quiz-navigator").hide(); - $(".quiz-start-text").hide(); + $("#btn-start-quiz").fadeOut(); + $(".btn-quiz-return").fadeIn(); + $(".quiz-console").fadeIn(); + $("#quiz-settings").fadeOut(); + $("#quiz-navigator").fadeOut(); + $(".quiz-start-text").fadeOut(); questions = JSON.parse(window.localStorage.getItem('questions')); total_questions = questions.length; @@ -485,11 +511,10 @@ function start() { render_question(); build_navigator(); check_flag(); - if (time_limit != 'null') { + if (time_limit != 'null' && time_limit != null) { + $("#q-timer-widget").fadeIn(); time_remaining = get_time_remaining(); clock = setInterval(timer, 1000); - } else { - $("#q-timer-widget").hide(); } } @@ -540,9 +565,9 @@ function timer() { } function stop() { - $quiz_render.hide(); - $quiz_navigator.hide(); - $quiz_timeout.show(); + $quiz_render.fadeOut(); + $quiz_navigator.fadeOut(); + $quiz_timeout.fadeIn(); $("#btn-toggle-navigator").addClass('disabled'); $("#btn-toggle-settings").addClass('disabled') } @@ -582,7 +607,4 @@ const $question_options = $("#quiz-question-options"); // Execution on Load apply_settings(display_settings); -check_started(); - -// TODO Timeout Function -// TODO Send data to server +check_started(); \ No newline at end of file diff --git a/ref-test/quiz/templates/quiz/client.html b/ref-test/quiz/templates/quiz/client.html index 46fa1f1..8ace2bf 100644 --- a/ref-test/quiz/templates/quiz/client.html +++ b/ref-test/quiz/templates/quiz/client.html @@ -8,7 +8,7 @@ {% endblock %} {% block content %} -
+

Adjust Display Settings

You can use this panel to adjust the display settings for the exam. Please use the menu below to select the font face and font size. Below is a sample question so you can see how the exam will render with your chosen settings. @@ -156,15 +156,15 @@
-