Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13

Thread: Display Image

  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Post Display Image

    I have a program in javascript that I am using to display a number of pictures one at a time. After every five pictures, The code is suppose to display a image from a test directory and increment it by one every time the form is displayed. I believe that this needs to be done on Server Side coding, such as php for the forms image to increment and not reset to 0 every time the form is displayed.
    If you can tell me why the php variable
    PHP Code:
    $testImage 
    is not incrementing it would be much appreciated.

    My Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    #theQuestion {
    position: relative;
    display: none;
    }
    </style>
    </head>
    <body>
    <script type="text/javascript">
    var testImageCycle = 1;
    //var testImage = "version-1/part-1/test/" + testImageCycle + ".bmp";
    </script>
    <img id="theImage" alt="the image" />
    <div id="theQuestion">
    <?php
    $testImage = 0;
    $testImage++;
    echo '<img src="version-1/part-1/test/'.$testImage.'.bmp">'
    ?>
    <form id="theForm">
    Is this an exact match for one of the shapes you just saw?<br/>
    <label><input name="yesno" value="yes" type="radio" /> Yes</label>
    <label><input name="yesno" value="no" type="radio" /> No</label>
    </form>
    </div>
    </div>

    <script type="text/javascript">
    var IMAGEWAIT = 250; // Wait one second between each image.

    // controls:
    var curImageCycle = 0;
    var curImage = 1;
    var nextImage = new Image();
    nextImage.src = "version-1/part-1/images/" + curImage + "-" + curImageCycle + ".bmp";

    var image = document.getElementById("theImage");
    var form = document.getElementById("theForm")
    var qdiv = document.getElementById("theQuestion");

    form.yesno[0].onclick = choice;
    form.yesno[1].onclick = choice;

    function showNextImage( force )
    {
    // every 5 images, ask a question
    // but if force argument isf defined, do NOT do so
    if ( force == null && curImageCycle % 6 == 0 )
    {
    showForm(); // shows question, waits for answer
    return;
    }
    image.src = nextImage.src; // get image that was prefetched
    image.style.display = "block"; //and show it

    curImageCycle++;
    // DO *ONE* ONLY OF THE NEXT TWO LINES!!
    if ( curImage > 120 ) curImage = 1; // cycle back to 1 after 100 ???
    if ( curImage > 120 ) return; // FINISHED (or could do location.href='anotherUrl.html'

    // wait the 5 seconds (or other period)
    setTimeout( pause, IMAGEWAIT );

    // pre-fetch the next image
    nextImage.src = "version-1/part-1/images/" + curImage + "-" + curImageCycle + ".bmp";
    if (curImageCycle > 5)
    {
    curImageCycle = 0; //Change Image value to one for next round of pictures.
    curImage++;
    imageTest++;
    }
    }
    function pause( )
    {
    image.style.display = "none";
    setTimeout( showNextImage, 0 ); // The number of seconds before showing the next image.
    }

    function showForm( )
    {
    form.reset(); // clear the yes/no buttons...
    qdiv.style.display = "block"; // ... display form
    }

    function choice( )
    {
    // do something with user's answer??? what???

    // hide form, display next image
    //curImage++;
    qdiv.style.display = "none";
    showNextImage( true ); // force showNextImage to go on...not show form
    }

    // get things started:
    showNextImage( true );

    ////////////Get Single Test Image Depending On Image Cycle/////////////

    </script>
    </body>
    </html>

  • #2
    Master Coder mlseim's Avatar
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,387
    Thanks
    8
    Thanked 1,077 Times in 1,068 Posts
    Server-side scripting (as in PHP) does not remember the values of your variables when the script is re-executed or another PHP is executed. You'll need to save the value in a SESSION variable or COOKIE variable. SESSION would be good, but if the user closed their browser and came back, they would start at the beginning. If they left your site and came back (with the browser open), they would be on the correct place unless the SESSION has timed-out.

    COOKIES are good because javascript and PHP can read/write the same cookies.

    If the users need to log-in for your online test, that allows you to keep track of their question number by using the database.

    You have to decide on how you wish to do it.

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Cookies does sound like its the way to go. How would I go about implementing this into my code, I have never dealt with cookies before?

  • #4
    Master Coder mlseim's Avatar
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,387
    Thanks
    8
    Thanked 1,077 Times in 1,068 Posts
    The script below is totally untested ... because I don't have any images, I can't test it.

    You'll see where javascripting writes a cookie(s) and when the page refreshes, PHP reads them. Likewise you could read them with javascripting.

    See this: http://www.w3schools.com/js/js_cookies.asp

    The part I'm not sure about is the page refresh. Does the page refresh? That might be an issue because I think the cookies need to be sent with a header. I may be all wrong with my test script, but it might give you some ideas on how to approach it.

    The alternative would be to use AJAX (mix PHP and javascripting) to handle the writing and setting of cookies and/or passing the values along.

    Anyhow ... the script below is the concept I had in my head ...

    Code:
    <?php
    // read the cookies if they exist
    $curImage=0;
    if(isset($_COOKIE['curimage'])){
    $curImage=$_COOKIE['curimage'];
    }
    ?>
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    #theQuestion {
    position: relative;
    display: none;
    }
    </style>
    </head>
    <body>
    <script type="text/javascript">
    var testImageCycle = 1;
    //var testImage = "version-1/part-1/test/" + testImageCycle + ".bmp";
    </script>
    <img id="theImage" alt="the image" />
    <div id="theQuestion">
    
    <form id="theForm">
    Is this an exact match for one of the shapes you just saw?<br/>
    <label><input name="yesno" value="yes" type="radio" /> Yes</label>
    <label><input name="yesno" value="no" type="radio" /> No</label>
    </form>
    </div>
    </div>
    
    <script type="text/javascript">
    var IMAGEWAIT = 250; // Wait one second between each image.
    
    // controls:
    var curImageCycle = 0;
    var curImage = 1;
    var nextImage = new Image();
    nextImage.src = "version-1/part-1/images/" + curImage + "-" + curImageCycle + ".bmp";
    
    var image = document.getElementById("theImage");
    var form = document.getElementById("theForm")
    var qdiv = document.getElementById("theQuestion");
    
    form.yesno[0].onclick = choice;
    form.yesno[1].onclick = choice;
    
    function showNextImage( force )
    {
    // every 5 images, ask a question
    // but if force argument isf defined, do NOT do so
    if ( force == null && curImageCycle % 6 == 0 )
    {
    showForm(); // shows question, waits for answer
    return;
    }
    image.src = nextImage.src; // get image that was prefetched
    image.style.display = "block"; //and show it
    
    curImageCycle++;
    // DO *ONE* ONLY OF THE NEXT TWO LINES!!
    if ( curImage > 120 ) curImage = 1; // cycle back to 1 after 100 ???
    if ( curImage > 120 ) return; // FINISHED (or could do location.href='anotherUrl.html'
    
    // wait the 5 seconds (or other period)
    setTimeout( pause, IMAGEWAIT );
    
    // pre-fetch the next image
    nextImage.src = "version-1/part-1/images/" + curImage + "-" + curImageCycle + ".bmp";
    if (curImageCycle > 5)
    {
    curImageCycle = 0; //Change Image value to one for next round of pictures.
    curImage++;
    imageTest++;
    
    // save the curImageCycle value to a cookie
    setCookie("curimagecycle",curImageCycle,365);
    
    // save the curImage value to a cookie
    setCookie("curimage",curImage,365);
    
    }
    }
    function pause( )
    {
    image.style.display = "none";
    setTimeout( showNextImage, 0 ); // The number of seconds before showing the next image.
    }
    
    function showForm( )
    {
    form.reset(); // clear the yes/no buttons...
    qdiv.style.display = "block"; // ... display form
    }
    
    function choice( )
    {
    // do something with user's answer??? what???
    
    // hide form, display next image
    //curImage++;
    qdiv.style.display = "none";
    showNextImage( true ); // force showNextImage to go on...not show form
    }
    
    // get things started:
    showNextImage( true );
    
    ////////////Get Single Test Image Depending On Image Cycle/////////////
    
    // function to set a cookie
    function setCookie(c_name,value,exdays){
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value;
    }
    
    </script>
    </body>
    </html>

    EDIT:
    I guess I didn't pass the PHP values to javascripting ... so maybe read the cookie with javascripting instead?




    .
    Last edited by mlseim; 08-08-2013 at 10:51 PM.

  • #5
    New Coder
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yes, I don't see the test images displaying, the 5 images are displaying but not the test image that should be displaying with the form.
    Here is a zip file of a few sample images if that helps.
    Attached Files Attached Files

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Only some browsers support .bmp images and even when they do the image will usually take thousands ofd times as long to load as a gif, jpeg, or png image (the three web formats) will as bmp images are not complressed.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    New Coder
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    So are you saying that my error why the images are not looping is because they are in .bmp format? I tried changing them to .jpg format but it did not make a difference?

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Quote Originally Posted by captainer View Post
    So are you saying that my error why the images are not looping is because they are in .bmp format? I tried changing them to .jpg format but it did not make a difference?
    No I am saying most people will not see the images at all in bmp format because most browsers don't support that format. Also the images will take a lot longer to load than if you use a web format.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    New Coder
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I see, that makes sense. I am still unable to get the form image to change like its suppose to though. Mlseim was on the right track with cookies and sessions I think but due to my novice programming skills. I am not exatly sure how to complete this. I have been looking up alot about cookies and sessions but seem to be getting a little lost.

  • #10
    Master Coder mlseim's Avatar
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,387
    Thanks
    8
    Thanked 1,077 Times in 1,068 Posts
    I need to experiment with it in order to figure out the cookies with javascripting. If I have time this weekend, I'll look closer. Meanwhile, someone else might have some ideas.

  • #11
    New Coder
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok, Thanks so much.

  • #12
    Master Coder mlseim's Avatar
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,387
    Thanks
    8
    Thanked 1,077 Times in 1,068 Posts
    Captainer ... I PM'd you about this script.

  • Users who have thanked mlseim for this post:

    captainer (08-12-2013)

  • #13
    New Coder
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you all for your assistance, especially mlseim. You have gotten me back on the right track. Very Appreciative.


  •  

    Posting Permissions

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