Feedback

Drivers

Duplicate

Delete

Missions

Narrative

Levels

Collections

Peer / Network

Customisation

Choices

Responsibility

Leaderboards

Points

Badges

Progression

Competition

Giving

Save HTML

<html><head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript">
</script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript">
</script>
    <title></title>
    <style type="text/css">
	html{
		height:100%;
	}
    *{
            font-family:helvetica;
        }
        #items .item{
                width:130px;
                padding:5px;
                border:1px solid grey;
                list-style:none;
                margin:0px 3px 3px 3px;
                font-size:14px;
                text-align:center;
                float:left;
                display:block;
                cursor:default;
                background-color:white;
				z-index:10;
				font-weight:700;
        }
        #itemsWrapper{
                width:350px;
                text-align:center;
                float:left;
                height:500px;
        }
        #axis{
                width:700px;
                float:left;
        }
        .dropBox{
                float:left;
                width:300px;
                height:300px;
                border:1px solid black;
        }
        .dropBox span{
                font-size:30px;
                color:#ccc;
                text-align:center;
                top:40%;        
                display:block;
                height:100%;
                position:relative;
				
        }
        #duplicate,#delete{
				float:left;
				width:130px;
                padding:5px;
                border:1px solid grey;
                list-style:none;
                margin:0px 3px 3px 3px;
                height:40px;    
                border:1px solid black;         
                z-index:-1;
        }
        #duplicate span,#delete span{
                font-size:20px;
                color:#ccc;
                text-align:center;
                top:15%;        
                display:block;
                position:relative;
                z-index:1;
        }
		#duplicate{
			background-color:#DBFFE6;
		}
		#delete{
			background-color:#FFDBDB;
		}
        #autonomy{
                background-color:#DBE2FF;
        }
        #mastery{
                background-color:#DBFFE6;
        }
        #purpose{
                background-color:#FFECDB;
        }
        #relatedness{
                background-color:#EBDBFF;
        }
        #saveStuff{
                clear:left;
        }
        #html{
            width:300px;
            height:100px;
        }
    </style>
  </head>
  <body style="cursor: auto;">
    <div id="workspace">
      <div id="axis">
        <div id="autonomy" class="dropBox ui-droppable ui-resizable" style="top: 0px; left: 0px; width: 309px; height: 409px;">
          <span class="editable">Feedback</span>
        <div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1000;"></div></div>
        
      <div class="dropBox ui-resizable" style="background-color: rgb(254, 232, 254); width: 309px; height: 409px;"><span>Drivers</span><div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1000;"></div></div></div>
      <div id="duplicate" class="ui-droppable">
        <span>Duplicate</span>
      </div>
      <div id="delete" class="ui-droppable">
        <span>Delete</span>
      </div>
	  
      <div id="itemsWrapper">
<input type="button" value="Add Item" id="add" style="" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false"> <input type="button" value="Add Box" id="addbox" style="" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false">
        <div id="items" class="ui-droppable">
          <p class="item ui-draggable" style="position: relative; left: -414px; top: -82px;">
            <span class="editable">Missions</span>
          </p>
          <p class="item ui-draggable" style="position: relative; left: -382px; top: -28px;">
            <span class="editable">Narrative</span>
          </p>
        <p class="item ui-draggable" style="position: relative; left: -445px; top: -70px;"><span class="editable">Levels</span></p><p class="item ui-draggable" style="position: relative; left: -600px; top: 157px;"><span class="editable">Collections</span></p><p class="item ui-draggable" style="position: relative; left: -421px; top: 85px;"><span class="editable">Peer / Network</span></p><p class="item ui-draggable" style="position: relative; left: -381px; top: -142px;"><span class="editable">Customisation</span></p><p class="item ui-draggable" style="position: relative; left: -237px; top: 97px;"><span class="editable">Choices</span></p><p class="item ui-draggable" style="position: relative; left: -387px; top: 152px;"><span class="editable">Responsibility</span></p><p class="item ui-draggable" style="position: relative; left: -477px; top: -121px;"><span class="editable">Leaderboards</span></p><p class="item ui-draggable" style="position: relative; left: -610px; top: -73px;"><span class="editable">Points</span></p><p class="item ui-draggable" style="position: relative; left: -445px; top: -53px;"><span class="editable">Badges</span></p><p class="item ui-draggable" style="position: relative; left: -601px; top: 82px;"><span class="editable">Progression</span></p><p class="item ui-draggable" style="position: relative; left: -235px; top: -165px;"><span class="editable">Competition</span></p><p class="item ui-draggable" style="position: relative; left: -385px; top: -55px;"><span class="editable">Giving</span></p></div>        
      </div>
