}
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);
}
}
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');
},
/**
$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)[]);
}
/**
$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;
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%;
--- /dev/null
+{{!
+ 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>
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;
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; }
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; }
