www.webdeveloper.com
Results 1 to 2 of 2

Thread: Displaying Image From Variable

Hybrid View

  1. #1
    Join Date
    Aug 2013
    Location
    CA, Inland Empire
    Posts
    2

    Post Displaying Image From Variable

    Hello all and Thanks in advanced for all your help.
    I have am working on a small program that needs to do several things. What the script needs to accomplish is the following.
    1) Display an image of a cross for 500ms
    2) Display 250ms of blank screen.
    3) Display Image 1 through 5. Each displaying for 1 second with 250ms hold between pictures.
    4) Display an image from the test folder while asking user "Is this an exact match for one of the shapes you just saw?"
    5) After they answer the question it should repeat steps 1 through 4 with the next 5 set of images, then asking the same question.
    6) This cycle should repeat 66 times (each cycle containing 5 images)
    I am having problem with the following
    1) Inserting the test image that displays with the forum (This image should change once with every cycle)
    2) At the beginning of every cycle, I have an image that's not loading, I'm not sure what the program is looking for. Is this image possibly looking for the cross?
    3) all the answers I would like to have submitted into a MySQL database and emailed to me. I don't know how to write this in javascript, I can do it in PHP but would prefer to keep everything in JavaScript if possible?
    If you could let me know where I'm going wrong and what I'm doing wrong it would be much appreciated.
    Here Is My Code

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    #theQuestion {
        position: relative;
        display: none;
    }
    </style>
    </head>
    <body>
    <div>
        <img id="theImage" alt="the image" />
        <div id="theQuestion">
            <form id="theForm">
    <script type="text/javascript">
    var testImagePath = 1;
    var testImageCycle = 1;
    var testImageSuf = ".bmp";
    var testImage = testImageCycle + testImageSuf;
    document.images.slide.src=eval(testImage)
    </script>
            <img src="version-1\part-1\test\.bmp"><br>
            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 = 1000; // 1 seconds...adjust as you wish
    
    // 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++;
    	}
    }
    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 );
    </script>
    </body>
    </html>

  2. #2
    Join Date
    Aug 2013
    Location
    CA, Inland Empire
    Posts
    2
    Sorry, This is the upated code, not the previous code block.
    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">
            <form id="theForm">
            <img src="<script type="text/javascript">$testImage;</script>"><br>
            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 = 1000; // 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++;
    	}
    }
    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 );
    </script>
    </body>
    </html>

Thread Information

Users Browsing this Thread

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

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