feat: Timer in LMS Quiz (#24246)

* feat: new fields in quiz doctypes

* feat: timer in lms quiz

* fix: variable initialisation

* fix: context, exception fix

* fix:sider

* fix:sider

* fix: indentation

* fix: timer

* fix: sider

* fix: return value and format

* fix: show time taken only after all attempts are over

* fix: sider

Co-authored-by: pateljannat <jannatpatel@MacBook-Air.local>
Co-authored-by: Marica <maricadsouza221197@gmail.com>
This commit is contained in:
Jannat Patel
2021-04-19 10:36:40 +05:30
committed by GitHub
parent 7eac4a250d
commit dcdd3bebbe
9 changed files with 218 additions and 411 deletions

View File

@@ -20,6 +20,16 @@ class Quiz {
}
make(data) {
if (data.duration) {
const timer_display = document.createElement("div");
timer_display.classList.add("lms-timer", "float-right", "font-weight-bold");
document.getElementsByClassName("lms-title")[0].appendChild(timer_display);
if (!data.activity || (data.activity && !data.activity.is_complete)) {
this.initialiseTimer(data.duration);
this.is_time_bound = true;
this.time_taken = 0;
}
}
data.questions.forEach(question_data => {
let question_wrapper = document.createElement('div');
let question = new Question({
@@ -37,12 +47,51 @@ class Quiz {
indicator = 'green'
message = 'You have already cleared the quiz.'
}
if (data.activity.time_taken) {
this.calculate_and_display_time(data.activity.time_taken, "Time Taken - ");
}
this.set_quiz_footer(message, indicator, data.activity.score)
}
else {
this.make_actions();
}
window.addEventListener('beforeunload', (event) => {
event.preventDefault();
event.returnValue = '';
});
}
initialiseTimer(duration) {
this.time_left = duration;
var self = this;
var old_diff;
this.calculate_and_display_time(this.time_left, "Time Left - ");
this.start_time = new Date().getTime();
this.timer = setInterval(function () {
var diff = (new Date().getTime() - self.start_time)/1000;
var variation = old_diff ? diff - old_diff : diff;
old_diff = diff;
self.time_left -= variation;
self.time_taken += variation;
self.calculate_and_display_time(self.time_left, "Time Left - ");
if (self.time_left <= 0) {
clearInterval(self.timer);
self.time_taken -= 1;
self.submit();
}
}, 1000);
}
calculate_and_display_time(second, text) {
var timer_display = document.getElementsByClassName("lms-timer")[0];
var hours = this.append_zero(Math.floor(second / 3600));
var minutes = this.append_zero(Math.floor(second % 3600 / 60));
var seconds = this.append_zero(Math.ceil(second % 3600 % 60));
timer_display.innerText = text + hours + ":" + minutes + ":" + seconds;
}
append_zero(time) {
return time > 9 ? time : "0" + time;
}
make_actions() {
@@ -57,6 +106,10 @@ class Quiz {
}
submit() {
if (this.is_time_bound) {
clearInterval(this.timer);
$(".lms-timer").text("");
}
this.submit_btn.innerText = 'Evaluating..'
this.submit_btn.disabled = true
this.disable()
@@ -64,7 +117,8 @@ class Quiz {
quiz_name: this.name,
quiz_response: this.get_selected(),
course: this.course,
program: this.program
program: this.program,
time_taken: this.is_time_bound ? this.time_taken : ""
}).then(res => {
this.submit_btn.remove()
if (!res.message) {
@@ -157,7 +211,7 @@ class Question {
return input;
}
let make_label = function(name, value) {
let make_label = function (name, value) {
let label = document.createElement('label');
label.classList.add('form-check-label');
label.htmlFor = name;
@@ -166,14 +220,14 @@ class Question {
}
let make_option = function (wrapper, option) {
let option_div = document.createElement('div')
option_div.classList.add('form-check', 'pb-1')
let option_div = document.createElement('div');
option_div.classList.add('form-check', 'pb-1');
let input = make_input(option.name, option.option);
let label = make_label(option.name, option.option);
option_div.appendChild(input)
option_div.appendChild(label)
wrapper.appendChild(option_div)
return {input: input, ...option}
option_div.appendChild(input);
option_div.appendChild(label);
wrapper.appendChild(option_div);
return { input: input, ...option };
}
let options_wrapper = document.createElement('div')