Finessing of client.
This commit is contained in:
parent
aab1a2815e
commit
93552023f6
@ -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')
|
||||
}
|
||||
@ -583,6 +608,3 @@ const $question_options = $("#quiz-question-options");
|
||||
|
||||
apply_settings(display_settings);
|
||||
check_started();
|
||||
|
||||
// TODO Timeout Function
|
||||
// TODO Send data to server
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user