Customizing course layout with Javascript

Customizing course layout with Javascript

by Hartmut Scherer -
Number of replies: 6

Hi all,

Inspired by the blog post of Paolo Oprandi "Making Moodle More Engaging By Rethinking The Display of Content” (21.10.2013) I wanted to find out how much I can accomplish with Javascript in order to provide a different (hopefully better) user experience. I use the Clean theme with collapsed topics in my local installation of Moodle 2.7. My goal was to display as much content as possible without leaving the page, but this content should not be visible all the time.

When students open the course page, it will look like this.

All content collapsed


After they clicked on "click-to-reveal content,” users will see the content and, if it's an activity, they will also see a button to start the activity.

All content revealed


Here are the steps to get a customized course layout:

  1. Download jquery.shorten.js from https://github.com/viralpatel/jquery.shorten/blob/master/src/jquery.shorten.js and add the file to folder \theme\bootstrapbase\javascript.

  2. Add the following lines in \theme\bootstrapbase\config.php

$THEME->javascripts_footer = array(

'jquery.shorten'

);

after

$THEME->javascripts_footer = array(

'moodlebootstrap', 'dock'

);

  1. Select "show description” in Edit settings of activities, which will display the description on the course page.

  2. Add code of one of the attached sample files either in the description of an activity in Edit settings or in a Label. Search for "your_site” in the sample file and replace it with the name of your site, if necessary.

Any comments are very welcome. If this post is not in the correct forum, I kindly ask the forum moderators to move the post to the appropriate forum.

With kind regards,

Hartmut

Average of ratings: Useful (1)
In reply to Hartmut Scherer

Re: Customizing course layout with Javascript

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Hi Hartmut,

An interesting idea.  But you are using a really iffy way of loading jQuery.  It really needs to be done in either the theme or the course format using http://docs.moodle.org/dev/jQuery as a reference.  I have never added jQuery to a course format, but I'm sure its possible.  That would prevent a conflict with other things loading jQuery too and hence causing issues and save including scripts in the examples.

Cheers,

Gareth
Average of ratings: -
In reply to Gareth J Barnard

Re: Customizing course layout with Javascript

by Hartmut Scherer -

Hi Gareth,

Thank you for your reply and for pointing me to the Moodle docs. Actually I tried to understand and follow the documentation, but I failed to do it properly and could not even log in into my local Moodle installation. 

My suggestion above is only working in the course where I load the Javascript. The number of characters displayed before the content will be hidden can be adapted in each activity or resource. Somehow I like this flexibility. 

With kind regards,

Hartmut

Average of ratings: -
In reply to Hartmut Scherer

Re: Customizing course layout with Javascript

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Hartmut,

I think its a really interesting idea.  One that should be taken forward into perhaps a custom course format with the jQuery elements.  Then it would only apply to courses and be theme independent.

Having a different perspective on how Moodle can be less like traditional boring file lists and more of a 'learning environment' is a good thing.  I might have a bash at a Collapsed Topics branch with jQuery build in to see if it works.  A little under the weather ATM, so may be a while.

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: Customizing course layout with Javascript

by Elizabeth Dalton -

Being able to include jQuery accordions within Collapsed Topics would be great! smile

Average of ratings: -