Quiz timer briefly disappears between pages then re-appears...

Quiz timer briefly disappears between pages then re-appears...

by Cynthia Rall-Howder -
Number of replies: 9

Moodle version 3.11.1

I have each quiz question on a separate page.  When I click "Next", the quiz timer briefly disappears, then re-appears only after the page is fully loaded.

What this does is cause the test question block to initially bloop up (because no quiz timer shown), then bloop down (because quiz timer is now shown).  This is highly annoying and distracting for this to happen with page navigation.

Is there a fix so that the quiz timer does not disappear when navigating to a new page?

Thanks!

Attachment Image1.png
Attachment Image2.png
Average of ratings: -
In reply to Cynthia Rall-Howder

Re: Quiz timer briefly disappears between pages then re-appears...

by Dominique Bauer -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hello Cynthia,

With fast servers and fast connections, the delay you describe should only be a fraction of a second and should not be distracting, unless maybe the systems are very busy. At first glance, any solution other than improving the speed of the servers/connections seems difficult to achieve. I could be wrong. If so, others will correct me.

Also, I see you have an x-ray in the question. Does the delay only occur when there is such an image in the question? How big is this image? Do students have to enlarge it to see the details? If you downsize it to preserve the minimum resolution required, would that help? On the other hand, if you need a high resolution, you could put only a thumbnail with a link to a pop-up window to see the image at full size.

With all due respect, is this little blooping up and down really bothersome to students?

Average of ratings: -
In reply to Dominique Bauer

Re: Quiz timer briefly disappears between pages then re-appears...

by Cynthia Rall-Howder -

Thank you for your reply.

Yes, the delay is only a fraction of a second, but the test question shift up then down, even for an instant, is bothersome and distracting.  The image in the test question is not causing the shift as the shift up then down occurs on each page of the quiz.  

The timer is hidden when advancing to the next page, then shows itself.  Also, I have a calculator block positioned on the right under the Quiz Navigation block and that is also hidden when advancing to the next page, then shows itself.

The Quiz Navigation block is static and is immediately shown when advancing to the next page, I was hoping the timer and calculator could be, too so there would be no shifting.

Thank you!

Average of ratings: -
In reply to Cynthia Rall-Howder

Re: Quiz timer briefly disappears between pages then re-appears...

by Dominique Bauer -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

Because of the functions it calls, the timer takes longer to load than the rest of the page. A simple workaround is to move the timer so that it doesn't force questions down when it's loaded, for example by placing it in a fixed position at the top of the page.

To fix the timer at the top of the page, insert the following JavaScript code in the HTML code of the text of the questions. If you wish, adjust the position by modifying the value of the "top" and "right" parameters. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $("#quiz-timer-wrapper").css("position","fixed");
    $("#quiz-timer-wrapper").css("top","8px");
    $("#quiz-timer-wrapper").css("right","420px");
    $("#quiz-timer-wrapper").css("z-index","2000");
});
</script>

If there are many questions where you want to use the script, you might want to place it in a block instead, for a single quiz, or in Site administration / Appearance / Additional HTML, for all quizzes on the site. See Where to place JavaScript code ↗.

Because it uses an external ressource, the calculator also takes a little longer to load. However, given its position under the navigation block, it does not cause any shift.



Knut at the Berlin Zoo in 2007 ↗
Jens Koßmagk - Creative Commons: Attribution-ShareAlike 2.0

Average of ratings: -
In reply to Dominique Bauer

Re: Quiz timer briefly disappears between pages then re-appears...

by Cynthia Rall-Howder -

Perfect!  Thank you SO much! <3

Since I have a boatload of quizzes with each having their own questions, I added your script to Site Administration > Appearance > Additional HTML.

I have one more edit that would be nice and have searched for a solution, but no luck yet.  I have stand alone quizzes that are not associated with a course.  In the picture below is one such quiz.  It would be great to show the name of the quiz at the top left instead of the site's name C&S Solutions - Online.  Is this possible?

Attachment Image9.png
Average of ratings: -
In reply to Cynthia Rall-Howder

Re: Quiz timer briefly disappears between pages then re-appears...

by Dominique Bauer -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

You can copy the page title, which only appears in the page HTML, remove the page numbers if you want, and paste it where you want. If you put the code in an HTML block, it will only affect the quiz that contains the block. If you place it in Site administration..., it will apply to all quizzes on the site.

Without the page numbers:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var $mfFullTitle = $("head title").text();
    var $mfPositionPageOf = $mfFullTitle.indexOf(" (");
    var $mfNetTitle = $mfFullTitle.slice(0, $mfPositionPageOf);
    $("div.page-header-headings").html("<h1>"+ $mfNetTitle + "</h1>");
});
</script>

With the page numbers:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var $mfFullTitle = $("head title").text();
    $("div.page-header-headings").html("<h1>"+ $mfFullTitle + "</h1>");
});
</script>

If you place this script in Site administration ..., you can combine it with the previous one to have only one script, but it is not mandatory.

Average of ratings: Useful (1)
In reply to Dominique Bauer

Re: Quiz timer briefly disappears between pages then re-appears...

by Cynthia Rall-Howder -
Thank you for your help!

The script without the page numbers only gives a partial quiz name, while the script with the page numbers gives the full quiz name (see picture below). This is a quiz not associated with a course.  I prefer without page numbers, so was wondering if the script without page numbers can be revised to give the full quiz name.

The last picture shows a quiz associated with a course - the script was without page numbers so the last part of the quiz name is cut off.  Is there some way to remove the quiz name from the Quiz Navigation block?

Thank you again!  I very much appreciate you taking the time to help me!
Attachment Image17.png
Attachment Image18.png
Average of ratings: -
In reply to Cynthia Rall-Howder

Re: Quiz timer briefly disappears between pages then re-appears...

by Dominique Bauer -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

I had assumed, wrongly, that your titles would not include parentheses. A small change to the code fixes this partial name problem. As for the title in the navigation block, a small modification, although not necessary, will simply make double sure that it is not due to the JavaScript code. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var $mfFullTitle = $("head title").text();
    var $mfPositionPageOf = $mfFullTitle.lastIndexOf(" (");
    var $mfNetTitle = $mfFullTitle.slice(0, $mfPositionPageOf);
    $("header div.page-header-headings").html("<h1>"+ $mfNetTitle + "</h1>");
});
</script>

What you see in the navigation block is not the title of the quiz, it is the first and here the only section heading in the list of questions. To delete this heading:

  • Edit the quiz.
  • Edit the heading (located just above the first question) by clicking on the pencil.
  • Delete the text then press Enter.

You might be interested in section headings, a nice feature of the navigation block. See: Section headings ↗.

Average of ratings: Useful (1)