both time and money (for labs, equipment, consumables, etc.); college students expect it to happen in their courses, but university administrators are hesitant to pay for it. This dilemma calls for a low- or zero-budget solution, and HTML5 and JavaScript provide this solution with the additional benefit of a plethora of freely available tutorials and other resources.
HTML5 and JavaScript provide a learning lab environment with free browser software. All mainstream browsers on all popular OS platforms handle HTML5 and have native JavaScript interpreters, though some handle scripts more gracefully than others. Chances are that any device your students bring with them to the classroom will have fully functioning browsers that can handle any JavaScript problem that you throw at them. And because these interpreters are already installed, the software is not only free but requires no management and support from your end.
Faculty and students can learn JavaScript (especially as it interacts with HTML5) on numerous free tutorials on the internet. There are also inexpensive trade books for those students who may choose to be offline. Many of these are available for eAccess through school or public libraries.6
And although my area of work with students is in the digital humanities, any course or program that uses textual analysis as a major component of its student learning objectives can benefit from this assignment (or variations on it). Journalism (e.g., news stories, social media, blogs, transcriptions of talk radio), English literature and composition, modern language literature (as long as both versions of the text are of the same language and from the same era), and political science (speeches and debates) are just a few examples of programs that could benefit from using HTML5 and JavaScript to develop textual analysis or visualization tools. And, finally, developing the assignments for the classroom is not as difficult as you might think.
DEVELOPING AN HTML5/JAVASCRIPT LAB FOR YOUR COURSE
Luckily, there are many online resources to help with the programming aspect of the assignment, so if you are not a coding wizard, you do not have to be. Do you know how to look up a specific task or problem on the web? Then that is all you need. What follows is a brief description of how I introduced and managed my HTML5/JavaScript project in the classroom.
It helps if the students already know a programming language—any programming language. Those students will know all the basic components and structures of programming, like creating and using variables, string functions, loops, conditional structures, and perhaps lists or arrays. For these students, all they need to know is the specific JavaScript syntax, which can be accessed through a trade book or online resource.
If students do not already know a programming language, it is not a deal breaker for the project. You will just have to scaffold a bit beforehand and give the students some basic introduction to working with HTML5 objects and JavaScript string manipulation. My experience with students is that, if they are motivated to learn something (and this project has the “cool” factor to provide plenty of that, I think), they will access online resources and learn what they need to learn “just in time.” All you have to do is point them to safe, reliable resources and get out of their way.
When assigning a project like this one, students must start with “the stuff on the page.” They cannot use HTML5 objects in your JavaScript code that do not yet exist in HTML code in the file. Urge them to look at their page designs and make sure everything shows up, and then encourage them to play with the objects to gain familiarity.
Next, they should add the JavaScript that does the work. Your approach can range from a description of what you want the students’ scripts to do, followed by a “Now, go to it!” (for students who already know how to code, or for a second or third project in the semester class), to providing some base code and asking students to modify and augment it (for novice students or those in generally noncoding academic domains). It may very well be that you will have a classroom composed of both types of students; in those cases, I have found an “if you know what you are doing, go to it!” combined with an “if you don’t know what to do, take this base code and watch me” seems to suit most needs for a classroom of mixed-skill students. Figure 6.2 shows a small excerpt of my approach at JavaScript code for solving a textCompare problem that we cover in the class.
In either case, it is of utmost importance to embrace creativity and let your own vision of the perfect tool go. This is not your tool. Look at it like an art teacher would: you would not be happy with students who simply copied your painting, would you? Do your own working version of the project before assigning it to your students, but keep it in your back pocket and let the students grow into their own versions.
Figure 6.2. Example of JavaScript code for the textCompare problem.
Next, display and gently critique exemplary student work during class. The ones who “got it” (and, therefore, whose works you choose to display) will be thrilled. The students who struggled will see that someone like them really can do this. If a member of the class has touted herself or himself as particularly adept at coding from the start, displaying and critiquing that student’s work will be less helpful. It is better to choose the students with hidden talents that have blossomed during the class, as a kind of EveryStudent.
Figure 6.3 shows an example of JavaScript written by students for an interactive information form that generates new combo boxes based on user selections. Each student group was given an information knowledge base to model that would provide users with customized information based on their entered preferences. The JavaScript code in figure 6.3 was written early in the semester in a web programming course by a group of students who had already taken an introductory programming course but who otherwise had little prior experience with writing JavaScript code.
Figure 6.3. Example of student JavaScript code.
Finally, give them someplace to go from there. HTML5 and JavaScript are there for the taking. Literally, if students can figure out how to solve a problem in their heads, they can program a computer to solve the problem. It is important to help them realize that HTML5 and JavaScript are freely available to them at any time, in any place (even those places that do not have internet access), so how and when they engage problems on their own is totally up to them.
Figure 6.4 depicts the textCompare tool that I created to compare the Skelt and Folger versions of the Othello play.7 Though it could stand some further refinement, it succeeded in allowing me (and my students) to compare, side by side, the two scripts and determine that Skelt used a strategy of erasure—starting with the full script and “erasing” large parts—to reduce the full Othello play down to a toy theater play that could be performed in under an hour. This determination would have been quite difficult to make while going back and forth between two hard copy scripts.
In cases where the students have few or no programming skills—and are reluctant to acquire them—you may have to provide your version of the tool for the students and just skip to the analysis part. This is sometimes necessary, because it assures you that every student will have adequate data to investigate in analysis. However, this approach perpetuates the computer programming as “magic” myth. In that scenario, students throw in text from two different sources, and “Abracabra!” a comparative visualization appears. How will they truly be able to analyze the data unless they have at least a fundamental idea of how they were generated?
Figure 6.4. The working textCompare tool showing output.
I have also used HTML5 and JavaScript tools to visualize linguistic complexity in Shakespeare’s works and to classify genre-rich words among dramatic and fictional