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