I recently read and reviewed the book “Moodle JavaScript Cookbook” by Alastair Hole. The book’s cover promises to give the reader “over 50 recipes for making your Moodle system more dynamic and responsive with JavaScript” and it definitely opened my eyes to what’s possible with Javascript and really what very common dynamic features and enhancements are created by JavaScript and it’s libraries.

A quick note on my background with Javascript is that I’m a newbie. I know HTML/CSS and some PHP. I can sort of manipulate other code but in no means can do much harm from scratch. This book is my first attempt of learning/understanding JavaScript concepts.

The book says it’s “aimed at developers and admins, familiar with customizing moodle with themes, modules and patches.” Which is pretty right on. It also says “no previous javascript knowledge is needed”. I didn’t have any previous knowledge and some parts were over my head and frustrating, especially when the code wouldn’t work for me but I’m betting that if a person who has intermediate knowledge of JavaScript read this book they’d fly through it. It was just annoying when the code was over my head or didn’t work, it was hard troubleshooting. I’d say the audience would be admins who have some understanding of coding but doesn’t necessarily have to know JavaScript, which the book says.

The author describes the book.. “The Moodle JavaScript Cookbook will take you through the basics of combining Moodle with JavaScript and its various libraries and explain how JavaScript can be used along with Moodle.” Which really sums it up well. If you read more of the description it continues to be accurate with what the book covers. A book’s summary should usually be accurate yes, but as far as I can think back I think this Moodle book compared with other books does a great job of preparing the reader on what they will learn.

The format of the book was a lot like other Packt Pub Moodle recipe books. It would give you a recipe and describe it, then show you how to do it and then explain what’s going on. It was pretty easy to follow with the exception of some of the code examples. I had a lot of issues with Chapter 4 and trying to get a few of the examples to work. It could have been an error on my part but it was a bit confusing looking at the code in the book and the code that was given. It didn’t always match up and since I didn’t have any prior JavaScript knowledge it was frustrating. It seemed to be just Chapter 4 for some reason — maybe I was tired that night : )

The book did have a lot of illustrations and like I said you were able to download the code. In my opinion it is crucial to be at a computer and download this code to test it out for yourself. You will get a lot more out of it.

The first few chapters of the book went over the basics. Chapter 1 talked about integrating JavaScript with Moodle 2.0 and best practices. It was a good warm up to see how JavaScript works and how it runs. Chapter 2 introduces us to the YUI which we use quite a bit in the rest of the book. It introduced us to the idea of what a library is in regards to JavaScript. Chapters 3 and 4 continued to talk about more advanced concepts and gets more into coding.

Chapter 5 and 6 things started getting cool. In these chapters we actually got into using Libraries and how using those libraries really enable you to make your page dynamic and enhance simple elements like text, tables and menus. Chapter 7 was even better with menus. The author shows us how to take simple list elements and use libraries to make them into good looking drop down and fly out menus. I never knew that using JavaScript and these libraries had sort of “pre-made” code. If you wanted you could then further customize the elements with CSS. Chapter 8 continued to show us more things you can do like animation.

The last Chapter covered using other libraries and shows the reader more potential of using JavaScript and Libraries. It’s good to know the other popular libraries and how they work with JavaScript and YUI. I’ve always wondered how all of these JavaScript codes and libraries work together and this chapter sort of gave me a general knowledge of at least how it works and that you need to connect with other libraries and have a file to use those libraries. It also gave me knowledge of a few frameworks that are popular and what they’re used for. It was neat seeing the Lightbox library because I’ve seen this before all over and I never realized it was JavaScript or how it was done.

Being totally new to JavaScript it opened my eyes to what actually is JavaScript on web sites and what are the capabilities. Whether it was auto complete when I’m typing a tag for my blog or clicking on a cell and having an edit box come up. Since I really didn’t know much of anything regarding JavaScript I definitely learned a lot. Some things were over my head but the good thing about the book and code is that I can go back later and re-visit it.

I always like more web development or admin focused Moodle books and this one makes me excited about the possibilities of enhancing elements in Moodle and really to any web site I’m working with. I wish there was more real life examples on how JavaScript can enhance real Moodle elements but it definitely got me thinking myself about how I can make current Moodle elements on the page better with the examples shown. It was a good read!

