YUI 3 JavaScript and Moodle

| 2 Comments

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="https://moodle.umn.edu/file.php/17763/mod03/transcript.html" class="pop-up-link">Transcript</a></p> </div> 
<script type="text/javascript" src="https://moodle.umn.edu/file.php/17763/Scripts/yui3-combo.js"></script>
<script type="text/javascript" src="https://moodle.umn.edu/file.php/17763/Scripts/yui3-open-window.js"></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) {
        e.preventDefault(); 
        var iURL = e.target.get('href');
        window.open(iURL, '_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="https://moodle.umn.edu/file.php/17763/styles.css" 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> 
    </div> 

    <p><a href="#"><img src="https://moodle.umn.edu/file.php/17763/images/butt_showanswer.gif" alt="Show Answer" width="128" height="27" border="0" id="ot-show-answer" ></a></p> 

    <script type="text/javascript" src="https://moodle.umn.edu/file.php/17763/Scripts/yui3-combo.js"></script> 
    <script type="text/javascript" src="https://moodle.umn.edu/file.php/17763/Scripts/yui-click-and-tell.js"></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 = Y.one('#mod-book-view #ot-show-answer').get('parentNode');
        
        parent.on('click', function(e) {
               e.preventDefault();
               var responseText = Y.one('#response-text');
               if (responseText.get('value').length >= 1) {
                       Y.all('.ot-hidden').removeClass('ot-hidden').addClass('ot-shown');
               }
               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.

More

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.

2 Comments

I am writing Javascript to use YUI3 for my own interactions, and my scripts all have the form
YUI().use('node', function(Y) {
...
});

Is it enough to include yui3-combo.js along with my scripts, as in the examples above? In other words, does yui3-combo contain everything I might need to use the Node component?

Good question. Yes, depending on how you build out the yui3-combo.js file yourself, the goal is that that has all you need for the Node component.

What I did was go to the YUI configurator ( http://developer.yahoo.com/yui/3/configurator/ ), and clicked on the Node option in the "Modules" window of the page. That results in a long script tag towards the top of the page that you could copy/paste into your course. I didn't do that though, as mentioned in the blog post, because the way it's written breaks down in Moodle. I think the ampersands are to blame.

Instead, I just went to the URL that the configurator puts into the script src attribute: http://yui.yahooapis.com/combo?3.3.0/build/yui/yui-min.js&3.3.0/build/oop/oop-min.js&3.3.0/build/dom/dom-base-min.js&3.3.0/build/dom/selector-native-min.js&3.3.0/build/dom/selector-css2-min.js&3.3.0/build/event-custom/event-custom-base-min.js&3.3.0/build/event/event-base-min.js&3.3.0/build/pluginhost/pluginhost-min.js&3.3.0/build/dom/dom-style-min.js&3.3.0/build/dom/dom-style-ie-min.js&3.3.0/build/dom/dom-screen-min.js&3.3.0/build/node/node-min.js&3.3.0/build/event/event-base-ie-min.js&3.3.0/build/event/event-delegate-min.js and saved that as yui3-combo.js If you were needing any other components of YUI3 besides Node, then you could follow this process and re-generate a yui3-combo.js file that'd work for all your needs.

Let me know if that doesn't answer your question.

Leave a comment