Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Jul 2015
    Posts
    1
    Member #
    51227

    Custom updating questionnaire using buttons

    What I'm trying to do:

    Create a "Question + Two Answer" questionnaire in the form of a header and two buttons(I'd show pictures but insufficient reputation). Whatever answer is clicked is then recorded to a server side database which I'm able to view(cumulative). The database is updated each time another answer is clicked. This processes cycles through X number of questions and answer sets until no more question are left, and the visitors are left with a "Thank you for answering."

    I want this:

    To fade-out, fade-in to this:

    and when all questions are complete, fade-out, fade-in to this:

    while the answers and their respective questions are recorded somewhere for only me to see.

    Further Example:

    I have four questions, each question as a unique set of answers. Q1 has A1a & A1b, Q2 has A2a & A2b, Q3 has A3a & A3b, and Q4 has A4a & A4b.

    How do I set them up so that the questions and corresponding answers replace each other, starting from Q1 to Q4? Id like the user to click an answer to trigger the next question & answers replacement.

    What I've done, found, and where I'm at now:

    I have little experience with databases, so please forgive my lack of knowledge. I've comfortable with CSS, HTML, and started with jQuery. To solve the problem, I've been trying to get a simple bootstrap buttons text to be replaced with new text, every time it's clicked. Can't do it. Once, sure, but multiple times, no. I've tried replacing and hiding elements, but that hasn't worked. I've tried modifying a count click code button. The only code I have now is the HTML and CSS, and it's in a CMS child theme that I can modify. I've looked at hundreds of answers and websites to get a response in some direction, and all I can see is that I have to learn PHP, mySQL, jQuery/Javascript in their entirety to make this--what I thought--simple change. I don't know how to accomplish it otherwise.

    I'm completely lost.

    Thanks for all your help. This issues been plaguing me for too long.
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    Hello hurricanex90,

    To save answers you need server side (php and mysql). I can't see how you can do it without server side.
    Maybe easiest way is to have a php page with one set of question / answers and generate next set by simple paging.
    Database with at least two tables, one for request (contains id, question text, first answers text and second answer text) and second to save response (id of answered question and flag for answer column - to save 1 if answer one is clicked or 2 if answer 2 is clicked).


    Also, you can display only one page and submit answers by ajax, without refreshing page. Response should contain text for next question set.

    This can be done very easy with jQuery.

    If only problem is changing set of questions, this can be done like:

    html:
    Code:
            <div id='question'></div>
            <button id='answer_1' class='btn answer'></button>
            <button id='answer_2' class='btn answer'></button>
            <div id="response"></div>
    jQuery javascript:
    Code:
            <script>
                $(document).ready(function(){
                     var questions = [
                      {
                        'id' : 1,
                        'question' : 'Text for question 1',
                        'answer_1' : 'Text for answer...1,1 ',
                        'answer_2' : 'Text for answer...1,2 ',
                      },
                      {
                        'id' : 2,
                        'question' : 'Text for question 2',
                        'answer_1' : 'Text for answer...2,1 ',
                        'answer_2' : 'Text for answer...2,2 ',
                      },
                      {
                        'id' : 3,
                        'question' : 'Text for question 3',
                        'answer_1' : 'Text for answer...3,1 ',
                        'answer_2' : 'Text for answer...3.2 ',
                      }
                    ];
    
                    var k = setQuestion(0, questions);
                    $('.answer').on('click', function(){
                        var answer = $(this).attr('id');
                        sendResponse(k, answer); 
                        k = setQuestion ( k, questions );   
                        
                    });
                  });
    
                    function setQuestion ( i, questions ) {
                        var l = questions.length;
                        if(i >= l){
                            $('#question').html("Thanks...");
                            $('#answer_1').hide();
                            $('#answer_2').hide();
                            return 0;
                        }
                        $('#question').html(questions[i].question);
                        $('#answer_1').html(questions[i].answer_1);
                        $('#answer_2').html(questions[i].answer_2);
                        return i + 1;
                    }
                    
                    function sendResponse(k, answer){
                        $('#response').append("<hr>Question = " + k + " Answer = " + answer);
                        // here use ajax to send data to server
                    }            
            </script>


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:51 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com