From 2f6de34051d0f337b92593a09c300dff7addb480 Mon Sep 17 00:00:00 2001 From: viveksantayana Date: Wed, 8 Dec 2021 13:21:18 +0000 Subject: [PATCH] Added click area to select background colour --- ref-test/quiz/static/js/quiz.js | 48 +++++++++++++----------- ref-test/quiz/templates/quiz/client.html | 14 +++---- 2 files changed, 33 insertions(+), 29 deletions(-) diff --git a/ref-test/quiz/static/js/quiz.js b/ref-test/quiz/static/js/quiz.js index 42c4161..8410257 100644 --- a/ref-test/quiz/static/js/quiz.js +++ b/ref-test/quiz/static/js/quiz.js @@ -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`); } } } diff --git a/ref-test/quiz/templates/quiz/client.html b/ref-test/quiz/templates/quiz/client.html index d901359..d4e3229 100644 --- a/ref-test/quiz/templates/quiz/client.html +++ b/ref-test/quiz/templates/quiz/client.html @@ -74,43 +74,43 @@
Select Background Colour
-
+
-
+
-
+
-
+
-
+
-
+
-
+