jeudi 13 mai 2021

Simple quiz issue

I'm trying to build a basic one question quiz. Based on the checkboxes checked 1 of 3 result divs should show.

  1. If consolidation hasn’t been checked then it should show the low results div
  2. If everything has been checked then show the high results div
  3. If consolidation has been ticked but other items are unticked then show medium results div

I also need to populate the medium results div with the names of the boxes that weren't checked on submit but I don't know how to go about it. Right now I've got it mostly working on submit but I can only get medium and low results to show, not the high results div. I think it's an issue with the priorities of the statements.

https://jsfiddle.net/lucym/azLf2s0t/3/

Javascript

var a = document.querySelector('#consolidation');
var btn = document.querySelector('#btn')
btn.onclick = () => {
  if (a.checked == false) {
    $('#low').show();
  } else if ($('#list :checkbox:not(checked)').length == 0) {
    $('#high').show();

  } else if (a.checked == true) {
    $('#medium').show();

  } else {
    alert('select an option');
  }
};

HTML

  <div id="list" style="max-width: 650px; margin: 40px auto;">
    <!-- Consolidatation-->
    <fieldset>
      <input id="consolidation" type="checkbox" name="">
      <label>Searched and combined lost funds</label>
    </fieldset>
    <!-- Advice -->
    <fieldset>
      <input id="advice" type="checkbox" name="">
      <label>Talked with an advisor</label>
    </fieldset>
    <!-- identity -->
    <fieldset>
      <input id="identity" type="checkbox" name="">
      <label>Completed an ID check</label>
    </fieldset>
    <!-- balance -->
    <fieldset>
      <input id="balance" type="checkbox" name="">
      <label>Checked your balance</label>
    </fieldset>
    <!-- app -->
    <fieldset>
      <input id="app" type="checkbox" name="">
      <label>Downloaded the Sunsuper app</label>
    </fieldset>
    <!-- calculator -->
    <fieldset>
      <input id="calculator" type="checkbox" name="">
      <label>Used our retirement calculator</label>
    </fieldset>

    <!-- SUBMIT BUTTON -->
    <input type="button" id="btn" value="Submit">

    <!-- Result options -->
    <div id="low" class="results">low results</div>
    <div id="medium" class="results">medium results</div>
    <div id="high" class="results">high results</div>
  </div>

CSS

.results {
    display: none;
}



Aucun commentaire:

Enregistrer un commentaire