← blogs.sussex.ac.uk

Making Moodle more engaging by rethinking the display of content

As many of our regular readers will know, a common theme in this blog has been how it is hard to create Moodle pages that look like the rest of the internet. Many Moodle pages look lists.

When we are developing we often ask the question “What would Facebook do?” – or more generally “What would other user content systems do?”. Almost everything in Facebook is displayed on the user or group profile page – whether a discussion, a video or an interactive poll. Where the content is long the user clicks on it and the content is displayed more fully on the same page or within a dialog box.

As a result we have tried to do something similar with our Moodle.

Videos, including lecture recordings (further posts about this coming), youtube/vimeo, uploaded recordings, get displayed with a thumbnail image and optionally played within the page.

A reading list module, which we have developed in-house and links with Talis Aspire (further posts about this coming), is displayed in a similar way within the page.

We encourage tutors to put content in the section description or in labels (we now call displayed content). Where the content is too much we encourage users to add a “Page” (we now call click-to-reveal content). We display this content to students as an accordian, nested in the page and shown on the same page when clicked.

Also displayed within the page are uploaded mp3s, images and folder resources.

As much as possible we discourage tutors from putting up resources as files for the students to download, but when they do we call these attachments. Attachments take students away from the VLE site which we consider an “online social nexus of learning” :p.

Further developments might include displaying forums in a similar way – nested within the page – or even quizzes.


We note that for a long time we were criticising Moodle because it encouraged tutors to create “scroll-of-death” learning sites, but developments such as this increase the length of the page. However we argue that there is a difference between scrolling through lists of links to content and scrolling through the content itself. Facebook, Tumblr and GooglePlus have infinite scroll on most devices because each article contains content.

Partitioning sections is still important in a course-based learning system so we oblige tutors to use the page/chapter format. If we are a student in Week 6 of a learning module then navigating passed all the other weeks’ materials requires unnecessary work.

As usual we encourage you to leave us some comments.


  1. Posted October 22, 2013 at 2:58 am | Permalink

    Again, a smart move. Improved usability all the way. 

  2. Posted October 22, 2013 at 3:04 am | Permalink

    How did you guys implement the Accordian feature right on the Coursepage itself?

  3. Paolo Oprandi
    Posted October 22, 2013 at 12:00 pm | Permalink

    Basically you grab the content from the url address that the user has clicked on (e.g. the page asset) and append it underneath the link, exiting the function returning false thereby disabling the link action which would take you to the other page.

    The code might go as follows:-

    Use the resource css classes set in function print_section() in course/lib.php

    In the footer add javascript/jquery when document ready

    Identify the resource type you wish to open as an accordion by their class (note: you won’t have all the resource classes we do)
    inline_resources = $('.resource.audio,.resource.image:not(".tiff,.bmp"),.resource.lecturerecording,.resource.directory,.resource.html:not(".file,.link"),.resource.text:not(".file,.link"),.resource.youtube,.resource.reading');

    Add arrow

    Then display.
         resource = $(this).parents('li');
         resourcecontent = $(this).parents('li').find('.resourcecontent');
         if(!$(resourcecontent).length) {
               url = $(this).attr('href');
               // load stuff
                       type: "GET",
                       async: true,
                       url: url
                }).done(function(content) {
                       $content = $(content).find('.resourcecontent');}

    Hope this helps

  4. Posted October 22, 2013 at 8:16 pm | Permalink

    I’ve used the Moodle Zen method of design with my students and the results have been pretty encouraging:
    Advanced Composition: http://moodleshare.org/course/view.php?id=2
    Myths of the Norsemen: http://moodleshare.org/course/view.php?id=6
    Frank Herbert’s Dune: http://moodleshare.org/course/view.php?id=51

    Feel free to take a copy of them.

  5. Paolo Oprandi
    Posted October 23, 2013 at 8:50 am | Permalink

    Nice, Jon – great example of a tutor who has used the tools available and worked to make great sites!

    It proves it is possible but – maybe you would agree – not always intuitive. It needs a bit of Moodle guild knowledge.

    We want to break down the barriers to making great sites like yours so that tutors can focus on the content and deeper issues of good practice delivery of that knowledge (form and function).

    Thanks for sharing!

  6. Posted October 24, 2013 at 6:48 pm | Permalink

    I agree. I’m always for simplifying the process. I have found that even if I don’t use the icons for navigation and open up my entire course that those landing pages I’ve created (that the icons point to) still prove useful for adding additional context to my course resources.

  7. Jez
    Posted December 8, 2014 at 8:30 pm | Permalink

    Dont know if you have seen this, there is a video toward the end of the article, looks interesting:


4 Trackbacks

  1. By Making Moodle more engaging by rethinking the d... on October 23, 2013 at 1:25 am

    […]   […]

  2. By Making Moodle more engaging by rethinking the d... on October 29, 2013 at 3:21 am

    […] See it on Scoop.it, via Moodle 2.0 plus  […]

  3. By Making Moodle more engaging by rethinking the d... on November 18, 2013 at 3:38 pm

    […]   […]

  4. […] Sussex eLearning Team continues to push the envelope of Moodle aesthetics and usability. Most recently Paolo Oprandi […]

Post a Comment

Your email is never shared. Required fields are marked *