mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-21 00:12:56 +02:00
Code Issues Projects Releases Wiki Activity

MDL-66587 mod_quiz: visible quiz timer

Browse Source
This commit is contained in:
Bas Brands 2020-09-08 14:09:22 +02:00
parent 99777d963f
commit d910726704
8 changed files with 233 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
mod/quiz/attemptlib.php
View File

@ -2795,7 +2795,6 @@ class quiz_attempt_nav_panel extends quiz_nav_panel_base {
}
return html_writer::link($this->attemptobj->summary_url(),
get_string('endtest', 'quiz'), array('class' => 'endtestlink aalink')) .
$output->countdown_timer($this->attemptobj, time()) .
$this->render_restart_preview_link($output);
}
}

2
mod/quiz/module.js
View File

@ -71,7 +71,7 @@ M.mod_quiz.timer = {
M.mod_quiz.timer.endtime = M.pageloadstarttime.getTime() + start*1000;
M.mod_quiz.timer.preview = preview;
M.mod_quiz.timer.update();
Y.one('#quiz-timer').setStyle('display', 'block');
Y.one('#quiz-timer-wrapper').setStyle('display', 'flex');
},
/**

7
mod/quiz/renderer.php
View File

@ -294,10 +294,8 @@ class mod_quiz_renderer extends plugin_renderer_base {
$this->initialise_timer($timerstartvalue, $ispreview);
}
return html_writer::tag('div', get_string('timeleft', 'quiz') . ' ' .
html_writer::tag('span', '', array('id' => 'quiz-time-left')),
array('id' => 'quiz-timer', 'role' => 'timer',
'aria-atomic' => 'true', 'aria-relevant' => 'text'));
return $this->output->render_from_template('mod_quiz/timer', (object)[]);
}
/**
@ -447,6 +445,7 @@ class mod_quiz_renderer extends plugin_renderer_base {
$output = '';
$output .= $this->header();
$output .= $this->quiz_notices($messages);
$output .= $this->countdown_timer($attemptobj, time());
$output .= $this->attempt_form($attemptobj, $page, $slots, $id, $nextpage);
$output .= $this->footer();
return $output;

74
mod/quiz/styles.css
View File

@ -196,80 +196,6 @@
margin: 0.5em 0;
}
/* Countdown timer. */
#quiz-timer {
display: none;
margin-top: 1em;
}
#quiz-time-left {
font-weight: bold;
}
#quiz-timer.timeleft15 {
background: #fff;
}
#quiz-timer.timeleft14 {
background: #fee;
}
#quiz-timer.timeleft13 {
background: #fdd;
}
#quiz-timer.timeleft12 {
background: #fcc;
}
#quiz-timer.timeleft11 {
background: #fbb;
}
#quiz-timer.timeleft10 {
background: #faa;
}
#quiz-timer.timeleft9 {
background: #f99;
}
#quiz-timer.timeleft8 {
background: #f88;
}
#quiz-timer.timeleft7 {
background: #f77;
}
#quiz-timer.timeleft6 {
background: #f66;
}
#quiz-timer.timeleft5 {
background: #f55;
}
#quiz-timer.timeleft4 {
background: #f44;
}
#quiz-timer.timeleft3 {
background: #f33;
}
#quiz-timer.timeleft2 {
background: #f22;
}
#quiz-timer.timeleft1 {
background: #f11;
}
#quiz-timer.timeleft0 {
background: #f00;
}
/** mod quiz mod **/
#page-mod-quiz-mod #id_reviewoptionshdr .fitem {
width: 23%;

31
mod/quiz/templates/timer.mustache Normal file
View File

@ -0,0 +1,31 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template mod_quiz/timer
Login page template
Example context (json):
{
}
}}
<div id="quiz-timer-wrapper" class="mb-2">
<div id="quiz-timer" class="quiz-timer-inner py-1 px-2 ml-auto" role="timer" aria-atomic="true" aria-relevant="text">
{{#str}} timeleft, quiz {{/str}}
<span id="quiz-time-left"></span>
</div>
</div>

28
theme/boost/scss/moodle/modules.scss
View File

@ -1265,6 +1265,34 @@ div#dock {
margin: 0 0.4em;
}
/* Countdown timer. */
#page-mod-quiz-attempt #region-main {
overflow-x: inherit;
}
#quiz-timer-wrapper {
display: none;
position: sticky;
justify-content: end;
top: $navbar-height + 5px;
z-index: $zindex-modal;
#quiz-timer {
border: $border-width solid $red;
background-color: $white;
}
}
.pagelayout-embedded #quiz-timer-wrapper {
top: 5px;
}
@for $i from 0 through 16 {
#quiz-timer-wrapper #quiz-timer.timeleft#{$i} {
$bg: lighten($red, ($i * 3%));
background-color: $bg;
color: color-yiq($bg);
}
}
// Assign.
.path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
top: auto;

85
theme/boost/style/moodle.css
View File

