Can key presses be used to control image presentation?

I would like to know whether there is any way to allow participants to use key presses within either MediaLab or DirectRT to control presentation of images in a sequential manner and then record which image is finally chosen. For example, to test people's susceptibility to the Muller-Lyer illusion, I would like to be able to present images of lines in a sequence like this: >-----<-------> then >------<------> then >-------<----->, where participants would be able to advance or go backward between the images by pressing a key (e.g., right and left arrow keys), and then record which image they choose as their final answer (the goal being to choose the drawing where the line segments between arrows appear equal). Ideally, I would like participants to be able to drag the middle arrowhead to the position they think equally subdivides the line, but I don't know how to program animations that participants can control, so I thought having them control presentation of still images might work instead. Any suggestions on how I can do this would be greatly appreciated!

Well the tricky part is certainly the going back and forth part via the arrow keys. The easiest way I can think to do this (that would allow for unlimited back and forth action) would be to create and html file with some javascript (or other script) that would change the active image depending on the key(s) pressed. Do you have access to someone there who knows HTML?

I found a free "photo slider" Java script (see below) that will allow participants to move backward and forward through a series of images by clicking on Back and Next buttons on the screen. Can I use this script somehow in a MediaLab questionnaire? I am not sure how to record which image the participant finally selects, but one inelegant way would be to put an identification number in my drawings and have participants type this number as their response. Please let me know if this would work, and if so, how I would incorporate the script into a MediaLab questionnaire that would allow participants to type their answer. Thanks!
<table border="0" cellpadding="0">
<caption><strong>Air Show Photos</strong></caption>
<tr>
<td width="100%"><img src="plane1.gif" width="300" height="240" name="photoslider"></td>
</tr>
<tr>
<td width="100%"><form method="POST" name="rotater">
<div align="center"><center><p><script language="JavaScript1.1">
var photos=new Array()
var which=0
/*Change the below variables to reference your own images. You may have as many images in the slider as you wish*/
photos[0]="plane1.gif"
photos[1]="plane2.gif"
photos[2]="plane3.gif"
photos[3]="plane4.gif"
photos[4]="plane5.gif"

function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which]
}
}
function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
}
else window.status='End of gallery'
}
</script><input type="button" value="&lt;&lt;Back" name="B2"
onClick="backward()"> <input type="button" value="Next&gt;&gt;" name="B1"
onClick="forward()"><br>
<a href="#" onClick="which=1;backward();return false"><small>Start Over</small></a></p>
</center></div>
</form>
</td>
</tr>
</table>
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="<A href="http://javascriptkit.com">JavaScript">http://javascriptkit.com">JavaScript
Kit</a></font></p>

Like this? (see attached). If so, do you want to track their going back and forth behaviour or just the final answer?

Yes, that's it! I would just like to be able to track the final answer. Thanks very much.

OK, that's where my knowledge ends. You need to ask someone who knows something about javascript. The gist is that you want to include the java variable in your form post. I think the variable you want to post here is called "which" in the code you sent. Do you have someone who could help you with that? If not, let me know and I'll try googling around for the answer.

I think this works:
<table border="0" cellpadding="0">
<tr>
<td width="100%"><img src="mullerlyer1.gif" name="photoslider"></td>
</tr>
<tr>
<td width="100%"><form method="POST" name="rotater" onsubmit=updatewhichpic()>
<div align="center"><center><p><script language="JavaScript1.1">
var photos=new Array()
var which=0
/*Change the below variables to reference your own images. You may have as many images in the slider as you wish*/
photos[0]="mullerlyer1.gif"
photos[1]="mullerlyer2.gif"
photos[2]="mullerlyer3.gif"
photos[3]="mullerlyer4.gif"
photos[4]="mullerlyer5.gif"
function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which]
//submitform.whichpic.value = which
}
}
function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
//submitform.whichpic.value = which
}
else window.status='End of gallery'
}
function updatewhichpic(){
rotater.whichpic.value=which
}
</script>
<input type="button" value="&lt;&lt;Back" name="B2"
onClick="backward()"> <input type="button" value="Next&gt;&gt;" name="B1"
onClick="forward()"> <br>
<!--form name="submitform" method="post" -->
<input name="whichpic" type="hidden">
<input type="submit" value="OK">
<!--/form-->
<!--<a href="#" onClick="which=1;backward();return false"><small>Start Over</small></a></p>-->
</center></div>
</form>
</td>
</tr>
</table>