Testing Ideas

Examples for Teachers

Bold Questions and Delayed Answers

Click on the question to make it bright and bold.
Double click on the question to make the answer visible.

<p onmouseover="style.color='purple'" 
   onclick="style.fontSize='150%'"
   ondblclick="getElementById('ricek').style.visibility='visible'">
  Which is heavier, a pound of rocks, or a pound of Rice Krispies? 
</p>
<p class="answer">
  Neither.  Both weigh the same amount.
</p>

Which is heavier, a pound of rocks, or a pound of Rice Krispies?

Neither. Both weigh the same amount.

This works because the class 'answer' is defined in the style file.

p.answer   {visibility:hidden}

Making Text Appear and Disappear

We made text appear and disappear in Events II, but this javascript function from Brian Kelly does it more elegantly, using an if statement to toggle between display and no display.

Want to see some text appear? -- Click Me

<h4 style="cursor:hand";
  onclick="toggleDisplay(sect4);">
  Want to see some text appear? -- Click Me</h4>

< DIV ID="sect4" STYLE="display:none">
Here's how it's done.
....
</DIV>

function toggleDisplay(e)  
 {
  if (e.style.display == "none") 
   {e.style.display = "";} 
  else 
   {e.style.display = "none";}
 }

A form using javascript

The following form contains a select box and a textarea. The form is written in html. No coding here, but notice that everything has a name so that it can be manipulated by the javascript script that follows.

<form name="atommessage">
   <select name="selectbox" size="4" onChange="changecontent(this)">
     <option selected>What are atoms?        </option>
     <option>         What are molecules?    </option>
     <option>         Have you ever seen one?</option>
     <option>         Why not?               </option>
   </select>
<br>
   <textarea rows="8" name="contentbox" cols="48" wrap="virtual">
   </textarea>
</form>

Note that "this" is a javascript reserved word. I think it refers to the <select> element.

 var thecontents=new Array()
   thecontents[0]='An atom is the smallest bit of something you can have.'
   thecontents[1]='A molecule is the smallest bit of something you can have'
   thecontents[2]='I haven\'t'
   thecontents[3]='Atoms and molecules are only an angstrom or two across.'
 document.atommessage.contentbox.value=
         thecontents[document.atommessage.selectbox.selectedIndex]

 function changecontent(which)
  {
   document.atommessage.contentbox.value=thecontents[which.selectedIndex]
  }
</script>