hi there!
i am working on creating a stroop task and I need help with the code! What I have so far allows for the presentation of pictures or text in succession, but what I want to do is present a picture and an audio clip simultaneously in succession. How would I go about fixing the code?

Here is what I have so far. Many thanks to any help- it is VERY VERY appreciated!





<script type="text/javascript">

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;
};

qID = 8;

document.onkeyup = KeyCheck;

var input = new Array();
var correct = new Array();
var 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]);

var t = 0;var c = 0;var d;var running = 0;

input[0]="Horrible"; correct[0]=76;
input[1]="Nasty"; correct[1]=76;
input[2]="Awful"; correct[2]=76;
input[3]="Terrible"; correct[3]=76;
input[4]="Agony"; correct[4]=76;
input[5]="Hurt"; correct[5]=76;
input[6]="Evil"; correct[6]=76;
input[7]="Failure"; correct[7]=76;

input[8]="Happy"; correct[8]=65;
input[9]="Beautiful"; correct[9]=65;
input[10]="Laughter"; correct[10]=65;
input[11]="Pleasure"; correct[11]=65;
input[12]="Joy"; correct[12]=65;
input[13]="Wonderful"; correct[13]=65;
input[14]="Smile"; correct[14]=65;
input[15]="Glorious"; correct[15]=65;

input[16]="<img src='https://s.qualtrics.com/ControlPanel/Graphic.php?IM=IM_0TgHOq16mRAPOw5&V=1373398118'>"; correct[16]=65;
input[17]="<img src='https://s.qualtrics.com/ControlPanel/Graphic.php?IM=IM_bdxcbe4YR2cENIF&V=1373398126'>"; correct[17]=65;
input[18]="<img src='https://s.qualtrics.com/ControlPanel/Graphic.php?IM=IM_d0xBZ5qWu2RCGNL&V=1373398134'>"; correct[18]=65;
input[19]="<img src='https://s.qualtrics.com/ControlPanel/Graphic.php?IM=IM_0uHzWJpWoQXlklD&V=1373398145'>"; correct[19]=65;
input[20]="<img src='https://s.qualtrics.com/ControlPanel/Graphic.php?IM=IM_0TgHOq16mRAPOw5&V=1373398118'>"; correct[20]=65;
input[21]="<img src='https://s.qualtrics.com/ControlPanel/Graphic.php?IM=IM_bdxcbe4YR2cENIF&V=1373398126'>"; correct[21]=65;
input[22]="<img src='https://s.qualtrics.com/ControlPanel/Graphic.php?IM=IM_d0xBZ5qWu2RCGNL&V=1373398134'>"; correct[22]=65;
input[23]="<img src='https://s.qualtrics.com/ControlPanel/Graphic.php?IM=IM_0uHzWJpWoQXlklD&V=1373398145'>"; correct[23]=65;

input[24]="<img src='https://s.qualtrics.com/ControlPanel/Graphic.php?IM=IM_3KLh0Az4HGK1mXr&V=1373398154'>"; correct[24]=76;
input[25]="<img src='https://s.qualtrics.com/ControlPanel/Graphic.php?IM=IM_2tVHGe9ugznkmhL&V=1373398160'>"; correct[25]=76;
input[26]="<img src='https://s.qualtrics.com/ControlPanel/Graphic.php?IM=IM_065EWLTEYYVsHhr&V=1373398166'>"; correct[26]=76;
input[27]="<img src='https://s.qualtrics.com/ControlPanel/Graphic.php?IM=IM_1Ff55Hq52s1nkEZ&V=1373398171'>"; correct[27]=76;
input[28]="<img src='https://s.qualtrics.com/ControlPanel/Graphic.php?IM=IM_3KLh0Az4HGK1mXr&V=1373398154'>"; correct[28]=76;
input[29]="<img src='https://s.qualtrics.com/ControlPanel/Graphic.php?IM=IM_2tVHGe9ugznkmhL&V=1373398160'>"; correct[29]=76;
input[30]="<img src='https://s.qualtrics.com/ControlPanel/Graphic.php?IM=IM_065EWLTEYYVsHhr&V=1373398166'>"; correct[30]=76;
input[31]="<img src='https://s.qualtrics.com/ControlPanel/Graphic.php?IM=IM_1Ff55Hq52s1nkEZ&V=1373398171'>"; correct[31]=76;

function start_it() {
if (c<32) {
var day = new Date(); trialstart = day.getTime();
document.getElementById("Message").innerHTML = "<br>" + input[neworder[c]];
}
else {
clearInterval(t)
document.getElementById("Message").innerHTML = "<br>You may now proceed to the next section";
document.getElementById("QR~QID8").value = document.getElementById("QR~QID8").value + "END";
}
}

function KeyCheck(e) {
var KeyID = (window.event) ? event.keyCode : e.keyCode;
if (c<32) {
d=neworder[c]; if (d<=9) {d="0"+d;}
if(KeyID == 65) {
var day = new Date(); trialend = day.getTime();
rt = trialend - trialstart;
if(correct[neworder[c]] == 65){
document.getElementById("QR~QID8").value = document.getElementById("QR~QID8").value + d + "C" + rt + ",";
document.getElementById("Message").innerHTML = "<br>+";
c=c+1;
t = setTimeout('start_it();',500);
}
else{
document.getElementById("QR~QID8").value = document.getElementById("QR~QID8").value + d + "X" + rt + ",";
document.getElementById("Message").innerHTML = "<b style='color:red;font-size:80px'>X</b>";
c=c+1;
t = setTimeout('document.getElementById("Message").innerHTML = "<br>+";',500);
t = setTimeout('start_it();',700);
}

}

if(KeyID == 76) {
var day = new Date(); trialend = day.getTime();
rt = trialend - trialstart;
if(correct[neworder[c]] == 76){
document.getElementById("QR~QID8").value = document.getElementById("QR~QID8").value + d + "C" + rt + ",";
document.getElementById("Message").innerHTML = "<br>+";
c=c+1;
t = setTimeout('start_it();',500);
}
else{
document.getElementById("QR~QID8").value = document.getElementById("QR~QID8").value + d + "X" + rt + ",";
document.getElementById("Message").innerHTML = "<b style='color:red;font-size:80px'>X</b>";
c=c+1;
t = setTimeout('document.getElementById("Message").innerHTML = "<br>+";',500);
t = setTimeout('start_it();',700);
}

}

if(KeyID == 32) {
if (running == 0) {
document.getElementById('instructions').style.display = "none";
running = 1;
start_it();
}
}
}
}

</script>
<center>
<b style="color:chartreuse;font-size:30px"><span style="color:#000000;"><img height="219" src="https://qtrial.qualtrics.com/CP/Graphic.php?IM=IM_1Xj6YjPOXeliPv7" width="178" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img height="161" src="https://qtrial.qualtrics.com/CP/Graphic.php?IM=IM_e5uFQajWqrtzaNT" width="251" /><br />
or Good Word &nbsp; &nbsp; &nbsp;</span> &nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#000000;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; or Bad Word</span></b><br />
<h2 id="Message" style="font-size:30px">
+</h2>
<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 4 categories, two on the right and two on the left. Pictures or words will start appearing in the middle of the screen, one by one. When the picture or word belongs to a category on the left, press the <b>A</b> key on your keyboard as fast as you can. When the picture or word belongs to a 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 3 of 6</p>
<p>
&nbsp;</p>
<p>
&nbsp;</p>
</center>