scavenger hunt js

by Nick Hulea

HTML

<section>
    <div class="scavenger">
        <div class="columnControl">
            <!--Question-->
            <div id="question">
                 <h2></h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend in mi id sollicitudin. Sed molestie sodales ligula vulputate suscipit ?</p>
                <div class="half a 1">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id mi eget mi scelerisque tincidunt sollicitudin eget magna. Nunc id.</p>
                    <input type="text" style="display:none;" id="a" name="a" value="a" />
                </div>
                <!-- End .half -->
                <div class="half a 2">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id mi eget mi scelerisque tincidunt sollicitudin eget magna. Nunc id.</p>
                    <input type="text" style="display:none;" id="b" name="b" value="b" />
                </div>
                <!-- End .half -->
                <div class="half a 3">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id mi eget mi scelerisque tincidunt sollicitudin eget magna. Nunc id.</p>
                    <input type="text" style="display:none;" id="c" name="c" value="c" />
                </div>
                <!-- End .half -->
                <div class="half a 4">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id mi eget mi scelerisque tincidunt sollicitudin eget magna. Nunc id.</p>
                    <input type="text" style="display:none;" id="d" name="d" value="d" />
                </div>
                <!-- End...

CSS

/* scavenger css styles */
      .scavenger {
          margin-bottom:10%;
      }
      .scavenger .half {
          margin: 0 1% 1% 0;
          float: right;
      }
      .scavenger .half:hover {
          background-color:#8bb611;
          color:#ffffff;
          cursor:pointer;
      }
      .scavenger .sclick {
          background-color:#8bb611;
          color:#ffffff;
      }
      .scavenger label {
          font-size: 20px;
      }
      .scavenger .half p {
          font-size: 13px;
          margin-bottom: 0;
          float: right;
          width: 97%;
          padding: 1%;
      }
      .scavenger .mediaItem, .scavenger .mediaItem iframe {
          display: block;
          left: 0;
          margin: 0;
          position: relative;
          top: 0;
      }

JavaScript

$(function () {
    
    /* vars */
    $a1 = 'a';
    $a2 = 'b';
    $a3 = 'c';
    $a4 = 'a';
    $a5 = 'd';
    $input = $('input').val();
    $next = $('.next');
    $prev = $('.prev');
    $q1 = $('#question input');
    $answer = $('.a');
    

    /* js */
    $answerClass = $('#question div').hasClass("sclick");

    $answer.on("click", function () {
        $answer.removeClass("sclick");
        $(this).addClass("sclick");
        $(this).find('input').val());
    });

    $next.on("click", function () {
        if ($answerClass) {
            $q1.fadeOut('slow');
        } else {
            alert('error');
        }
    });


});