Wednesday, March 30, 2011

Collecting immediate feedback for an online course

I'm in the process of developing an online course for the Technology in Education (TIE) program: Designing Resources for the Internet.  We use Blackboard (WebCT version) at my university.  Fortunately, I don't have to completely rely on the Blackboard tools to create the content of the course, since the WebDAV interface allows me to use Dreamweaver to do most of the development.

(I love Dreamweaver...having been using it--and teaching it--since 1998...and am getting myself up to speed on some of the new features and capabilities in CS5...but I digress.)

This course focuses on the design and development of online resources for teaching and learning (specifically WebQuests or other types of curriculum webs) the faculty of the program have had the constant challenge of deciding which tools are right to teach in the course.  We've tried FrontPage, Komposer (an open-source version of the old Netscape Composer), Seamonkey, and Dreamweaver.  Personally, I prefer Dreamweaver over all of the other options, due to its power.

(The students are sometimes put off by the cost of Dreamweaver...and some say they will never use it again after the course...but we've managed to address some of these concerns by supplying it in our computer labs and by making different trial versions available--thus extending the normal 30-day limit to a trial. In any case, I am developing this current version of the course to focus on Dreamweaver.)

One of the challenges that this creates is shifting the instructional model for learning the software from direct instruction with guided practice (as I do in the face-to-face environment) to having the students learn the software on their own, with the support of online resources. In essence, I'm replacing my direct demonstration of processes in class with written instructions and videos.  I'm taking many of these videos from AdobeTV, and some others from elsewhere around the web (including YouTube and eHow).

The quality and suitability of theses videos varies, of course, especially given that the students in the course are mostly full-time K-12 teachers, rather than budding web designers.  I find myself wondering, for example, the extent to which they will be put off by the focus in many of the AdobeTV videos on web designers as the audience.  I also wonder how many of them will actually watch these videos...or will find videos on their own...or will use other methods for teaching themselves.

Yesterday while walking to pick my son up from school, I was wrestling with some of these questions, and I had an idea:  Maybe I could put a little "rate this resource" tool on each video or other resource and get some feedback from the students about what they find most valuable.  I was thinking along the lines of the rating scales used by many web sites that simply require the user to select a certain number of stars or circles, like these that appear on the tripadvisor.com site:

I thought that if I could make my feedback collection as quick and seamless as possible for the students, they would be eager to help me learn what helps them learn best.

So my first thought was that maybe I could find a Javascript applet that would do the trick.  I did a bit of hunting around using Google and couldn't find anything that would work easily for me.  Then, I had the idea that maybe someone had created a Dreamweaver extension that could do this.

Sure enough, upon searching the Dreamweaver exchange, I found a Spry widget called Rating that would do exactly what I wanted.  So I downloaded it and installed it into Dreamweaver, and now it appears on my "Insert" menu along with other Spry widgets that come prepacked into Dreamweaver.


Adding the widget into one of my learning module pages (just under a video) was fairly easy.
However, then I began getting in over my head.  The widget uses Javascript, of course, which I only know a little about.  And it didn't come with directions, so I was a bit in the dark about where the data would be collected once the students had responded. I fumbled around for an hour or two before finally finding some pages with instructions on the Adobe site.

The instructions contain a somewhat misleading section with this introductory sentence:
If you want to add some optional functionality to this widget, add the options that fit your requests to the widget constructor.
This is a bit odd, since the widget doesn't work at all (other than presenting a pretty picture to the end-user) without setting some options...most specifically, information about where to put the data and how.

I had to remind myself of a few things about Javascript syntax, but was able to figure out enough to put what should have been a working copy of the widget into the page.  However, there proved to be one big problem:  no way for me to change the permissions of a file in Blackboard to allow this Javascript to write to it! (I've seen that some of the newer versions of Blackboard do have something called a "Content Connection" that provides this functionality, and I do realize that with permission from the IT staff I should be able to do it--but I've had enough experience with them to know that a request from a mere faculty member to open a security hole is pretty unlikely to be granted).

So, I thought, I'll put the data file on another server, outside of the University, that I do have some control over.  So I put the data file at http://craigcunningham.com (which is hosted at the Chicago Public Schools/University of Chicago Internet Project, CUIP).  Unfortunately, that didn't work either.  So I emailed the server administrator and asked him if he could help with the permissions.  His response wasn't entirely encouraging:

I'll look into it later today.  I'm a little wary about XML-RPC stuff in
PHP as that's how our WPMU was hacked a couple weeks ago, but maybe there's no problem.
I'm sure that he (who is quite responsive as well as very responsible and capable) will do what he can to make this possible.  So I'll await his response.

But then I had another idea...even though I really like the rollover stars in the Spry widget...couldn't I just embed a Google form into the Blackboard pages?  (I already knew that embedded forms work just fine in Blackboard.)

So, I created a very simple form, which looks like this:

And...it certainly works as a way to collect some feedback. (When you "embed" the form, it uses an <iframe> tag...and when you submit it, a standard--but customizable--"thank you" appears in the frame. So far, so good. The problem is, when you embed that little form with one question into the page, it takes up a crapload of screen real estate (760x762 pixels, to be exact), and also distracts quite a bit with the "Powered by Google Docs Report Abuse - Terms of Service - Additional Terms" stuff.

So I wondered if the embedded Google form could be customized a bit.  I searched Google (!) for "google forms embed size format" and found a blog entry called "Customize Google Docs Form." Unfortunately, that blog post was primarily about including some kind of data validation in a form...not what I needed.

However, I found a comment on that post that said:
As it happens I just wrote a tutorial for styling Google Forms: http://www.morningcopy.com.au/news/how-to-style-google-forms/
 So of course I hurried over to that Australian site and found "How to style Google Forms," which included exactly what I needed!

The essence of the instructions there is that rather than simply embedding the form using Google's automatically generated embed code (which uses an iframe), you open up the page source of the form and only copy the part that is actually between the
tags. Then, you can format the form any way you like, and even change the confirmation message so that it suits your purposes.

What I found was that the only way to get my custom confirmation message to appear in situ on the page was to reintroduce the iframe, only this time without it containing the Google forms page...but, instead, a file of my own containing just the relevant form; tags. That way, the confirmation message (which is itself in a separate file) appears <i>in situ</i> as well.

So here's the code in the learning module page:
<!<iframe src="test_form.htm" width="450" height="250" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>>
 And here's the code in the "test_form.htm" page:
<script type="text/javascript">var submitted=false;</script>

  <iframe name="hidden_iframe" id="hidden_iframe"

  style="display:none;" onload="if(submitted)

  {window.location='thanks.htm';}"></iframe><form action="https://spreadsheets.google.com/formResponse?formkey=XXXXX" method="POST" id="ss-form" target="hidden_iframe" onsubmit="submitted=true";>

<br>

  <div class="errorbox-good">

  <div class="ss-item  ss-scale"><div class="ss-form-entry">

  <label class="ss-q-title" for="entry_0">Please rate how useful this video was to you right now.

  </label>

  <label class="ss-q-help" for="entry_0"></label>

 

  <label class="ss-q-help" for="entry_0"></label>

  <table border="0" cellpadding="5" cellspacing="0"><tr><td class="ss-scalenumbers"></td>

  <td class="ss-scalenumbers"><label class="ss-scalenumber" for="group_0_1">1</label></td> <td class="ss-scalenumbers"><label class="ss-scalenumber" for="group_0_2">2</label></td> <td class="ss-scalenumbers"><label class="ss-scalenumber" for="group_0_3">3</label></td> <td class="ss-scalenumbers"><label class="ss-scalenumber" for="group_0_4">4</label></td> <td class="ss-scalenumbers"><label class="ss-scalenumber" for="group_0_5">5</label></td>

<td class="ss-scalenumbers"></td></tr>

  <tr><td class="ss-scalerow ss-leftlabel">not at all</td>

  <td class="ss-scalerow"><input type="radio" name="entry.0.group" value="1" class="ss-q-radio" id="group_0_1"></td> <td class="ss-scalerow"><input type="radio" name="entry.0.group" value="2" class="ss-q-radio" id="group_0_2"></td> <td class="ss-scalerow"><input type="radio" name="entry.0.group" value="3" class="ss-q-radio" id="group_0_3"></td> <td class="ss-scalerow"><input type="radio" name="entry.0.group" value="4" class="ss-q-radio" id="group_0_4"></td> <td class="ss-scalerow"><input type="radio" name="entry.0.group" value="5" class="ss-q-radio" id="group_0_5"></td>

  <td class="ss-scalerow ss-rightlabel">very useful</td></tr></table></div></div></div>

  <div class="ss-item ss-navigate"><div class="ss-form-entry">

  <input type="submit" name="submit" value="Submit"></div></div></form>

And here's how the feedback looks in situ, now:


And when you submit the feedback:


Wow...not bad, huh?

And Google handles all the data collection, and even presents me with some great graphics:



(Did you know you can just copy a window on your screen--using Alt-Prtscrn--and paste it right into the Blogger editing window!?!??!  Until now, I always used the image button and had to upload the image...wow...this is MUCH better...for any image I don't need to edit!)

I'm pretty pleased with this solution, although I still plan to pursue the Spry widget (since it's much prettier), and want to see what I can do to add a hidden field to the form that indicates which video or resource it is referring to (so I can duplicate it throughout the course without having to create a whole bunch of separate forms).  But I wanted to put this out there now, while it's fresh in my mind...because I'm sure there are others who want to get feedback from their online students in a quick and relatively painless way.

(And I just had another idea...maybe I can use the user-interface from the Spry widget--the rollover stars--in my hacked Google form! Maybe I'll work on that for a while....)