Challenge: The Northeast Minnesota Area Health Education Center (AHEC) was awarded a federal grant to expand and enhance palliative care practice and education at four rural sites in northern Minnesota. One of the grant projects was to create a website whose objectives are to facilitate knowledge sharing, facilitate education and training, support the recruitment and retention of health professionals in medically underserved areas, and serve as a link for regional and national resources.

Solution: A PallCI (Palliative Care Initiative) Website was developed to serve as a portal for preceptors and students to the course and training components of the initiative, to announce upcoming events for palliative care related events, and to provide a robust resource list that has been vetted by experts in the field.

Impact: Preceptors and learners involved in the initiative have access to learning materials and other palliative care resources. The greater public has access to a plethora of resources on palliative care and information about the Palliative Care Initiative. The website serves as a hub of information, current events, and news for the programs at the four member sites in northeast and central Minnesota.

Solution: We developed two online, self-paced courses: one for students and one for faculty and preceptors. The courses introduce the current state of social networking; allow learners to reflect on personal beliefs about online social networking and professionalism; and provide experience evaluating common social networking challenges by applying e-professionalism concepts and guidelines.

Impact: At the conclusion of the course, learners have an opportunity to reflect on their current use of social networking tools and how they may change their approach. Learners also receive guidelines for maintaining a ‘positive online presence’ that can help them advance their careers.

If you followed along with our previous post's Click and Tell example, or made something similar, here we'll take a look at what requires modification in your code once your course is upgraded to Moodle 2. To start with, take a look at how our references to JavaScript files looked in 1.9:

    <script type="text/javascript" src="https://moodle2.umn.edu/file.php/438/Scripts/yui3-combo.js"></script> 
    <script type="text/javascript" src="https://moodle2.umn.edu/file.php/438/Scripts/yui-click-and-tell.js"></script> 

In Moodle 2, since it already references the YUI 3 library in the head of the document, we can remove the reference to our custom implementation of YUI 3, shortening this to:

    <script type="text/javascript" src="https://moodle2.umn.edu/file.php/438/Scripts/yui-click-and-tell.js"></script> 

We'll also need to make a couple of minor adjustments in the JavaScript file itself, and in our CSS. The need for these adjustments comes from the fact that Book pages in Moodle 2 no longer have an ID of "mod-book-view" but rather "page-mod-book-view". That means that our JavaScript and CSS will not work unless we replace all instances of "mod-book-view" with "page-mod-book-view".

After you do that, your code should be good to go. The example above only directly applies to Books — if your JavaScript and CSS apply to something other than a Book, you'll need to change it accordingly. But the strategy is the same: update your JavaScript and CSS files so that they reference the new HTML structure of Moodle 2 pages, and your code should be fully functional.

Challenge: Augsburg College's Physician Assistant program joined with the University of Minnesota's School of Nursing Midwifery and Nurse Practitioner programs to develop a module on how family histories can be translated into genetic pedigrees. In the hands of health professionals with training in genetics, pedigrees can inform about the risk of disease as well as a patient's medical screening needs. An additional learning outcome for this module is the focus upon maintaining sensitivity to ethical and social issues while interviewing patients.

Solution: The AHC Learning Commons developed a website (available at https://healtheducation.umn.edu/genetics-pedigree/intro/ ) with various interactions to help learners gain an understanding of the topic:

• An introductory presentation with self-assessments of the key points covered
• Videos of a patients being interviewed for a genetic pedigree
• Learners' creation of pedigrees based on information in video interviews.

Impact: This module helps introduce a variety of health professionals and health sciences students to the process of developing genetics pedigrees. A highly interactive learning experience has been used that reflects what learners can expect to experience in practice. The module's audiences include:

• Doctoral and Master's degree students in genetics and other basic sciences and research
• Year 1 and 2 medical students participating in genetics labs and clinical rotations
• Students and faculty in the Augsburg College PA program, U of M School of Nursing Midwifery and Nurse Practitioner programs
• Students and faculty in other institutions in similar programs.

Through the step-by-step practice gained in this module, learners should be able to actively apply what has been learned in clinical practice.

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.

 
    <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.