fixing the matching game

by Nick Hulea

HTML

<section id="sectionThree" class="mobileList largeList inner" style="">
    <div class="scavenger">
        <div class="columnControl">
            <!--Question-->
            <div id="question" class="row">
                <p>The shape of a pollinator can be a clue to the shape of the plant it prefers. Match the pollinator to its preferred plant.</p>
                <div class="wholeimg a 1">
                    <img src="http://stage.nhm.org/nature/sites/all/themes/nature/img/nature_hunt/hummingbird_1.jpg" alt="3" />
                    <input type="checkbox" style="display:none;" id="a" name="a" value="a" />
                </div>
                <div class="wholeimg a 2">
                    <img src="http://stage.nhm.org/nature/sites/all/themes/nature/img/nature_hunt/bat_1.jpg" alt="2" />
                    <input type="checkbox" style="display:none;" id="b" name="b" value="b" />
                </div>
                <div class="wholeimg a 3">
                    <img src="http://stage.nhm.org/nature/sites/all/themes/nature/img/nature_hunt/carpenter-bee.jpg" alt="1" />
                    <input type="checkbox" style="display:none;" id="c" name="c" value="c" />
                </div>
                <div class="wholeimg a 4">
                    <img src="http://stage.nhm.org/nature/sites/all/themes/nature/img/nature_hunt/cactus_new.jpg" alt="2" />
                    <input type="checkbox" style="display:none;" id="d" name="d" value="a" />
                </div>
                <div class="wholeimg a 5">
                    <img src="http://stage.nhm.org/nature/sites/all/themes/nature/img/nature_hunt/flat_daisy_like_1.jpg" alt="1" />
                    <input type="checkbox" style="display:none;" id="d" name="d" value="b" />
                </div>
                <div class="wholeimg a 6">
                    <img src="http://stage.nhm.org/nature/sites/all/themes/nature/img/nature_hunt/desert_honeysuckle_1.jpg" alt="3" />
                    <input...

CSS

.fiftypercent input {
             width: 50%;
             float: none;
             /* margin:1%; */
         }
         .scavenger .hundredPercentimg {
             margin: 2.5%;
             float:left;
             width: 27%;
         }
         .scavenger .hundredPercentimg img {
             width: 100%;
             padding: 0;
         }
         #answer_box {
             width:100%;
         }
         .fiftypercent {
             width: 48%;
             float: left;
             margin:1%;
         }
         .scavenger .wholeimg {
             float: left;
             width: 27%;
             margin:2.5%;
         }
         .scavenger .wholeimg img {
             width: 92%;
             padding:4%;
         }
         .q .hundredPercentimg {
             float:none;
             width: 100%;
             margin:0 auto;
         }
         .q {
             float:left;
             width: 48%;
             margin:0 auto;
             margin: 1%;
         }
         .error {
             background-color:#f99898;
         }
         .inputerror {
             border-color:#f99898;
         }
         .inputcorrect {
             border-color:#8bb611;
         }
         .scavenger .blockbutton {
             margin-top:0;
         }
         .scavenger .centernav {
             width: 190px;
             padding: 0;
             margin: 0 auto;
             float: none;
         }
         #video {
             display: block;
             width: 100%;
             margin: auto;
             top: 0;
             left: 0;
             position: fixed;
             background: rgba(255, 255, 255, 0.75);
             -pie-background: rgba(255, 255, 255, 0.75);
             behavior: url(PIE-1.0.0/PIE.htc);
             height: 100%;
             z-index: 1;
         }
         /*
         #inner {
             display: block;
             width: 50%;
             margin: auto;
             position: absolute;
             background: rgba(255, 255,...

JavaScript

var num = 0;
 $(".row div").click(function (e) {
     correct_cond = $(this).children("img").hasClass("correct");
     if (!correct_cond) {
         num++;
         var id1 = $("img.selected").attr("alt");
         var id2 = $(this).children("img").attr("alt");
         $(this).children("img").addClass("selected");
         $(this).children("img").addClass("click" + num);
         $(".selected").css("background-color", "#00c3ea");
         cond = $(this).children("img").hasClass("click0");
         var id4 = $('#same').attr("class");
         var id3 = $(this).attr("class");
         $(this).attr("id", "same");
         setTimeout(function () {
             if (num >= 2) {
                 var same = (id4 == id3);
                 num = 0;
                 if (id1 == id2 && (!cond && !correct_cond) && !same) {
                     $(".row").find('div').removeAttr("id");
                     $(".selected").addClass("correct");
                     $(".selected").removeClass("selected");
                     $(".click0").removeClass("click0");
                     $(".click1").removeClass("click1");
                     setTimeout(function () {
                         $(".correct").css("background-color", "#8bb611");
                         if ($(e.target).is(".correct")) $(".row div").children(".correct").unbind();
                         var sectionThreeCorrect = $(".wholeimg img.correct").length == $(".wholeimg img").length;
                         if (sectionThreeCorrect) setTimeout(function () {
                             _gaq.push(["_trackEvent", "Click", "Match Pollinator Correct", "Nature Hunt NHM 2014"]);
                             $("#sectionThree").hide();
                             //$("#videocoverTwo").show();
                             //$("#sectionFour").fadeIn(500);
                             $("#sectionSix").fadeIn(500);
                             //$("#sectionFive img").fadeIn(2E3);
                             if...