Flag practice

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.

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>

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(); });

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>

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;
}