Related Links

• Buy Moodle JavaScript Cookbook
• Table of Contents
• Free Sample Chapter

Some exciting new titles have come to Packt Publishing.

• Moodle 2.0 for Business Beginner’s Guide – Implement Moodle in your business to streamline your interview, training, and internal communication processes.
• Moodle Javascript Cookbook – Over 50 recipes for making your Moodle system more dynamic and responsive with JavaScript.

I’m very excited to get reading these books. Along with using Moodle in a k-12 school district I’m also an admin for a small business. I’m hoping to get some tips to make that site work even better with Moodle 2.0. Hopefully by the time I’m done reading I’ll be itching to upgrade. The Javascript book looks interesting to me to see what I can learn to make our Moodle site more customized and dynamic.

I’ll be writing a review on each of the books. Hopefully I can get started soon, while I’m getting back into testing 2.0! Stay tuned.

I was recently given the task in my district to develop a solution for a searchable forms database on our new web site. These forms include staff forms for HR, district permission slips, enrollment forms, etc. We just migrated our site to a paid for service which included many features except a way to store, search and display forms (files).

I decided to use a Database Activity in Moodle. A few obstacles I initially saw:

• Integrate the activity into the district site seamlessly
• Integrate the look into the district site
• Customizing the display
• Meeting the district’s needs of menus, filters and search

Integrate the activity into the district site seemlessly

A simple solution for this, although I don’t particularly enjoy using them, was to use an iframe on our district web site. I only had a WYSIWYG Editor to use that allowed HTML. Clicking a link on the district site which opened a link in Moodle wasn’t an option. It needed to be embedded within the web site and not be noticeable that it’s using another product or site. So, iframe it was.

Integrate the look into the district site

The biggest issue was the header and footer in Moodle. I was able to remove all of this using the CSS template in the Database Activity. With much help from Mary Evans in the Moodle Forums on Moodle.org I used Firebug to accomplish hiding the header, breadcrumb navigation, description box and footer.

Below is the screenshot pointing out each section and below that is the code corresponding to each section in the screenshot.

/*Hide header, banner*/
#mod-data-view #header { display: none;}
#mod-data-view #banner { display: none;}

/*Hide breadcrumb navigation*/
#mod-data-view #page .navbar { display: none;}

/*Hide description box*/
#mod-data-view #intro {display:none; padding-top:0px;}


/*Hide footer*/
#mod-data-view #footer { display: none;}
#mod-data-view .paging {margin: 0px;}


Customizing the display

I lucked out in that the theme I picked, Leatherbound, matched most of the colors for our district site. Now, I wanted to add in some highlighting and shadowing. I lucked out again that Moodle.org has documentation on “How can I add highlighting like on the Modules and plugins page?“. I modified it a bit and put it in my CSS template.

Meeting the district’s needs of menus, filters and search

Finally, I needed to add in some drop down menus to departments and buildings. I got tons of help again, from the Moodle.org forums. Itamar Tzadok helped me out in several Database Activity Forum threads.

I put that HTML in the “List” template. I was able to get direct links to each “field” by manually searching for that field and copying and pasting it as a link. ‘Department’ and ‘Building’ were fields, so I was able to search (filter) and get the link.

After a lot of testing and troubleshooting here is the final product (you can see the Moodle Database Activity bordered in black)

You can see it live by going to http://bloomington.k12.mn.us click on “Quicklinks” in the top right, then click on “Forms A-Z“.

More helpful links

• “Examples of RSS and Javascript” – Database Activity Moodle forum thread
• “Different header for course and home page and activity?” – Themes Moodle forum thread

Phew, time for a treat! Moodle to the rescue!

Patrick Malley created a Moodle Slider for the front page of a Moodle theme. I think it’s pretty cool! It’s pretty slick and can save some space. I think it makes it feel a little more like a regular website.

The only problem, on our district Moodle site, is that we force our users to use My Moodle. When they log in they do not ever see the front page, they only see the front page when they are not logged in. Therefore, putting any important information there or spending a lot of time working on that may not be worth it if not many users see it.