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

Added click area to select background colour

Browse Source
This commit is contained in:
Vivek Santayana 2021-12-08 13:21:18 +00:00
parent 08da6d71c4
commit 27706572ed
2 changed files with 33 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,6 +15,10 @@ $("input[name='bg-select']").change(function(){
set_bg_colour($choice);
});
$(".bg-select-area").click(function(event){
$(this).find("input[name='bg-select']").prop("checked", true)
});
$("#btn-toggle-navigator").click(function(event){
check_answered();
update_navigator();
@ -84,7 +88,7 @@ $(".btn-dummy").click(function(event){
$("#navigator-container").on("click", ".q-navigator-button", function(event){
check_answered();
update_navigator();
current_question = parseInt($(this).attr("name"));
current_question = parseInt($(this).prop("name"));
$quiz_navigator.fadeOut();
$quiz_render.fadeIn();
$question_title.focus();
@ -99,16 +103,16 @@ $("#navigator-container").on("click", ".q-navigator-button", function(event){
$(".q-question-nav").click(function(event){
check_answered();
update_navigator();
if ($(this).attr("id") == "q-nav-next") {
if ($(this).prop("id") == "q-nav-next") {
if (current_question < questions.length) {
current_question ++;
}
} else if ($(this).attr("id") == "q-nav-prev") {
} else if ($(this).prop("id") == "q-nav-prev") {
if (current_question > 0) {
current_question --;
}
} else if ($(this).hasClass("q-navigator-button")) {
current_question = $(this).attr("name");
current_question = $(this).prop("name");
$quiz_render.fadeIn();
$quiz_navigator.fadeOut();
toggle_navigator = false;
@ -123,11 +127,11 @@ $("#q-nav-flag").click(function(event){
if (question_status[current_question] != 1) {
question_status[current_question] = 1;
$(this).removeClass().addClass("btn btn-warning");
$(this).attr("title", "Question Flagged for revision. Click to un-flag.");
$(this).prop("title", "Question Flagged for revision. Click to un-flag.");
} else {
question_status[current_question] = 0;
$(this).removeClass().addClass("btn btn-secondary");
$(this).attr("title", "Question Un-Flagged. Click to flag for revision.");
$(this).prop("title", "Question Un-Flagged. Click to flag for revision.");
}
window.localStorage.setItem('question_status', JSON.stringify(question_status));
update_navigator();
@ -185,8 +189,8 @@ $("#btn-start-quiz").click(function(event){
});
$("#quiz-question-options").on("change", ".quiz-option", function(event){
$name = parseInt($(this).attr("name"));
$value = $(this).attr("value");
$name = parseInt($(this).prop("name"));
$value = $(this).prop("value");
answers[$name] = $value;
window.localStorage.setItem('answers', JSON.stringify(answers));
});
@ -378,8 +382,8 @@ function render_question() {
let answered = count_questions(2);
let flagged = count_questions(1);
$progress_skipped.attr('title', `Skipped: ${skipped}`);
$progress_skipped.attr('aria-valuenow', skipped);
$progress_skipped.prop('title', `Skipped: ${skipped}`);
$progress_skipped.prop('aria-valuenow', skipped);
$progress_skipped.css('width', `${skipped}%`);
$skipped_count.text(`Skipped: ${skipped}`);
if (skipped < 1) {
@ -388,8 +392,8 @@ function render_question() {
$skipped_count.fadeIn()
}
$progress_flagged.attr('title', `Flagged: ${flagged}`);
$progress_flagged.attr('aria-valuenow', flagged);
$progress_flagged.prop('title', `Flagged: ${flagged}`);
$progress_flagged.prop('aria-valuenow', flagged);
$progress_flagged.css('width', `${flagged}%`);
$flagged_count.text(`Flagged: ${flagged}`);
if (flagged < 1) {
@ -398,8 +402,8 @@ function render_question() {
$flagged_count.fadeIn()
}
$progress_answered.attr('title', `Answered: ${answered}`);
$progress_answered.attr('aria-valuenow', answered);
$progress_answered.prop('title', `Answered: ${answered}`);
$progress_answered.prop('aria-valuenow', answered);
$progress_answered.css('width', `${answered}%`);
$answered_count.text(`Answered: ${answered}`);
if (answered < 1) {
@ -433,19 +437,19 @@ function check_flag() {
switch (question_status[current_question]) {
case -1:
$nav_flag.removeClass().addClass('btn btn-danger progress-bar-striped');
$nav_flag.attr("title", "Question Incomplete. Click to flag for revision.");
$nav_flag.prop("title", "Question Incomplete. Click to flag for revision.");
break;
case 1:
$nav_flag.removeClass().addClass('btn btn-warning');
$nav_flag.attr("title", "Question Flagged for revision. Click to un-flag.");
$nav_flag.prop("title", "Question Flagged for revision. Click to un-flag.");
break;
case 2:
$nav_flag.removeClass().addClass('btn btn-success');
$nav_flag.attr("title", "Question Answered. Click to flag for revision.");
$nav_flag.prop("title", "Question Answered. Click to flag for revision.");
break;
default:
$nav_flag.removeClass().addClass('btn btn-secondary');
$nav_flag.attr("title", "Question Un-Flagged. Click to flag for revision.");
$nav_flag.prop("title", "Question Un-Flagged. Click to flag for revision.");
}
}
@ -486,19 +490,19 @@ function update_navigator() {
switch (question_status[current_question]) {
case -1:
button.removeClass().addClass("q-navigator-button btn btn-danger progress-bar-striped");
button.attr("title", `Question ${current_question + 1}: Incomplete`);
button.prop("title", `Question ${current_question + 1}: Incomplete`);
break;
case 1:
button.removeClass().addClass("q-navigator-button btn btn-warning");
button.attr("title", `Question ${current_question + 1}: Flagged`);
button.prop("title", `Question ${current_question + 1}: Flagged`);
break;
case 2:
button.removeClass().addClass("q-navigator-button btn btn-success");
button.attr("title", `Question ${current_question + 1}: Answered`);
button.prop("title", `Question ${current_question + 1}: Answered`);
break;
default:
button.removeClass().addClass("q-navigator-button btn btn-secondary disabled");
button.attr("title", `Question ${current_question + 1}: Unseen`);
button.prop("title", `Question ${current_question + 1}: Unseen`);
}
}
}

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

@ -74,43 +74,43 @@
<div class="row gx-5 gy-5 mt-1">
<div class="col">
<h5>Select Background Colour</h5>
<div class="p-3 bg-light text-dark">
<div class="p-3 bg-light text-dark bg-select-area">
<div class="form-check">
<input type="radio" class="form-check-input" id="bg-light" name="bg-select" value="bg-light" checked>
<label for="bg-light" class="form-check-label">Default Light</label>
</div>
</div>
<div class="p-3 q-bg-light-1 text-dark">
<div class="p-3 q-bg-light-1 text-dark bg-select-area">
<div class="form-check">
<input type="radio" class="form-check-input" id="q-bg-light-1" name="bg-select" value="q-bg-light-1">
<label for="q-bg-light-1" class="form-check-label">Light Shade 1</label>
</div>
</div>
<div class="p-3 q-bg-light-2 text-dark">
<div class="p-3 q-bg-light-2 text-dark bg-select-area">
<div class="form-check">
<input type="radio" class="form-check-input" id="q-bg-light-2" name="bg-select" value="q-bg-light-2">
<label for="q-bg-light-2" class="form-check-label">Light Shade 2</label>
</div>
</div>
<div class="p-3 alert-primary text-dark">
<div class="p-3 alert-primary text-dark bg-select-area">
<div class="form-check">
<input type="radio" class="form-check-input" id="alert-primary" name="bg-select" value="alert-primary">
<label for="alert-primary" class="form-check-label">Blue</label>
</div>
</div>
<div class="p-3 alert-secondary text-dark">
<div class="p-3 alert-secondary text-dark bg-select-area">
<div class="form-check">
<input type="radio" class="form-check-input" id="alert-secondary" name="bg-select" value="alert-secondary">
<label for="alert-secondary" class="form-check-label">Grey 1</label>
</div>
</div>
<div class="p-3 alert-dark text-dark">
<div class="p-3 alert-dark text-dark bg-select-area">
<div class="form-check">
<input type="radio" class="form-check-input" id="alert-dark" name="bg-select" value="alert-dark">
<label for="alert-dark" class="form-check-label">Grey 2</label>
</div>
</div>
<div class="p-3 bg-dark text-light">
<div class="p-3 bg-dark text-light bg-select-area">
<div class="form-check">
<input type="radio" class="form-check-input" id="bg-dark" name="bg-select" value="bg-dark">
<label for="bg-dark" class="form-check-label">Dark</label>