Navigation

Game

Interactive Lesson



Drag and Drop

Create an interactive game that uses facts about 3D Printing for the content. The example below is a timeline. Do some research and create your own timeline with the facts that interest you, make them general (a history of 3D Printing) or specific to an aspect like medical applications of 3D Printing, or for an extra challenge create a program that groups similar items together. For example, you could create a game where you have to collect all the 3D Deskstop printers that take advantage of SLA technology.

Be sure to keep track of your resources (where are you findinging your information). It is important to attribute credit .
You did it!

Some Background Before You Begin



  1. To add drag-and-drop functionality to web pages, you need to include both the jQuery library and the jQuery UI plugin. The easiest way to include both libraries is to use Google's CDN.

    Navigate to http://jquery.com to find the latest version of jquery.
    Navigate to http://jqueryui.com to find the latest version of jquery UI.
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/latest_version_number/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/latest_version_number/jquery-ui.min.js"></script>
  2. You can make any element draggable with the mouse using JQuery.Just call the draggable() method on it: 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/<span class="red">latest_version_number</span>/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/<span class="red">latest_version_number</span>/jquery-ui.min.js"></script>


<style>
#makeMeDraggable { width: 300px; height: 300px; background: red; }
</style>
<script type="text/javascript">
$( init );
 
function init() {
  $('#makeMeDraggable').draggable();
}
 
</script>
</head>
<body>
 
  <div id="makeMeDraggable" style="height:24px;width:24px;background-color:blue;"> </div>
  3. You can pass arguments to draggable() to customize the behavior of the element: 
    $('#makeMeDraggable').draggable( {
    option1: value1,
    option2: value2,
    ...
  } );
  4. containment
    By default, you can drag a draggable element anywhere in the page. Usually, though, you want to constrain the element to a certain portion of the page.

    You can do this by setting the containment option to various values:
    'parent'
    Constrains the draggable to the parent element
    'document'
    Constrains the draggable to the page
    'window'
    Constrains the draggable to the browser window
    A selector
    Constrains the draggable to the selected element
    Array of 4 values ([x1,y1,x2,y2])
    Constrains the draggable to the specified rectangle
    cursor
    Changes the mouse cursor during dragging. For example, you can set this option to 'move' to turn the mouse pointer into a move cursor when dragging the element.
    snap
    Set this to a selector (e.g. snap: '#snapToMe') to snap the draggable element to the edges of the selected element. You can also set this option to true to snap the element to any other draggable element in the page.
    stack
    If you're making a group of elements draggable — such as a set of cards — you usually want the currently-dragged element to appear on top of the other elements in the group. By setting the stack option to a selector that matches the group of elements, you can make sure this happens. jQuery UI adjusts the z-index properties of the elements so that the currently-dragged element is brought to the top.

    For a full list of draggable options see the jQuery UI documentation.

    Helpers are like duplicates of your elements. They are dragged instead of the original element. They are useful when you want to leave the original element in place, but still allow the user to drag something from the element to somewhere else in the page. Use the helper option to set a helper element for the drag operation. Possible values are:

    'original'
    The default value. The dragged element is effectively the helper, and it moves when the user drags it.
    'clone'
    Makes a copy of the element, and moves the copy instead.
    A function
    Lets you create a custom helper. You specify a function which accepts an event object and returns the markup for the helper element (or elements). This element is then moved instead of the original.

    When using 'clone' or a function to create a helper, the helper is destroyed when the drag operation stops. However, you can use the stop event (see Events: Responding to drags) to retrieve information about the helper — such as its position — before it's destroyed.

    The following example uses a function to create a custom helper element for the drag operation. Again, this is based on the previous examples — I've just included the relevant changes here:

    <style>
#draggable { width: 24px; height: 24px; background: red; }
#helper { width: 24px; height: 24px; background: yellow; }
</style>

...

<script type="text/javascript">

$( init );

function init() {
  $('#draggable').draggable( {
    cursor: 'move',
    containment: 'document',
    helper: myHelper
  } );
}

function myHelper( event ) {
  return '<div id="helper" style="font-size:.6em;>drag me!</div>';
}

