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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts

    basic slideshow and questionare

    I am need to make a program, it has 120 pictures in the folder but the program needs to ask the user a yes or no question after every 5 questions. and then proceed. This is the code that I have so far, I presume that I am doing this quite wrong along with doing this a very inefficient way. If someone can be of assistance it would be much appreciated.

    My code.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript">
    <!-->
    var pathColor = "coloredShapes";
    var seperator = "/";
    var path = "POSITION1";
    var image = "2";
    var imageFolder ="a";
    var imageExt = ".bmp"
    var imageSelect = pathColor + seperator + path + seperator + image + imageFolder + imageExt;
    var image1 = new Image(imageSelect)
    
    var image2=new Image()
    image2.src=imageSelect
    //-->
    </script>
    <title>CP2</title>
    </head>
    <body>
            <img src="coloredShapes/POSITION1/1a.bmp" name="slide" />
            <script type="text/javascript">
            <!--
            var step=1
            function slideit(){
                document.images.slide.src=eval("image"+step+".src")
                if(step<3)
                step++
                else
                step=1
                setTimeout("slideit()",2500)
            }
            slideit()
    		image++
            -->
            </script>
    </body>
    </html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,031
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    So does this mean that your images are all named
    coloredShapes/POSITION1/1a.bmp
    through
    coloredShapes/POSITION1/120a.bmp
    ??

    Hard to guess with no information. And yes, that code is basically junk.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 645 Times in 635 Posts
    1. Attach all the JavaScript in one external file attached just before the </body>

    2. wrap all of the JavaScript inside an anonymous function so as to not pollute the global namespace.

    3. don't use eval()

    4. use an array rather than appending numbers on variable names

    5. don't use strings as the first parameter to a setTimeout call - it expects a function name

    6. it is not necessary to wrap the script in comments to hide it from Internet Explorer 2 and Netscape 1 any more.

    Once you fix the above then you will have code that can then be altered to add the extra processing that you want.

    7. for a slideshow a setInterval outside the function might be a better alternative to a setTimeout inside the function)

    8. never use bmp images on the web - most browsers don't support them plus even for those browsers that do the images will be thousands of times bigger than they need to be.
    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.

  • #4
    New Coder
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yes, images are names 1a.bmp through 120a.bmp. I'm more familiar with html and php programing so i think i'm trying to do things backwards.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 645 Times in 635 Posts
    So the first step is to convert the images to a web format.

    The web supports three formats - GIF, JPeG and PNG.
    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.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,031
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Felgall makes a good point: ".bmp" images aren't guaranteed to work in all browser.

    On top of that, ".bmp" images are much larger (in kilobytes) than if you converted them to one of those other three formats. You users will get better response time and your server will be less loaded down if you convert them.

    Anyway, what you want isn't too difficult.

    Where do the questions come from? What do they look like? Are they specific to each group of images?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New Coder
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I will convert images from .bmp to .jpg as that is not hard to do. I guess my main question comes from how to pause the execution of the script for say 2 seconds between each picture. After display 5 images, the script should execute a form ask the user a question where they can press y for yes and n for no. This should continue until images are viewed in which the program should then exit the program.
    What I have heard is that one should use a setTimeOut function to delay execution of code for x number of seconds between each one. if i could do this i would just throw the displaying of the pictures and the setTimeOut in a while loop for that increments the value of 1 and terminates into an outer loop where the question is asked. The outer loop will be set to run a number of times so it would in theory restart the inner loop and execute for 5 more times, continuing this process until all images are displayed and answered.
    So my main two questions are how to get the setTimeOut function if thats what I use to delay the images, and second how to make a yes no answer/question. If it needs to be a form that the user clicks the results than that is fine also. I know how to make forms but from what i understand is that php can not be executed within javascript, meaning i would have to have my while loop a php code and then the setTimeOut inside the while loop and then the form outside the loop. Am I correct at any of this or am i confusing protocols between various languages and how might i go about accomplishing this.
    Thanks for the advise.

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 645 Times in 635 Posts
    setTimeout waits for a specified number of milliseconds and then runs a specified function - any code after the setTimeout (if there is any) will run straight away.

    setTimeout(functionname, milliseconddelay)

    You would only put that in a loop if you want to0 run multiple copies of the function as close to simultaneously as possible.
    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, so what might you suggest is the better way of delaying execution of code for say 3 seconds?

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,031
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    You did *NOT* answer my important question: WHAT will those questions be? Where will they come from? Will you have an array of 20 questions (one every 5 questions, for 100 questions)? If so, what happens when all 100 images have been shown? Do we cycle back to the beginning of the images? Do we re-use the same 20 questions?

    What do we DO with the answers the user gives? Send them to some server-side database? Throw them in the trash? Use them to alter the sequence of image???

    This is nearly trivial to write *IF* you give us the COMPLETE specifications.
    Last edited by Old Pedant; 07-21-2013 at 10:26 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    New Coder
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    it will be the same question being asked multiple times.
    step1 blank white screen for 250ms

    step2 present shape 1a

    step3 blank screen 250 ms

    step4 present shape 1b

    step5 blank screen 250 ms

    step6 present shape 1c

    step7 blank 250 ms

    step8 present shape 1d

    step19blank 250 ms

    step10 present shape 1e

    step11 blank 250 ms

    step12 display an image, simultaneously asking "Is this an exact match for one of the shapes you just saw? Press 'z' for yes and '/' for no."

    Does this help?

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,031
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Ahhh...not at ALL what I thought you were going to do!

    And you added in that 250ms delay requirement!

    Okay...

    And *DOES* it cycle back to image 1 after showing #100?

    And what do you do with the answers to the questions?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,031
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    My first stab at this:
    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">
            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 = 5000; // 5 seconds...adjust as you wish
    
    // controls:
    var curImage = 1;
    var nextImage = new Image();
    nextImage.src = "coloredShapes/POSITION1/1a.jpg";
    
    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 nextImage( force )
    {
        // every 5 images, ask a question
        // but if force argument is defined, do NOT do so
        if ( force == null && curImage % 5 == 0 )
        {
            showForm(); // shows question, waits for answer
            return;
        }
        image.src = nextImage.src;  // get image that was prefetched
        image.style.display = "block"; //and show it
    
        ++curImage;
        // DO *ONE* ONLY OF THE NEXT TWO LINES!!
        if ( curImage > 100 ) curImage = 1; // cycle back to 1 after 100 ???
        if ( curImage > 100 ) 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 = "coloredShapes/POSITION1/" + curImage + "a.jpg";
    }
    function pause( )
    {
        image.style.display = "none";
        setTimeout( nextImage, 250 );
    }
    
    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
        qdiv.style.display = "none";
        nextImage( true ); // force nextImage to go on...not show form
    }
    
    // get things started:
    nextImage( true );
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    New Coder
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I would like to have the answers stored to a mysql database.

  • #15
    New Coder
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I can not get this to run, all it says is "the image" minus quotes, it does not display any pictures or anything. Is their something i'm missing?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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