nature hunt matching

by Nick Hulea

HTML

<link rel="stylesheet" href="http://stage.nhm.org/nature/sites/all/themes/nature/css/global.css">
<!--matching game-->
<section id="sectionTwo" style="display:block;">
    <div class="scavenger">
        <div class="columnControl">
            <!--Question-->
            <div id="question" class="row">
                 <h2>Nature Hunt</h2>

                <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>
                <!-- End .half -->
                <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>
                <!-- End .half -->
                <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>
                <!-- End .half -->
                <div class="wholeimg a 4">
                    <img src="http://stage.nhm.org/nature/sites/all/themes/nature/img/nature_hunt/cactus_1.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"...

CSS

/* scavenger css styles */
      .scavenger {
          margin-bottom:10%;
      }
      .scavenger .blockbutton {
          margin-top:8%;
      }
      .scavenger .half {
          padding: 3px;
          float: right;
          margin: 2px;
      }
      .scavenger .whole, .a {
          padding:5px;
          margin: 5px;
      }
      .scavenger .wholeimg {
          float: left;
          width: 42%;
          margin:2.5%;
      }
      .scavenger .quad {
          float: left;
          width:21%;
          margin:1%;
          padding:1%;
      }
      .scavenger .b {
          float: left;
          width:21%;
          margin:1%;
          padding:1%;
      }
      .scavenger .mobilequad {
          width: 21%;
          margin: 1%;
          padding: 1%;
          margin-bottom: 0;
      }
      .scavenger .hundredPercentimg {
          margin: 2.5%;
      }
      .scavenger .wholeimg img {
          width: 92%;
          padding:4%;
      }
      .scavenger .hundredPercentimg img {
          width: 100%;
          padding: 0;
      }
      .scavenger .half:hover, .whole:hover,
      /*.hundredPercentimg:hover,*/
      .quad:hover {
          background-color:#8bb611;
          color:#ffffff;
          cursor:pointer;
      }
      .scavenger .sclick {
          background-color:#8bb611;
          color:#ffffff;
      }
      .scavenger label {
          font-size: 20px;
      }
      .scavenger .half p, .whole p, .a p {
          font-size: 20px;
          margin-bottom: 0;
          text-align: center;
      }
      .scavenger .mediaItem, .scavenger .mediaItem iframe {
          display: block;
          left: 0;
          margin: 0;
          position: relative;
          top: 0;
      }
      #question > div.quadList {
          display: block;
      }
      #sectionTwo #answer_box {
          width:100%;
      }
      .showsec {
          display:block;
      }
      .visible {
          visibility: visible;
      }
      .done {
         ...

JavaScript

(function (window, document, undefined) {
    var iframes = document.getElementsByTagName('iframe');
    for (var i = 0; i < iframes.length; i++) {
        var iframe = iframes[i],
            players = /www.youtube.com|player.vimeo.com/;
        if (iframe.src.search(players) > 0) {
            var videoRatio = (iframe.height / iframe.width) * 100;
            iframe.style.position = 'absolute';
            iframe.style.top = '0';
            iframe.style.left = '0';
            iframe.width = '100%';
            iframe.height = '100%';
            var wrap = document.createElement('div');
            wrap.className = 'fluid-vids';
            wrap.style.width = '100%';
            wrap.style.position = 'relative';
            wrap.style.paddingTop = videoRatio + '%';
            var iframeParent = iframe.parentNode;
            iframeParent.insertBefore(wrap, iframe);
            wrap.appendChild(iframe);
        }
    }
})(window, document);

$(function () {
    //FastClick.attach(document.body);

    /* vars */
    $sec0 = $('#sectionOne');
    $sec1 = $('#sectionOne');
    $sec2 = $('#sectionTwo');
    $sec3 = $('#sectionThree');
    $sec4 = $('#sectionFour');
    $sec5 = $('#sectionFive');
    $sec6 = $('#sectionSix');
    $sec7 = $('#sectionSeven');
    $binput1 = $("input[name='answer_box_butterfly_1']");
    $binput2 = $("input[name='answer_box_butterfly_2']");
    $binput3 = $("input[name='answer_box_butterfly_3']");
    $pinput1 = $("input[name='answer_box_pollen_1']");
    $pinput2 = $("input[name='answer_box_pollen_2']");
    $flower1 = $('#q1  .whole');
    $flower2 = $('#q2  .whole');
    $flower3 = $('#q3  .whole');
    $flower4 = $('#q4  .whole');
    $nature = $('#sectionFive .quad');
    $a1 = 'a';
    $a2 = 'b';
    $a3 = 'c';
    $a4 = 'a';
    $a5 = 'd';
    $input = $('input').val();
    $next = $('#n');
    $prev = $('#p');
    $q1 = $('#question');
    $answer = $('#question > div.whole.a > p');
    $flowers = $('.q > div.whole.a');
   ...