Skip to content

Instantly share code, notes, and snippets.

@betul

betul/Planets Quiz.markdown

Created February 4, 2016 11:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save betul/82735cdd194d520ff201 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save betul/82735cdd194d520ff201 to your computer and use it in GitHub Desktop.
Download ZIP
Planets Quiz
Raw
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'}
Raw
Planets Quiz.markdown
Raw
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
Raw
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>
Raw
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)}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment