Web-based Hypermedia Courseware Development
Chapter 4: Web-based Hypermedia Instruction
with HTML and JavaScriptChapter 4: Web-based Hypermedia Instruction with HTML and JavaScript
 |
Reducing the Risk!
Craig W. Johnson, Ph.D. |
Chapter 4: Web-based Hypermedia Instruction with HTML and JavaScript 4 - 22
Expanded JavaScript Form Feedback, Scoring, Email Skills
The purpose of the following sections is to enable you to extend your JavaScript immediate feedback, scoring, and email skills. As of now, you know how to handle radio buttons. You are going to quickly extend those skills to cover the forms elements used most frequently in hypermedia instructional systems:
You will do this, again by focusing only on what you need to know to achieve the immediate goal. See Flanagan (1996), Goodman (1996), Ritchey (1996), or Shafer (1996), for more elaborate and complete presentations of JavaScript.
JavaScript: Reading Values of Form Elements
You can use JavaScript to refer to and access the state or value of any entry contained in any form element. Chapter 3 demonstrated that document form element names may be strung together separated by periods to refer to a particular button's state. So, in particular, the state of the 4th button in the 3rd question of the PE form used in Chapter 3 may be referred to from within that document by the following expression (note [3] designates the 4th array element because the first element in the array has index [0]):
document.PE.Q3[3].checked.More importantly, there is an underlying pattern in that expression that generalizes to other form elements. Much form element data may be identified from within the document using an expression having the following general format:
document.formname.elementname[arrayindex].attribute.
Apply this template and the examples below to the different types of form elements in approaching the review questions which follow.Chapter 4: Web-based Hypermedia Instruction with HTML and JavaScript 4 - 23
Radio Buttons.
Applying the document.formname.elementname[arrayindex].attribute template to reading radio button entries using JavaScript expressions:
If you wanted to know whether, in form QUIZ, the 5th RADIO button in the radio button group with the name ITEM2 is checked, you could find out using the expression:
document.QUIZ.ITEM2[4].checked.
document.QUIZ.ITEM2[4].value.
Radio Element Value Question Review Question 1: In the form named QUIZ the JavaScript statement that correctly assigns to a variable named response the checked status of the 4th radio element in the group of radio buttons named QUESTION6 is:
No Response
response=document.QUIZ.QUESTION6[3].checked;
response=document.QUIZ.QUESTION6[3].value;
response=document.QUIZ.QUESTION6[4].checked;
response=document.QUIZ.QUESTION6[4].value;
Chapter 4: Web-based Hypermedia Instruction with HTML and JavaScript 4 - 24
Checkboxes
Applying the document.formname.elementname[arrayindex].attribute template to reading checkbox elements using JavaScript expressions:
document.QUIZ.ITEM5[3].value.
document.QUIZ.ITEM5[3].checked.
Checkbox Element Value Question Review Question 2: In the form named QUIZ the JavaScript statement that correctly assigns to a variable named response the checked status of the 4th checkbox element in the group of checkboxes named QUESTION6 is:
No Response
response=document.QUIZ.QUESTION6[3].checked;
response=document.QUIZ.QUESTION6[3].value;
response=document.QUIZ.QUESTION6[4].checked;
response=document.QUIZ.QUESTION6[4].value;
Chapter 4: Web-based Hypermedia Instruction with HTML and JavaScript 4 - 25
Text Elements
Applying the document.formname.elementname[arrayindex].attribute template to reading text element entries using JavaScript expressions:
document.QUIZ.ITEM10.value.
document.PRACTICE.NAME.value.
Text Element Value Question Review Question 3: In the form named EXAM1 the JavaScript statement that correctly assigns to a variable named response the text typed into the text element named ADDRESS is:
No Response
response=document.EXAM1.ADDRESS.checked;
response=document.EXAM1.ADDRESS.value;
response=document.EXAM1.ADDRESS[2].value;
response=document.EXAM1.ADDRESS.text;
Chapter 4: Web-based Hypermedia Instruction with HTML and JavaScript 4 - 26
Textarea Elements
Applying the document.formname.elementname[arrayindex].attribute template to reading textarea element entries using JavaScript expressions:
document.QUIZ.COMMENTS.value.
Textarea Element Value Question Review Question 4: In the form named EVALUATION the JavaScript statement that correctly assigns to a variable named response the text typed into the NOTES textarea element is:
No Response
response=document.NOTES.EVALUATION.value;
response=document.EVALUATION.NOTES.value;
response=document.NOTES.EVALUATION.text;
response=document.EVALUATION.NOTES.text;
Chapter 4: Web-based Hypermedia Instruction with HTML and JavaScript 4 - 27
Select/Option Elements
The SELECT element is more problematical. It takes two steps to read the selected option from a SELECT element. First, you need to find out the element array index value of the selected option (index in the examples below). Then, you need to determine the text associated with that element array index. Typically, you assign the values determined to variables so you may use them later. Once you know the two steps, you've got the template for reading the information from any SELECT item. Here, in template format, is the form of the two statements used to read the value of the selected option entries using JavaScript expressions:
So, applying the above templates to reading select element entries using JavaScript expressions:
- index=document.form.elementname.
selectedIndex;- value=document.form.elementname.
options[index].text;
index=document.QUIZ.S5.selectedIndex;
value=document.QUIZ.S5.options[index].text;
index=document.PRACTICE.MULT1.selectedIndex;
value=document.PRACTICE.MULT1.options[index].text;
index=document.PE.ITEM1.selectedIndex;
value=document.PE.ITEM1.options[index].text;
Select Element Value Question Review Question 5: In the form named EVALUATION the JavaScript expression that correctly assigns to a variable named index the selected option array index of the SELECT element named ITEM2 is:
No Response
index=document.ITEM2.EVALUATION.value;
index=document.EVALUATION.ITEM2.value;
index=document.ITEM2.EVALUATION.selectedIndex;
index=document.EVALUATION.ITEM2.selectedIndex;
Select Element Value Question Review Question 6: In the form named EVALUATION, given that the index variable has been assigned the array index of the selected option, the JavaScript expression that correctly assigns to a variable named value the text of the selected option from the SELECT element named ITEM2 is:
No Response
value=document.ITEM2.options[index].EVALUATION.text;
value=document.EVALUATION.options[index].ITEM2.value;
value=document.ITEM2.options[index].EVALUATION.value;
value=document.EVALUATION.options[index].ITEM2.text;
value=document.ITEM2.EVALUATION.options[index].text;
value=document.EVALUATION.ITEM2.options[index].value;
value=document.ITEM2.EVALUATION.options[index].value;
value=document.EVALUATION.ITEM2.options[index].text;
Select Element Value Question Review Question 7: In the form named QUIZ the JavaScript expression that correctly assigns to a variable named index the selected option array index of the SELECT element named QUIZ1 is:
No Response
index=document.QUIZ1.QUIZ.selectedIndex;
index=document.QUIZ.QUIZ1.selectedIndex;
index=document.QUIZ1.QUIZ.value;
index=document.QUIZ.QUIZ1.value;
Select Element Value Question Review Question 8: In the form named QUIZ, given that the index variable has been assigned the array index of the selected option, the JavaScript expression that correctly assigns to a variable named value the text of the selected option from the SELECT element named QUIZ1 is:
No Response
value=document.QUIZ1.QUIZ.options[index].text;
value=document.QUIZ.QUIZ1.options[index].value;
value=document.QUIZ1.QUIZ.options[index].value;
value=document.QUIZ.QUIZ1.options[index].text;
value=document.QUIZ1.options[index].QUIZ.text;
value=document.QUIZ.options[index].QUIZ1.value;
value=document.QUIZ1.options[index].QUIZ.value;
value=document.QUIZ.options[index].QUIZ1.text;
Chapter 4: Web-based Hypermedia Instruction with HTML and JavaScript 4 - 28
JavaScript: Using Form Element Values in Scoring, Email and Feedback
Given the previous examples you should soon be able to apply the above templates to read entered or chosen values, compare them to correct answers, provide immediate feedback, and include their values in emailed summaries for checkbox, radio button, select element, text element and textarea element entries. Other kinds of entries occur infrequently but would be handled in a manner similar to text element entries by accessing the appropriate attribute of the element.
The Logical Element Practice Exercises of Example 3.4 in Chapter 3 demonstrated how to score, provide immediate feedback and email responses for a set of 5 multiple-choice items consisting of radio buttons. How would you handle a set of seven JavaScript exercises with a broader range of response formats, including even an open-ended, "Comments:" item?
Suppose the set, first, includes three radio button items each having five buttons plus a special "Evaluate" button for each item to be pressed for feedback. Suppose also that the set then includes, two select element items and associated "Evaluate" buttons. Suppose, finally, that it also includes two text element items and associated "Evaluate" buttons, and one textarea element for the comments. These types of form elements comprise those most typically needed to handle learner's responses to questions. How would you handle scoring, emailing and item feedback?
A general problem solving heuristic is -- if you are confronted with a problem you don't know how to solve, liken it to a problem you do know how to solve and adapt and modify as needed. This heuristic provides the essence of the strategy for handling scoring, feedback and emailing more generally. Start with the same general plan as in the Logical Element Practice Exercises. Simply, adapt the functions for scoring and emailing, and also add a function for handling feedback to the various types of form elements. You adapt the functions making use of the guidelines and examples just illustrated in the JavaScript: Reading Values of Form Elements section.
More specifically, the plan is to use the same steps as in the Logical Element Practice Exercises, but to carry out the steps separately for each different type of item, because of the differing ways of reading item responses. This sounds somewhat cumbersome. And, it is. But, in practice, once you have done it a few times, it's not that bad. Especially, because you can adapt working functions like those in this hypertutorial to your tasks. You can use cut and paste to copy whole sections of JavaScript and then make the frequently relatively minor adaptations to achieve your goals.
That is the overall plan. It forms the essense of the logic for your handling of scoring, emailing and immediate feedback for JavaScript, radio button, select element, text element, and textarea elements. Putting the plan more formally, it could be expressed as follows:
Chapter 4: Web-based Hypermedia Instruction with HTML and JavaScript 4 - 29
JavaScript: Plan for Script.
Function computescore:
Set a counter for the number correct (name it nCorrect) equal to 0.
Start a counter (name it i) to keep track of which item you are checking.
Function emailResults:
Function itemfeedback:
Chapter 4: Web-based Hypermedia Instruction with HTML and JavaScript 4 - 30
JavaScript Script: Translated Scoring, Email and Feedback Plan. Now, keeping the above points in mind, let's translate the plan into JavaScript. The JavaScript translation follows below (remember the i++ tells the computer to increment i by 1 each time the cycle (loop) is repeated). You may, again, use the JavaScript below as a model for your own form element scoring, email and feedback. Remember, the double slashes, "//", below in JavaScript mean explanatory comments for the script reader that are ignored by JavaScript.
<SCRIPT LANGUAGE="JavaScript"> <!-- Hide script from older browsers // Below defines the answers. Only correct buttons have correct answers. Answer = new Array("", "","","","","None","", //Answers for 1 thru 6 buttons "","","","EM","","", //Answers for 7 thru 12 buttons "","","","","None","", //Answers for 13 thru 18 buttons "TR","", //Answers for 19 & 20 elements "TD","", //Answers for 21 & 22 elements "relative","", //Answer for 23 & 24 elements "width"); //Answer for 25 element // Below defines the computescore function. function computescore () // Name the function to be defined { // Start the function definition var nCorrect=0; // Set the variables to their starting values var nItems = 7; // Now = 7 var nRadios = 18; // New to separate the radio button items var score = 0; for (i=1; i<=nRadios; i++) // For the 1st to the 18th button repeat { // the following series of commands if ( (document.PE1.elements[i].value == Answer[i]) && // If button correct (document.PE1.elements[i].checked == true) ) // & checked nCorrect+=1; // Add 1 to nCorrect } // Below added for items 4 & 5 for (i=nRadios+1; i<=nRadios+3; i++) { item=document.PE1.elements[i].selectedIndex; if (document.PE1.elements[i].options[item].text == Answer[i]) nCorrect+=1; } // Below added for items 6 & 7 for (i=nRadios+5; i<=nRadios+7; i++) { if (document.PE1.elements[i].value == Answer[i]) nCorrect+=1; } score = (Math.floor((nCorrect/nItems)*10000+0.5))/100; //Compute % & Round return score; //Return score when //function executes } function emailResults(form) { var header = ""; var emailData=""; header += "\nTitle: " + document.title + "\n"; //Header Info header += "From: " + document.location + "\n\n"; emailData+="NAME: "+document.PE1.ID.value + "\n"; //Below is for radio button items 1, 2 & 3 emailData+="PE 1 Button 5: "+document.PE1.Q1[4].checked + "\n"; //Correct emailData+="PE 2 Button 10:"+document.PE1.Q2[3].checked + "\n"; //Button emailData+="PE 3 Button 17: "+document.PE1.Q3[4].checked + "\n";//Responses //Below is for items 4 & 5 index=document.PE1.Q4.selectedIndex; emailData+="PE 4 Element 19: "+document.PE1.Q4.options[index].text + "\n"; index=document.PE1.Q5.selectedIndex; emailData+="PE 5 Element 21: "+document.PE1.Q5.options[index].text + "\n"; //Below is for items 6, 7 & 8 emailData+="PE 6 Element 23: "+document.PE1.Q6.value +"\n"; emailData+="PE 7 Element 25: "+document.PE1.Q7.value +"\n"; emailData+="PE 8 Element 27:\n"+document.PE1.Q8.value +"\n"; emailData+="SCORE: "+computescore() + "\n"; form.maildata.value = header + emailData; alert("This is what is being submitted to the instructor. " + form.action + ' '+ form.maildata.value); return true; } function itemfeedback (elementNo) { //First condition below is for radio buttons if ((elementNo > 0) && (elementNo < 18)) { if ( (document.PE1.elements[elementNo].value == Answer[elementNo]) && (document.PE1.elements[elementNo].checked == true) ) { alert("Good work! "+"\""+document.PE1.elements[elementNo].value+ "\""+" is correct."); } else { alert("Your response is not correct. Try again."); } } else //Next condition is for items 4 & 5 - select elements if ((elementNo > 18) && (elementNo < 23)) { var item=document.PE1.elements[elementNo].selectedIndex; if (document.PE1.elements[elementNo].options[item].text==Answer[elementNo]) { alert("Good work! "+"\""+document.PE1.elements[elementNo].options[item].text+ "\""+" is correct."); } else { alert("\""+document.PE1.elements[elementNo].options[item].text+"\""+ " is not correct. Try again."); } } else //Final condition below is for items 6 - 8 text & textarea elements { if (document.PE1.elements[elementNo].value == Answer[elementNo]) { alert("Good work! "+"\""+document.PE1.elements[elementNo].value+ "\""+" is correct."); } else { alert("\""+document.PE1.elements[elementNo].value+"\""+ " is not correct. Try again."); } } } // --> </SCRIPT>Remember, JavaScript functions need to be declared in the HEAD part of the HTML document to assure they are available when needed. Also they must be contained in a SCRIPT element to inform the browser that it is a JavaScript script and not HTML. The complete HTML document containing the function declarations then appears as shown in example 4.1 below.
Chapter 4: Web-based Hypermedia Instruction with HTML and JavaScript 4 - 31
Example HTML Document:
JavaScript ExercisesHTML
Example:Example 4.1
HTML Text: JavaScript Exercises Example (includes JavaScript).
Browser Display produced when a document containing the above HTML text is loaded by a browser.Using HTML/JavaScript Examples as Models. As you have seen, it is a relatively straightforward matter, to use JavaScript functions for scoring, email of form results, and immediate feedback, with a great range of form elements. You can use the examples in this hypertutorial as models and adapt the working functions to your tasks. The process is vastly simplified by the fact that you can treat such functions or sections of JavaScript statements as blocks. You can then cut and paste the blocks, copying whole sections of JavaScript into your documents; and then make the frequently relatively minor adaptations needed to achieve your goals.
Chapter 4: Web-based Hypermedia Instruction with HTML and JavaScript 4 - 32
Further Form Element Values Question Review Question 1: Which form element entries can you read using the VALUE attribute?
No Response
RADIO
CHECKBOX
SELECT
TEXT
Further Form Element Values Question Review Question 2: Reading which form element entries require reading the checked property?
No Response
RADIO
SELECT
TEXT
Further Form Element Values Question Review Question 3: Which form element requires you to read a selectedIndex property to get at the element's entered response?
No Response
RADIO
CHECKBOX
SELECT
TEXTAREA
Further Form Element Values Question Review Question 4: Which form element requires you to read a text property to get at the element's entered response?
No Response
RADIO
CHECKBOX
SELECT
TEXTAREA
Further Form Element Values Question Review Question 5: Which form element entries can you read using the VALUE attribute?
No Response
TEXTAREA
CHECKBOX
SELECT
RADIO
Chapter 4: Web-based Hypermedia Instruction with HTML and JavaScript 4 - 33
Example HTML/JavaScript Documents:
Hypermedia Instruction With Scoring, Email and FeedbackNow, for two final comprehensive examples of complete HTML/JavaScript instructional documents. Both synthesize the HTML, HTML form elements, and JavaScript components you have used into complete Web-based hypermedia instructional systems. Both were created using the Hypermedia Instructional Systems Development Model. The second example in particular, an earlier version of Chapter 1 from Web-based Hypermedia Courseware Development using HTML and JavaScript, implements and demonstrates many of the features of a hypertutor system.
Example HTML Document: Heart Attack: Reducing the Risks!.
The first example document, Heart Attack: Reducing the Risks!, is an example of a simple frame-based CAI/CBT instructional sequence. The information is from an article by Dr. Michael Debakey published in the World Book Encyclopedia. It includes, relative screen positioning using table, form elements, JavaScript scoring, immediate feedback and emailing of results. Study, the HTML/JavaScript and try out the instruction. Notice that because a relative table is used to format each frame, when the display window is resized, the frame resizes along with it, maintaining relative positions of display components. HTML tables make this relatively sophisticated screen control a relatively simple matter to accomplish.Note: Prompts in the bottom right corner of the screen provide links to next and previous frames. Using these hyperlinks accurately position next and previous frames on the screen for easy viewing. It is suggested you use these for navigation. Keep in mind, however, that because there is no "exit" button within the document, you will need to press the "back" button about the same number of times you clicked on the bottom right corner page links, to come back to this hypertutorial after completing your tour of the document.
Example HTML Document:
Heart Attack: Reducing the Risks!HTML
Example:Example 4.2
HTML Text: Heart Attack: Reducing the Risks!.
Browser Display produced when a document containing the above HTML text is loaded by a browser. Note: This is a complete frame-based hypermedia instructional presentation. Although, you have not previously seen it, the <DIV> element (for document divisions) is used to properly align the text links for navigation between previous and next pages. When you have finished interacting with the document press the "back" button the same number of times you moved forward to return to Chapter 4 of the hypertutorial.Chapter 4: Web-based Hypermedia Instruction with HTML and JavaScript 4 - 34
Example HTML Document: Web-based Hypermedia Courseware Development with HTML and JavaScript: Chapter 1.
Now, for the final complete Web-based hypermedia example courseware document -- an earlier draft of Chapter 1 from this hypertutorial: Web-based Hypermedia Courseware Development with HTML and JavaScript. The example illustrates how far you have progressed already. Using the HTML/JavaScript features previously introduced during this hypertutorial, Chapter 1 provides a powerful example of what can be achieved fairly quickly with instructional hypermedia in the HTML/JavaScript Web browser environment. The Chapter 1 example implements many features of hypertutor systems.The example includes, relative screen positioning using HTML tables, HTML form elements, JavaScript scoring, immediate feedback and emailing of results. It links to a hypertext table of contents and embeds hypertext links to important concepts throughout the chapter. It employs many of the Hypertutor Model learner control, presentation, practice, feedback and learning resources features.
Study, the HTML/JavaScript. You've already experienced the instruction. You probably already noticed that display window contents automatically accomodate to window resizing except in extreme situations with preformatted documents having long lines of text without line breaks. Screen elements generally are repositioned to fit correctly within display windows using relative positioning principles, primarily using relative tables.
HTML Example Document:
Web-based Hypermedia Courseware Development with HTML and JavaScript: A Hands-on Introduction
Chapter 1HTML
Example:Example 4.3
HTML Text: Web-based Hypermedia Courseware Development with HTML and JavaScript, Ch. 1. Note: This document is large enough that it may not fit in your clipboard if you wish to copy and paste the document into your editor. In that case simply copy and paste the first half into your editor and then copy and paste the second half separately, appending it at the end of the first half of the document.
Browser Display Note: This example is an earlier version of the complete Chapter 1 tutorial document. You have now had experience with all HTML and JavaScript elements used in the production of that document.Chapter 4: Web-based Hypermedia Instruction with HTML and JavaScript 4 - 35
Summary
You have come a long way rather quickly in your efforts to achieve your Web authoring goals and objectives. You now know how to use HTML and JavaScript to put together complete Web-based Hypermedia Instructional Systems. These systems can be constructed using steps outlined in the Hypermedia Instructional Systems Development Model while adhering to the hypermedia design prescriptions of the Hypertutor Model.
You have expanded your JavaScript scoring, email and immediate feedback skills to include a wider variety of form elements including radio buttons, checkboxes, select elements, text elements and textarea elements. Considered together, this combination of form elements covers most of the bases for instructional item formats.
You have hands-on experience with hundreds of HTML and JavaScript document and form element examples. You also have learned how you can adapt the complete HTML and JavaScript document examples presented in this chapter and throughout the hypertutorial to your own needs, using them as models or templatesChapter 4: Web-based Hypermedia Instruction with HTML and JavaScript 4 - 36
It is always more efficient when developing Web-based courseware to adapt an existing working document to one's own purposes than to have to start from scratch to create a whole new document, building from the ground floor up without a model. So, keeping that in mind, enter your favorite word processor (e.g., WordPerfect) or text editor (e.g., Windows Notepad) and choose one of the possible projects below. Then choose the appropriate example document to use as a model or template for adaptation to your own purposes. Additional Hands-On Practice Project Assignment
Copy the chosen example document, as described in the "Edit, Save, Reload and Test" section earlier in this tutorial, into the word processor and use the "Save as" option to save it under a new name of your own choosing. Then use the edit, save, reload and test development process to edit the newly saved example HTML document to produce one or more of the following Web-based hypermedia courseware products to meet your own instructional goals.
List of Possible Projects:
- A Simple Web-based Frame-oriented CAI/CBT Instructional Document (example HTML document is Example 4.2)
- A Simple Hypermedia Instructional System (example HTML document is Example 4.3)
- Other Hypermedia Instructional System (choose your own).
End Chapter 4: Web-based Hypermedia Instruction
Using HTML & JavaScript
Copyright © 1997
Craig Johnson
Comments: cjohnson@acad1.sahs.uth.tmc.eduChapter 4: Web-based Hypermedia Instruction with HTML and JavaScript 4 - 37
References
- Anderson, R. C., & Pichert, J. W. Recall of Previously Unrecallable Information following a Shift in Perspective. (Tech. Rep. No. 41). Urbana: University of Illinois, Center for the Study of Reading. (ERIC Document Reproduction Service No. ED 142974, 1987.)
- Arnheim, R. Visual Thinking, Berkeley and Los Angeles: University of California Press, 1969.
- Craik, F. I. M., & Lockhart, R. S. Levels of Processing: A Framework for Memory Research. Journal of Verbal Learning and Verbal Behavior, 1972, 11, 671-684.
- Dwyer, F. M. Strategies for Improving Visual Learning: A Handbook for the Effective Selection, Design, and Use of Visual Materials. State College, PA: Penn State, 1978.
- Flanagan, D. JavaScript: The Definitive Guide (Beta Edition). Sebastopol, CA: O'Reilly, 1996.
- Fleming, M. L. Perceptual Principles for the Design of Instructional Materials. Viewpoints, Bloomington: Indiana University Bulletin of the School of Education, 69-200, 1970.
- Fleming, M., & Levie, W. H. Instructional Message Design. Englewood Cliffs, NJ: Educational Technology Publications, 1978.
- Fleming, M., & Levie, W. H. (Eds.)Instructional Message Design: Principles from the Behavioral and Cognitive Sciences. (2nd Edition). Englewood Cliffs, NJ: Educational Technology Publications, 1993.
- Goodman, D. Danny Goodman's JavaScript Handbook. Foster City, CA: IDG, 1996.
- Graham, I. S. The HTML Sourcebook. New York: Wiley, 1995.
- Jelden, D. L., & Brown, B. R. A Generalized Learner-Controlled Education System. Journal of Educaitonal Technology Systems, 1982-83, 11(1), 3-21.
- Johnson, C. W., & Grover, P. A. Hypertutor Therapy for Interactive Instruction. Educational Technology, 1993, 33(1), 5-16.
- Kinzie, M. B. Requirements and Benefits of Effective Interactive Instruction: Learner Control, Self-Regulation, and Continuing Motivation, Educational Technology, Research and Development, 1990, 38(1), 5-21.
- Kinzie, M. B., & Birdel, R. L. Design and Use of Hypermedia Systems, Educational Technology, Research and Development, 1990, 38(3), 61-68.
- Morgan, M., Wandling, J. & Casselberry, R. Webmster Expert Solutions. Indianapolis, IN: Que, 1996.
- Pressley, M., McDaniel, M. A., Turnure, J., Wood, E., & Ahmad, M. Generation and Precision of Elaboration: Effects on Intentional and Incidental Learning. Journal of Experimental Psychology: Learning, Memory, and Cognition, 1987, 13, 291-300.
- Ritchey, T. Programming JavaScript for Netscape 2.0. Indianapolis, IN: New Riders, 1996.
- Shafer, D., JavaScript & Netscape Wizardry. Scottsdale, AZ: Coriolis, 1996.
- Stout, R. The World Wide Web Complete Reference. Berkeley, CA: McGraw-Hill, 1996.
- Zimmerman, B. J. Self-Regulated Learning and Academic Achievement: An Overview. Educational Psychologist, 1990, 25, 3-17. Indianapolis, IN: New Riders, 1996.
Chapter 4: Web-based Hypermedia Instruction with HTML and JavaScript 4 - 38
