Integrating Technology in the Foreign Language Classroom

  
Jean LeLoup & Bob Ponterio 
SUNY Cortland 
© 2017
Feedback to Student Response in a Table

Setting up feedback for questions in a form

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.

Answer: vas

For a similar activity using a drop-down box:

Nous  à l'école.

Answer: allons

And another using radio buttons:

Ils _________ à l'école.

vais vas va allons allez vont

Answer: vont

 

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.

Syntax must be precisely correct, down to the semi-colon!

The example above uses a font color tag to set the color of the answer text. However, future browsers might prefer that you use a style instead to set the text color. Here is how that would look using <span style="color: white;"> to set the color of the word "allons":

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

Answer: allons

 


Here is another use of JavaScript. Can you figure out what this does?
href="Javascript:void(0)" onclick="monatext.value='eyes';"

A couple of clues: href just means that something is in a clickable link. "monatext" is the name of a textbox.

Answer: If the mouse clicks, put the word "eyes" into the text box called "monatext".

In another lesson we will learn how to use this command to actually put feedback into a text box from a drop down box or radio button.

Hunt around her face to find something to click on.

 



Return to Syllabus