ok that was just a joke-hint, but [noparse]
[/noparse] 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
<!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=[
["01.jpg",76],["02.jpg",76],["03.jpg",76],["04.jpg",76],["05.jpg",76],["06.jpg",76],["07.jpg",76],["08.jpg",76],
["09.jpg",65],["10.jpg",65],["11.jpg",65],["12.jpg",65],["13.jpg",65],["14.jpg",65],["15.jpg",65],["16.jpg",65],
["17.jpg",76],["18.jpg",76],["19.jpg",76],["20.jpg",76],["21.jpg",76],["22.jpg",76],["23.jpg",76],["24.jpg",76],
["25.jpg",65],["01.jpg",65],["02.jpg",65],["03.jpg",65],["04.jpg",65],["05.jpg",65],["06.jpg",65],["07.jpg",65]
];
function start_it(){
if(c<32){
var day=new Date();trialstart=day.getTime();
doc("Message").innerHTML='<img src="pic/'+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"> <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>
and live demo