Hello,
I've been looking to set a time alert at the remaining 5-minute mark in a quiz. Is this possible on moodle? Thanks in advance!
Hello,
I've been looking to set a time alert at the remaining 5-minute mark in a quiz. Is this possible on moodle? Thanks in advance!
Hello Otoniel,
Just paste the following code in Site administration / Appearance / Additional HTML / When BODY is opened. Don't forget to Save changes.
<script> var myVar = setInterval(myAlert, 500); function myAlert() { var x = document.getElementById("quiz-time-left").innerHTML; if (x=="0:05:00") { alert("5 minutes left!"); } } </script>
Just to say that the quiz countdown timer is one of those things on my list of thing that need to be improved when I get a round tuit.
Doing what Otoniel asks for well is a tricky balance. On the one hand you want the student to notice that time is getting short. On the other hand, you don't want to completely interrupt their thoughts. (So, I think a plan JavaScript alert is on the side of being too invasive.)
In addition to extra JS, the other thing you can hook into is that inside the last 100 seconds, Moodle puts a CSS class on the timer like class="timeleft99" (https://github.com/moodle/moodle/blob/master/mod/quiz/module.js#L114). Moodle itself only hooks into this for the last 15 seconds: https://github.com/moodle/moodle/blob/master/mod/quiz/styles.css#L209, but you could do more. (I have not idea why it is just 15 seconds. It has just been like that for many years.)
Please i am a new bee here. How can my quiz time left be displayed like the one in the attachment bellow?
Hello Mawuli,
Paste the following code in Site administration / Appearance / Additional HTML / When BODY is opened. Don't forget to Save changes. If you don't have access to the Site administration, put the code in an HTML block and set the block to appear on every page of the quiz.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function() { /* FORMAT TIMER */ $("#quiz-timer-wrapper, #quiz-timer").css("background-color", "red"); $("#quiz-timer-wrapper").css("position", "fixed"); $("#quiz-timer-wrapper").css("top", "50px"); $("#quiz-timer-wrapper").css("left", "0px"); $("#quiz-timer-wrapper").css("width", "100%"); $("#quiz-timer").css("margin", "0 auto 0"); $("#quiz-timer").css("color", "white"); $("#quiz-timer").css("font-weight", "bold"); $("#quiz-timer").css("font-size", "150%"); $("#quiz-timer").css("border", "none"); }); </script>
Hello Thorsten,
To change the timer display to a red line at the top of the page, just style a div element as follows in the file "..\mod\quiz\templates\timer.mustache":
<div id="quiz-timer" class="quiz-timer-inner py-1 px-2 ml-auto" role="timer" aria-atomic="true" aria-relevant="text" style="background-color:#F00;color:#FFF;width:100%;text-align:center;">
It is certainly the fastest way, but not necessarily the most convenient. First of all, you need to have access to the Moodle files, which you don't have if you are not the site administrator. Second, the change will be overwritten with the next update to Moodle.
Regarding the little script I had suggested to Mawuli, I found the problem when looking at the code on his installation. I don't remember but it was a small bug, maybe related to the language used for the name of the selectors or something else.
What do you see if you inspect the timer? (In Chrome, place the cursor on the timer, click the right mouse button and select "Inspect".)