teach/atsebay.t
Archived
1
0
Fork 0
Code Issues Pull requests Releases Activity

Live: add timer questions

Browse source
This commit is contained in:
nemunaire 2022-03-01 16:38:52 +01:00
commit 5c3c476cea
4 changed files with 348 additions and 202 deletions
Download patch file Download diff file Expand all files Collapse all files

43
ui/src/routes/surveys/[sid]/live.svelte
View file

@ -28,6 +28,10 @@
let req_question;
let nosend = false;
let timer_init = null;
let timer_end = null;
let timer = 0;
let timer_cancel = null;
function afterQUpdate(q) {
value = undefined;
@ -46,6 +50,19 @@
}
}
function updTimer() {
const now = new Date().getTime();
if (now > timer_end) {
timer = 100;
clearInterval(timer_cancel);
timer_cancel = null;
} else {
const dist1 = timer_end - timer_init;
const dist2 = timer_end - now;
timer = Math.ceil(100-dist2*100/dist1);
}
}
function wsconnect() {
const ws = new WebSocket((window.location.protocol == 'https'?'wss://':'ws://') + window.location.host + `/api/surveys/${sid}/ws`);
@ -72,8 +89,25 @@
console.log(data);
if (data.action && data.action == "new_question") {
show_question = data.question;
if (timer_cancel) {
clearInterval(timer_cancel);
timer_cancel = null;
}
if (data.timer) {
timer_init = new Date().getTime();;
timer_end = timer_init + data.timer;
updTimer();
timer_cancel = setInterval(updTimer, 150);
} else {
timer_init = null;
}
} else {
show_question = null;
if (timer_cancel) {
clearInterval(timer_cancel);
timer_cancel = null;
}
timer_init = null;
}
});
}
@ -153,12 +187,15 @@
<QuestionForm
qid={show_question}
{question}
readonly={timer >= 100}
bind:value={value}
on:change={sendValue}
>
<!--div class="progress" style="border-radius: 0; height: 4px">
<div class="progress-bar" role="progressbar" style="width: 25%"></div>
</div-->
{#if timer_init}
<div class="progress" style="border-radius: 0; height: 4px">
<div class="progress-bar" class:bg-warning={timer > 85 && timer < 100} class:bg-danger={timer >= 100} role="progressbar" style="width: {timer}%"></div>
</div>
{/if}
</QuestionForm>
{#if question.kind != 'mcq' && question.kind != 'ucq'}
<button