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 when the student moves the mouse over the answer space:

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 code of your own web page to get started.

<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)
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 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), ort any HEX color number taken from a color picker.
   

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 background color 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.

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