hi there! I am not very good at code and am trying to program a script that will run a reaction time test and so far I've got everything in place. However, there is a text box that appears at the bottom and shows text whenever a user presses a key ("A" or "L") to continue the reaction time test. I want to be able to save the text that shows up in a log somehow, so I know which buttons the user pressed, but I also don't want the user to be able to see the text box display with the text. Any help would be much appreciated! I am well beyond my means to understand how to do this by myself . Here is the code so far, thank you so so much!



<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
body{color:#000;background-color:#fff;font-family:'Bookman Old Style',Georgia,Verdana;font-size:14px;text-align:left;}
img{border:2px outset #fff;border-radius:5px;}
#instructions{text-align:left;text-indent:15px;}
#Message img{border:2px solid Lightsteelblue;border-radius:12px;}
</style>
<script type="text/javascript">
function doc(id){return document.getElementById(id);}

var shuffle=function(o){ //v1.0
for(var j,x,i=o.length; i; j=parseInt(Math.random() * i),x=o[--i],o[i]=o[j],o[j]=x);
return o;
},
neworder=shuffle([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]),
t=0,c=0,d,running=0,trialstart=0,
quest=[












["https://si0.twimg.com/profile_images/3514779605/9ac2af9abdf6baab94149f945639ef41.jpeg",76],["https://si0.twimg.com/profile_images/3534366136/2b4434c945b477e89b42c430378345b3.jpeg",76],["https://si0.twimg.com/profile_images/3725297408/1b1bdaf4cd82c99f0e7933f5296e08b2.jpeg",76],["https://si0.twimg.com/profile_images/3607770892/403a9304ab770644e81dcd619be703f4.jpeg",76],["https://si0.twimg.com/profile_images/3669703715/0d1dfd2424b12b4784ecd530ed3943db.png",76],["https://si0.twimg.com/profile_images/3333861194/bbd719931fb8beb9469dc98b627158c9.jpeg",76],["https://si0.twimg.com/profile_images/3042213649/f8da2949673cf449f9f3c5b6d9b4d99a.jpeg",76],["https://si0.twimg.com/profile_images/3427732078/4034499f2e88bdc9366f1ad0a7070606.jpeg",76],

["https://si0.twimg.com/profile_images/3367503353/3ace77e1bdc5476941112058e9a04b81.jpeg",65],["https://si0.twimg.com/profile_images/3071381181/afe7e093ac37f2346374693399d8013e.jpeg",65],["https://si0.twimg.com/profile_images/2631803453/2d52c9ca1e17f2e6e53ae55e7e31263c.jpeg",65],["https://si0.twimg.com/profile_images/3342699268/305afa644af457a6517e17f116c2adc7.jpeg",65],["https://si0.twimg.com/profile_images/3162594037/e232a8ce35fe8ce856e4a52a16141f20.jpeg",65],["https://si0.twimg.com/profile_images/2940708431/842924fb3e2cc1f7fddf1b195c3f6c81.jpeg",65],["https://si0.twimg.com/profile_images/3453931082/64673e967c9a34e24ded46fd7124d37d.jpeg",65],["https://si0.twimg.com/profile_images/3292107408/13effc3507c3fabffed7d4b034ea1a41.jpeg",65],

["https://si0.twimg.com/profile_images/3514779605/9ac2af9abdf6baab94149f945639ef41.jpeg",76],["https://si0.twimg.com/profile_images/3534366136/2b4434c945b477e89b42c430378345b3.jpeg",76],["https://si0.twimg.com/profile_images/3725297408/1b1bdaf4cd82c99f0e7933f5296e08b2.jpeg",76],["https://si0.twimg.com/profile_images/3607770892/403a9304ab770644e81dcd619be703f4.jpeg",76],["https://si0.twimg.com/profile_images/3669703715/0d1dfd2424b12b4784ecd530ed3943db.png",76],["https://si0.twimg.com/profile_images/3333861194/bbd719931fb8beb9469dc98b627158c9.jpeg",76],["https://si0.twimg.com/profile_images/3042213649/f8da2949673cf449f9f3c5b6d9b4d99a.jpeg",76],["https://si0.twimg.com/profile_images/3427732078/4034499f2e88bdc9366f1ad0a7070606.jpeg",76],

["https://si0.twimg.com/profile_images/3367503353/3ace77e1bdc5476941112058e9a04b81.jpeg",65],["https://si0.twimg.com/profile_images/3071381181/afe7e093ac37f2346374693399d8013e.jpeg",65],["https://si0.twimg.com/profile_images/2631803453/2d52c9ca1e17f2e6e53ae55e7e31263c.jpeg",65],["https://si0.twimg.com/profile_images/3342699268/305afa644af457a6517e17f116c2adc7.jpeg",65],["https://si0.twimg.com/profile_images/3162594037/e232a8ce35fe8ce856e4a52a16141f20.jpeg",65],["https://si0.twimg.com/profile_images/2940708431/842924fb3e2cc1f7fddf1b195c3f6c81.jpeg",65],["https://si0.twimg.com/profile_images/3453931082/64673e967c9a34e24ded46fd7124d37d.jpeg",65],["https://si0.twimg.com/profile_images/3292107408/13effc3507c3fabffed7d4b034ea1a41.jpeg",65]


];



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>