JQuery Multiple Choice

Question

I'm trying to create a single multiple choice question.

In the example below, I would like option 1 and 3 to be the correct answer. When the submit button is clicked, i just wanted to run an if statment to see if the option 1 and 3 checkboxes are selected, and if so, toggle the correct1 div. Else if, option 1 and 3 are not selected, toggle the incorrect1 div.

in the Head tag I would have

<script type="text/javascript">
    function toggleDiv2(divId) {
    $("#"+divId).toggle("slow");
            }
</script>

Then in the body i would have:

<div class="control-group">

            <label class="control-label" for="optionsCheckboxList">Check your answers</label>
            <div class="controls">
              <label class="checkbox">
                <input type="checkbox" id="option1" name="optionsCheckboxList1" value="option1">
                <strong>Option One</strong> this is a correct answer. Select this one.
              </label>
              <label class="checkbox">
                <input type="checkbox" id="option2" name="optionsCheckboxList2" value="option2">
                <strong>Option two</strong>  this is an incorrect answer. Do not select this one.
              </label>
              <label class="checkbox">
                <input type="checkbox" id="option3" name="optionsCheckboxList3" value="option3">
                <strong>Option three</strong>  This is a correct answer. Select this one.
              </label>
              <p class="help-block"><strong>Hint:</strong> Add a hint if you would like. This is optional.</p>
          <br>


        <a href="javascript:toggleDiv2('correct1');" class="btn btn-primary">Submit</a>

          <br><br>

            <div id="correct1" class="alert alert-success" style="display: none">
            Well Done! You correctly answered this question!
            </div><!-- end correct1 -->

            <div id="incorrect1" class="alert alert-error" style="display: none">
            Oh snap! Please try again.
            </div><!-- end incorrect1 -->
            </div><!-- end control-group -->

Not sure if this matters or not, but this is the jquery the page is linking to:

<script src="html/assets/js/jquery-ui-1_8_18custom/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="html/assets/js/jquery-ui-1_8_18custom/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript" ></script>

also construct your html properly (close all the div tags). move your javascript code outside of html..either into the head tag or at the end of the file... — DG3, Mar 14 '12 at 02:51
What have you tried in terms of finding the "checked" status of the "correct" checkboxes? It would be good to have this info in your post so we don't suggest things you've already tried. — TLS, Mar 14 '12 at 03:16

score 0 · Accepted Answer · answered Mar 15 '12 at 01:03

0

This got it working...

<script type="text/javascript">
   function toggleDiv2() {
   if($("#option1").is(':checked') && $("#option3").is(':checked'))
   $("#correct1").toggle("slow");
    else
   $("#incorrect1").toggle("slow");
   }
</script>

answered Mar 15 '12 at 01:03

Livi17

1,620
3
25
43

JQuery Multiple Choice

1 Answers1