Skip to content

Instantly share code, notes, and snippets.

@Tibingeo

Tibingeo/flag-practice.markdown

Last active August 1, 2018 06:52
Show Gist options
  • Save Tibingeo/66483ac7e6a12d74ad4e156ef1171823 to your computer and use it in GitHub Desktop.
Save Tibingeo/66483ac7e6a12d74ad4e156ef1171823 to your computer and use it in GitHub Desktop.
Download ZIP
Flag practice
Raw
flag-practice.markdown

Flag practice

A demo for a drag and drop flag building exercise. Students will build more flags to collect into a group-built flag exercise with 9 different flags.

A Pen by Noisefactor on CodePen.

License.

Raw
index.html
<h3>Drag/drop a Dutch Flag <button id="reset">Reset</button>
<button id="hint">Hint</button></h3>
<greenbox>
<target class="top">target with top class</target>
<target class="middle">target w/ middle class</target>
<target class="bottom">target w/bottom class</target>
</greenbox>
<div class="bar" id="red">div w/class=bar and id=red</div>
<div class="bar" id="blue">div w/class=bar, id=blue</div>
<div class="bar" id="white">div w/class=bar, id=white</div>
Raw
script.js
$( ".bar" ).draggable({ revert: "invalid" });
$( "target.top" ).droppable({
accept: "#red",
drop: function( event, ui ) {
$('#red').addClass('redhome');
}
});
$( "target.middle" ).droppable({
accept: "#white",
drop: function( event, ui ) {
$('#white').addClass('whitehome');
}
});
$( "target.bottom" ).droppable({
accept: "#blue",
drop: function( event, ui ) {
$('#blue').addClass('bluehome');
}
});
$('#reset').click( function(){ doReset(); } );
$('#hint').click( function(){ $('greenbox').addClass('hint'); } );
function doReset(){
$('.bar').removeClass('redhome');
$('.bar').removeClass('whitehome');
$('.bar').removeClass('bluehome');
$('greenbox').removeClass('hint');
$('#red').css('left','calc( 50% - 200px )');
$('#red').css('top', '300px');
$('#blue').css('left','calc( 50% - 150px )' );
$('#blue').css('top', '350px' );
$('#white').css('left','calc( 50% - 100px )' );
$('#white').css('top', '400px' );
}
doReset(); // reset positions when page loads.
//could have used the syntax below for this reset. it's ugly.
//$(document).ready( function(){ doReset(); });
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
Raw
style.css
html,body{ height:100%; }
body{
background-color:grey;
margin:3px;
overflow-x:hidden;
}
h3{ text-align:center; color:white; margin-top: 0;}
.hint{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWgAAADwBAMAAADfieN8AAAAG1BMVEUAAAB/AAD/AAAAf3////9/f39/fwAAAH8AAP8Ts+hxAAAA60lEQVR4Ae3OsQ1FABgGwP+9SCjFBJjBCGxgBAPotEZXWEHzJXcTXP0qTl/DHGeqf2haWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlp6rGWNs2WmG2lpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaenPSR+J6T0x3V5xTmlpaWlpaWnpl7S0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tHSXl74r0QNADuUXmv/8OgAAAABJRU5ErkJggg==) no-repeat;
}
greenbox{
background-color:green;
position: absolute;
width: 360px;
height:240px;
left: calc( 50% - 180px );
top: 50px;
opacity: 0.2;
}
target{
display:block;
border:solid 1px black;
box-sizing:border-box;
height:80px;
}
#red{ background-color:red; }
.redhome,.bluehome,.whitehome{
left: calc( 50% - 180px ) !important;
top: 50px !important;
transition: left 1s ease, top 1s ease;
}
#white{ background-color:white; }
.whitehome{ top: 130px !important; }
#blue{ background-color:#009; }
.bluehome{ top: 210px !important; }
.bar{
width:360px;
height:80px;
position: absolute;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment