In his 2009 post in moodle.org, Moodler Abrar Ullah, introduced his Accordion Resource which allows one to hide and show labels and text.
I have recently implemented Abrar’s Accordion Resource on my Moodle 1.9.7 site, with this Moodle.org post here explaining how I did it for my site. In that post of mine, I showed how I embedded a Blip.tv (you can do the same for a Youtube video) within an Accordion resource on my site. You can follow the main discussion here.
Screen1: The Accordion resource as introduced by Abrar in his post on moodle.org.
The image shows a multi-lined label of text within the accordion. The Accordion Resource is NOT limited to just labels and HTML code.
I have, since then, discovered that with some tinkering around, you can reduce the Scroll Of Death even further by embedding actual resources and activities on your Course Page with the Accordion Resource. Here’s a screenshot showing the Accordion Resource used for this purpose:
Screen2: A de-cluttered course page page “Accordionised”
Notice the Book resource within the Accordion? Well you can put any resource inside.
For a LIVE demo, you can login to my website http://scm.moodleace.com.
Username: student
Password: moodle
To see it in action on my IT course page, here’s a Youtube video.
In a followup post, I will be explaning how you can use the Accordion Resource Editor on your own Moodle 1.9 course page. In the meantime, for those who cannot wait, you may email me at [email protected] for help on how to do this. Stay tuned for more news.
Cheers and have a great weekend!
8 Responses
Wow, Accordian format within the Collapsed Topic’s format!
Nice Recourse.
A question, How do you do for insert another type of recourses into the accordion? For me, its only posible write text and html.
Nice site, thank you.
*chuckle* Thanks for the question.
I’ve been trying to come up with a Youtube video to show how this is done.
Sleep deprivation caused me to sleep early last night.
ANYWAY, it should be out this weekend (Saturday 14/5/2011).
Clue: Firefox’s “View | Page Source” to view the source code of your
Moodle coursepage; then find the html code (usually starts with a tag)
and copy it. then…here’s the source code inside my accordian editor. I copy
and pasted it into my Accordian editor using HTML editing mode:
Think you got it? If that’s not clear enough (I don’t assume it is), I’ll come up with the
step-by-steo video on Youtube this weekend.
😉
Note the class code that goes: ?
If you don’t put the class=”no_dot_list” part then you end up with bullet points before the
resource name. So where did I define the class “no_dot_list”?
It’s inside the theme’s CSS file named isometric.css. Here it is:
ul.no_dot_list
{
list-style-type: none;
}
The theme I use is isometric by Mary Evans. It’s was uploaded by her and then removed
from the Moodle.org repository. Because the theme was written from code from
freecsstemplates.org where the original author did not want it to be released as GPL.
You can use it for free as long as the footer gives credit to freecsstemplates.org.
The menu at the top is the menubar which comes from a file named menubar.php.
Oops apparently the forum doesn’t allow li tags to be posted. So a whole bunch of HTML code which was in my previous post didn’t appear. So let’s have another go shall we?
here’s the source code inside my accordian editor. I copy
and pasted it into my Accordian editor using HTML editing mode:
http://scm.moodleace.com/file.php/1/codeAccordion.txt
Well, code inside the text file (shown in the link above) is the part that was missing from my last post.
Frankie
Go here for the video tutorial!
http://frankiescm.blogspot.com/2011/05/reducing-scroll-of-death-in-your-moodle.html
Wow!
A really creative and clever idea for hide resources without the traditional “hide”.
Congratz.
Saludos desde Chile.
I have updated installation instructions for the latest Moodle 1.9.14 as of December 2011.
http://moodurian.blogspot.com/2011/05/reducing-scroll-of-death-in-your-moodle.html
Oops, the previous link no longer exists!
I have updated installation instructions for the latest Moodle 1.9.14 as of December 2011. Here is the correct link:
http://moodurian.blogspot.com/2011/12/how-to-install-accordion-resource-on.html