V2.3 **Solution** for Quiz Floating Timer

V2.3 **Solution** for Quiz Floating Timer

by Paul Caliban -
Number of replies: 16

Hope this helps for QUIZ - TIMER - FLOAT

I have a new client that had  Moodle V.1.9.x and they  loved the FLOATING CLOCK feature when taking a quiz. 

I upgrade them to V2.3 and they pointed out the LOSS of functionality.

I am new to Moodle and had no idea that feature existed at one time.Clearly the Quiz Navigation Block did not float in V2.3

So I implemented this brute force bit of code to make the Nav Block always stay in view and only takes a few minutes to install!

If this saves someone research time and/or allows someone to publish a better widget! Great! smile

I have only tested with IE 9 (64bit), Firefox 14, Chrome.  However, seems to work fine, but I am looking for breaks.

This very generic code surgically moves the ".block-region" (name of quiz panel) so the TIME is always in VIEW!

Step#1  Get a copy of Jquery and install in your JS folder   (I downloaded and used jquery-1.8.0.min.js)

Step#2  Modify the QUIZ renderer.php program 

  Note: (CSS [position;fixed;]  and other methods did not seem to meet my need of auto scroll)

 

......root/mod/quiz/renderer.php 

In renderer.php Line 289 area!  BLUE insert code below (attached also)

 

    /**
     * Outputs the navigation block panel
     *
     * @param quiz_nav_panel_base $panel instance of quiz_nav_panel_base
     */
    public function navigation_panel(quiz_nav_panel_base $panel) {

        $output = '';
        // this output makes the QUIZ nav bar BLOCK Scroll with the questons!  .block-region
        $output = '<script type="text/javascript" src="/_js/jquery-1.8.0.min.js"></script>
                <script language="javascript">
                var name = ".block-region";
                var menuYloc = null;
                
                    $(document).ready(function(){
                        menuYloc = 0;
                        $(window).scroll(function () {
                            offset = menuYloc+$(document).scrollTop()+"px";
                            $(name).animate({top:offset},{duration:300,queue:false});
                        });
                    });
                 </script>';
        $userpicture = $panel->user_picture();
        if ($userpicture) {
            $output .= html_writer::tag('div', $this->render($userpicture),
                    array('id' => 'user-picture', 'class' => 'clearfix'));
        }
        $output .= $panel->render_before_button_bits($this);

        $output .= html_writer::start_tag('div', array('class' => 'qn_buttons'));
        foreach ($panel->get_question_buttons() as $button) {
            $output .= $this->render($button);
        }
        $output .= html_writer::end_tag('div');

        $output .= html_writer::tag('div', $panel->render_end_bits($this),
                array('class' => 'othernav'));

        $this->page->requires->js_init_call('M.mod_quiz.nav.init', null, false,
                quiz_get_js_module());

        return $output;
    }

Average of ratings: Useful (4)
In reply to Paul Caliban

Re: V2.3 **Solution** for Quiz Floating Timer

by Matthew Dole -

Thank you for this. I use Moodle in a high school setting and one of the skills I stress to the students is time management during tests. Having the timer visible at all times serves as a constant reminder for them so I was trying to find a way to bring this ability back in Moodle 2.3 This solution seems to work in my case (where students are using Moodle in a contained computer lab so I control what browser they use, etc) and I like the way it does not interfere with the questions like the old 1.9 timer (though I always told the students it was good for them to have a little extra stress during testing!). For other "newbies" like me I thought I would clarify a couple of steps

1) Your JS folder can be any folder you create. I made a "javascript" folder in /moodle/mod/quiz and placed the jquery file inside that folder

2) Be sure to modify the line $output = '<script type="text/javascript" src="/_js/jquery-1.8.0.min.js"></script> so that the src points to the right file. In my case that was $output = '<script type="text/javascript" src="javascript/jquery-1.8.0.min.js"></script>

Average of ratings: Useful (2)
In reply to Matthew Dole

Re: V2.3 **Solution** for Quiz Floating Timer

by Vishal Upadhayay -

Hii seems to be what i am looking for but from where do i get this jquery plugin i google it i code a huge bunch of  code file on jquery website.

Can any one tell me how do i get this jquery file and do things further.

Thanks and Regards.

Vishal Upadhayay

In reply to Vishal Upadhayay

Re: V2.3 **Solution** for Quiz Floating Timer

by Vicki Dunnam -

Oh my gosh!! This works beautifully!!! Thank you so much for sharing the code!! smile 

In reply to Paul Caliban

Re: V2.3 **Solution** for Quiz Floating Timer

by George Hill -

