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 b9c4edeb48
commit 2f6de34051
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); 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){ $("#btn-toggle-navigator").click(function(event){
check_answered(); check_answered();
update_navigator(); update_navigator();
@ -84,7 +88,7 @@ $(".btn-dummy").click(function(event){
$("#navigator-container").on("click", ".q-navigator-button", function(event){ $("#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).prop("name"));
$quiz_navigator.fadeOut(); $quiz_navigator.fadeOut();
$quiz_render.fadeIn(); $quiz_render.fadeIn();
$question_title.focus(); $question_title.focus();
@ -99,16 +103,16 @@ $("#navigator-container").on("click", ".q-navigator-button", function(event){
$(".q-question-nav").click(function(event){ $(".q-question-nav").click(function(event){
check_answered(); check_answered();
update_navigator(); update_navigator();
if ($(this).attr("id") == "q-nav-next") { if ($(this).prop("id") == "q-nav-next") {
if (current_question < questions.length) { if (current_question < questions.length) {
current_question ++; current_question ++;
} }
} else if ($(this).attr("id") == "q-nav-prev") { } else if ($(this).prop("id") == "q-nav-prev") {
if (current_question > 0) { if (current_question > 0) {
current_question --; current_question --;
} }
} else if ($(this).hasClass("q-navigator-button")) { } else if ($(this).hasClass("q-navigator-button")) {
current_question = $(this).attr("name"); current_question = $(this).prop("name");
$quiz_render.fadeIn(); $quiz_render.fadeIn();
$quiz_navigator.fadeOut(); $quiz_navigator.fadeOut();
toggle_navigator = false; toggle_navigator = false;
@ -123,11 +127,11 @@ $("#q-nav-flag").click(function(event){
if (question_status[current_question] != 1) { if (question_status[current_question] != 1) {
question_status[current_question] = 1; question_status[current_question] = 1;
$(this).removeClass().addClass("btn btn-warning"); $(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 { } else {
question_status[current_question] = 0; question_status[current_question] = 0;
$(this).removeClass().addClass("btn btn-secondary"); $(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)); window.localStorage.setItem('question_status', JSON.stringify(question_status));
update_navigator(); update_navigator();
@ -185,8 +189,8 @@ $("#btn-start-quiz").click(function(event){
}); });
$("#quiz-question-options").on("change", ".quiz-option", function(event){ $("#quiz-question-options").on("change", ".quiz-option", function(event){
$name = parseInt($(this).attr("name")); $name = parseInt($(this).prop("name"));
$value = $(this).attr("value"); $value = $(this).prop("value");
answers[$name] = $value; answers[$name] = $value;
window.localStorage.setItem('answers', JSON.stringify(answers)); window.localStorage.setItem('answers', JSON.stringify(answers));
}); });
@ -378,8 +382,8 @@ function render_question() {
let answered = count_questions(2); let answered = count_questions(2);
let flagged = count_questions(1); let flagged = count_questions(1);
$progress_skipped.attr('title', `Skipped: ${skipped}`); $progress_skipped.prop('title', `Skipped: ${skipped}`);
$progress_skipped.attr('aria-valuenow', skipped); $progress_skipped.prop('aria-valuenow', skipped);
$progress_skipped.css('width', `${skipped}%`); $progress_skipped.css('width', `${skipped}%`);
$skipped_count.text(`Skipped: ${skipped}`); $skipped_count.text(`Skipped: ${skipped}`);
if (skipped < 1) { if (skipped < 1) {
@ -388,8 +392,8 @@ function render_question() {
$skipped_count.fadeIn() $skipped_count.fadeIn()
} }
$progress_flagged.attr('title', `Flagged: ${flagged}`); $progress_flagged.prop('title', `Flagged: ${flagged}`);
$progress_flagged.attr('aria-valuenow', flagged); $progress_flagged.prop('aria-valuenow', flagged);
$progress_flagged.css('width', `${flagged}%`); $progress_flagged.css('width', `${flagged}%`);
$flagged_count.text(`Flagged: ${flagged}`); $flagged_count.text(`Flagged: ${flagged}`);
if (flagged < 1) { if (flagged < 1) {
@ -398,8 +402,8 @@ function render_question() {
$flagged_count.fadeIn() $flagged_count.fadeIn()
} }
$progress_answered.attr('title', `Answered: ${answered}`); $progress_answered.prop('title', `Answered: ${answered}`);
$progress_answered.attr('aria-valuenow', answered); $progress_answered.prop('aria-valuenow', answered);
$progress_answered.css('width', `${answered}%`); $progress_answered.css('width', `${answered}%`);
$answered_count.text(`Answered: ${answered}`); $answered_count.text(`Answered: ${answered}`);
if (answered < 1) { if (answered < 1) {
@ -433,19 +437,19 @@ function check_flag() {
switch (question_status[current_question]) { switch (question_status[current_question]) {
case -1: case -1:
$nav_flag.removeClass().addClass('btn btn-danger progress-bar-striped'); $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; break;
case 1: case 1:
$nav_flag.removeClass().addClass('btn btn-warning'); $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; break;
case 2: case 2:
$nav_flag.removeClass().addClass('btn btn-success'); $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; break;
default: default:
$nav_flag.removeClass().addClass('btn btn-secondary'); $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]) { switch (question_status[current_question]) {
case -1: case -1:
button.removeClass().addClass("q-navigator-button btn btn-danger progress-bar-striped"); 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; break;
case 1: case 1:
button.removeClass().addClass("q-navigator-button btn btn-warning"); 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; break;
case 2: case 2:
button.removeClass().addClass("q-navigator-button btn btn-success"); 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; break;
default: default:
button.removeClass().addClass("q-navigator-button btn btn-secondary disabled"); 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="row gx-5 gy-5 mt-1">
<div class="col"> <div class="col">
<h5>Select Background Colour</h5> <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"> <div class="form-check">
<input type="radio" class="form-check-input" id="bg-light" name="bg-select" value="bg-light" checked> <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> <label for="bg-light" class="form-check-label">Default Light</label>
</div> </div>
</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"> <div class="form-check">
<input type="radio" class="form-check-input" id="q-bg-light-1" name="bg-select" value="q-bg-light-1"> <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> <label for="q-bg-light-1" class="form-check-label">Light Shade 1</label>
</div> </div>
</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"> <div class="form-check">
<input type="radio" class="form-check-input" id="q-bg-light-2" name="bg-select" value="q-bg-light-2"> <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> <label for="q-bg-light-2" class="form-check-label">Light Shade 2</label>
</div> </div>
</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"> <div class="form-check">
<input type="radio" class="form-check-input" id="alert-primary" name="bg-select" value="alert-primary"> <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> <label for="alert-primary" class="form-check-label">Blue</label>
</div> </div>
</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"> <div class="form-check">
<input type="radio" class="form-check-input" id="alert-secondary" name="bg-select" value="alert-secondary"> <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> <label for="alert-secondary" class="form-check-label">Grey 1</label>
</div> </div>
</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"> <div class="form-check">
<input type="radio" class="form-check-input" id="alert-dark" name="bg-select" value="alert-dark"> <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> <label for="alert-dark" class="form-check-label">Grey 2</label>
</div> </div>
</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"> <div class="form-check">
<input type="radio" class="form-check-input" id="bg-dark" name="bg-select" value="bg-dark"> <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> <label for="bg-dark" class="form-check-label">Dark</label>