From ba997ddf5b6b0ff2c6d47cff8bee89da38aed05d 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 @@
-