This is soooo sooo great - even better than the floating clock in 1.9

Thanks

George the chef

 

In reply to Paul Caliban

Re: V2.3 **Solution** for Quiz Floating Timer

by Juicy Frog -

Thanks for the script!

It floats the whole navigation panel thou. I am looking for a way to break the "navigation box" with the timer and quiz links off from the navigation panel and have it floating separately beside the quiz. Any idea how to pull that off?

In reply to Juicy Frog

Re: V2.3 **Solution** for Quiz Floating Timer

by Manoj Karmarkar -

Disclaimer: I am a complete novice in programming!

In Moodle 2.7.3 I could get the quiz timer to float by editing the file mod/quiz/styles.css and inserting "position: fixed; " at the appropriate place as given below:

#quiz-timer { display: none; position: fixed; margin-top: 1em; } #quiz-time-left { font-weight: bold; }

Then you have to open the moodle site and purge all caches.

If I scroll down, the quiz timer is now fixed relative to the screen, while the quiz navigation panel goes off the screen at the top. 

Currently my quiz has only 5 questions, and the quiz timer can be seen on the screen below the quiz navigation block. When I scroll down, the topmost questions along with the quiz navigation panel simply scroll off the top of the screen. The quiz timer itself remains in a fixed position relative to the screen.

I haven't tried this with a quiz of more than 5 questions, though. Because, if the quiz navigation panel simply grows in height to accommodate the extra questions, maybe the quiz timer is pushed down? Is it pushed off the screen for a large quiz? If so I'm not sure if this solution will work. 

In spite of these doubts, the above tweak certainly did work for my 5-question quizzes; hope it helps!

In reply to Paul Caliban

Re: V2.3 **Solution** for Quiz Floating Timer

by Ravi Vare -

Hi Moodler,

Why not this is part of CORE Moodle?

This is NICE feature !!!

 

Ravi Vare

In reply to Ravi Vare

Re: V2.3 **Solution** for Quiz Floating Timer

by Jean-Michel Védrine -

Hello Ravi,

As it is, this can't be part of core Moodle because it depends on Jquery. Moodle library is YUI not Jquery.

Also the way it is coded is rather a hack and it would need more work to match Moodle standards for coding.

If such  a feature is one day part of Moodle, it must be an option because there are lots of people that don't like floating things.

Before something goes into core, a lot of questions must also be answered: does it work with all browsers, does it work with all themes, does it work with mobiles, ... ?

 

Average of ratings: Useful (1)
In reply to Jean-Michel Védrine

Re: V2.3 **Solution** for Quiz Floating Timer

by Marcus Green -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Or to put it another way, 

Creating software appears to be writing lines of programming code

Once you get involved it turns out to be mainly maintaining and testing code sad

Have spent the last week testing, tweaking, testing, tweaking.....

 

 

Average of ratings: Useful (2)
In reply to Paul Caliban

Re: V2.3 **Solution** for Quiz Floating Timer

by Sundi Richard -

Has anyone gotten this to work with the Clean Theme?

I am running Moodle 2.5 and the floating timer works with some themes, but not with others.

In reply to Paul Caliban

Re: V2.3 **Solution** for Quiz Floating Timer

by Ali El Bouraki -
Dears,


Sorry, I tried every thing but the timer not float (v 2.7), would you please help me.


Thank you.

Ali El Bouraki

In reply to Ali El Bouraki

Re: V2.3 **Solution** for Quiz Floating Timer

by ankit garg -

Have you tried this, if not try putting this small code into custom CSS section of your current theme:

#quiz-timer {

    background: none repeat scroll 0 0 #662483;
    color: #fff;
    display: none;
    font-size: 22px;
    margin-top: 1em;
    padding: 5px;
    position: fixed;
    z-index: 10000;

Average of ratings: Useful (1)
In reply to ankit garg

Re: V2.3 **Solution** for Quiz Floating Timer

by Nelson C -


Muchas gracias, solucionado. versión Moodle 2.9

In reply to ankit garg

Re: V2.3 **Solution** for Quiz Floating Timer

by Nelson C -


Muchas gracias, solucionado. versión Moodle 2.9

In reply to Nelson C

Re: V2.3 **Solution** for Quiz Floating Timer

by Debbie Kay -

After loving this feature in 1.9 and just upgraded to 3.0.6 I have tried both the solutions offered here without success.

The javascript does not seem to have an effect in my theme (Lambda)

The css one does work for the timer, but it breaks the icons used in my theme and also I would like to have the whole quiz navigation block move, not just the timer.

Has anyone got this to work in 3.0.6 and would kindly share how?

Many thanks!