Added question progress bar

This commit is contained in:
Vivek Santayana 2021-12-04 18:50:09 +00:00
parent f0bfecaad3
commit 335c42f924
2 changed files with 40 additions and 1 deletions

View File

@ -368,6 +368,23 @@ function render_question() {
</div>`;
}
$question_options.html(options_output);
let skipped = count_questions(-1);
let answered = count_questions(2);
let flagged = count_questions(1);
$progress_skipped.attr('title', `Skipped: ${skipped}`);
$progress_skipped.attr('aria-valuenow', skipped);
$progress_skipped.css('width', `${skipped}%`);
$progress_flagged.attr('title', `Flagged: ${flagged}`);
$progress_flagged.attr('aria-valuenow', flagged);
$progress_flagged.css('width', `${flagged}%`);
$progress_answered.attr('title', `Answered: ${answered}`);
$progress_answered.attr('aria-valuenow', answered);
$progress_answered.css('width', `10%`);
console.log(`Answered: ${answered}, Skipped: ${skipped}, Flagged: ${flagged}`);
$question_title.focus();
$(window).scrollTop(0);
}
@ -550,6 +567,17 @@ function stop() {
$("#btn-toggle-settings").addClass('disabled')
}
function count_questions(status) {
output = 0;
for (let i = 0; i < Object.keys(question_status).length; i++) {
key = Object.keys(question_status)[i];
if (question_status[key] == status){
output ++;
}
}
return output;
}
// Variable Definitions
const _id = window.localStorage.getItem('_id');
@ -582,7 +610,13 @@ const $question_header = $("#quiz-question-header");
const $question_text = $("#quiz-question-text");
const $question_options = $("#quiz-question-options");
const $progress_skipped = $("#skipped");
const $progress_answered = $("#answered");
const $progress_flagged = $("#flagged");
// Execution on Load
apply_settings(display_settings);
check_started();
console.log($progress_answered);

View File

@ -223,6 +223,11 @@
Exam Console
</h1>
<div class="container question-container">
<div class="progress">
<div id="answered" class="progress-bar bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
<div id="flagged" class="progress-bar bg-warning" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
<div id="skipped" class="progress-bar progress-bar-striped bg-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h4 class="question-title" id="quiz-question-title" tabindex="-1">
Question x.
</h4>