</script>
    You can create droppable elements that can be picked up, dragged and dropped onto another element.

    When a draggable is dropped on a droppable, the droppable fires a drop event. You can write an event handler function for the drop event which determines which draggable was dropped onto the droppable. To make an element droppable, you call droppable()

    The script below modifies the draggable square to include a droppable element that the square can be dropped onto: 
    <style type="text/css">
#dragMe {  width: 24px; height: 24px; background: red;margin:10px; }
#makeMeDroppable { width: 48px; height: 48px; background:blue;border: 1px solid #999; }
</style>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
 
<script type="text/javascript">
 
$( init );
 
function init() {
  $('#dragMe').draggable();
  $('#makeMeDroppable').droppable( {
    drop: handleDropEvent
  } );
}
 
function handleDropEvent( event, ui ) {
  var draggable = ui.draggable;
  alert( 'The square with ID "' + draggable.attr('id') + '" was dropped onto me!' );
}
 
</script>
</head>
<body>
 
<div id="dragMe"></div>

<div id="makeMeDroppable" style="text-align:center;"> </div>

The Project



  1. Create a new web page
  2. Add the two javascript declarations to include jquery and jqueryUI

    Navigate to http://jquery.com to find the latest version of jquery.
    Navigate to http://jqueryui.com to find the latest version of jquery UI.
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/latest_version_number/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/latest_version_number/jquery-ui.min.js"></script>
  3. Create a style declaration: 
    <style type="text/css">
</style>
  4. Inside the style declaration add a style for the body that sets the font, line height and text color:
    example: 
    body {
  margin: 10px;
  font-family: Georgia, serif;
  line-height: 1.1em;
  color: #333;
}
  5. Add the following styles to hold the content area, the draggable blocks of information and the styles for their targets. Edit as you see fit: 
    #content {
  margin: 5px 5px;
  text-align: center;
}
 
#draggableBlocks {
  margin: 0 auto;
  background: #fff;
}
 

#targetArea {
  margin: 10px auto 0 auto;
  background: #99cc33;
}
 

 #draggableBlocks, #targetArea {
  width: 910px;
  height: 300px;
  padding: 12px;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
}
 
/* Individual dragable blocks and targets and slots */
 
 #draggableBlocks div, #targetArea div {
  float: left;
  width: 170px;
  height: 80px;
  padding: 1px;
  padding-bottom: 0;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin: 10px 5px 0 0px;
  background: #fff;
}
 
#draggableBlocks div:first-child, #targetArea div:first-child  {
  margin-left: 0;
}
 
#targetArea div.hovered {
  background: #aaa;
}
 
#targetArea div {
  border-style: dashed;
}
 
#draggableBlocks div {
  background: #666;
  color: #fff;
  font-size: .8em;
  text-shadow: 0 2px 2px #000;
}
 
#draggableBlocks div.ui-draggable-dragging {
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}
 
/* Individually colored successful targets (when matched) */
 
#target1.correct { background: red; }
#target2.correct { background: brown; }
#target3.correct { background: orange; }
#target4.correct { background: yellow; }
#target5.correct { background: green; }
#target6.correct { background: cyan; }
#target7.correct { background: blue; }
#target8.correct { background: indigo; }
#target9.correct { background: purple; }
#target10.correct { background: violet; }
#target11.correct { background: teal; }
#target12.correct { background: chartreuse; }
 
 
/* "You did it!" message */
#successMessage {
  position: absolute;
  left: 480px;
  top: 200px;
  width: 0;
  height: 0;
  z-index: 100;
  background: #ccc;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  padding: 20px;
}

/*more info message*/
#message {
  position: absolute;
  left: 580px;
  top: 250px;
  width: 0;
  height: 0;
  z-index: 100;
  background: #fff;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  padding: 20px;
}
  6. Create a Javascript Declaration 
    <script type="text/javascript">

</script>
  7. Inside the Javascript Declaration 
    var correctMatches = 0;

$(init);
 
