Name Flower

by Nick Hulea

HTML

<link rel="stylesheet" href="http://stage.nhm.org/nature/sites/all/themes/nature/css/global.css">
<script src="http://stage.nhm.org/nature/sites/all/themes/nature/js/fastclick.js"></script>
<!--words-->
<section id="sectionOne" style="display:block;">
    <div class="scavenger">
        <div class="columnControl">
            <!--Question-->
            <div id="question">
                 <h2>Scavenger Hunt</h2>

                <p>Here are just some of the many plants we’re growing to attract pollinators in our garden. These plants play an important role for both insects and people! Fill in the common names of the plants below.</p>
                <div id="q1" class="q">
                    <div class="hundredPercentimg a 1">
                        <img src="http://stage.nhm.org/nature/sites/all/themes/nature/img/nature_hunt/sunflower_1.jpg" alt="" />
                        <input type="checkbox" style="display:none;" id="a" name="a" value="a" />
                    </div>
                    <div class="whole a 1">
                        <p>Penstemon heterophyllus</p>
                        <input type="checkbox" style="display:none;" id="a" name="a" value="a" />
                    </div>
                    <!-- End .half -->
                    <div class="whole a 2">
                        <p>Dudleya hassei</p>
                        <input type="checkbox" style="display:none;" id="b" name="b" value="b" />
                    </div>
                    <!-- End .half -->
                    <div class="whole a 3">
                        <p>Citrus sinensis</p>
                        <input type="checkbox" style="display:none;" id="c" name="c" value="c" />
                    </div>
                    <!-- End .half -->
                    <div class="whole a 4">
                        <p>Asclepias fascicularis</p>
                        <input type="checkbox" style="display:none;" id="d" name="d" value="d" />
                    </div>
          ...

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: 45%;
          margin:2.5%;
      }
      .scavenger .quad {
          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 {
          visibility: visible;
      }
      .cover {
          height:100%;
          width:100%;
          position:fixed;
         ...

JavaScript

(function (window, document, undefined) {

    /*
     * Grab all iframes on the page or return
     */
    var iframes = document.getElementsByTagName('iframe');

    /*
     * Loop through the iframes array
     */
    for (var i = 0; i < iframes.length; i++) {

        var iframe = iframes[i],

            /*
             * RegExp, extend this if you need more players
             */
            players = /www.youtube.com|player.vimeo.com/;

        /*
         * If the RegExp pattern exists within the current iframe
         */
        if (iframe.src.search(players) > 0) {

            /*
             * Calculate the video ratio based on the iframe's w/h dimensions
             */
            var videoRatio = (iframe.height / iframe.width) * 100;

            /*
             * Replace the iframe's dimensions and position
             * the iframe absolute, this is the trick to emulate
             * the video ratio
             */
            iframe.style.position = 'absolute';
            iframe.style.top = '0';
            iframe.style.left = '0';
            iframe.width = '100%';
            iframe.height = '100%';

            /*
             * Wrap the iframe in a new <div> which uses a
             * dynamically fetched padding-top property based
             * on the video's w/h dimensions
             */
            var wrap = document.createElement('div');
            wrap.className = 'fluid-vids';
            wrap.style.width = '100%';
            wrap.style.position = 'relative';
            wrap.style.paddingTop = videoRatio + '%';

            /*
             * Add the iframe inside our newly created <div>
             */
            var iframeParent = iframe.parentNode;
            iframeParent.insertBefore(wrap, iframe);
            wrap.appendChild(iframe);

        }

    }

})(window, document);

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

    /* vars */
    $sec0 = $('#sectionOne');
    $sec1 = $('#sectionOne');
    $sec2 =...