viveksantayana/ska-referee-test
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 29d015cdb4
commit 4d81172deb
2 changed files with 83 additions and 61 deletions
Show Stats 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

12
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>
@ -237,8 +237,8 @@
</div> </div>
<div class="control-button-container"> <div class="control-button-container">
<a href="#" class="btn btn-success q-question-nav" id="q-nav-prev" title="Previous Question"><i class="bi bi-caret-left-square-fill"></i>&nbsp;Back</a> <a href="#" class="btn btn-success q-question-nav" id="q-nav-prev" title="Previous Question"><i class="bi bi-caret-left-square-fill"></i>&nbsp;Back</a>
<a href="#" class="btn btn-secondary" id="q-nav-flag" title="Question Un-Flagged. Click to flag for revision."><i class="bi bi-flag-fill"></i></a> <a href="#" class="btn btn-secondary" id="q-nav-flag" title="Question Un-Flagged. Click to flag for revision."><i class="bi bi-flag-fill"></i></a>
<a href="#" class="btn btn-success q-question-nav" id="q-nav-next" title="Next Question">Next&nbsp;<i class="bi bi-caret-right-square-fill"></i></a> <a href="#" class="btn btn-success q-question-nav" id="q-nav-next" title="Next Question">Next&nbsp;<i class="bi bi-caret-right-square-fill"></i></a>
</div> </div>
<div class="control-button-container"> <div class="control-button-container">
<a href="#" class="btn btn-primary" id="q-review-answers" title="Submit Answers">Submit Answers</a> <a href="#" class="btn btn-primary" id="q-review-answers" title="Submit Answers">Submit Answers</a>