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 2 of 2 FirstFirst 12
Results 16 to 22 of 22
  1. #16
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Quote Originally Posted by captainer View Post
    I would like to have the answers stored to a mysql database.
    Well, for that you are going to need server-side coding. PHP or ASP or JSP or whatever. I can't do that for you without knowing what server-side code you will use and what your database connection looks like, etc.

    You will also have to decide if you want to send each answer to the database, as it is made, or if you want to collect all the answers and then send them all at once.

    If the former, you will need to use AJAX. If the latter, it's simpler, but will still take additional coding.
    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.

  2. #17
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Can you show this live, online? Give us a URL?

    I wrote that off the top of my head and of course could easily have made a typo, at the minimum.
    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. #18
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    OH!! I see the bug! SHEESH! Doofus me.

    I had *BOTH* a function and an object named "nextImage"!!!

    I just needed to rename the function.

    Also, I changed the top number from 100 to 120.

    But you never said whether you want to start over at 1 after reaching 120 or you want to just stop or go to another page or or or...
    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 showNextImage( 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 > 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 = "coloredShapes/POSITION1/" + curImage + "a.jpg";
    }
    function pause( )
    {
        image.style.display = "none";
        setTimeout( showNextImage, 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";
        showNextImage( true ); // force showNextImage to go on...not show form
    }
    
    // get things started:
    showNextImage( 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.

  4. Users who have thanked Old Pedant for this post:

    captainer (07-22-2013)

  5. #19
    New Coder
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ahhh, yes it works now, I guess sending them all at once to the database would work as that's easier, It can also be as simple as to just have the results emailed at the end of the program.
    I was just thinking database because then they are stored and can be called at anytime.
    I don't know any ajax code so If you showed me the method of doing this and i just put in my values for the server. I would guess that could work, It would be using a hosted server.

  6. #20
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Emailing isn't better than storing to DB. You have to count on the person who uses the page to allow the email to be sent or you have to do it with server-side code. And if you are going to use server-side code, then you might as well do it straight to DB.

    Okay, how about this: We will send the answers to the server as "group1", "group2", etc. Up to "group24".

    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" action="saveAnswers.php" method="post">
            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 showNextImage( force )
    {
        // every 5 images, ask a question
        // but if force argument is defined, do NOT do so
        if ( force == null && curImage % 5 == 0 )
        {
            qdiv.style.display = "block"; // ... shows question, waits for answer
            return;
        }
        image.src = nextImage.src;  // get image that was prefetched
        image.style.display = "block"; //and show it
    
        ++curImage;
        if ( curImage > 120 ) 
        {
            form.submit();
            return;
        }
    
        // 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( showNextImage, 250 );
    }
    
    function choice( )
    {
        var answer = document.createElement("input");
        answer.type = "hidden";
        answer.name = "group" + ( curImage / 5 );
        answer.value = this.value; // "yes" or "no", as clicked on
        form.appendChild(answer);
    
        // reset radio button for next time:
        this.checked = false;
    
        // hide form, display next image
        qdiv.style.display = "none";
        showNextImage( true ); // force showNextImage to go on...not show form
    }
    
    // get things started:
    showNextImage( true );
    </script>
    </body>
    </html>
    Not too many changes in the code.

    I will leave you to write the PHP code for "saveAnswers.php".

    I would assume that, among other things, you also want to collect the name or id of the person who gave the answers. How you do that is up to you.
    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. #21
    New Coder
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yes, I can write the code in saveAnswers to load var yesno answers.
    Thanks for the advice.

  8. #22
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Okay, the PHP code should be pretty simple:
    Code:
    <?php
    
    for ( $g = 1; $g <=24; ++$g )
    {
        $groupYesNo = $_POST["group" . $g];
        ... say that answer ... or put it in an array to save ...
    }
    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.


 
Page 2 of 2 FirstFirst 12

Posting Permissions

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