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 73845486b3
commit ba997ddf5b
2 changed files with 83 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
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_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 + `
<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_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();

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

@ -8,7 +8,7 @@
{% endblock %}
{% 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>
<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.
@ -156,15 +156,15 @@
</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">
Navigator
Question Grid
</h1>
<h1 class="review-text" style="display: none;">
Review Your Answers
</h1>
<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.
</div>
@ -237,8 +237,8 @@
</div>
<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-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-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>
</div>
<div class="control-button-container">
<a href="#" class="btn btn-primary" id="q-review-answers" title="Submit Answers">Submit Answers</a>