Quick tabs – Innovating with themes and blocks

Presented by Lindy Klein (@moodlechick)at Moodlemoot AU 15Melbourne, Australia

Course navigation – straightforward?

Image Tony & Wayne 2013https://www.flickr.com/photos/bonitoclub/8596415705/

Our students didn’t think so…

Image clement127 2014https://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 2011https://www.flickr.com/photos/mdales/6602332085/

At the heart of the issue

Image India Edu 2012https://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_onetopicMaintained by David Herney Bernal

Options – OneTopic Course format

Available from https://moodle.org/plugins/view/format_onetopicMaintained by David Herney Bernal

Options – OneTopic Course format

Available from https://moodle.org/plugins/view/format_onetopicMaintained 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_flexsectionsMaintained by Marina Glancy

Options – Flexible sections Course format

Available from https://moodle.org/plugins/view/format_flexsectionsMaintained 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 hand-

coded, 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

//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.

Gerwood StewartTwitter @gerwoodstewart

Amazingly patient/supportive husband

Previous life as an LMS AdministratorProgrammer 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)

Making adjustments

Nicolas ConnaultTwitter @nicolasconnaultDirector 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 NavigationPros 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 2015https://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 KleinTwitter @moodlechick

lindyklein.com

Thank You!!