function init() {
 
  // Hide the success and fact messages
  $('#successMessage').hide();
  $('#successMessage').css( {
    left: '580px',
    top: '250px',
    width: 0,
    height: 0
  } );
  $('#message').hide();
  $('#message').css( {
    left: '580px',
    top: '250px',
    width: 0,
    height: 0
  } );
  
  
  // Reset the game
  correctMatches = 0;
  var numOfMatches=12;
  
  $('#draggableBlocks').html( '' );
  
  $('#targetArea').html( '' );
  
  // Create the draggable blocks
  var numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
  
  var text = [ '', 
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '', 
  '',
  '',
  ''];
  
 numbers.sort( function() { return Math.random() - .5 } );
 
  for ( var i=0; i<text.length; i++ ) {
    $('<div>' + text[numbers[i]-1] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'target'+numbers[i] ).appendTo( '#draggableBlocks' ).draggable( {
      containment: '#content',
      stack: '#draggableBlocks div',
      cursor: 'move',
      revert: true,
      start:hideMessage
    } );
  }
 
  // Create the target placeholders, like dates
  var words = [ '',
  '',
  '',
  '', 
  '', 
  '', 
  '', 
  '', 
  '',  
  '' ,
  '', 
  ''];
  
  for ( var i=1; i<=words.length; i++ ) {
    $('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#targetArea' ).droppable( {
      accept: '#draggableBlocks div',
      hoverClass: 'hovered',
      drop: handleDrop
    } );
  }
 
}

function handleDrop( event, ui ) {

  var targetNumber = $(this).data( 'number' );
  var draggableBlockNumber = ui.draggable.data( 'number' );

  // If the card was dropped to the correct slot,
  // change the card colour, position it directly
  // on top of the slot, and prevent it being dragged
  // again
 
 if ( targetNumber == draggableBlockNumber ) {
 //provide some related facts
 if(targetNumber==1){
  $('#message').show().html("");
  } 
  if(targetNumber==2){
  $('#message').show().html("");
  } 
  if(targetNumber==3){
  $('#message').show().html("");
  } 
  if(targetNumber==4){
  $('#message').show().html("");
	 } 
  if(targetNumber==5){
  $('#message').show().html("");
  } 
  if(targetNumber==6){
  $('#message').show().html("");
  } 
  if(targetNumber==7){
  $('#message').show().html("");
  } 
  if(targetNumber==8){
  $('#message').show().html("");
  } 
  if(targetNumber==9){
  $('#message').show().html("");
  } 
  if(targetNumber==10){
  $('#message').show().html("");
  } 
  if(targetNumber==11){
  $('#message').show().html("");
  } 
  if(targetNumber==12){
  $('#message').show().html("");
  } 
  
  animateMessage();
    ui.draggable.addClass( 'correct' );
    ui.draggable.draggable( 'disable' );
    $(this).droppable( 'disable' );
    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
    ui.draggable.draggable( 'option', 'revert', false );
    correctMatches++;
    
  } 
   
  // If all the blocks have been placed correctly then display a message
  // and reset the blocks for another go
 
  if ( correctMatches == numOfMatches ) {
    $('#successMessage').show();
    $('#successMessage').animate( {
      left: '380px',
      top: '70px',
      width: '300px',
      height: '60px',
      opacity: 1
    } );
  }
 
}
function animateMessage(){
$('#message').animate( 
    {
      left: '180px',
      top: '200px',
      width: '600px',
      height: '100px',
      opacity: 1
    });
     
     }
function hideMessage(){
$('#message').animate( 
    {
      left: '220px',
      top: '700px',
      width: '600px',
      height: '100px',
      opacity: 0
    });
}
  8. Save, test and have your classmates play your game.
  9. Write a paragraph describing why you selected your blocks. List your resources.
Source:
Griffin, Matthew. Design and Modeling for 3D Printing. N.p.: O'Reilly Media, Incorporated, 2014. Print.
www.elated.com
A BRIEF HISTORY OF 3D PRINTING (n.d.): n. pag. Web. 04 Jan. 2015
"History of 3D Printing: It's Older Than You Think." LINESHAPESPACE History of 3D Printing Its Older Than You Are That Is If Youre Under 30 Comments. N.p., 05 Sept. 2014. Web. 04 Jan. 2015.
"The History of 3D Printing: A Timeline | ZDNet." ZDNet. N.p., n.d. Web. 04 Jan. 2015.