1. ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 12

2. Recall from 3 Weeks Ago: Multiple Choice Page-Type: Graphic Hyperlinks, CSS Box Model

3. Multiple Choice Page-Type Instructions in the left column Questions in the right column

4. Multiple Choice Page-Type Checkboxes are graphics embedded into the page with the tag: checkbox_checked.gif checkbox.gif Feedback is placed in a red box when the learner chooses an incorrect answer. This box is implemented purely with CSS:.answer_box_no { padding: 10px; width: 610px; border: 2px solid #ec3333; }

5. Multiple Choice Page-Type Feedback is placed in a green box when the learner chooses a correct answer. This box is implemented purely with CSS:.answer_box_yes { width: 610px; border: 2px solid #009933; padding: 10px; } Checkbox graphics are surrounded with anchor tags ( ) to make them clickable. Each is a link to a new page.

6. Multiple Choice Page-Type The Next button is a graphic, wrapped between and tags.

7. Multiple Choice Page-Type To prevent a blue outline from appearing around the checkboxes and the next and back buttons, you have to give the tag an attribute of border=“0”. This can be done in the Dreamweaver Properties panel for each image, which is also where you can turn the graphic into a link.

8. Multiple Choice Page-Type The answer block is indented because a CSS “indented” class is applied to it:.indented { margin-left: 1em; }

9. Multiple Choice Page-Type As before, the checkboxes are graphics ( tags with border=“0” attributes), surrounded by anchor tags to make them clickable. To give them a little bit of visual “breathing room”, these images also have an hspace=“3” attribute to prevent the text from pressing right up against them. The back button, like each checkbox, is a gif image. It is surrounded by and tags to make it clickable.

10. This Week: Writing Style Guidelines, File and Folder Management, URL Details, Recent Research on Assessments

11. Writing for E-learning

12. Passive vs. Active Voice Passive VoiceActive Voice In 1952, a crucial experiment on bacteriophage (bak-tee’-ree-oh-fayj), a variety of virus that infests bacterial cells, was performed by two biochemists, Alfred D. Hershey and M. Chase. A cell is entered by one, multiplication occurs so that the viruses become numerous, and finally the cell is killed by them. The cell membrane is burst and, where the cell had been entered by one virus, emergence is done by many. In 1952, two biochemists, Alfred D. Hershey and M. Chase, performed a crucial experiment on bacteriophage (bak-tee’-ree- oh-fayj), a variety of virus that infests bacterial cells. They enter a cell, multiply and become numerous, and finally kill the cell. The cell membrane bursts and, where one virus had entered, many emerge. Here are two versions of the same paragraph, adapted from page 101 of Isaac Asimov’s 1962 book, The Genetic Code: Asimov’s version of this paragraph is the one in the “Active Voice” column. Why is it so much easier to read and understand than the one in the “Passive Voice” column? Read: http://www.winthrop.edu/wcenter/handoutsandlinks/passive.htm to learn morehttp://www.winthrop.edu/wcenter/handoutsandlinks/passive.htm

13. Available at the class web site: –ITEC 745 Point of View.doc –ITEC 745 Describing Screen Elements.doc –ITEC 745 Bulleted Lists.doc –ITEC 745 ID Style and Writing Checklist See: http://www.oldkingcole.com/itec745/ ITEC 715 Writing Handouts

14. Intro Portion of Text Spoken in a Botony Computer Game ITEC 715 Addressing the Learner/Avoiding Passive Voice Formal Version: “This program is about what type of plants survive on different planets. For each planet, a plant will be designed. The goal is to learn what type of roots, stem, and leaves allow the plant to survive in each environment. Some hints are provided throughout the program.” Personalized Version: “You are about to start a journey where you will be visiting different planets. For each planet, you will need to design a plant. Your mission is to learn what type of roots, stem, and leaves will allow your plant to survive in each environment. I will be guiding you through by giving out some hints.” From: Moreno, R., and Mayer, R.E. (2000). Engaging Students in Active Learning: The Case for Personalized Multimedia Messages. Journal of Educational Psychology, 93, 724-733 (as reported in Ruth Clark and Richard Mayer’s book E-Learning and the Science of Instruction, page 137)

15. Four other similar studies surveyed Results? Clark & Mayer report: –“In five out of five studies, students who learned with personalized text performed better on subsequent transfer tests than students who learned with formal text” [p. 136-7] –“Overall, participants in the personalized group produced between 20 and 46 per cent more solutions to transfer problems than the formal group.” [p. 137] ITEC 715 Addressing the Learner/Avoiding Passive Voice Clark, Ruth and Richard Mayer, E-Learning and the Science of Instruction, 2002

16. Other things you should standardize: –Use of fonts –Introduction of new terms –Introduction of new acronyms ITEC 715 More on Writing Style

17. ITEC 715 Final Project Examples Last year, student topics included: –A beginner’s guide to painting

18. ITEC 715 Final Project Examples Last year, student topics included: –Creating a digital portfolio –Earthquake safety

19. ITEC 715 Final Project Examples Navigation: 2 Styles –Permanently on-screen in left column; or –On-screen only when learner clicks Main Menu button

20. Dreamweaver File and Folder Maintenance, URLs

21. Folder Management and URLs Your web root folder: public_html URL to your web root folder: http://userwww.sfsu.edu/~your account/ Segregate your ITEC 745 pages into a subfolder called “itec745” located directly under your web root. If you take other SFSU classes that require you to place web pages on your SFSU server space, then place them in another subfolder (e.g., “itec845”).

22. Folder Management and URLs Your web root folder: public_html URL to your web root folder: http://userwww.sfsu.edu/~your account/ URL to your itec745 subfolder: http://userwww.sfsu.edu/~your account/itec745 URL to a different class subfolder (e.g., itec845): http://userwww.sfsu.edu/~your account/itec845 In either case, your web root and site definition remain the same!

23. Folder Management and URLs Creating subfolders Right-click on your site

24. Folder Management and URLs Creating subfolders Click New Folder

25. Folder Management and URLs Creating subfolders Name your new folder itec745

26. Folder Management and URLs Creating subfolders Right-click on your new itec745 folder and choose New Folder from the pop-up menu

27. Folder Management and URLs Creating subfolders Name your new subfolder final_project. Place all your final project files (including your XHTML, CSS, and image files) in this folder or in subfolders under it. To do this, simply use Save As from the Dreamweaver menu when you are ready to save your file for the first time, and then browse to this final_project folder before clicking OK.

28. Each subfolder you create gets added to your URL. To reach web pages located in public_html/itec745/final_project: http://userwww.sfsu.edu/~your account/itec745/final_project/ E.g., to reach a page called “module2.html” located in the final_project subfolder, use the URL: http://userwww.sfsu.edu/~your account/itec745/final_project/module2.html ITEC 715 URLs and Subfolders

29. Sometimes people like to keep all of their image files in a separate folder, so their folder hierarchies look like this Web root itec745 final_project web_page.html CSS_page.css images photo1.jpg next.gif back.gif ITEC 715 URLs and Subfolders

30. If web_page.html needs to display photo1.jpg, then the image tag must give either an absolute URL ( ) or must use “..” in a relative URL to “move up” in the file tree structure ( ) web root itec745 images photo1.jpg next.gif back.gif ITEC 715 URLs, Subfolders, and dot-dot final_project web_page.html css_file.css web_page.html is in this folder. To name the path to photo1.jpg relative to the current folder, you have to first go “up” one folder level, to itec745, then “down” a different branch to images. Two dots (“..”) in a URL mean “go up one folder level”. So inside web_page.html, you have to use the relative URL “../images/photo1.jpg”

31. The SFSU web server is configured to let you browse the contents of any folder in your web space: ITEC 715 Special meaning of index.html

32. However, if you place a file with the special name index.html in a folder, the web server will send index.html whenever it receives a request to view a the folder that contains it. The first page of your course should be named index.html for this very reason. ITEC 715 Special meaning of index.html

33. Recent Research on Assessments

34. ITEC 715 Research on Assessments Learning Objective: When presented with any word from a learner-studied list of 40 English-Swahili word-pairs, the learner must be able to correctly recall the given word’s pair. Example: (study): mashua-boat (test): mashua- ? See: Karpicke, J.D., and Roediger, H.L., III (2008). The Critical Importance of Retrieval for Learning. Science, 319, 966-968 (February 15 2008)

35. ITEC 715 Research on Assessments See: Karpicke, J.D., and Roediger, H.L., III (2008). The Critical Importance of Retrieval for Learning. Science, 319, 966-968 (February 15 2008) Research Objectives After a paired word can be recalled correctly once, what is the effect of four different study/assessment strategies on long- term retention? Each uses an alternating sequence of “study” and “test” periods. The strategies investigated were: 1.Continue to study all 40 words and to test learners on all 40 words (ST) 2.Drop correctly recalled words from study sessions, but continue to test learners on the whole list of words (S N T) 3.Continue to study the whole list of words, but drop correctly recalled words from subsequent tests (ST N ) 4.Drop correctly recalled words from subsequent study and test sessions (S N T N )

36. ITEC 715 Research on Assessments The Experiment: College students were divided into 4 groups (ST, S N T, ST N, S N T N ) and cycled through four study/test sessions. After a week delay, a final test assessed long-term retention for each group. Study Test STSNTSNTST N SNTNSNTN See: Karpicke, J.D., and Roediger, H.L., III (2008). The Critical Importance of Retrieval for Learning. Science, 319, 966-968 (February 15 2008)

37. Question: Which strategy will yield the best long-term retention? Research on Assessments

38. Experimental Data: ITEC 715 Research on Assessments Total number of study trials Total number of test trials 160 76.8 160 160 83 77.4 See: Karpicke, J.D., and Roediger, H.L., III (2008). The Critical Importance of Retrieval for Learning. Science, 319, 966-968 (February 15 2008)

39. Experimental Results: ITEC 715 Research on Assessments Total number of study trials Total number of test trials 160 76.8 160 160 83 77.4 See: Karpicke, J.D., and Roediger, H.L., III (2008). The Critical Importance of Retrieval for Learning. Science, 319, 966-968 (February 15 2008) ST and ST N  Same number of study trials (160 each) S N T and S N T N  Similar number of study trials (76.8, 77.4) ST and S N T  Same number of test trials (160 each) ST N and S N T N  Similar number of test trials (83, 77.4) Data Analysis:

40. ITEC 715 Research on Assessments See: Karpicke, J.D., and Roediger, H.L., III (2008). The Critical Importance of Retrieval for Learning. Science, 319, 966-968 (February 15 2008) Conclusion: “Repeated retrieval practice enhanced long-term retention, whereas repeated studying produced essentially no benefit benefit.” [p. 967] “…about 80 more study trials occurred in the ST N condition than in the S N T N condition, but this produced practically no gain in retention. Likewise, about 80 more study trials occurred in the ST condition than in the S N T condition, and this produced no gain whatsoever in retention. However, when about 80 more test trials occurred in the learning phase (in the ST condition versus the ST N condition, and in the S N T condition versus the S N T N condition), repeated retrieval practice led to greater than 150% improvements in long-term retention.” [p. 967]

41. Download the Final Project Guidelines from the class web site: http://www.oldkingcole.com/itec745/final_project_guidelines/ITEC_745_Final_Project_Grading_Guide.doc Begin working on your final project! For Next Week