Javascript
Coding
Exercise
Overview
As
part
of
EME6209:
Multimedia
Instructional
Systems
II,
you
have
been
learning
about
Javascript.
The
Javascript
Coding
Exercises
are
opportunities
for
you
to
check
your
understanding
of
this
content.
This
activity
also
contributes
up
to
60
points
to
your
final
course
grade.
Assignment
Purpose
The
purpose
of
this
assignment
is
to
check
your
understanding
of
the
materials
covered
in
the
HTML
and
Javascript
self-‐instructional
materials.
It
is
also
an
opportunity
for
you
to
gain
additional
practice
in
using
HTML
and
Javascript.
Materials
you
need
for
this
Activity
This
activity
will
originate
from
the
website
created
in
the
HTML
Coding
Exercises
activity.
Thus,
all
directions
for
the
Javascript
Coding
Exercise
are
to
be
applied
to
your
HTML
Coding
Exercises
site.
In
addition,
you
are
being
provided
2
web
files
that
contain
all
the
required
elements
for
the
Javascript
Coding
Exercises
(pop-‐up
windows).
The
2
web
files
include:
• model.htm
• exemplifies.htm
File
Structure
As
mentioned
previously,
you
will
be
using
your
HTML
Coding
Exercise
files
previously
created
to
complete
the
Javascript
Coding
Exercise.
You
will
simply
upload
any
additional
files
to
the
‘html-‐
exercises’
folder
you
have
on
your
‘rhartshorne.com’
site.
I
would
recommend
working
on
a
local
folder
(on
your
Desktop,
flash
drive,
etc.)
and
then
replacing
the
folder
currently
on
your
‘rhartshorne.com’
site
with
the
local
folder
in
which
the
Javascript
Coding
Exercises
were
completed.
Once
completed,
place
the
URL
for
your
Index
page
in
the
space
provided
at
the
end
of
this
assignment
description.
Notes
You
may
use
any
web
editor
to
complete
these
activities.
Also,
you
may
use
any
Javascript
Web
Resources
to
complete
these
activities
(even
Javascript
code
generator
sites),
as
the
purpose
of
this
activity
is
not
for
you
to
memorize
Javascript,
but
to
be
able
to
effectively
and
appropriately
integrate
Javascript
coding
and
functionality
into
your
web
sites.
Changes
for
ALL
pages
1. Rollover
for
ALL
hyperlinks
on
the
entire
site
(navigation
menu,
footer
links—including
e-‐mail
link,
etc.)
a. Whenever
a
hyperlink
is
moused
over,
the
color
should
change
from
the
current
color
(#000099)
to
midnight
blue
(#191970)
Index
page
Notes
and
Specifications
(see
Figure
1)
1. The
text
“model,”
when
clicked,
should
open
the
‘model.htm’
file
with
the
following
specifications
(pop-‐up
window):
a. No
toolbar
or
scrollbar
b. Located
300
pixels
from
the
left
and
50
pixels
from
the
top
of
the
browser
window
c. Width
of
300,
height
of
200
d. No
status
bar
or
menu
bar
e. Not
resizable
2. The
text
“embodies,”
when
clicked,
should
open
the
‘embodies.htm’
file
with
the
following
specifications:
a. No
toolbar
or
scrollbar
b. Located
700
pixels
from
the
left
and
175
pixels
from
the
top
of
the
browser
window
c. Width
of
300,
height
of
200
d. No
status
bar
or
menu
bar
e. Not
resizable
Figure
1.
Index
PageNotes
Examples
&
Non-‐Examples
Notes
and
Page
Specifications
(see
Figure
3)
1. For
the
Vernier
row
(top
image
in
the
main
content
table),
complete
the
following:
a. Create
a
Javascript
Alert
pop-‐up
(see
Figure
2)
that
says,
“Great.
This
is
a
nice
example
of
a
simulation.”
when
the
‘Yes,
this
is
a
simulation’
text
is
clicked.
b. Create
a
Javascript
Alert
pop-‐up
that
says,
“Incorrect.
This
tool
possesses
many
of
the
characteristics
of
a
simulation
methodology.”
when
the
‘No,
this
is
not
a
simulation’
text
is
clicked.
2. For
the
Mindgame
row
(bottom
image
in
the
main
content
table),
complete
the
following:
a. Create
a
Javascript
Alert
pop-‐up
that
says,
“Incorrect.
This
tool
possesses
many
characteristics
of
other
methodologies,
but
not
simulations.”
when
the
‘Yes,
this
is
a
simulation’
text
is
clicked.
b. Create
a
Javascript
Alert
pop-‐up
that
says,
“Great.
This
tool
possesses
many
characteristics
of
other
methodologies,
but
not
simulations.”
when
the
‘No,
this
is
not
a
simulation’
text
is
clicked.
Figure
2.
Example
of
a
Javascript
Alert
Pop-‐Up
window
3. All
of
the
links
mentioned
in
1
&
2,
when
moused
over,
should
change
from
the
current
color
(#000099)
to
midnight
blue
(#191970)—i.e.
rollover
effect.
Figure
3.
Examples
&
Non-‐Examples
Page
Notes
Your
Thoughts
&
Comments
Notes
and
Page
Specifications
(see
Figure
5)
1. When
the
user
clicks
“Submit
My
Evaluation”
button,
the
textbox
content
is
submitted
to
your
e-‐mail
address
in
the
table
format
indicated
on
the
page.
(***NOTE:
The
e-‐mail
link
may
not
work,
but
I
will
check
the
code
to
ensure
that
the
submission
would
work
if
an
e-‐mail
client
were
selected***)
a. Merge
the
form
elements
for
the
radio
buttons
and
Comments
window
into
a
single
form.
b. Change
the
Values
for
each
of
the
Radio
Buttons
to
the
same
text
that
is
associated
with
each
button
(Agree,
Strongly
Agree,
etc.).
c. The
first
set
of
radio
buttons
should
populate
a
variable
named
Clarity,
and
the
second
set
of
radio
buttons
should
populate
a
variable
names
Discrimination.
The
form
should
populate
a
variable
named
Comments.
2. When
the
user
clicks
on
the
“Reset
this
form”
button,
a
confirmation
window
that
says,
“Are
you
sure
you
want
to
clear
this
text?”
pops-‐up
(see
Figure
4).
When
the
user
confirms
they
would
like
to
clear
the
text,
the
form
is
reset.
Figure
4.
Sample
Form
Reset
Confirmation
Figure
5.
Your
Thoughts
&
Comments
Page
Notes
