Quick tabs –
Innovating with
themes and
blocks
Presented by Lindy Klein
(@moodlechick)
at Moodlemoot AU 15
Melbourne, Australia
Course navigation – straightforward?
Image Tony & Wayne 2013
https://www.flickr.com/photos/bonitoclub/8596415705/
Our students didn’t think so…
Image clement127 2014
https://www.flickr.com/photos/clement127/15083721153/
Traditional Moodle Navigation…
Also known as the
Scroll of Death rather unappealing!
Traditional Moodle Navigation…
The challenge?
Image Michael Dales 2011
https://www.flickr.com/photos/mdales/6602332085/
At the heart of the issue
Image India Edu 2012
https://www.flickr.com/photos/educationinindia/7703376790/
So the search began!
https://moodle.org/plugins/index.php
Options – OneTopic Course format
Available from https://moodle.org/plugins/view/format_onetopic
Maintained by David Herney Bernal
Options – OneTopic Course format
Available from https://moodle.org/plugins/view/format_onetopic
Maintained by David Herney Bernal
Options – OneTopic Course format
Available from https://moodle.org/plugins/view/format_onetopic
Maintained by David Herney Bernal
OneTopic format:
Pros and cons
Pros
• Tabs now show at
the top of the
course home page
Cons
• No real reduction in
scroll of death on
the page
• No ability to
highlight the key
areas of the page
• Extra tweaking
required to “pretty”
the look of the tabs
Options –
Flexible sections Course format
Available from https://moodle.org/plugins/view/format_flexsections
Maintained by Marina Glancy
Options –
Flexible sections Course format
Available from https://moodle.org/plugins/view/format_flexsections
Maintained by Marina Glancy
Flexible sections format:
Pros and cons
Pros
• Topic sections can
be nested within
sections –
simplifying the
course home page
Cons
• No more Orphaned
activities
• Limited ability to
highlight the key
areas of the page
• No extra
navigational
elements on activity
pages
Our solution – Quick tabs + Flex sections +
A little something More
Our solution – Quick tabs + Flex sections +
A little something More
Our solution – Quick tabs + Flex sections:
Pros and cons
Pros
• Quick tabs appear
on all course pages
• Quick tabs
highlight key areas
• Topic sections can
be nested within
sections –
simplifying the
course home page
Cons
• No more Orphaned
activities
• Tabs are handcoded, and hard
linked (makes
updating time
consuming)
Quick tabs – Under the hood…
• More theme with customisations to
available block regions
• HTML block with links to selected topic
sections
• HTML block configured to appear on all
course page types
• CSS styling to make links show as tabs (no
images were loaded in the making of this
navigation method!)
More theme adjustments
Gerwood Stewart
Twitter @gerwoodstewart
Amazingly patient/supportive husband
Previous life as an LMS Administrator
Programmer in various languages, inc PHP
Adapted the More theme to include two extra block regions –
one appearing before course content (such as topic sections,
or activity pages) the other appearing after (just above the
footer of the page)
//This code has been added to setup the new regions (post-course and pre-course)
//To match these changes the layout directory has also been added. The files in that
directory
//Have been added to this theme from the parent theme and then had the extra regions
specified.
//You can consider all the layout files as a part of the modification however only the extra
//region specifications really matter. If the parent theme is upgraded you can always
recopy the
//layout files and re-add the extra region inserts.
Making adjustments
Nicolas Connault
Twitter @nicolasconnault
Director SMB Streamline
Particularly Helpful Moodler (2014 and 2013)
All round awesome Moodler!
Nicolas has been involved with Moodle for
years – we first met at Moodlemoot AU13.
We caught up over Skype earlier this year
about online learning ideas, and touched
on navigation…
Making adjustments
Available: https://moodle.org/plugins/view/block_tabbed_navigation
SMB Streamline: Tabbed Navigation
Pros and Cons
Pros
• Being a block, can
appear on all
course pages
• Works with Topics
and Weekly course
formats
• Auto-creates links
to every section
• Appears center
area, cannot be
docked
Cons
• Links to every
section
• Doesn’t work with
Flexible sections
format
• Only shows current
tab/topic section on
course home page
Together we grow
Image from Innisfree Hotels 2015
https://www.flickr.com/photos/riptidessportsgrill/17087135436/
Together we grow
David Herney Bernal
Marina Glancy
Gerwood Stewart
Nicolas Connault
These four individuals have nothing in common but Moodle. Some have
met me, others not. Some have met each other – some haven’t.
Each of them has contributed something to arrive at a solution for
making Moodle better fit our needs.
By using Moodle, we identify how we want to continue using it, how it
needs to adapt and why. By sharing ideas, building code, testing code,
and sharing some more…
Thank you!
David Herney Bernal
Marina Glancy
Gerwood Stewart
Nicolas Connault
HUGE thanks to these folks, and to all
the wonderful people who contribute
to Moodle!
Wondering how this relates to you?
Got a burning idea/want to help but not sure how?
Connect with the Community!
You don’t have to have money (although it can help!)
You don’t have to be a programmer (although being
able to talk your ideas out coherently with a
programmer can help)
See a need, fill a need!
Together we grow Moodle!
Questions? Comments?
Lindy Klein
Twitter
@moodlechick
lindyklein.com
Thank You!!