[RESOLVED] help with putting images into array

This site is best viewed in a modern browser with JavaScript enabled.

[RESOLVED] help with putting images into array

naivivivian

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.

function(o)
{ //v1.0 for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o = o[j], o[j] = x); return o;}

document.onkeyup = KeyCheck;

var img = 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]);

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

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

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

THANK YOU SO MUCH!

naivivivian

so sorry, here is the full code:

shuffle = function(o){ //v1.0
for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o = o[j], o[j] = x);
return o;
};

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]= "hopethisworks"; 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]="Horrible"; correct[16]=76;
input[17]="Nasty"; correct[17]=76;
input[18]="Awful"; correct[18]=76;
input[19]="Terrible"; correct[19]=76;
input[20]="Agony"; correct[20]=76;
input[21]="Hurt"; correct[21]=76;
input[22]="Evil"; correct[22]=76;
input[23]="Failure"; correct[23]=76;

input[24]="Happy"; correct[24]=65;
input[25]="Beautiful"; correct[25]=65;
input[26]="Laughter"; correct[26]=65;
input[27]="Pleasure"; correct[27]=65;
input[28]="Joy"; correct[28]=65;
input[29]="Wonderful"; correct[29]=65;
input[30]="Smile"; correct[30]=65;
input[31]="Glorious"; correct[31]=65;

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~QID6").value = document.getElementById("QR~QID6").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~QID6").value = document.getElementById("QR~QID6").value + d + "C" + rt + ",";
document.getElementById("Message").innerHTML = "<br>+";
c=c+1;
t = setTimeout('start_it();',500);
}
else{
document.getElementById("QR~QID6").value = document.getElementById("QR~QID6").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~QID6").value = document.getElementById("QR~QID6").value + d + "C" + rt + ",";
    document.getElementById("Message").innerHTML = "<br>+";
    c=c+1;
    t = setTimeout('start_it();',500);
  }
  else{
   document.getElementById("QR~QID6").value = document.getElementById("QR~QID6").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="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>
</center>

Padonak

have you ever heard about using [noparse]

[/noparse] tags?

naivivivian

no i havent- will it solve my problem?

Padonak

it probably will...

007Julien

It would still be more convenient to use the code tag if it was available without having to click GO Advanced !

Padonak

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"> &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>

and live demo

naivivivian

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?

Padonak

just set style for the textarea display:none and the user will see nothing. as for pictures, of course you can use urls, but do not forget to remove 'pic/' from the src:

if(c<32){
var day=new Date();trialstart=day.getTime();
doc("Message").innerHTML='<img src="[COLOR="#FF0000"]pic/[/COLOR]'+quest[neworder[c]][0]+'" alt="" />';
}

naivivivian

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 :

Anyway, here is what Ive got so far... Appreciate any help!!