March 2011 Archives

YUI 3 JavaScript and Moodle


Update: In addition to this post, see our more recent post on YUI 3 JavaScript in Moodle 2.

For the content that our group develops in Moodle, we often find ourselves wanting some more interactivity than what the standard activities provide. So, we've often turned to JavaScript and Flash to add interactions. JavaScript in particular is good when we also want to keep the content easily maintainable by the instructors themselves. This post goes over some of what we've found works well, and how we're trying to prepare for the University's upgrade to Moodle 2.0.

A few years ago, Moodle developers needed a JavaScript library for a variety of interactions that the system provides. From among the ones available, the Yahoo! User Interface (YUI) library was chosen. As a result, Moodle has a JavaScript library available for web developers on each page of their courses. It's also possible to include other JavaScript libraries (e.g. jQuery) into the source code of a Book, for example, but the advantage of using the YUI library is decreased file size of the page. One complication in using YUI is that Moodle 1.9 uses YUI 2, while Moodle 2.0 uses the improved YUI 3, which has different syntax. In actuality, Moodle 2.0 currently also allows the use of YUI 2, but by developers using YUI 3 instead, their scripts will be better prepared for Moodle's future, when YUI 2 won't be supported.
So, in order to prepare our interactions as much as possible for Moodle 2.0, we've begun scripting in YUI 3. Some examples are below.

Pop-Up Boxes

Pop-up boxes, as much as they're disliked in many situations, still sometimes make sense. One example is transcripts of otherwise inaccessible content. Below is an example of how we've implemented pop-ups.

  <p><a target="_blank" href="" class="pop-up-link">Transcript</a></p> </div> 
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>

You'll notice there are two JavaScript files called here. One is yui3-combo.js, which I was able to generate using the YUI Configurator, which allows you to configure the appropriate JavaScript library for your needs. Making it customizable allows you to keep it lean, too, rather than including all features all the time. I then made a single JavaScript file from the library that the Configurator generated, since the actual script tags generated can break down once brought into Moodle 1.9's text editor.
The other JavaScript file is yui3-open-window.js.  Using YUI 3's syntax, this just tells the browser to cause any link with a class of "pop-up-link" to, in fact, open in a pop-up.

YUI().use('node', function(Y) {
    var interceptLink = function(e) {
        var iURL ='href');, '_blank', 'width=800,height=500,scrollbars=yes');
    Y.on('click', interceptLink, '.pop-up-link');

Throughout the course, wherever a pop-up is needed, it just requires adding a CSS class and a couple lines of code to reference the JavaScript files, and it works.

Click and Tell

One of the interactions that we commonly use is what we call a click-and-tell. The learner is presented with a question, they have a text area to reply to the question, and then when they submit their answer, they're immediately given feedback text. This interaction can have complicating factors if need be (e.g. check whether the user's text contains a certain phrase), but the example here will just check whether something has been entered, and then give general feedback.

The click-and-tell when submitted

    <link type="text/css" href="" rel="stylesheet" />

    <p class="instructions">What version of  YUI does Moodle 1.9 use?</p> 

    <textarea name="textarea" id="response-text" cols="80" rows="5"></textarea> 

    <div class="ot-hide"> 
        <p>It uses YUI 2. YUI 3 didn't come on the scene until Moodle 2.0, unless you yourself include the library into your page!</p> 

    <p><a href="#"><img src="" alt="Show Answer" width="128" height="27" border="0" id="ot-show-answer" ></a></p> 

    <script type="text/javascript" src=""></script> 
    <script type="text/javascript" src=""></script> 

Again we've included the yui3-combo.js script, to allow us to use YUI 3's functionality in Moodle 1.9. We've then also referenced yui-click-and-tell.js, which contains the following:

YUI().use('node', function(Y) {
        Y.all('#mod-book-view .ot-hide').addClass('ot-hidden');
        var parent ='#mod-book-view #ot-show-answer').get('parentNode');
        parent.on('click', function(e) {
               var responseText ='#response-text');
               if (responseText.get('value').length >= 1) {
               else {
                       alert("Please fill in a response to the question.");

A few things are going on here. When the page first loads, and it comes across yui-click-and-tell.js, it first adds a class of 'ot-hidden' to anything on the page that already has a class of 'ot-hide'. The CSS of the site has a declaration for 'ot-hidden' that moves it off-screen, but it can remain visible to screen readers using different techniques. If a user does not have JavaScript enabled, however, we don't want it off screen; in that case, the interaction couldn't be completed, and the user would never see the answer. That's why it doesn't start off as having the class 'ot-hidden'.

Going down, when someone clicks the Show Answer button, the script checks whether any text was entered in the text area. If so, it removes the 'ot-hidden' class and adds a 'ot-shown' class. If no text was entered, then it alerts the learner to fill in a response.
The end result is a thought-provoking, interactive element that's also accessible. What is also important, it's maintainable by instructors of the course. The text of this answer appears in the text editor when an instructor goes to modify the page, so that they can change the content as needed.


If you're interested in learning more about YUI 3, take a look at Yahoo's extensive documentation. For jQuery users, there's also a Rosetta Stone for working with YUI 3.