Preface Acknowledgements Contents 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 URLs References
CLASSROOM TRADITIONS *
Active Learning *
HYPERTEXT LINKS *
CLICKABLE IMAGES *
FORMS *
Building Forms *
Brief Responses *
Extended Response *
Disguised Responses *
Hidden Elements *
Mutually Exclusive Choices *
Options *
Multiple Options *
Sending Inputs *
Clearing Entries *
COLLECTING STUDENT TEXT *
E-MAIL (FOR PROCESSING FORMS) *
THE LAST MINUTE *
GLOSSARY *
REFERENCES *
URLs *
The creation of interactive environments between students and teachers is critical to teaching on the Web. Web-Teaching addresses this question in five chapters. Chapter 5 dealt with discussion. This chapter focuses on those interactions most easily managed using browser, server, and e-mail software. Chapter 14 addresses the use of databases and database software, adding another level of interactivity – at the expense of increased complexity. Chapter 15 discusses the issue of online testing. Chapter 16 addresses the most advanced forms of interactivity, such as simulations designed specifically to illustrate concepts.
By using questioning and other techniques in your classroom, you can elicit responses and give feedback on a time scale measured in seconds or minutes. Each student can be called on, and you can question in such a way that nearly all students are prepared to respond. If you use cooperative strategies, you might even be successful at utilizing more questioning to get higher overall response rates. Active learning might seem to be easy to achieve in a classroom. As the teacher, you can ask questions. Sometimes your glances or gestures can evoke significant student participation. Research supports the notion that teacher questions can be effective; however, the effects are smaller than teachers think (Cotton, {U07.01}). The tasks that the teacher sets for the students usually determine the extent of active learning.
This chapter has a twofold purpose. One dimension focuses on the nature of the task of creating active learning environments, and the other on the tools available to help accomplish that task. This chapter ends with a review of a very promising system where teachers use the Web to obtain up-to-the-hour information related to student performance.
Lecturing has long been the primary means of instruction in education. Gregg Schraw, a researcher in self-regulation, argues that lectures work well for poor self-regulators. During class, the lecturer can drop survival hints, strategies, and other clues that help poor self-regulators survive. Good self-regulators perform well in just about any learning environment.
Many books provide seemingly clear exposition of content. In spite of round-the-clock access to those books, student performance may fall below expectations. Books, even coupled with lectures, often give less than desired learning outcomes. Just having clear learning materials available, even with the support of a skilled and enthusiastic teacher, may not be enough to bring about learning.
As mentioned in Chapter 2, research suggests that the most efficient learning environments require active learning. As a teacher, you need to create and employ strategies to make learning active. How do you create an interactive environment for your students when they are sitting in front of monitors somewhere on the Web?
Hypertext links, clickable maps, and forms will help you make your Web pages more interactive.
Hypertext is nonlinear, or nonsequential text. The text is organized so one can easily jump from topic to topic. You do not need to read the text in a fixed or linear sequence. Although hypertext probably is best brought to life on a computer, hypertext style documents exist outside of the Web (i.e., self-paced texts, Choose-Your-Own-Adventure books {U07.02}). Hypertext is readily achieved within Web documents.
Hypertext requires readers to make decisions about their reading. It is an active learning strategy. Multimedia programs such as HyperCard or ToolBook have enabled hypertext for over a decade. In fact, they were among the earliest drivers for videodiscs – providing remarkable user control in multimedia learning environments. Hypertext links facilitate choice and, therefore, are potentially valuable instructional tools.
This book was written as a Web document, and then converted to paper. In the Web version, moving the pointer (cursor) to an underlined word and clicking the mouse brings up a definition of the word. If you are using this book on the Web, click away. However, if you are reading the book in paper, and you want the definition of a word right now, you'll need to turn to the glossary.
There is a design issue with hypertext. As the designer, you must decide where a link would be appropriate and you must put it there. Some think the computer ought to be able to do that for us automatically. That requires a level of artificial intelligence not yet available.
Since hypertext links most often appear underlined in a characteristic color, underlining for emphasis is all but excluded in well-designed Web documents. Underlining is reserved for the indication of a hyperlink. Another clue to the existence of a hyperlink is that, in Web materials, the shape of the pointer (cursor) changes to a hand when it passes over a hyperlink. An underlined name means that clicking will access a personal Web page or open an e-mail composition window addressed to the person.
If there is a hypertext link in your materials, it is because you put it there. You decide which links may be appropriate. You decide whether to create materials yourself or send students out on the Web to find information. You decide how to get students back to the learning materials without getting lost in hyperspace. You decide if the link opens a new window or replaces the information in the current window. You may need some way to bring students back to the track you have created. These are all instructional design issues.
Figure 7.01. The arrow cursor on the left suggests no link; the hand cursor on the right suggests a link, and that clicking will bring about some action – going someplace implied by the image or text.
What kinds of materials are well suited for the Web? Since publication of the first edition of Web-Teaching, it has become clear that practically any subject can be treated using the Web. As we noted earlier, even some heavily value-laden topics seem to be handled well in this medium.
Should you try to devise a way to determine how many links your students visit? Unfortunately, keeping track of students' moves on the Web is very difficult.
Schwartz [1995] brings up important issues regarding the voice of the author. In a traditional, linear text, the author's voice is preserved. With hypertext, you may need some way to bring the students back to the track you’ve created. Also, research indicates that weak students fair poorly with hypertext [Dillon & Gabbard, 1998].
The Web is replete with images that, when clicked, cause something to happen. Some images change just by moving the cursor on top of them. In HTML jargon, an image that has clickable hot spots is called a map. An image map is a sort of program. A map makes it possible to have just a part of an image interactive, or to have different parts of images interact in different ways. This technique is readily accomplished by the hypermedia programs available (e.g., ToolBook, HyperCard, Director)
As noted in Chapter 4, when you’re on the Web and see some large graphic that seems to say "click me," it probably was developed as an image map. As shown above, when the cursor changes from a pointing arrow to a hand, a link is implied. The user is presumed to have garnered enough Web experience to know to click and, with the passage of time, that expectation becomes a reality (see Chapter 4). If you have been on the Web often, you have interacted with a map more than once during your excursions.
When browsers first came out, creating maps was a big deal. Today the best programs for creating web materials (e.g., Dreamweaver, GoLive) make the creation of maps straightforward.
Hypertext links afford a large degree of interactivity. However, students merely surfing without a purpose is not effective. In principle, it is possible to create interactive materials that involve only clicking. We developed a demonstration example {U07.03} that does just that – tests only using hyperlinks. Most teachers want some feedback from students that shows more learning than just making choices about branching. This brings us to the FORM tag of HTML. Forms are not a simple matter. You must decide how you will gather and use the information obtained from a FORM. The simplest procedure is to have that information gathered using a FORM e-mailed either to you or to some grader or recorder.
Chapter 15 discusses ways to have form information processed automatically at the server. That requires programming. It can be simple, copycat programming, but it is programming nevertheless.
The variety of FORM input elements is increasing. As new types are added, the power of this method increases. Gaps remain. It is not yet a simple matter to input voice, or to capture a simple sketch created by the learner.
HTML coding which includes any of the form elements must always be surrounded by the <FORM> and </FORM> tags. These tags tell the browser that the information between them describes a form.
With current Web page creation software (e.g., Dreamweaver, GoLive), creating FORMs is simplified. You don't have to know much about the ins-and-outs of HTML coding. Creating a form is a matter of choosing to insert the form element or drag an icon of the desired form element onto your document, the coding is done automatically.
Figure 7.02. Form creation tools for Dreamweaver (left) and GoLive (right).
The TEXT element affords an open-ended, free-form response from a learner. It is equivalent to what teachers might call a short-answer response in a quiz. TEXT can be used to obtain the student’s name, address, and other personal or demographic information.
Figure 7.03. Top, HTML for creating a TEXT element in a FORM. Bottom, screen capture of that TEXT element in FORM.
The TEXT input element has much potential for teachers. For example, if a student should be able to perform a calculation, then this might be the way to get feedback about the result.
Figure 7.04. Screen capture of a TEXT element in a quiz FORM.
Questions can include media. An accompanying figure can either be the subject of the question or be a useful clue. Figure 7.05 shows a question involving an image.
Figure 7.05. Top, HTML for creating a TEXT element in a form with accompanying image. Bottom, screen capture of that TEXT element in form.
The TEXTAREA input element permits learners to write a great deal of text for inclusion in their response. This is where a student might be asked to write one or several paragraphs (Figure 7.06).
As of this writing, it is exceptionally unlikely that you will have or be able to create software tools that will adequately judge the quality of a lengthy student response. For that reason, you’ll probably be reading all of this material yourself, or directing it to some grader or reader.
Figure 7.06. Top, HTML for introducing TEXTAREA element in a FORM. Bottom, screen capture of that element after it has been filled in. Students can send large amounts of material to you for evaluation. This information can be directed toward your e-mail. By adding the attribute WRAP="virtual" to the TEXTAREA element, the information typed by the student will wrap automatically on their screen in newer browsers.
The PASSWORD element is similar to text except that the typed characters are encoded into large dots so that persons watching the screen cannot tell which characters have been typed (Figure 7.07). As its name implies, the most common use of this input element is for entering passwords. One possible application would be to have two or more students working on the same computer. The responses could be kept secure from one another by being entered as passwords, automatically hidden by the dots.
Figure 7.07. Top, HTML for creating a PASSWORD element in a form. Bottom, screen capture of that PASSWORD element in form, first blank, and then filled in.
The HIDDEN input element affords some real power to the teacher. In the online chemistry test we developed to demonstrate Web interactivity, the starting point asks users to enter their name. Once this is entered by the user and submitted in one item of a form, all of the subsequent documents (which consist of exams and exams with answers) identify the user by name. This is accomplished by incorporating the name in each subsequent document as a HIDDEN input element. This information is made available to the program that performs the exam generation or evaluation tasks (Figure 7.08).
Another HIDDEN input is used to label exams. Because anyone can take the chemistry test anywhere in the world, each exam is uniquely labeled. This is accomplished by using the computer's system clock. Macintoshes keep track of time beginning at midnight, January 1, 1904. One system value that Macs have available is the number of seconds that have elapsed since that moment in time. That number of seconds becomes a unique, and therefore identifying, number when used in a computer program that takes more than 1 second to generate a chemistry exam. Each exam is labeled with a string consisting of the letter 'X' followed by the number of seconds between midnight, 1/1/1904 and the time the exam was created. This label is carried in the exam document as a HIDDEN input element.
Figure 7.08. Uses of the HIDDEN form element in coding exams. Top, the four HIDDEN elements will be transferred with other form entries when the form is submitted. The form has been set up so that, as shown in the screen capture at the bottom, two of the four HIDDEN items are shown directly in the form at the client side. All HIDDEN items, not just those visible, are submitted with the form inputs.
A RADIO button element enables exclusive choices. That is, checking one of the buttons precludes checking any other button in the family. A straightforward example is that of male/female where the choices are regarded as mutually exclusive (Figure 7.09).
Figure 7.09. Top, HTML for creating a radio button entry in a form. Bottom, screen capture of that radio button entry in form, first blank, and then filled in. Clicking "Female" in the middle example brings up the right-hand example, with "Female" on and "Male" off.
Figure 7.10. Using RADIO buttons for a multiple-choice test.
One of the buttons can be set "on" when the page appears. Clicking any one of these buttons causes any other button with the same name to be turned off. RADIO buttons offer a method for asking multiple-choice questions (Figure 7.10).
The CHECKBOX element allows a simple indication of yes/no or true/false for items which are not mutually exclusive. So, for example, when ordering a hamburger one might have an order that looks something like Figure 7.11. This could be included into a more typical exam-type situation (Figure 7.12).
Figure 7.11. Top, HTML for creating a text entry in a form with RADIO buttons to choose type of bun and CHECKBOX elements to indicate condiments. Bottom, screen capture of those RADIO buttons and CHECKBOX elements in the form.
Figure 7.12. Using CHECKBOX items for a multiple-choice test.
SELECT is a form element with a menu-style choice. The user must click on the "select" bar and drag to the desired choice, releasing once the choice is made. There are no clues about using this form input element; experienced users have encountered them more than once (Figure 7.13).
This input strategy can be used instead of radio buttons in multiple-choice situations. Instead of having a list of majors as in Figure 7.13, you can use a list of answers. You may set a default item, an item that comes up checked. We chose chemistry as the default item in Figure 7.13
Unlike RADIO buttons, SELECT can be set to accept multiple selections. The user must know that holding the Command-Key (or Control-Key in Windows) down and clicking a choice turns that particular choice on or off independent of others, making multiple selections possible (Figure 7.14).
Figure 7.13. The SELECT form element permits selection from a pop-up list of choices. One of the choices can be made the default choice by labeling it SELECTED in the HTML. Top, HTML for the select element in the form. Second, as it first appears. Third, appearance when pressed and dragged to choose "Geology." Bottom, after "Geology" selected.
Figure 7.14. Screen capture of SELECT form element when two items have been chosen.
SUBMIT is a form input element required to tell the browser software when the user thinks the form is complete and should be submitted for processing.
Submitting answers that a learner has added to a form is a key feature of interactivity. In the absence of some scripting or Java application, there is no way for the server to poll the client, nor is there a way for the client to send some preview of the information being created to the server. There is only one attribute to set within the submit button tag, what the button actually says (Figure 7.15). The manner of submission is defined within the FORM tag which begins the form.
Figure 7.15. Top, HTML for creating a SUBMIT button on a form. Bottom, screen capture of that button. Be explicit about the wording used for the button; have it serve your purpose.
RESET creates a button that empties all of the form inputs except HIDDEN, and resets any preselected choices to their default values. This provides an action for cleaning up. Most of the time, the user is sent a form fresh from the server, and never gets to use this button. Besides, it is a rather dramatic event, since all of the entered information is erased. Most users would usually prefer to erase just one or a few items in a large form. Again, the teacher can add special text for this button. When choosing text, it is better to be informative than cute (Figure 7.16). The danger of the RESET button is the student might accidentally clear all answers on a long form. Unless a need to erase all answers exists, don't include a RESET button.
Figure 7.16. Top, HTML for creating a RESET button on a form. Bottom, screen capture of that button. Be explicit about the wording used for the button; have it serve your purpose.
If lengthy responses are intended, consider alternatives to forms. Modern course management software (Chapter 3) affords students the opportunity to submit extended written assignments online. Another alternative is to employ some common multi-platform word processing application program (or a predetermined group of word processors), and have students create documents using that software. They can then send the document to you as an attachment to an e-mail. Much of the editing of this book was accomplished by e-mail exchange of attached documents.
E-mail is not the most effective way to handle information received from forms. In fact, the HTML 4 Bible [Pfaffenberger & Gutzman, 1998] recom-mends against using e-mail except in cases where further processing is unlikely. However, e-mail beats nearly any conventional approach for teachers currently receiving student materials conventionally, say by heaping papers on the teacher's lectern at the end of class. The feedback comes straight to your electronic desktop.
In the FORM tag, an ACTION must be defined for the form input. By using "mail to:" followed by your e-mail address, the ACTION causes the form to be e-mailed to your address when the SUBMIT button is pressed. An example of a FORM tag with an ACTION attribute is:
<FORM Name="MyForm" METHOD="post" action="mailto:jsmith@yourU.edu" enctype="text/plain">
The following four figures illustrate submission be e-mail. Notice the FORM tag in Figure 7.17 does not include the attribute "enctype='text/plain'" which was included above (see Figure 7.18). Without that attribute, the e-mail file will be difficult to read (see Figure 7.19).
Figure 7.17. Web page created to illustrate e-mailing of forms. The form was opened using a browser, filled out, and the "Mail to Brooks" button clicked. Without ever posting the information to the server, e-mail was sent.
Figure 7.18. The HTML coding used in the form, Figure 7.17. Note the "enctype='text/plain'" attribute is missing.
Figure 7.19. When the e-mail is received, it consists of an attached form saying that a file has been received from "Mozilla," the name often used by programmers for Netscape. This example was opened with file editing software, and wrapped into 4 lines. It comes in as a single line, heavily encoded, with all spaces replaced by "+" signs. Software exists to decode, but the use of the enctype="text/plain" attribute eliminates the necessity for decoding.
Figure 7.20. When the enctype="text/plain" is used in the FORM element, the e-mail message appears as shown here. Note that the password field shows up as ordinary text. When a checkbox is unchecked, no information comes in.
Just-in-Time Teaching (JITT) {U07.04} is a very useful teaching strategy in which the teacher purposefully waits until the last minute before preparing for class.
Web-based forms are the most commonly available mechanism for obtaining the feedback needed to shape the lesson in Just-in-Time Teaching. The key dimension of JITT involves having students complete a brief, Web-based assignment (called a WarmUp) within a few hours prior to the class meeting. The instructor is able to obtain summary information about students’ responses. This permits the instructor to modify the lesson plan for the classroom. It more or less ensures that students prepare for class. It gives the teacher a chance to "begin where the behavior is at." The assignments provide information such that the instructor is able to start where the students are beginning to have serious trouble. It avoids unnecessary review, and, at the same time, avoids starting beyond the students' current levels of understanding.
Although the name implies procrastination, the reality of this method is quite to the contrary. The success obviously depends upon finding those "warmups" that provide incisive information regarding where student difficulties lie. Getting these ready, putting them on the Web, and analyzing the responses in a timely if last minute fashion requires a significant teacher commitment. The early results are encouraging, but the demands upon the teachers achieving these results are very high.
The strategy is reminiscent of one described over two decades ago by Shakhashiri [1975] in which brief, in-classroom, multiple-choice, paper-form-based quizzes were computer scored in batch-mode, and the results used for a variety of pedagogical purposes. We've come a long way as the result of using interactive Web technologies!
attach (attachment): to add a copy of a document (attachment) to another document so that the first acts as a carrier for the second
attribute: in HTML programming, attributes are settable properties of elements
elements , HTML element: in HTML programming, an element is contained between a pair of tags. Tags are markup instructions for text that are embedded in text. In HTML, tags are set off by the "<" and ">" symbols. Tags are programming instructions. As used in this Chapter, elements are entities contained with the FORM element.
form: an HTML tag that permits incorporation of interactive elements such as text fields, radio buttons, and checkboxes.
image map: an image with embedded clickable hot spots that serve as hyperlinks.
wrap: lines that start a new line when they texts comes to the end of the screen. Without wrap, the right side of long lines can be invisible off the screen.
Dillon, A., & Gabbard, R. (1998) Hypermedia as an educational technology: a review of the quantitative research literature on learner comprehension, control, and style, Rev. Educ. Rsch., 68, 322-349.
Pfaffenberger, B.& Gutzman, A. D. (1998). HTML 4 Bible. Foster City, CA: IDG Books Worldwide
Schwartz, J. (1995). Where is the voice of the author? In Creating Effective Multimedia and Assessing Its Impact. MIT: Center for Educational Computing Initiatives.
Shakhashiri, B. Z. (1975). Chem TIPS. Individualized instruction in undergraduate chemistry courses. J. Chem. Educ., 52, 588.
U07.01. Classroom questioning, http://www.nwrel.org/scpd/sirs/3/cu5.html (accessed 7/23/00).
U07.02. Just for Kids Catalog - Series - Choose-Your-Own-Adventure, http://www.just-for-kids.com/SERCYOA.HTM (accessed 5/8/00).
U07.03. Creating a Test Using Only Links, http://129.93.84.115/WebT/TestByLinks/LT.html (accessed 4/5/00).
U07.04. Just-in-Time-Teaching: Active Learner Pedagogy with WWW, http://webphysics.iupui.edu/JITT/ccjitt.html (accessed 4/24/00)