<div id="saveStuff">
            <strong>Save HTML</strong><br>
          
          <textarea id="html"></textarea><br>
          <input type="button" value="Save" id="save" style="" class="ui-button ui-widget ui-state-default ui-corner-all ui-state-hover" role="button" aria-disabled="false"> 
        </div>
    </div><script type="text/javascript">
	var key='';
function initialiseDrag(){
        $('.item').draggable({
                revert: function(dropped) {
                        var dropped = dropped && dropped[0].id == "duplicate";
                        return dropped;
                        },
                drop:function(){
                        $('.item').css({'z-index':'10'});
                        $(this).focus();
                        $(this).css({'z-index':'99'});  
                }
        });
        $('.dropBox').dblclick(function(e){
                if(confirm('Delete Box')){
                        $(this).remove();
                        e.stopPropagation();
                }
        });
        $('.dropBox').resizable({
                resize:function(event,ui){
                        $('.dropBox').css({'width':ui.size.width,'height':ui.size.height});
                }
        });
	$('span.editable').dblclick(function() {
	   var input = $('<input style="width:98%" type="text" value="'+$(this).text()+'"/>')
			.keypress(function(e) {
				if(e.which == 13) {
					var span = $('<span class="editable">'+$(this).val()+'</span>');
					$(this).replaceWith(span);
					initialiseDrag();
				}
			 })
			 .blur(function(e) {
				var span = $('<span class="editable">'+$(this).val()+'</span>');
				$(this).replaceWith(span);
				initialiseDrag();
			 });
			 
	   $(this).replaceWith(input);
	   	input.focus();
	});
    }
    function saveHTML(){
        var html='<html>';
        html+=$('html').html();
        html+='<\/html>';
        $('#html').html(htmlEncode(html));
    }
    $('#save').click(function(){
        saveHTML();
    });
    $('#add').click(function(){
        var text=prompt("Item Text","");
        if(text!='' && text!=null){
                $('#items').append('<p class="item"><span class="editable">'+text+'</span><\/p>');
                initialiseDrag();
        }
    });

$('#addbox').click(function(){
        var text=prompt("Box Text","");
        if(text!='' && text!=null){
                color =  'hsl(' + Math.floor( 360 * Math.random() ) + ', 85%, 95%)';
                $('#axis').append('<div class="dropBox" style="background-color:'+color+'"><span>'+text+'<\/span><\/span>');
        }
        initialiseDrag();
    });

$( "#duplicate" ).droppable({
            drop: function( event, ui ) {
				var dup=$(ui.draggable)[0];
				$('#items').append('<p class="item">'+$(dup).html()+'<\/p>');
				initialiseDrag();
            }
        });
    $( "#delete" ).droppable({
            drop: function( event, ui ) {
				var dup=$(ui.draggable).remove();
				initialiseDrag();
            }
        });
    $('#items').droppable({});
    $('.dropBox').droppable({
    });
    function htmlEncode(value){
		return $('<div/>').text(value).html();
    }
	t=setTimeout(function(){
		$(document).keydown(function(e){
			key=e;
		});
		$(document).keyup(function(e){
			key='';
		});
		}
		,500);
 $( "input[type=button]" )
            .button()
            .click(function( event ) {
                event.preventDefault();
            });
    initialiseDrag();
	
    </script>

</body></html>