The following appeared in Volume 98, Number 2 (Spring, 1999) of the APA Newsletters
Newsletter on Philosophy and Computers
Dreamweaver Attain
Lawrence M. Hinman
University of San Diego
hinman@acusd.edu
The World Wide Web began as a bulletin board, displaying static information quickly and easily to a potentially unlimited audience. Its initial attraction was the way in which the web could display text and graphics on a single page. Creating pages was not very difficult, reminiscent of the early days of word processing programs such as WordStar. It quickly became easy to create a page, whether it was a scientific paper or a family photo album.
Transforming the Web
Three developments have transformed the web and are taking it to a new level. First, the web is becoming a multimedia web. The implications of that are beyond this review, but the easy accessibility and widespread use of RealVideo in covering the impeachment and trial of the President shows that video has arrived. Second, web pages are no longer static; they are dynamic. Increasingly, the model for web pages is a data-driven Active Server page which is created "on the fly" in response to a users query. This is the type of page one typically encounters when making on-line airline reservations or looking for books on Amazon.com. The third development, which ties in closely with the second, is that the web is becoming increasingly interactive. Users are permitted, even expected, to do thingsclick, select, drag and drop, enter textas they read pages.
While database-driven pages originally spurred the development of interactivity by letting users click to select products, airline flights, and the like, it wasnt until the advent of dynamic HTML that interactivity started to get really interesting. Dynamic HTML allows the browser window to be much more responsive to the actions of the user. Previously, HTML would respond to a mouse click, but that was about it. In DHTML, the browser recognizes when the mouse rolls over a particular area and it can respond in numerous waysswapping images, changing font colors and sizes, playing sounds, and triggering other events.
Web-based Interactions
All of this opens up interesting possibilities for setting up web-based interactions for students. Some of these are fairly standard and do not even require DHTML: true/false questions, multiple choice questions (whether with a single true answer or several true answers), and fill-in-the-blank questions. The DHTML does allow faster and more varied feedback by hiding or showing particular layers in response to specific actions.
Where DHTML really excels, however, is in creating more graphically based interactions. Here are two examples of things one can do in logic. Typically, in the first week of logic, we spend time on identifying premises and conclusions as well as indicator words in passages in ordinary language. With DHTML, it is possible to set up an interaction for students in which they are asked to click on each premise, drag it to an area labeled "premises," click on the conclusion and drag it to an area labeled "conclusion," click on any premise indicator words and drag them to yet another area, and the same for conclusion indicators. When they are finished, they click "Submit" and then you can automatically give them feedback whether they have dragged the components to the correct places. If you want, you can structure the interaction in such a way that, if the user drags an object to the wrong place (e.g., a conclusion indicator to the premise indicator area), it snaps back to its original position. This is helpful on the first few questions, since it gives immediate feedback on incorrect choices. In other disciplines, this would be useful for such things as dragging names to locations on a map, names to chemical structures, and the like.
A second way in which DHTML can be used in logic is Venn diagrams. Its comparatively easy to set up an interaction in which students are asked to click on the appropriate regions of a Venn diagram to diagram premises and then to indicate whether the argument is valid or not. Moreover, its possible to provide customized feedback for various mistakes (e.g., "No, that diagram says that All M is S instead of All S is M.").
To code such interactions in DHTML is a long and tedious process, and it is here that Macromedias new Dreamweaver Attain comes to the rescue. Dreamweaver itself began as a web-authoring tool, and its principal strength was that it supported cutting-edge web standards like DHTML, that it was friendly to both Netscape Navigator and Internet Explorer, and that it did not alter the code already on your pages as, for example, Microsoft FrontPage tended to do. I found myself using Dreamweaver whenever I wanted to do something interesting and using FrontPage for more routine tasks on my web sites. The first version of Dreamweaver was good, release 1.2 was even better, andmost recentlyversion 2.0 was superb. In between versions 1.2 and 2.0, Macromedia introduced Dreamweaver Attain, which was simply version 1.2 with the addition of what Macromedia calls "Knowledge Objects." The 2.0 version of Dreamweaver Attain has been announced but has not yet appeared.
Knowledge Objects are simply very sophisticated wizards for the creation of the DHTML code necessary to construct the complex interactions found in multiple choice, drag and drop, and other interactions. Much of the code for a multiple choice question, for example, is reusable, and Knowledge Objects allows you to plug in the variables (the specific question, the possible answers, the possible responses to each answer, etc.) and then the KO takes care of actually generating the code. It also allows editing of the code after it has been generated. These same Knowledge Objects, incidentally, are used in Macromedias Authorware Attain, an authoring system for creating interactive CD-ROM disks and web sites.
The real pedagogical value of this type of software lies, I think, in the instructors ability to code in customized responses for specific mistakes. Once instructors have taught a course a few times, they can anticipate a number of the more common mistakes that students make. If a customized response can be entered for each of these mistakes, then this type of software can be an extremely powerful teaching tool. This, it should be noted, is an extremely time-consuming process. However, once the interactions are set up and the customized feedback entered for various common mistakes, hundreds of students can then receive that feedback without any further work on the part of the instructor. Without experienced instructors creating the specialized feedback for each wrong answer, programs such as these become high tech reincarnations of the "teaching machines" of the 1950s. In the hands of experienced instructors, however, these programs offer the allure of maximizing the impact of years of teaching experience.
How to Do It
The actual process of creating interactive questions is comparatively easy. One just drags a KO from the toolbar onto a page, and a wizard pops up and asks a series of questions about the type of interaction: true/false, multiple choice, fill-in, slider or drag and drop. Notice that it also allows you to choose whether to write just for 4.0 browsers or also for version 3.0. If you select 3.0 browsers, then the only option is multiple choice.
Once you have selected the particular kind of knowledge object you are going to use, then you must supply the content: the question and the possible answers. The interaction itself gets a name, in this case cb_text01. Then you simply type the question is the box for Question Text. You may also choose when the interaction is judged (immediately after any input, or only after the "Submit" button has been pushed). You can determine what counts as a correct answer, how many tries the student has, and whether there is a time limit.
Once these questions have been answered, you are given the additional option of standardized responses for right and wrong answers or else you can have an individualized response for each particular mistake. Although customizing the responses for wrong answers is time-consuming when creating the interactions, it is often worth the time. Typically, in a course that we have taught several times before, we know many of the mistakes students are likely to make and the specific point they are overlooking when they make that mistake. Customized feedback can target and help students to understand those typical mistakes.
Once all of this has been set up, you determine for each of the choices whether it is correct, incorrect, or not judged and assign a point value to each possible answer. You may also rearrange the order of the answers and, if appropriate, associate image files with each answer.
After making all these choices, click "OK" and Dreamweaver Attain will construct your question for you and write the code behind that page that handles the interaction. The resulting question looks like this:
If the question looks short, the code behind it that Dreamweaver Attain generates isnt. Heres what the entire page looks like behind the scenes:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF"><!-- #BeginCustomObject name="cb_text01" template="001_Multiple Choice\030_cb_text_03.kot" type="Knowledge Obj" wizard="Knowledge Object" -->
<script language="javascript" src="scripts/behActions.js">
if(0){MM_callJS();MM_changeProp();MM_checkBrowser(); MMcheckPlugin():MM_controlShockwave():MM_controlSound(); MMcontrolSound();MM_displayStatusMsg();MM_goToURL(): MM_openBrWindow();MM_popupMsg();MM_replaceLayerText(); MM_showHideLayers();MM_swapImgRestore(); MM_swapImage(); MM_validateForm();}
</script>
<script language="javascript" src="scripts/behKnowledgeActions.js">if(0){MM_judgeKO();MM_resetKO();MM_setKOProperties(); MM_cmi SetTime();MM_cmiSetLessonStatus(); MM_cmiSendScore();MM_cmiSendObjectiveInfo(); MM_cmiSendInteractionInfo();}
</script>
<-- Copyright 1998 Macromedia, Inc. All rights reserved. -->
<script language="javascript" src="scripts/intClass.js"></script>
<script language="javascript" src="scripts/elemInptClass.js"></script>
<span name="K01question">Put question here: <br>
</span>
<form name="K01choices">
<span name="K01choiceA">
<input name="K01choiceAInp" type="checkbox" onClick="K01.e[choiceA].update()">
textchoiceA<br>
</span> <span name="K01choiceB">
<input name="K01choiceBInp" type="checkbox" onClick="K01.e[choiceB].update()">
textchoiceB<br>
</span> <span name="K01choiceC">
<input name="K01choiceCInp" type="checkbox" onClick="K01.e[choiceC].update()">
textchoiceC<br>
</span> <span name="K01choiceD">
<input name="K01choiceDInp" type="checkbox" onClick="K01.e[choiceD].update()">
textchoiceD<br>
</span>
</form>
<form name="K01controls">
<input name="K01judge" type="button" value="Submit" onClick="MM_judgeKO(K01)">
<input name="K01reset" type="button" value="Reset" onClick="MM_resetKO(K01,reset)">
</form>
<script language="JavaScript">
<!--
function newK01() {
K01 = new KO_int("K01",0,1,1,null,0,0,0,"","","c","",0);
K01.add("inpt","choiceA",0,1,null,0);
K01.add("inpt","choiceB",0,1,null,0);
K01.add("inpt","choiceC",0,1,null,0);
K01.add("inpt","choiceD",0,1,null,0);
K01.init();
K01.am("segm","Check Time_",1,0);
K01.am("cond","At Time Limit_","K01.timeAtLimit == true",0);
K01.am("actn","Popup Message","MM_popupMsg(You are out of time)","pm");
K01.am("actn","Set Properties: Disable Interaction","MM_setKOProperties(\K01.setDisabled(true);\)", "sp");
K01.am("end");
K01.am("segm","choiceA Feedback_",1,0);
K01.am("cond","choiceA Selected_","K01.e[choiceA].selected",0);
K01.am("end");
K01.am("segm","choiceB Feedback_",1,0);
K01.am("cond","choiceB Selected_","K01.e[choiceB].selected",0);
K01.am("end");
K01.am("segm","choiceC Feedback_",1,0);
K01.am("cond","choiceC Selected_","K01.e[choiceC].selected",0);
K01.am("end");
K01.am("segm","choiceD Feedback_",1,0);
K01.am("cond","choiceD Selected_","K01.e[choiceD].selected",0);
K01.am("end");
K01.am("segm","Correct_",0,0);
K01.am("cond","Correct_01","K01.correct == true",0);
K01.am("actn","Call JavaScript","MM_callJS(\alert(\\\Correct (score:\\\+K01.score+\\\)\\\)\)","cjs");
K01.am("actn","Set Properties: Disable Interaction","MM_setKOProperties(\K01.setDisabled(true);\)", "sp");
K01.am("end");
K01.am("segm","Incorrect_",1,0);
K01.am("cond","Incorrect_01","K01.correct == false",0);
K01.am("actn","Call JavaScript","MM_callJS(\alert(\\\Incorrect (score:\\\+K01.score+\\\)\\\)\)","cjs");
K01.am("end");
K01.am("segm","Check Tries_",1,0);
K01.am("cond","Tries Exceeded_","K01.triesAtLimit == true",0);
K01.am("actn","Popup Message","MM_popupMsg(That was the last attempt allowed.)","pm");
K01.am("actn","Set Properties: Disable Interaction","MM_setKOProperties(\K01.setDisabled(true);\)", "sp");
K01.am("end");
}
if (window.newK01 == null) window.newK01 = newK01;
if (!window.initKoFns) window.initKoFns = ; window.initKoFns += "newK01();";
with (navigator) if (parseInt(appVersion)>=4 && (appVersion.indexOf(Mac) == -1 || appName.indexOf(Microsoft) == -1))
eval("if (!window.o1) {window.o1=(window.onload)? window.onload:function(){}; window.onload = function(){if(window.MM_initKO)MM_initKO(); window.o1();}}");
else setTimeout("MM_initKO()",100);
//-->
</script>
<!-- #EndCustomObject -->
</body>
</html>
All of that was generated without writing a single line of code. The page in fact would be much longer except for the fact that it depends on a JavaScript for a number of routines. Dreamweaver automatically installs those scripts on your site as well.
Its comparatively easy to write a single interaction in Dreamweaver Attain, or even a series of questions, that run on a regular web server. One of the strengths of Dreamweaver is its sensitivity to differences between browsers and among the different versions of each browser. Dreamweaver Attain allows you to preview your page in several browsers. It also contains a feature list for each browser, specifying which features are supported in each version of each browser. This is particularly valuable for Internet authoring when you do not know for certain which browser your students may be using. No plug-ins are required of the user, and no special extensions have to be added to the server.
To a large extent, Dreamweaver Attain delivers on these promises, but expect the road to be rocky, at least at first. I found Knowledge Objects were sometimes impossible to find on the page when I went back to do subsequent editing of a Knowledge Object I created earlier. Interactions that worked fine in Internet Explorer were mysteriously unresponsive in Netscape Navigator. The most surprising phenomenon is the news forum for Dreamweaver Attain. Macromedia has long been a leader in its web site and the supporting forums, and the forums are usually very busy and show strong participation from Macromedia. The Dreamweaver Attain forum, on the other hand, may have no postings for one or two consecutive days. When I posted a query about trying to locate missing Knowledge Objects, the only reply came from someone who had just started using the program a few days earlier.
Tracking Users
The principal shortcoming of Dreamweaver Attain is its very limited ability to track users without relying on (and purchasing) a student tracking system such as Pathware, which Macromedia now owns, or connecting (often with some difficulty) to an on-line database.
Giving immediate feedback to a user after each question is automatic and presents no difficulties. A message window simply pops up, telling the user whether the answer is correct or incorrect; these messages can be easily customized.
Giving feedback during a single session for a series of questions is possible using frames, and Macromedia has done a good job of explaining how to do this in its on-line documentation in its "Experts Speak" section of the Dreamweaver Attain website. This means that a student may take, for example, a ten question quiz and get an overall score at the end of the quiz. All of this can be done without a connection to a database. The on-line documentation takes the author through the creation of such a quiz step-by-step, but this is still more difficult than having a wizard.
Many of us would like to track our students by name over a series of assignments, and doing this without a dedicated course management system such as Pathware is not for the faint of heart. It requires establishing a connection to the database (usually using ODBC) and doing some programming. Database connections under Windows are typically tricky to establish and use for the non-programmer, and this is an area in which a sophisticated wizard would be most welcome.
More to Come
In the near future, the Attain version of Dreamweaver 2.0 should appear, and that promises to add additional refinements, especially through the support of XML, eXtensible Markup Language. This should be a boon to logicians in particular, since it will allow much greater control over fonts and positioning (including superscripts and subscripts) than is now possible in a cross-browser environment. This will make the Attain version of Dreamweaver even more powerful, but there is no indication that the connection with databases will be made easier. When that occurs, putting interactive pages on line with Dreamweaver Attain will be simple. Until then, as long as it is not necessary to track users across multiple sessions, this is still a powerful and easy tool for developing interactive web pages.
A 45 day trial version of Dreamweaver Attain is available by download at <www.macromedia.com>.
Table of Contents