viveksantayana/ska-referee-test
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases 19 Wiki Activity

Finessing of client.

Browse Source
This commit is contained in:
Vivek Santayana
2021-12-01 00:48:38 +00:00
parent faeaeb8b2c
commit 7caf54a5ba
2 changed files with 83 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
ref-test/quiz/static/js/quiz.js
View File

@@ -21,20 +21,23 @@ $("#btn-toggle-navigator").click(function(event){
if ($quiz_navigator.is(":hidden")) { if ($quiz_navigator.is(":hidden")) {
if ($quiz_settings.is(":visible")) { if ($quiz_settings.is(":visible")) {
toggle_settings = true; toggle_settings = true;
$quiz_settings.hide(); $quiz_settings.fadeOut();
} }
$quiz_render.hide(); $quiz_render.fadeOut();
$quiz_navigator.show(); $quiz_navigator.fadeIn();
$(".navigator-text").show(); $(".navigator-text").fadeIn();
$(".review-text").hide(); $(".review-text").fadeOut();
toggle_navigator = false; toggle_navigator = false;
$quiz_navigator.focus();
} else { } else {
$quiz_navigator.hide(); $quiz_navigator.fadeOut();
if (toggle_settings) { if (toggle_settings) {
$quiz_settings.show(); $quiz_settings.fadeIn();
$quiz_settings.focus()
toggle_settings = false; toggle_settings = false;
} else { } else {
$quiz_render.show(); $quiz_render.fadeIn();
$question_title.focus();
} }
} }
event.preventDefault(); event.preventDefault();
@@ -44,27 +47,31 @@ $("#btn-toggle-settings").click(function(event){
if (($quiz_settings).is(":hidden")) { if (($quiz_settings).is(":hidden")) {
if ($quiz_navigator.is(":visible")) { if ($quiz_navigator.is(":visible")) {
toggle_navigator = true; toggle_navigator = true;
$quiz_navigator.hide(); $quiz_navigator.fadeOut();
} }
$quiz_render.hide(); $quiz_render.fadeOut();
$quiz_settings.show(); $quiz_settings.fadeIn();
$quiz_settings.focus()
toggle_settings = false; toggle_settings = false;
} else { } else {
$quiz_settings.hide(); $quiz_settings.fadeOut();
if (toggle_navigator) { if (toggle_navigator) {
$quiz_navigator.show(); $quiz_navigator.fadeIn();
toggle_navigator = false; toggle_navigator = false;
$quiz_navigator.focus();
} else { } else {
$quiz_render.show(); $quiz_render.fadeIn();
$question_title.focus();
} }
} }
event.preventDefault(); event.preventDefault();
}); });
$(".btn-quiz-return").click(function(event){ $(".btn-quiz-return").click(function(event){
$quiz_navigator.hide(); $quiz_navigator.fadeOut();
$quiz_settings.hide(); $quiz_settings.fadeOut();
$quiz_render.show(); $quiz_render.fadeIn();
$question_title.focus();
toggle_settings = false; toggle_settings = false;
toggle_navigator = false; toggle_navigator = false;
event.preventDefault(); event.preventDefault();
@@ -78,8 +85,9 @@ $("#navigator-container").on("click", ".q-navigator-button", function(event){
check_answered(); check_answered();
update_navigator(); update_navigator();
current_question = parseInt($(this).attr("name")); current_question = parseInt($(this).attr("name"));
$quiz_render.show(); $quiz_render.fadeIn();
$quiz_navigator.hide(); $question_title.focus();
$quiz_navigator.fadeOut();
toggle_navigator = false; toggle_navigator = false;
toggle_settings = false; toggle_settings = false;
render_question(); render_question();
@@ -100,8 +108,8 @@ $(".q-question-nav").click(function(event){
} }
} else if ($(this).hasClass("q-navigator-button")) { } else if ($(this).hasClass("q-navigator-button")) {
current_question = $(this).attr("name"); current_question = $(this).attr("name");
$quiz_render.show(); $quiz_render.fadeIn();
$quiz_navigator.hide(); $quiz_navigator.fadeOut();
toggle_navigator = false; toggle_navigator = false;
toggle_settings = false; toggle_settings = false;
} }
@@ -126,12 +134,6 @@ $("#q-nav-flag").click(function(event){
}); });
$("#btn-start-quiz").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({ $.ajax({
url: `/api/questions/`, url: `/api/questions/`,
@@ -139,6 +141,12 @@ $("#btn-start-quiz").click(function(event){
data: JSON.stringify({'_id': _id}), data: JSON.stringify({'_id': _id}),
contentType: "application/json", contentType: "application/json",
success: function(response) { 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; time_limit = response.time_limit;
start_time = response.start_time; start_time = response.start_time;
questions = response.questions; questions = response.questions;
@@ -149,15 +157,32 @@ $("#btn-start-quiz").click(function(event){
render_question(); render_question();
build_navigator(); build_navigator();
check_flag(); check_flag();
if (time_limit != 'null') { if (time_limit != 'null' && time_limit != null) {
$("#q-timer-widget").fadeIn();
time_remaining = get_time_remaining(); time_remaining = get_time_remaining();
clock = setInterval(timer, 1000); clock = setInterval(timer, 1000);
} else {
$("#q-timer-widget").hide();
} }
}, },
error: function(response) { error: function(response) {
console.log(response); if (typeof response.responseJSON.error === 'string' || response.responseJSON.error instanceof String) {
alert.innerHTML = alert.innerHTML + `
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<i class="bi bi-exclamation-triangle-fill" title="Danger"></i>
${response.responseJSON.error}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
`;
} else if (response.responseJSON.error instanceof Array) {
for (var i = 0; i < response.responseJSON.error.length; i ++) {
alert.innerHTML = alert.innerHTML + `
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<i class="bi bi-exclamation-triangle-fill" title="Danger"></i>
${response.responseJSON.error[i]}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
`;
}
}
} }
}); });
@@ -177,20 +202,21 @@ $("#q-review-answers").click(function(event){
if ($quiz_navigator.is(":hidden")) { if ($quiz_navigator.is(":hidden")) {
if ($quiz_settings.is(":visible")) { if ($quiz_settings.is(":visible")) {
toggle_settings = true; toggle_settings = true;
$quiz_settings.hide(); $quiz_settings.fadeOut();
} }
$quiz_render.hide(); $quiz_render.fadeOut();
$quiz_navigator.show(); $quiz_navigator.fadeIn();
$(".navigator-text").hide(); $(".navigator-text").fadeOut();
$(".review-text").show(); $(".review-text").fadeIn();
toggle_navigator = false; toggle_navigator = false;
$quiz_navigator.focus();
} else { } else {
$quiz_navigator.hide(); $quiz_navigator.fadeOut();
if (toggle_settings) { if (toggle_settings) {
$quiz_settings.show(); $quiz_settings.fadeIn();
toggle_settings = false; toggle_settings = false;
} else { } else {
$quiz_render.show(); $quiz_render.fadeIn();
} }
} }
event.preventDefault(); event.preventDefault();
@@ -460,12 +486,12 @@ function update_navigator() {
} }
function start() { function start() {
$("#btn-start-quiz").hide(); $("#btn-start-quiz").fadeOut();
$(".btn-quiz-return").show(); $(".btn-quiz-return").fadeIn();
$(".quiz-console").show(); $(".quiz-console").fadeIn();
$("#quiz-settings").hide(); $("#quiz-settings").fadeOut();
$("#quiz-navigator").hide(); $("#quiz-navigator").fadeOut();
$(".quiz-start-text").hide(); $(".quiz-start-text").fadeOut();
questions = JSON.parse(window.localStorage.getItem('questions')); questions = JSON.parse(window.localStorage.getItem('questions'));
total_questions = questions.length; total_questions = questions.length;
@@ -485,11 +511,10 @@ function start() {
render_question(); render_question();
build_navigator(); build_navigator();
check_flag(); check_flag();
if (time_limit != 'null') { if (time_limit != 'null' && time_limit != null) {
$("#q-timer-widget").fadeIn();
time_remaining = get_time_remaining(); time_remaining = get_time_remaining();
clock = setInterval(timer, 1000); clock = setInterval(timer, 1000);
} else {
$("#q-timer-widget").hide();
} }
} }
@@ -540,9 +565,9 @@ function timer() {
} }
function stop() { function stop() {
$quiz_render.hide(); $quiz_render.fadeOut();
$quiz_navigator.hide(); $quiz_navigator.fadeOut();
$quiz_timeout.show(); $quiz_timeout.fadeIn();
$("#btn-toggle-navigator").addClass('disabled'); $("#btn-toggle-navigator").addClass('disabled');
$("#btn-toggle-settings").addClass('disabled') $("#btn-toggle-settings").addClass('disabled')
} }
@@ -583,6 +608,3 @@ const $question_options = $("#quiz-question-options");
apply_settings(display_settings); apply_settings(display_settings);
check_started(); check_started();
// TODO Timeout Function
// TODO Send data to server

8
ref-test/quiz/templates/quiz/client.html
View File

@@ -8,7 +8,7 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="container quiz-panel" id="quiz-settings"> <div class="container quiz-panel" id="quiz-settings" tabindex="-1">
<h1>Adjust Display Settings</h1> <h1>Adjust Display Settings</h1>
<div class="container quiz-start-text"> <div class="container quiz-start-text">
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. 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 @@
</div> </div>
</div> </div>
</div> </div>
<div class="container quiz-panel" style="display: none;" id="quiz-navigator"> <div class="container quiz-panel" style="display: none;" id="quiz-navigator" tabindex="-1">
<h1 class="navigator-text"> <h1 class="navigator-text">
Navigator Question Grid
</h1> </h1>
<h1 class="review-text" style="display: none;"> <h1 class="review-text" style="display: none;">
Review Your Answers Review Your Answers
</h1> </h1>
<div class="navigator-text"> <div class="navigator-text">
This is the exam navigator. It displays the progress you have on the exam so far. Each question is represented by an icon below, and you can click on each icon to skip to that question. This question grid displays the progress you have on the exam so far. Each question is represented by an icon below, and you can click on each icon to skip to that question.
The icons below are colour-coded to represent the status of each question. The icons below are colour-coded to represent the status of each question.
</div> </div>