www.webdeveloper.com
Results 1 to 10 of 10

Thread: [RESOLVED] help with putting images into array

Hybrid View

  1. #1
    Join Date
    Jun 2013
    Posts
    11

    resolved [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.





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

    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!

  2. #2
    Join Date
    Jun 2013
    Posts
    11
    so sorry, here is the full code:

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

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

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    have you ever heard about using [code][/code] tags?
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  4. #4
    Join Date
    Jun 2013
    Posts
    11
    no i havent- will it solve my problem?

  5. #5
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    it probably will...
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  6. #6
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,265
    It would still be more convenient to use the code tag if it was available without having to click GO Advanced !

  7. #7
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    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

    Code:
    <!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
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  8. #8
    Join Date
    Jun 2013
    Posts
    11
    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?

  9. #9
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    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:
    Code:
    if(c<32){
    var day=new Date();trialstart=day.getTime();
    doc("Message").innerHTML='<img src="pic/'+quest[neworder[c]][0]+'" alt="" />';
    }
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  10. #10
    Join Date
    Jun 2013
    Posts
    11
    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 :

    <textarea id="QR~QID6" cols="100" rows="3"></textarea>


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

    <!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>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles