Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Moodle JavaScript Cookbook
  • Table Of Contents Toc
Moodle JavaScript Cookbook

Moodle JavaScript Cookbook

4.7 (3)
Buy this Book
close
close
Moodle JavaScript Cookbook

Moodle JavaScript Cookbook

4.7 (3)
Buy this Book

Overview of this book

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

Loading a JavaScript file

A majority of the JavaScript we add will be contained within an external JavaScript file, which is a text file with a .js extension. In this recipe, we will learn how to use the $PAGE object to include such a file.

Getting ready

Make a new PHP file named requirejs.php in the cook directory similar to the template in the previous recipe:

<?php
require_once(dirname(__FILE__) . '/../config.php');
$PAGE->set_context(get_context_instance(CONTEXT_SYSTEM));
$PAGE->set_url('/cook/requirejs.php');
$PAGE->requires->js('/cook/alert.js');
echo $OUTPUT->header();
echo $OUTPUT->footer();
?>

Next, we create the accompanying JavaScript file, alert.js, with the following content:

alert('Hello World!');

Now when we load the page in a web browser, we see that the JavaScript alert is displayed as shown in the following screenshot, proving to us that our code has loaded and executed correctly:

Note that we see the Home button, meaning that the footer of the page has loaded. This is because our code is executed at the end of the <body> tag.

How to do it...

We have created a page based on the blank template we created in the first recipe of this chapter. To this, we have added the following line:

$PAGE->requires->js('/cook/alert.js');

How it works...

We are making use of the Page Requirements Manager, $PAGE, which is an object that contains various methods for setting up additional components for a page. Here we have called the $PAGE->requires->js method, and passed the path to our .js file as a parameter.

Moodle then adds this script to the list of scripts to be included within the final rendered page. A <script> tag similar to the following will be inserted just before the closing <body> tag:

<script type="text/javascript" src="http://localhost/moodle/lib/javascript.php? file=%2Fcook%2Falert.js&amp;rev=1"></script>

Note

The <script> tag is inserted at the end of the <body> tag, inline with the current best practice, offering the best page performance and a simplification of handling DOM-ready events among other reasons. For a fuller discussion of this technique, please refer to the Yahoo! Developer Network resource at the following URL:

http://developer.yahoo.com/performance/rules.html#js_bottom

This code must be included after the Moodle configuration file config.php has been included. This is where the $PAGE object is setup for us.

Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Moodle JavaScript Cookbook
End of Section 1
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon