If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

[RESOLVED] help with putting images into array

hi there!
i dont have a lot of experience with javascript and im trying to create a script where keystrokes will change the image being presented. Currently i have a code that works with the input being text, but i want to change this so that what you see are images, one after the other, that change according to if you correct the right button.
For example:
If you see an image of a bird, press the key "A" (if the A key is pressed, then the next image is shown)

This is what i have so far. Someone please help!

to summarize, i would like to replace the words "horrible", "happy" etc. with pictures.

</script>
<center>
<b style="font-size:30px"><img src="https://qtrial.qualtrics.com/CP/Graphic.php?IM=IM_0IBwDsjzNu6XTI9" height="142" width="220"> &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; <img src="https://qtrial.qualtrics.com/CP/Graphic.php?IM=IM_0PskFoNbkz8tQLH" height="148" width="148"></b>
<h2 id="Message" style="font-size:30px">
+</h2>
<br>
<p id="instructions">
Please place your left and right fingers on the <b>A</b> and <b>L</b> keys respectively. At the top of the screen, you will see 2 categories, one on the right and one on the left. Pictures will start appearing in the middle of the screen, one by one. When the picture belongs to the category on the left, press the <b>A</b> key on your keyboard as fast as you can. When the picture belongs to the category on the right, press the <b>L</b> key on your keyboard as fast as you can. If you make an error, a red <b style="color:red">X</b> will appear. Please try to make as few errors as possible.<br>
<br>
When you are ready, please press the [Space] bar to begin.<br>
<br>
Part 1 of 7</p>
</center>

ok that was just a joke-hint, but [code][/code] tags are used not only at this forum and it seems not that hard to understand that a square mile of a code in a post is hard to read|observe|analyze|copy etc. that's why my signature is so colored.

anyway, here is a simplified version of the code with images instead of words

Thanks so much! But how do i make the box with the text that appears after A or L is pressed disappear? I still want to be able to record which button was pressed, however I dont want the user to be able to see that.

Thanks!!

Also, when placing pictures in, can i just go ahead and type in the url to replace 01.jpg?

this is what I've got so far, but it doesnt seem to be working when i try to run it (when i press the space bar, it just enters text into the box. As well, Im not quite sure what you mean when you say textarea display, are you referring to :

function start_it(){ if(c<32){ var day=new Date();trialstart=day.getTime(); doc("Message").innerHTML='<img src="'+quest[neworder[c]][0]+'" alt="" />'; } else{ clearInterval(t) doc("Message").innerHTML="<br>You may now proceed to the next section"; doc("QR~QID6").value+="END"; } } function KeyCheck(e){ var KeyID=(window.event)?event.keyCode:e.keyCode; if(KeyID!=32&&KeyID!=65&&KeyID!=76){return;} if(c<32){ d=neworder[c];if(d<=9){d="0"+d;} if(KeyID==65||KeyID==76){ var day=new Date();trialend=day.getTime();rt=trialend-trialstart; if(quest[neworder[c]][1]===KeyID){ doc("QR~QID6").value+=d+"C"+rt+",";doc("Message").innerHTML="<br>+"; t=setTimeout('start_it()',500); } else{ doc("QR~QID6").value+=d+"X"+rt+",";doc("Message").innerHTML="<b style='color:red;font-size:80px'>X</b>"; t=setTimeout('doc("Message").innerHTML="<br>+";',500); t=setTimeout('start_it()',700); } c++; } if(KeyID==32){if(running==0){doc('instructions').style.display="none";running=1;start_it();}} } } window.onload=function(){window.onkeyup=KeyCheck;} </script> <center> <b style="font-size:30px"><img src="https://qtrial.qualtrics.com/CP/Graphic.php?IM=IM_0IBwDsjzNu6XTI9" height="142" width="220"> &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; <img src="https://qtrial.qualtrics.com/CP/Graphic.php?IM=IM_0PskFoNbkz8tQLH" height="148" width="148"></b> <h2 id="Message" style="font-size:30px">+</h2> <br> <p id="instructions"> Please place your left and right fingers on the <b>A</b> and <b>L</b> keys respectively. At the top of the screen, you will see 2 categories, one on the right and one on the left. Pictures will start appearing in the middle of the screen, one by one. When the picture belongs to the category on the left, press the <b>A</b> key on your keyboard as fast as you can. When the picture belongs to the category on the right, press the <b>L</b> key on your keyboard as fast as you can. If you make an error, a red <b style="color:red">X</b> will appear. Please try to make as few errors as possible.<br> <br> When you are ready, please press the [Space] bar to begin.<br> <br> Part 1 of 7</p> <textarea id="QR~QID6" cols="100" rows="3"></textarea> </center> </body> </html>