Transcript Week 12

ITEC 745
Instructional Web Authoring I
Instructor: Ray Cole
Week 12
Recall from 3 Weeks Ago:
Multiple Choice Page-Type:
Graphic Hyperlinks,
CSS Box Model
Multiple Choice Page-Type
Instructions in the
left column
Questions in the
right column
Multiple Choice Page-Type
Checkboxes are
graphics embedded
into the page with
the <img> 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;
}
Multiple Choice Page-Type
Checkbox graphics
are surrounded with
anchor tags (<a>) to
make them
clickable. Each is a
link to a new page.
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;
}
Multiple Choice Page-Type
The Next button is a graphic, wrapped
between <a href=“q2.html”> and </a>
tags.
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
<img> 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.
Multiple Choice Page-Type
The answer block is
indented because a
CSS “indented” class
is applied to it:
.indented {
margin-left: 1em;
}
Multiple Choice Page-Type
As before, the
checkboxes are
graphics (<img> 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 <a href=“q1.html”>
and </a> tags to make it clickable.
This Week:
Writing Style Guidelines,
File and Folder Management,
URL Details,
Recent Research on
Assessments
Writing for E-learning
Passive vs. Active Voice
Here are two versions of the same paragraph, adapted from page 101 of Isaac
Asimov’s 1962 book, The Genetic Code:
Passive 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.
Active Voice
In 1952, two biochemists, Alfred D.
Hershey and M. Chase, performed a crucial
experiment on bacteriophage (bak-tee’-reeoh-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.
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 more
Writing Handouts
ITEC 715
• 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/
Addressing the Learner/Avoiding Passive Voice
ITEC 715
• Intro Portion of Text Spoken in a Botony
Computer Game
Formal Version:
Personalized 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.”
“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)
Addressing the Learner/Avoiding Passive Voice
ITEC 715
• 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]
Clark, Ruth and Richard Mayer, E-Learning and the Science of Instruction, 2002
More on Writing
Style
ITEC 715
• Other things you should standardize:
– Use of fonts
– Introduction of new terms
– Introduction of new acronyms
Final Project
Examples
ITEC 715
• Last year, student topics included:
– A beginner’s guide to painting
Final Project
Examples
ITEC 715
• Last year, student topics included:
– Creating a digital portfolio
– Earthquake safety
Final Project
Examples
ITEC 715
• Navigation: 2 Styles
– Permanently on-screen in left column; or
– On-screen only when learner clicks Main
Menu button
Dreamweaver File and Folder
Maintenance, URLs
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”).
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!
Folder Management and URLs
Creating
subfolders
Right-click on your
site
Folder Management and URLs
Creating
subfolders
Click New Folder
Folder Management and URLs
Creating
subfolders
Name your new
folder itec745
Folder Management and URLs
Creating
subfolders
Right-click on your new
itec745 folder and choose
New Folder from the pop-up
menu
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.
URLs and Subfolders
ITEC 715
• 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
URLs and Subfolders
ITEC 715
• 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
URLs, Subfolders,
and
dot-dot
ITEC 715
• If web_page.html needs to display photo1.jpg, then the image tag
must give either an absolute URL (<img
src=http://userwww.sfsu.edu/~your
account/itec745/images/photo1.jpg alt=“my photo” />) or must use
“..” in a relative URL to “move up” in the file tree structure (<img
src=“../images/photo1.jpg” alt=“my photo.jpg” />)
web root
itec745
images
photo1.jpg
next.gif
back.gif
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”
Special meaning
of
index.html
ITEC 715
• The SFSU web server is configured to let
you browse the contents of any folder in
your web space:
Special meaning
of
index.html
ITEC 715
• 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.
Recent Research on
Assessments
Research on
Assessments
ITEC 715
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)
Research on
Assessments
ITEC 715
Research Objectives
• After a paired word can be recalled correctly once, what is the
effect of four different study/assessment strategies on longterm 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 (SNT)
3. Continue to study the whole list of words, but drop correctly recalled words
from subsequent tests (STN)
4. Drop correctly recalled words from subsequent study and test sessions
(SNTN)
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 on
Assessments
ITEC 715
The Experiment: College students were divided into 4
groups (ST, SNT, STN, SNTN) and cycled through four study/test
sessions.
After a week delay, a final test assessed long-term retention for
each group.
Study
Test
ST
SNT
STN
SNTN
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 on Assessments
Question:
Which strategy will yield the best
long-term retention?
Research on
Assessments
ITEC 715
• Experimental Data:
Total
number of
study trials
Total
number of
test trials
160
160
76.8
160
160
83
77.4
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)
Research on
Assessments
ITEC 715
• Experimental Results:
ST and STN  Same number of study trials (160 each)
SNT and SNTN  Similar number of study trials (76.8, 77.4)
Data Analysis:
ST and SNT  Same number of test trials (160 each)
STN and SNTN  Similar number of test trials (83, 77.4)
Total
number of
study trials
Total
number of
test trials
160
160
76.8
160
160
83
77.4
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)
Research on
Assessments
ITEC 715
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 STN
condition than in the SNTN condition, but this
produced practically no gain in retention. Likewise,
about 80 more study trials occurred in the ST
condition than in the SNT 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 STN condition, and in the SNT condition versus
the SNTN condition), repeated retrieval practice led
to greater than 150% improvements in long-term
retention.” [p. 967]
See: Karpicke, J.D., and Roediger, H.L., III (2008). The Critical Importance of Retrieval for Learning. Science, 319,
966-968 (February 15 2008)
For Next Week
• 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!