Planets Quiz

index.html

.overlay
.timer 0 seconds
  
.intro.modal
  .intro.modal_inner
    .intro.modal_inner__close.c_modal.st
      x
    .intro.modal_inner__title
      %h2 Planet quiz
    .intro.modal_inner__text
      %p Drag the planets in the correct order as fast as you can!
    .intro.modal_inner__image
      %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/sdfsdfsdf.gif'}
    .intro.modal_inner__cta.c_modal
      %button.st Lets go!
.winner.modal
  .winner.modal_inner
    .winner.modal_inner__title
      %h2 
        Well done, you won in 
        %span.t 10.00
    .winner.modal_inner__text
      %p You are a proper clever cloggs! Why not share this with a friend and see if they are as smart as you!
    .winner.modal_inner__cta
      %button.cp 
        %a{:href => 'https://www.codepen.io/jcoulterdesign',:target => '_blank'} Follow me on Codepen
      %button.tw 
        Tweet
    .winner.modal_inner__restart
      -# %button.ta Try again
.planets
  .planets_stars
  .planets_container
    .planets_container__title
      %h1 Planets quiz
    .planets_container__title
      %h3 Drag the planets into the correct order
    .planets_container__planets
      .planet_wrap
        .planet{'data-planet' => 'venus'}
          %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pq_venus.png'}
        %span Venus
      .planet_wrap
        .planet{'data-planet' => 'earth'}
          %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pq_earth.png'}
        %span Earth
      .planet_wrap
        .planet{'data-planet' => 'saturn'}
          %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pq_saturn.png'}
        %span Saturn
      .planet_wrap
        .planet{'data-planet' => 'neptune'}
          %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pq_neptune.png'}
        %span Neptune
      .planet_wrap
        .planet{'data-planet' => 'mercury'}
          %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pq_mercury.png'}
        %span Mercury
      .planet_wrap
        .planet{'data-planet' => 'mars'}
          %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pq_mars.png'}
        %span Mars
      .planet_wrap
        .planet{'data-planet' => 'jupiter'}
          %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pq_jupiter.png'}
        %span Jupiter
      .planet_wrap
        .planet{'data-planet' => 'uranus'}
          %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pq_uranus.png'}
        %span Uranus
    .planets_container__quiz
      .planet_holder.sun.null{'data-planet' => 'sun'}
        %span ?
        .planet_answer
          %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pq_sun.png'}
      .planet_holder.mercury{'data-planet' => 'mercury'}
        %span ?
        .planet_answer
          %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pq_mercury.png'}
      .planet_holder.venus{'data-planet' => 'venus'}
        %span ?
        .planet_answer
          %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pq_venus.png'}
      .planet_holder.earth{'data-planet' => 'earth'}
        %span ?
        .planet_answer
          %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pq_earth.png'}
      .planet_holder.mars{'data-planet' => 'mars'}
        %span ?
        .planet_answer
          %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pq_mars.png'}
      .planet_holder.jupiter{'data-planet' => 'jupiter'}
        %span ?
        .planet_answer
          %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pq_jupiter.png'}
      .planet_holder.saturn{'data-planet' => 'saturn'}
        %span ?
        .planet_answer 
          %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pq_saturn.png'}
      .planet_holder.uranus{'data-planet' => 'uranus'}
        %span ?
        .planet_answer
          %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pq_uranus.png'}
      .planet_holder.neptune{'data-planet' => 'neptune'}
        %span ?
        .planet_answer
          %img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pq_neptune.png'}

Planets Quiz.markdown

Planets Quiz

Fun little interactive planets quiz

A Pen by Jamie Coulter on CodePen.

License.

script.js

// Init draggable

var planet = '.planet'; // Planet element
var holder = '.planet_holder'; // Holder element
var planets = 8;
var correct = 0;

$(planet).draggable({
  revert:true
})

// Init droppable

$(holder).droppable({
  hoverClass: "ui-state-hover",
  drop:function(event, ui){
    var dropped = $(this).data('planet')
    if($(ui.draggable).data('planet') == dropped){
      setTimeout(function(){
        $(ui.draggable).append('<div class="tick"><i class="icon ion-checkmark-round"></i></div>')
      },500)
      $(ui.draggable).find('img').css('opacity','.12')
      $(this).find('.planet_answer img').addClass('scale');
      $(this).find('.planet_answer').parent().css('border','none');
      $(ui.draggable).next().addClass('answered')
      correct ++;
    } else {
    }
    if(correct == planets){
      show_modal('winner')
      clearTimeout(timer)
      $('.t').html(time)
    }
  }
})


