Free Sample
+ Collection

Moodle JavaScript Cookbook

Alastair Hole

Make Moodle e-learning even more dynamic by learning to customize using JavaScript. With over 50 recipes, this Cookbook allows you to add effects, modify forms, include animations, and much more for an enhanced user experience.
RRP $23.99
RRP $39.99
Print + eBook

Want this title & more?

$12.99 p/month

Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Book Details

ISBN 139781849511902
Paperback180 pages

About This Book

  • Learn why, where, and how to add to add JavaScript to your Moodle site
  • Get the most out of Moodle's built-in extra—the Yahoo! User Interface Library (YUI)
  • Explore a wide range of modern interactive features, from AJAX to Animation
  • Integrate external libraries like jQuery framework with Moodle


Who This Book Is For

This book is aimed at developers and administrators comfortable with customizing Moodle with the use of plugin modules, themes, and patches who want to make their site more dynamic. If you have prior knowledge of HTML, PHP, and CSS and a good working knowledge of the underlying structure of Moodle, then this book is for you. No prior experience with JavaScript is needed.

Table of Contents

Chapter 1: Combining Moodle and JavaScript
Creating a new Moodle PHP page
Loading a JavaScript file
Loading a JavaScript file in <head>
Generating a JavaScript function call from PHP
Passing variables from PHP to JavaScript
Ensuring compliance with XHTML Strict
Retrieving language strings from Moodle
Chapter 2: Moodle and Yahoo! User Interface Library (YUI)
Initializing the YUI 3 library
Loading additional YUI modules
Loading YUI 2 modules from YUI 3
Attaching basic event handlers
Attaching advanced DOM event handlers
Implementing event delegation
Debugging with the YUI console
Chapter 3: Moodle Forms Validation
Adding a required field
Adding a field with a maximum length
Adding a field with a minimum length
Adding a field length within in a specified range
Adding a valid e-mail address field
Adding custom validation with a Regular Expression
Adding a field that accepts only alphabetic characters
Adding a field that accepts only alphanumeric characters
Adding a field that accepts only numeric characters
Rejecting punctuation characters
Rejecting input without a leading zero
Comparing with another field
Adding a custom JavaScript validation function callback
Chapter 4: Manipulating Data with YUI 3
Using IO to request a URI
Using IO's alternative transport method for requesting external URIs
Using PHP as a proxy to load data from an external domain
Parsing XML with DataSource
Parsing JSON with DataSource
Chapter 5: Working with Data Tables
Initializing a YUI DataSource
Displaying data
Basic column sorting
Adding paging
Enabling scrolling
Enabling editing
Chapter 6: Enhancing Page Elements
Adding a text box with auto-complete
Adding a combo box with auto-complete
Displaying auto-updating data
Enabling resizable elements
Adding custom tooltips
Adding custom button controls
Chapter 7: Advanced Layout Techniques
Adding a fly-out navigation menu
Adding a drop-down navigation menu
Displaying a tree-view navigation menu
Chapter 8: Animating Components
Fading in an element
Fading out an element
Scrolling an element
Resizing an element
Animating with easing
Moving an element along a straight path
Moving an element along a curved path
Changing an element's color
Sequencing multiple animations
Chapter 9: Integrating External Libraries
Adding the jQuery framework
Adding the MooTools framework
Adding the Dojo framework
Adding the Prototype framework
Adding the add-on to Prototype
Adding image enlargement with Lightbox 2

What You Will Learn

  • Get started with the Yahoo! User Interface Library
  • Add validation features to your Moodle forms
  • Retrieve and process data from external sites in a range of formats using AJAX
  • Add feature rich spreadsheet-style data tables—sorting, paging, and inline editing
  • Add auto-complete functionality to text boxes and combo boxes
  • Make use of advanced navigation controls—drop-down menus, tabbed panels, and modal windows
  • Use animation techniques—fading, scrolling, and resizing
  • Integrate external libraries such as JQuery framework, MooTools framework, and Dojo framework
  • Initialize a YUI DataSource

In Detail

Moodle is the best e-learning solution on the block and is revolutionizing courses on the Web. Using JavaScript in Moodle is very useful to administrators and dynamic developers as it uses built-in libraries to provide the modern and dynamic experience that is expected by web users today.

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. It will explain how to integrate Yahoo! User Interface Library (YUI) with Moodle. YUI will be the main focus of the book, and is the key to implementing modern, dynamic feature-rich interfaces to help your users get a more satisfying and productive Moodle experience. It will enable you to add effects, make forms more responsive, use AJAX and animation, all to create a richer user experience. You will be able to work through a range of YUI features, such as pulling in and displaying information from other websites, enhancing existing UI elements to make users' lives easier, and even how to add animation to your pages for a nice finishing touch.


Read More