Write code in better way? Show/hide divs using permutation?

Question

Basically I want to show a particular div depending on which divs are already visible. To make it easier to understand: divs 1,2 represent 'ticks', divs 4,5 represent 'crosses' and div 3 represents 'Correct Answer'. So, if divs 1 and 2 are visible, I want to hide all other divs including 1,2 but show div 3. Similarly, if divs 2,1 are visible, all other divs should be hidden including 1,2 but div 3 should be visible.
So, I realised I was essentially checking the Permutations of divs [1,2] before showing div 3. This is the following behaviour, which works:

function checkAnswer(){
    if($("#div1").is(":visible")) {
        if($("#div2").is(":visible")){
            $("#div1, #div2, #div4, #div5").hide();
            $("#div3").show();
        }
    }
    if($("#div2").is(":visible")){
        if($("#div1").is(":visible")){
            $("#div1, #div2, #div4, #div5").hide();
            $("#div3").show();
        }
    }
    if($("#div3").is(":visible")){
            $("#div1, #div2, #div4, #div5").hide();
    }
}

But if I have a scenario where I have to check for- say 4 divs, it becomes a huge task to keep writing it this way. For example:

    function checkAnswer2(){
        if($("#div6").is(":visible")) {
            if($("#div7").is(":visible")){
                if($("#div9").is(":visible")){
                    if($("#div10").is(":visible")){
                        $("#div6, #div7, #div9, #div10, #div11").hide();
                        $("#div8").show();
                    }
                }
            }

        }
        if($("#div6").is(":visible")) {
            if($("#div7").is(":visible")){
                if($("#div10").is(":visible")){
                    if($("#div9").is(":visible")){
                        $("#div6, #div7, #div9, #div10, #div11").hide();
                        $("#div8").show();
                    }
                }
            }
        }

//going uptil....
if($("#div8").is(":visible")){
            $("#div6, #div7, #div9, #div10, #div11").hide();
    }

}

Obviously I haven't mentioned all 24 permutations here of divs[6,7,9,10]
Permutations in javascript can be calculated as explained here: Permutations in JavaScript?
Can it be incorporated in this scenario too using javascript/jquery?

Thanks for all your answers in advance. Any help would be much appreciated.

Is there a specific reason you check the divs one after another and not with && ? --> e.g.: if($("#div8").is(":visible") && $("#div9").is(":visible")) { ... }; — whatTheFox, Mar 07 '16 at 09:05
Do you need the permutations at all? I don't see how the order in which you test the visibility of the divs should affect the result. — M Oehm, Mar 07 '16 at 09:05
Why do you need to check all permutations of this checking 1 then 2 is precisely the same as checking 2 then 1, so you just need 1 `if` statement for both of your examples — Rhumborl, Mar 07 '16 at 09:06

score 1 · Accepted Answer · answered Mar 07 '16 at 09:19

As mentioned in the comments, it does not matter which order you check the visibility of the elements - they will not randomly show and hide themselves while checkAnswer is running, so just check them once.

I don't know the exact logic you want to achieve, but you can simplify this a little, and make it reusable, by passing an array of the elements to check, the elements to show/hide and the correct answer element.

Something like this should get you started

function checkAnswer(ticks, crosses, correct) {

  // check each id with a tick, to see if they are ALL visible
  var isCorrect = ticks.every(function(id) {
    return $(id).is(':visible')
  });

  // if they were all visible, then hide the ticks and crosses and show the correct box
  if(isCorrect) {
    $(ticks).add(crosses).hide();
    $(correct).show();
  }
}

$(function() {

  $('#q1').on('click', function() {
    checkAnswer(['#div1', '#div2'], ['#div4', '#div5'], '#div3');
  });

  $('#q2').on('click', function() {
    checkAnswer(['#div6', '#div7'], ['#div9', '#div10'], '#div8');
  });

});

.question {
  border:1px solid #000;
  width:50%;
  padding:5px;
  margin:5px;
}

.question > div {
  display:none;
}

.question > div.visible {
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="question">
  <div id="div1" class="visible">Y</div>
  <div id="div2" class="visible">Y</div>
  <div id="div3">CORRECT!</div>
  <div id="div4">X</div>
  <div id="div5">X</div>
  <button id="q1">Check Answer</button>
</div>

<div class="question">
  <div id="div6" class="visible">Y</div>
  <div id="div7">Y</div>
  <div id="div8">CORRECT!</div>
  <div id="div9">X</div>
  <div id="div10" class="visible">X</div>
  <button id="q2">Check Answer</button>
</div>

That was very helpful! Modified it a bit to achieve the functionality I wanted. Thank you. — nicki, Mar 07 '16 at 18:35

score 0 · Answer 2 · answered Mar 07 '16 at 09:16

Just add the class "correct" to the correct answers and count the number of "correct" div that also visible. If it is equal to the number of "correct" div (visible + not visible) then hide and show the wanted divs.

if ($(".correct:visible").length == $(".correct").length) {
  //hide and show
}

Write code in better way? Show/hide divs using permutation?

2 Answers2