1

Basically I've had a request that (for a quiz) there is a group of checkboxes, the person selects as many as they want. Then on clicking the button feedback is displayed depending on what they selected.

Currently this is just one message if all checkboxes are selected and another if 0 to 4 are selected.

I had some JS that returned feedback based on the data- attribute which I didn't know if I could reuse/rework. But wondering if it's best to just have 2 hidden messages and just display/slide open to the relevant one on click - that's the bit I need help with.

$(".quiz__item .btn").click(function () {
    
    var current_feedback = $(this).attr("data-feedback");
    var current_value = $(this).attr("data-value");
    var contentHeight = $(".quiz__feedback").outerHeight(true);
    
    $(this).parents(".quiz__item").find(".quiz__feedback p").html(current_feedback).removeClass("true false").addClass(current_value).slideDown(200);
});
.hide {
  display: none;
}

.check-group,
.btn {
  margin-bottom: 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quiz">

  <div class="quiz__item">
    <h3>Checkboxes</h3>
    <div class="check-group">
      <label class="checkbox"><input type="checkbox">Option 1</label><br />
      <label class="checkbox"><input type="checkbox">Option 2</label><br />
      <label class="checkbox"><input type="checkbox">Option 3</label><br />
      <label class="checkbox"><input type="checkbox">Option 4</label><br />
      <label class="checkbox"><input type="checkbox">Option 5</label>
    </div>

    <a href="#" class="btn">Submit</a>

    <div class="quiz__feedback">
      <p class="false hide">Statement one lorem ipsum dolor sit amend</p>
      <p class="true hide">Statement two lorem ipsum dolor sit amend</p>
    </div>

  </div>
</div>
BehRouz
  • 1,209
  • 1
  • 8
  • 17
user1406440
  • 1,329
  • 2
  • 24
  • 59

1 Answers1

1

First you need to find the number of selected checkboxes. Then display a message based on that number.

You can select elements by their data attribute with this selector: [data-parameter='...']

Hope this helps.

$(".quiz__item .btn").click(function () {
    let checkboxes = $(this).parents(".quiz__item").find('input:checked').length
    $(this).parents(".quiz__item").find(".quiz__feedback p").hide()
    if(checkboxes == 5){
      $(this).parents(".quiz__item").find(".quiz__feedback p[data-feedback='all']").slideDown(200)
    }else{
      $(this).parents(".quiz__item").find(".quiz__feedback p[data-feedback='some']").slideDown(200)
    }
});
.hide {
  display: none;
}

.check-group,
.btn {
  margin-bottom: 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quiz">

  <div class="quiz__item">
    <h3>Checkboxes</h3>
    <div class="check-group">
      <label class="checkbox"><input type="checkbox">Option 1</label><br />
      <label class="checkbox"><input type="checkbox">Option 2</label><br />
      <label class="checkbox"><input type="checkbox">Option 3</label><br />
      <label class="checkbox"><input type="checkbox">Option 4</label><br />
      <label class="checkbox"><input type="checkbox">Option 5</label>
    </div>

    <a href="#" class="btn">Submit</a>

    <div class="quiz__feedback">
      <p class="hide" data-feedback="all">ALL IS SELECTED</p>
      <p class="hide" data-feedback="some">NOT ALL ITEMS</p>
    </div>

  </div>
</div>
BehRouz
  • 1,209
  • 1
  • 8
  • 17
  • That looks great, I'm out and about at the moment but looks like it'll do the job - thanks a lot! In theory, could I tie that into this answer on something I posted elsewhere about smooth slide up/down - using `transitionend`? As I imagine with 2 separate emails it could be tricky (not vital, just wondering)? https://stackoverflow.com/a/73544428/1406440 – user1406440 Aug 31 '22 at 18:23
  • Yes, Sure. Give it a try. I suggest defining a function for the transition. Write codes in a modular manner. – BehRouz Aug 31 '22 at 18:29
  • I'm having some trouble getting that to work actually. I think it's because we're not adding a class like the other example. This is what I have: https://codepen.io/moy/pen/vYjYeMK – user1406440 Sep 02 '22 at 15:40