February 23, 2012 | By: Nick Morris

Aa Aa Aa

Surviving the semester: Designing a virtual lab - HTML5

One final twist to the semester was we needed to design and implement a new online practical.

Traditionally this lab was delivered as a 'wet' practical, that is, the students were in the lab doing experiments at a bench, exploring the genetics of fruit flies. However, it was becoming increasingly clear that the practical was not really meeting its learning outcomes and that in fact there may be a better way of delivering it. Hence, it was decided in late summer to try and make this lab virtual. And luckily recent changes and advances in web browser technology, i.e. HTML 5, greatly helped this process.

The problem

Having run a number of virtual labs over the years in bioinformatics and protein analysis I was aware of the problems involved in delivering such material and also how the static nature of a web page, and of websites in genera,l can be very boring and tedious for students. Click, click, click.... Therefore, what we needed to do for the online fruit fly practical was deliver something that was interactive and moved, and where possible reproduced some of the experience the students gained in the 'wet' fruit fly practical. It was clear that there was a need for animation, and possibly some 'gamification'* (a word I don't like) to engage the students. It turned out that the solution to this was to use HTML5.

The solution

HTML5 is a new web standard for the language that describes how webpage should look and feel in a web browser. HTML5 is not a finished standard (and judging by the speed that [W3C](http://www.w3.org/TR/html5/) is moving at it never will be a finished standard), and therefore is in a state of flux and is liable to change. However a number of the major web browsers such as Internet Explorer, Firefox, Safari and Chrome have already decided to adopt a parts of the new HTML5 standard, and one part of the new standard that has been adopted, and was most useful for dealing with this lab, was animation.

Using the animation commands and tools that are available as part of HTML5 it was possible to produce a number of 'virtual' fly labs, and the final version of the practical had three such labs: 1. Sexing fruit flies; 2. Identifying fruit fly mutant; and 3. Determining the genetics behind the mutation. All three 'labs' had the same underlying idea in that there was a small window with a number of fruit flies running around which the students were able to 'anaesthetise', so they stopped moving, and which they could then examine by clicking to get an enlarged image (see figure below). The students then answered any questions associated with the particular lab, such as what was the sex of the fruit fly, the type of mutation, and determining the inheritance patterns for different crosses of fruit fly mutants.

The above image is of the fruit fly 'sexing' lab - unfortunately I cannot show you the animated version of the lab as I am unable to add the necessary javascript to this page to get the flies to move.

In the above image the student has 'anaesthetised' the flies so they are no longer moving, and then clicked on a fly to get an enlarged view. The student can then answer the question as to the sex of the fly.

Two final problems - one mine, one HTML5....

Coding up the lab was fairly straight forward and after some initial fiddling and debugging of the code everything was working. However, there were still two problems.

The first problem was that the virtual labs would only work in the latest versions of the browsers for Internet Explorer, Safari and Chrome, and would not work at all in Firefox. For me this was a real shock as I was expecting any problems to be associated with Internet Explorer. In turns out that the reason the lab would not work in Firefox was because Firefox has not yet implemented one of the key animation calls that is used to control the animation. No doubt (hopefully) this will be included at a later update of Firefox.

The other problem is purely down to my code. The virtually labs rely on a number of 'random' number generators and some trigonometry functions to control the movement of the flies. Somewhere in the code I have something wrong because if I leave a lab running for an extended period of time all the flies end up wandering around the bottom right-hand corner of the screen. Although this does not detract from the experience of the lab, it is annoying! (You can see this beginning to happen in the above images)

Summary

The lab was designed to run in a 3 hour slot with the students exploring the virtual fly labs for the first two hours, as well as completing a number of other tasks, including answering a number of formative questions, with the last hour used to start the online summative assessment. I was surprised to find that the students managed to work through the lab section in about 90 minutes, however, those that rushed the lab did find the summative assessment more difficult.

The lab seemed to work very well and there were no obvious problems or complaints on the day. The final marks for the online summative assessment were inline with other modules, and other work completed by the students, so overall I think the lab was a success, and met the learning outcomes for the session.

I now await the official student feedback on the lab....

(* gamification is the use of game-like ideas and strategies to help students learn, that is, the students learn whilst they are having fun and playing a game. A sort of learning by stealth.)

2 Comments

February 28, 2012 | 08:15 AM

Posted By: Nick Morris

Thanks for the comment.

I did think of using real videos but I had a number of problems with the idea. First, there were the technical limitations that you mentioned; second I wanted each students to have a unique experience and for them not to be all looking at the same thing, plus I wanted the students to be able to repeat any tasks they felt they hadn't understood and get a different experience (this was particularly true of the 'mutant' labs in which each go generates a different set of mutants); and third I couldn't find any suitable videos (finding suitable fly images was tough enough!). Ideally what I wanted to do (and this was my original plan) was to use photos of flies in the animations, but I couldn't find a complete or consistent photo-set.

February 26, 2012 | 04:22 PM

Posted By: Harry Keller

This is the first real HTML 5 "lab" that I've seen. It seems as good as many that preceded HTML 5.

Would it be preferable to use real videos of the flies instead of the animations. If you had a sufficient number, then the result would be much like the prior "wet" lab practicals.

HTML 5 will let you show videos but not interact with them in useful ways. Javascript is good for simple web page stuff, but not a heavy-duty professional programming language. You could, however, use Java to make the videos interactive.

I dislike 'gamification' as a word too. Also, "21st-century skills" and other such words and phrases. Looks like they're here to stay, though. Game-creation strategies will work their way into learning software. Count on it.

Anyway, "prerecorded real experiments" could be a way to go for this sort lab that would eliminate the animation aspect in favor of reality.

Surviving the semester: Designing a virtual lab - HTML5

share

Email your Friend