[Solved] Check Answer to Radio Button and Check box questions on same page via button action

0

Hi all,

I am wondering if anyone knows how to set this up. Essentially what I would like is for a respondent to select their answer choice(s) for radio button/check box type questions and then click a button that says “Check my answer” When the button is pressed it informs him or her if their selection is correct for that individual question.

I currently have something set up for checking text box responses to see if they are correct using jquery but I have no idea how to approach this one. I am also aware of the quiz option SG provides, but because I will be needing to tally up correct responses using different types of questions (my text box questions) I cannot use it.

 

Here is an example of the set up I have with textbox answers that I would like to accomplish with radio/checkbox questions (the answer to no 2 is NM_000059.3)

Thank you!

PRO account

operez selected answer

    Best answer

    1

    I have figured it out. For those of you who are interested., the coding for all three types of questions is available below. 

    1. Create your button: 
    • In your survey, go to the “STYLE” tab and paste the following there and save.  

     

    .submita{

    background-color: #3a8ea8; /* Aqua */

    border: 2px solid #555555;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    cursor: pointer;

    border-radius: 12px;

    }

    • This can be changed to fit whatever design you want your button to be but the “name” of this button is: .submita

     

    1. Return to the build tab and Create your Text/Radio/Checkbox Question
      1. In the layout tab specify a “CSS Class Name” by typing in: n 
      2. save changes and continue 

          3. Create your user feedback field

    • Create a new question that is a textbox question
    • Where it asks: “what question do you want to ask” copy and paste the following: 

    <div class=”ci-total2″> </div>

    <div class=”submita btn btn-primary”><span style=”font-size:18px;”>Check Answer</span></div>

    <p> </p>

    • In the Layout tab “skip numbering for this question” and specify a “CSS Class Name” by typing in: ci2
    • Save your changes

    4. Create your javascript action and copy the following JQuery code:

    • For a Textbox question:

             $(document).ready(function() {

      $(‘.n :text’).attr(‘placeholder’, ”);

      $(‘:text’).addClass(‘form-control’);

      $(‘.ci2 :text’).hide();

        $(‘.submita’).click(function() {

            var wdysf = $(‘.n :text’).val();

            var ci2;

            if (wdysf == ‘this is what you want your correct answer to be’) {

                ci2 = “Correct!”;

            } else {

                ci2 = “incorrect. Please try again”;

            }

            $(‘.ci2 :text’).val(ci2);

            $(‘.ci-total2’).text(‘Your answer is ‘ + ci2);

        });

    });

     

    • For multiple correct entries modify this line of the code to look like:

                if ((wdysf == ‘first answer’) || (wdysf == ‘second answer ‘)) {

     

    • For Radio Button Question:

    $(document).ready(function() {

      $(‘.ci2 :text’).hide(); 

      $(‘.submita’).click(function() {

          var radio = document.getElementsByName(‘you need to put the surveygizmo element id here it should look like this: sgE-325920-13-122’); 

            var ci2;

            if ($(“input:checked” ).val() == ‘you need to put the option id here it should look something like this: 10194’) {

                ci2 = “Correct!”;

            } else {

                ci2 = “incorrect. Please try again”;

            }

            $(‘.ci2 :text’).val(ci2);

            $(‘.ci-total2’).text(‘Your answer is ‘ + ci2);

        });

    });

     

    • For Checkbox Questions:

    $(function() {

      var rules = [’ID of right answer goes here ,ID of other right answer goes here, should look like this: 10362,10395,10394’];

      $(‘.ci2 :text’).hide();

      $(‘.submita’).click(function(e) {

        var ci2;

        if ($(‘input[type=”checkbox”]:checked’).map(function(i, v) {

            return v.value;

          }).get().join(‘,’) == rules[0]) {

          ci2 = “Correct!”;

        } else {

          ci2 = “incorrect. Please try again”;

     

        }

        $(‘.ci2 :text’).val(ci2);

        $(‘.ci-total2’).text(‘Your answer is ‘ + ci2);

     

      });

    });

     

     

    Place javascript elements at the top or bottom of your page

    And that’s it!

     

     

    Best,

    Oscar

    operez selected as best answer
      ×

      Login

      Question stats

      • Active
      • Views4298 times
      • Answers1 answer
      • Followers1 follower