As we have already seen, a Text Box is a useful way to have students interact with a web page in an open-ended manner. A drop-down box or radio buttons are more controlled, like multiple choice answers. We can use a table with hidden text to provide feedback to student input. We can display the corect answer when the student moves the mouse over the answer space (the table):

Tu  à New York ce weekend.

For a similar activity using a drop-down box:

And another using radio buttons:

The table can be created in any web page editor, but a few modifications need to be made to the HTML code to control the color changes when the mouse moves over the answer. We will use a JavaScript command that will be activated by a mouseover event. JavaScript is a simple programming language, and events such as onmouseover, onmouseout or onclick are just things that can happen to the cursor on your web page.  You can copy and paste the table in the HTML source code of your own web page to get started. Then make small modifications to change the preferred colors.

<table border="1">
<tbody>
<tr>
<td style="background-color: white;"
onmouseover="this.style.backgroundColor='gray';"
onmouseout="this.style.backgroundColor='white';">
Answer:<strong> <font color="white">allons</font></strong></td>
</tr>
</tbody>
</table>

The key tag is the <TD> tag. This defines the table cell whose color we will modify. (Note that we are not modifying the table background color, only a cell background color.)

1. Set the background color of the cell to be the same as the current background:
   style="background-color: white;" (or whatever the background happens to be, color name or specific hexadecimal color code)
   
   
2. Change the background color of the cell to a contrasting color when the mouse moves over the cell:
   onmouseover="this.style.backgroundColor='gray';"
   
   
3. Change the background color of the cell back to the original when the mouse moves out of the cell:
   onmouseout="this.style.backgroundColor='white';"
   
   
4. Finally, change the text color of the answer so that it is the same as the background color. This makes the text invisible until the mouse moves over it. The colors can be specified either by color name "white", "black" or by color code "#FFFFFF" (white) , "#000000" (black), "#FF0000" (red), "#00FF00" (green), or any HEX color number taken from a color picker.
   <font color="white">allons</font>
   

The whole <TD> tag becomes:

<td style="background-color: white;" onmouseover="this.style.backgroundColor='gray';" onmouseout="this.style.backgroundColor='white';">

What does this all mean in English?

The cell's background color in our example starts off as white. If the cursor goes over the table cell, the background color changes to gray. If the cursor leaves the table cell, the background color changes to white. Since the text for the answer is also white, it becomes visible when the color changes.

You can use other colors, of course, but be sure that the colors contrast so that the text becomes legible.