@ -17522,6 +17522,91 @@ div#dock {
padding: 0;
margin: 0 0.4em; }
/* Countdown timer. */
#page-mod-quiz-attempt #region-main {
overflow-x: inherit; }
#quiz-timer-wrapper {
display: none;
position: sticky;
justify-content: end;
top: 55px;
z-index: 1050; }
#quiz-timer-wrapper #quiz-timer {
border: 1px solid #d43f3a;
background-color: #fff; }
.pagelayout-embedded #quiz-timer-wrapper {
top: 5px; }
#quiz-timer-wrapper #quiz-timer.timeleft0 {
background-color: #d43f3a;
color: #fff; }
#quiz-timer-wrapper #quiz-timer.timeleft1 {
background-color: #d74b47;
color: #fff; }
#quiz-timer-wrapper #quiz-timer.timeleft2 {
background-color: #d95753;
color: #fff; }
#quiz-timer-wrapper #quiz-timer.timeleft3 {
background-color: #dc6460;
color: #fff; }
#quiz-timer-wrapper #quiz-timer.timeleft4 {
background-color: #df706c;
color: #fff; }
#quiz-timer-wrapper #quiz-timer.timeleft5 {
background-color: #e27c79;
color: #212529; }
#quiz-timer-wrapper #quiz-timer.timeleft6 {
background-color: #e48885;
color: #212529; }
#quiz-timer-wrapper #quiz-timer.timeleft7 {
background-color: #e79592;
color: #212529; }
#quiz-timer-wrapper #quiz-timer.timeleft8 {
background-color: #eaa19e;
color: #212529; }
#quiz-timer-wrapper #quiz-timer.timeleft9 {
background-color: #edadab;
color: #212529; }
#quiz-timer-wrapper #quiz-timer.timeleft10 {
background-color: #efb9b8;
color: #212529; }
#quiz-timer-wrapper #quiz-timer.timeleft11 {
background-color: #f2c6c4;
color: #212529; }
#quiz-timer-wrapper #quiz-timer.timeleft12 {
background-color: #f5d2d1;
color: #212529; }
#quiz-timer-wrapper #quiz-timer.timeleft13 {
background-color: #f8dedd;
color: #212529; }
#quiz-timer-wrapper #quiz-timer.timeleft14 {
background-color: #faeaea;
color: #212529; }
#quiz-timer-wrapper #quiz-timer.timeleft15 {
background-color: #fdf7f6;
color: #212529; }
#quiz-timer-wrapper #quiz-timer.timeleft16 {
background-color: white;
color: #212529; }
.path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
top: auto; }

85
theme/classic/style/moodle.css
View File

@ -17749,6 +17749,91 @@ div#dock {
padding: 0;
margin: 0 0.4em; }
/* Countdown timer. */
#page-mod-quiz-attempt #region-main {
overflow-x: inherit; }
#quiz-timer-wrapper {
display: none;
position: sticky;
justify-content: end;
top: 55px;
z-index: 1050; }
#quiz-timer-wrapper #quiz-timer {
border: 1px solid #d43f3a;
background-color: #fff; }
.pagelayout-embedded #quiz-timer-wrapper {
top: 5px; }
#quiz-timer-wrapper #quiz-timer.timeleft0 {
background-color: #d43f3a;
color: #fff; }
#quiz-timer-wrapper #quiz-timer.timeleft1 {
background-color: #d74b47;
color: #fff; }
#quiz-timer-wrapper #quiz-timer.timeleft2 {
background-color: #d95753;
color: #fff; }
#quiz-timer-wrapper #quiz-timer.timeleft3 {
background-color: #dc6460;
color: #fff; }
#quiz-timer-wrapper #quiz-timer.timeleft4 {
background-color: #df706c;
color: #fff; }
#quiz-timer-wrapper #quiz-timer.timeleft5 {
background-color: #e27c79;
color: #212529; }
#quiz-timer-wrapper #quiz-timer.timeleft6 {
background-color: #e48885;
color: #212529; }
#quiz-timer-wrapper #quiz-timer.timeleft7 {
background-color: #e79592;
color: #212529; }
#quiz-timer-wrapper #quiz-timer.timeleft8 {
background-color: #eaa19e;
color: #212529; }
#quiz-timer-wrapper #quiz-timer.timeleft9 {
background-color: #edadab;
color: #212529; }
#quiz-timer-wrapper #quiz-timer.timeleft10 {
background-color: #efb9b8;
color: #212529; }
#quiz-timer-wrapper #quiz-timer.timeleft11 {
background-color: #f2c6c4;
color: #212529; }
#quiz-timer-wrapper #quiz-timer.timeleft12 {
background-color: #f5d2d1;
color: #212529; }
#quiz-timer-wrapper #quiz-timer.timeleft13 {
background-color: #f8dedd;
color: #212529; }
#quiz-timer-wrapper #quiz-timer.timeleft14 {
background-color: #faeaea;
color: #212529; }
#quiz-timer-wrapper #quiz-timer.timeleft15 {
background-color: #fdf7f6;
color: #212529; }
#quiz-timer-wrapper #quiz-timer.timeleft16 {
background-color: white;
color: #212529; }
.path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
top: auto; }