var timer = 0;


function show_modal(modal){
  $('.' + modal).show();
  $('.overlay').show();
}

function hide_modal(modal){
  $('.' + modal).hide();
  $('.overlay').hide();
}

function start_timer(){
  var start = new Date;
  timer = setInterval(function() {
    time = Math.floor((new Date - start) / 1000) + " seconds";
    $('.timer').html(time)
    console.log(time)
  }, 1000);
}

// Show intro modal
$('.st').click(function(){
  start_timer()
})
$(document).ready(function(){
  show_modal('intro');
})

$('.c_modal').click(function(){
  hide_modal('modal')
})

$('.ta').click(function(){
  hide_modal('modal');
  start_timer();
  correct = 0;
  $(planet).css('opacity','1')
  $('.planet_answer').hide()
  $('.answered').removeClass('answered')
  $('.planet_holder').css('border','2px dashed rgba(255, 255, 255, 0.22)')
})



function twShare(url, title, winWidth, winHeight) {
  var winTop = 100;
  var winLeft = 100;
  window.open('https://twitter.com/intent/tweet?text='+title, 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=' + winWidth + ',height=' + winHeight);
}

    
  $('body').on('click','.tw',function(){
    twShare('http://codepen.io/jcoulterdesign/pen/fe65b4a77c18330f405702ce4205824e', 'I just completed the Planet Quiz on @codepen in ' + time + ', can you beat it? http://bit.ly/20zZ7wq %23codepen %23planetQuiz', 520, 350);
  });
// To do before release

// Animate in the modals
// Cross browser

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

style.css

*{
  box-sizing:border-box;
}
.cp{
  background:#3C3F44 !important;
  border:none !important;
  a{
    text-decoration:none;
    color:white;
  }
}
.tw{
  background:#34B1EC !important;
  border:none !important;
  color:white !important;
  a{
    text-decoration:none;
    color:white;
  } 
}
.fb{
  background:#4057AB !important;
  border:none !important;
  a{
    text-decoration:none;
    color:white;
  }
}
@import url(https://fonts.googleapis.com/css?family=Nunito:400,300,700);
.null{
  border:none !important;
  .planets_container__quiz .planet_answer:nth-of-type(1) {
    display:block !important
  }
  .planet_answer img{
    transform:scale(1) !important;
  }
}
body{
  margin:0;
  font-family:'nunito';

  padding:0;
  height:100vh;
  .tick{
    color: #76E693;
    position: absolute;
    top: 8px;
    left: 0;
    transform:scale(0);
    right: 0;
    animation:tick .3s forwards;
    font-size: 20px;
  }
  .timer{
    color:white;
    position:absolute;
    top:20px;
    font-weight:400;
    font-size:13px;
    right:20px;
    z-index:10;
  }
  .overlay{
    display:none;
    width:100%;
    opacity:0.9;
    position:fixed;
    height:100%;
    z-index:1;
    background:#1D1F29;
  }
  .winner{
    display:none;
  }
  .intro{
    display:none;
  }
  .modal{
    z-index:2;
    width:400px;
    background:white;
    left:0;
    border-radius:12px;
    right:0;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    margin:auto;
    &_inner{
      padding:30px;
      text-align:center;
      img{
        width:100%;
      }
      button{
        border: 2px solid #E14122;
        background: none;
        color: #E14122;
        font-weight: 700;
        font-family: 'nunito';
        padding: 10px 13px;
        outline:none;
        cursor: pointer;
        margin-top: 20px;
        border-radius:4px;
        transition:all .2s;
        &:hover{
          background:#E14122;
          color:white;
        }
      }
      h2{
        margin:0;
        color: #E14122;
      }
      p{
        color: #5C5E67;
        font-weight: 100;
        font-size: 14px;
      }
      &__close{
        position:absolute;
        right:-20px;
        top:-20px;
        color:white;
        cursor:pointer;
        opacity:0.6;
        transition:all .3s;
        &:hover{
          opacity:1;
        }
      }
    }
  }
  .ui-state-hover{
    border: 2px dashed #11DFF3 !important;
    box-shadow: 0px 0px 20px 0px rgba(52, 205, 224, 0.11);
    transform:scale(1.2) !important;
    span{
      color: #11DFF3 !important
    }
  }
  .planets{
    overflow:hidden;
    background: linear-gradient(90deg, #262D48 0%, #0A0B0E 100%);
    width:100%;
    height:100vh;
    position:relative;
    &_stars{
      img{
        width:100%;
      }
      background-size: 400px;
      background-repeat: repeat;
      position:absolute;
      width:100%;
      height:100%;
      background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/stars-back.png');
    }
    &_container{
      width:1000px;
      text-align:center;
      height:520px;
      position:absolute;
      left:0;
      right:0;
      margin:auto;
      top:50%;
      transform:translateY(-50%);
      &__title{
        h1{
          margin:0;
          color:white;
        }
        h3{
          margin:0;
          color: #E14122;
          font-weight: 400;
        }
      }

      &__planets{
        margin:90px;
        .answered{
          opacity:0.3;
        }
        span{
          color:#ef4423;
          font-size:13px;
          display:block;
          margin-top:7px;
        }
        .planet_wrap{
          display:inline-block;
          width: 75px;
        }
        .info{
          background:white;
          width:100px;
          height:100px;
          display:none;
        }
        .planet{
          //background:Red;
          border-radius:100px;
          cursor:pointer;
          img{
            height:38px;
            position: relative;
            z-index: 11;
            border-radius:100px;
            &:hover{
              //box-shadow:0px 0px 0px 2px white; // Damn you jupiter!
            }
          }
        }
      }
      &__quiz{
        .planet_holder{
          width:40px;
          transition:all .3s;
          height:40px;
          border-radius:100px;
          display:inline-block;
          border:2px dashed rgba(255, 255, 255, 0.22);
          margin-right:30px;
          span{
            position:absolute;
            left:0;
            right:0;
            color:white;
            top:50%;
            transition:all .3s;
            transform:translateY(-50%)
          }
        }
        // Planet specific
        .sun{
          width:160px;
          height:156px;
          position:relative;
          top:30px;
          animation:space_wobble 5.8s .1s linear infinite;
          span{
            font-size:50px;
          }
        }
        .mercury{
          width:30px;
          height:30px;
          position:relative;
          top:-60px;
          animation:space_wobble 5.7s .4s linear infinite;
          span{
            font-size:10px;
          }
        }
        .venus{
          width:40px;
          height:40px;
          position:relative;
          top:-20px;
          animation:space_wobble 5.3s .8s linear infinite;
          span{
            font-size:12px;
          }
        }
        .earth{
          width:50px;
          height:50px;
          position:relative;
          top:-30px;
          animation:space_wobble 5.2s 1s linear infinite;
          span{
            font-size:20px;
          }
        }
        .mars{
          width:46px;
          height:46px;
          position:relative;
          animation:space_wobble 5s .1s linear infinite;
          span{
            font-size:18px;
          }
        }
        .jupiter{
          width:90px;
          height:90px;
          position:relative;
          top:-10px;
          animation:space_wobble 4.7s .6s linear infinite;
          span{
            font-size:30px;
          }
        }
        .saturn{
          width:80px;
          height:80px;
          position:relative;
          top:20px;
          animation:space_wobble 5.9s .1s linear infinite;
          span{
            font-size:26px;
          }
        }
        .uranus{
          width:50px;
          height:50px;
          position:relative;
          top:-30px;
          animation:space_wobble 6s .7s linear infinite;
          span{
            font-size:20px;
          }
        }
        .neptune{
          width:47px;
          height:47px;
          position:relative;
          top:-10px;
          animation:space_wobble 5s .4s linear infinite;
        }
        .scale{
          transform:scale(1) !important
        }
        .planet_answer{
          border-radius:100px;
          img{
            width:100%;
            transform:scale(0);
            transition:all .3s;
          }
        }
      }
    }
  }
}

// Anims

@keyframes space_wobble{
  0%{transform:translateY(0px)}
  25%{transform:translateY(3px)}
  50%{transform:translateY(0px)}
  75%{transform:translateY(-3px)}
  100%{transform:translateY(0px)}
}
@keyframes tick{
  0%{transform:scale(0)}
  100%{transform:scale(1)}
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />