this is scru.ms<bR><BR>
  



<!--    
<div class="card" id="one" flipped="false" ondblclick="flip('one');">
  <div class="back">Box - Back</div>
  <div class="front">Box - Front </div>
</div>


<div class="card" id="two" flipped="false" ondblclick="flip('two');">
  <div class="back">Box - Back</div>
  <div class="front">Box - Front </div>
</div>
-->


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
<script src="https://cdn.globeflow.net/jquery.js"></script>
<script>
function flip(ID){
   var status = $("#" + ID).attr('flipped');
  // alert(status);
   var obj = document.getElementById(ID);  
   if(status === 'false') {
       console.log('flipping ' + ID);
        obj.children[1].style.transform = "perspective(600px) rotateY(-180deg)";
    	obj.children[0].style.transform = "perspective(600px) rotateY(0deg)";         
         $("#" + ID).attr('flipped', 'true');
    } 
     if(status === 'true'){
          console.log('unflipping ' + ID);
         obj.children[1].style.transform = "perspective(600px) rotateY(0deg)";
    	 obj.children[0].style.transform = "perspective(600px) rotateY(180deg)"; 
        $("#" + ID).attr('flipped', 'false');
     }
}

</script>


<style>
    html,
body {
    overscroll-behavior-y: contain; /***stops the pull to refresh intefering with dragging cards on mobile**/
}
    .wrapperz{
        padding:5%;
    }    
.story_points {
    background: white;
    position: fixed;
    bottom: 5%;
    right: 5%;
    border-radius: 2px;
    padding: 3%;
    font-size: 12px;}
.id {
    background: #e4e4ec87;
    position: fixed;
    bottom: 5%;
    left: 5%;
    border-radius: 2px;
    padding: 3%;
    font-size: 12px;}   
.card{ width:240px; height:200px; margin:10px; float:left; }
.card > .front{
	position:absolute;
	transform: perspective( 600px ) rotateY( 0deg );
	background:#FC0; width:240px; height:200px; border-radius: 7px;
	backface-visibility: hidden;
	transition: transform .5s linear 0s;
}
.card > .back{
	position:absolute;
	transform: perspective( 600px ) rotateY( 180deg );
	background: #80BFFF; width:240px; height:200px; border-radius: 7px;
	backface-visibility: hidden;
	transition: transform .5s linear 0s;
}
    
body{
    background:white !important;
}

.field{
 /*text-decoration: underline;*/
 font-weight:bold;
    
}
</style>







<!-------------->

<link href='https://bevacqua.github.io/dragula/dist/dragula.css' rel='stylesheet' type='text/css' />
<!--<link href='https://bevacqua.github.io/dragula/example/example.css' rel='stylesheet' type='text/css' />-->

    <div class='wrapper'>
       
      <div id='left-defaults' class='container'>
       <!-- <div>One</div>
        <div>Two</div>
        <div>Anything can be moved around. That includes images, <a href='https://github.com/bevacqua/dragula'>links</a>, or any other nested elements.</div>
      -->
       <!---------->
      <div class="card" id="four" flipped="false" ondblclick="flip('four');">
  <div class="back"><div class="wrapperz">
  I know this story is done when:<Br><ul>
       <li>Acceptance criteria 1</li>
       <li>Acceptance criteria 2</li>
       <li>Acceptance criteria 3</li>
      </ul>
  <div class="id">#49</div>
      </div>
  </div>
  <div class="front">
      <div class="wrapperz">
          As a _______<br><br>
          I want ________<br><br>
          so that ________<br><br>
          <div class="id">#49</div>
      <div class="story_points">50 story points</div></div>
  </div>
</div>
      <!---------->
      
      </div>
      <div id='right-defaults' class='container'>
       <!-- <div>One</div>
        <div>Two</div>-->
        <!------------>
        
        <div class="card" id="three" flipped="false" ondblclick="flip('three');">
  <div class="back"><div class="wrapperz">
  I know this story is done when:<Br><span contenteditable="true" data-complete="3" class="field" onblur="update('3');"><ul>
       <li>Acceptance criteria 1</li>
       <li>Acceptance criteria 2</li>
       <li>Acceptance criteria 3</li>
      </ul></span>
  <div class="id">#50</div>
      </div>
  </div>
  <div class="front">
      <div class="wrapperz">
          As a <span contenteditable="true" data-user="3" class="field" onblur="update('3');">_______</span><br><br>
          I want <span contenteditable="true" data-action="3" class="field" onblur="update('3');">_________</span><br><br>
              so that <span contenteditable="true" data-reason="3" class="field" onblur="update('3');">_________</span><br><br>
          <div class="id">#50</div>
      <div class="story_points">50 story points</div></div>
  </div>
</div>
        <!------------>
      </div>
        <div id='three-defaults' class='container'></div>
        <div id='four-defaults' class='container'></div>
        
    </div>
 

<script src='https://bevacqua.github.io/dragula/dist/dragula.js'></script>
<!--<script src='https://bevacqua.github.io/dragula/example/example.min.js'></script>-->
<Script>

function update($ID){
//console.log('updating: ' + $ID);    
var user = $('[data-user="'+$ID+'"]').html();
var action = $('[data-action="'+$ID+'"]').html();
var reason = $('[data-reason="'+$ID+'"]').html();
var complete = $('[data-complete="'+$ID+'"]').html();
console.log('updating: ' + $ID + ' - ' + user + action + reason + complete); 


}




(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';

var crossvent = require('crossvent');
var sortable = $('sortable');

//dragula([$('left-defaults'), $('right-defaults')]);
dragula([$('left-defaults'), $('right-defaults'), $('three-defaults'), $('four-defaults')]);


dragula([$('left-copy'), $('right-copy')], { copy: true });
dragula([$('left-events'), $('right-events')])
  .on('drag', function (el) {
    el.className = el.className.replace('ex-moved', '');
  })
  .on('drop', function (el) {
    el.className += ' ex-moved';
  })
  .on('over', function (el, container) {
    container.className += ' ex-over';
  })
  .on('out', function (el, container) {
    container.className = container.className.replace('ex-over', '');
  });
dragula([$('left-rollbacks'), $('right-rollbacks')], { revertOnSpill: true });
dragula([$('left-lovehandles'), $('right-lovehandles')], {
  moves: function (el, container, handle) {
    return handle.className === 'handle';
  }
});

dragula([$('left-rm-spill'), $('right-rm-spill')], { removeOnSpill: true });
dragula([$('left-copy-1tomany'), $('right-copy-1tomany')], {
  copy: function (el, source) {
    return source === $('left-copy-1tomany');
  },
  accepts: function (el, target) {
    return target !== $('left-copy-1tomany');
  }
});

dragula([sortable]);

crossvent.add(sortable, 'click', clickHandler);

function clickHandler (e) {
  var target = e.target;
  if (target === sortable) {
    return;
  }
  target.innerHTML += ' [click!]';

  setTimeout(function () {
    target.innerHTML = target.innerHTML.replace(/ \[click!\]/g, '');
  }, 500);
}

function $ (id) {
  return document.getElementById(id);
}

},{"crossvent":3}],2:[function(require,module,exports){
(function (global){

var NativeCustomEvent = global.CustomEvent;

function useNative () {
  try {
    var p = new NativeCustomEvent('cat', { detail: { foo: 'bar' } });
    return  'cat' === p.type && 'bar' === p.detail.foo;
  } catch (e) {
  }
  return false;
}

/**
 * Cross-browser `CustomEvent` constructor.
 *
 * https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent.CustomEvent
 *
 * @public
 */

module.exports = useNative() ? NativeCustomEvent :

// IE >= 9
'function' === typeof document.createEvent ? function CustomEvent (type, params) {
  var e = document.createEvent('CustomEvent');
  if (params) {
    e.initCustomEvent(type, params.bubbles, params.cancelable, params.detail);
  } else {
    e.initCustomEvent(type, false, false, void 0);
  }
  return e;
} :

// IE <= 8
function CustomEvent (type, params) {
  var e = document.createEventObject();
  e.type = type;
  if (params) {
    e.bubbles = Boolean(params.bubbles);
    e.cancelable = Boolean(params.cancelable);
    e.detail = params.detail;
  } else {
    e.bubbles = false;
    e.cancelable = false;
    e.detail = void 0;
  }
  return e;
}

}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})

},{}],3:[function(require,module,exports){
(function (global){
'use strict';

var customEvent = require('custom-event');
var eventmap = require('./eventmap');
var doc = global.document;
var addEvent = addEventEasy;
var removeEvent = removeEventEasy;
var hardCache = [];

if (!global.addEventListener) {
  addEvent = addEventHard;
  removeEvent = removeEventHard;
}

module.exports = {
  add: addEvent,
  remove: removeEvent,
  fabricate: fabricateEvent
};

function addEventEasy (el, type, fn, capturing) {
  //return el.addEventListener(type, fn, capturing);
}

function addEventHard (el, type, fn) {
  return el.attachEvent('on' + type, wrap(el, type, fn));
}

function removeEventEasy (el, type, fn, capturing) {
  return el.removeEventListener(type, fn, capturing);
}

function removeEventHard (el, type, fn) {
  var listener = unwrap(el, type, fn);
  if (listener) {
    return el.detachEvent('on' + type, listener);
  }
}

function fabricateEvent (el, type, model) {
  var e = eventmap.indexOf(type) === -1 ? makeCustomEvent() : makeClassicEvent();
  if (el.dispatchEvent) {
    el.dispatchEvent(e);
  } else {
    el.fireEvent('on' + type, e);
  }
  function makeClassicEvent () {
    var e;
    if (doc.createEvent) {
      e = doc.createEvent('Event');
      e.initEvent(type, true, true);
    } else if (doc.createEventObject) {
      e = doc.createEventObject();
    }
    return e;
  }
  function makeCustomEvent () {
    return new customEvent(type, { detail: model });
  }
}

function wrapperFactory (el, type, fn) {
  return function wrapper (originalEvent) {
    var e = originalEvent || global.event;
    e.target = e.target || e.srcElement;
    e.preventDefault = e.preventDefault || function preventDefault () { e.returnValue = false; };
    e.stopPropagation = e.stopPropagation || function stopPropagation () { e.cancelBubble = true; };
    e.which = e.which || e.keyCode;
    fn.call(el, e);
  };
}

function wrap (el, type, fn) {
  var wrapper = unwrap(el, type, fn) || wrapperFactory(el, type, fn);
  hardCache.push({
    wrapper: wrapper,
    element: el,
    type: type,
    fn: fn
  });
  return wrapper;
}

function unwrap (el, type, fn) {
  var i = find(el, type, fn);
  if (i) {
    var wrapper = hardCache[i].wrapper;
    hardCache.splice(i, 1); // free up a tad of memory
    return wrapper;
  }
}

function find (el, type, fn) {
  var i, item;
  for (i = 0; i < hardCache.length; i++) {
    item = hardCache[i];
    if (item.element === el && item.type === type && item.fn === fn) {
      return i;
    }
  }
}

}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})

},{"./eventmap":4,"custom-event":2}],4:[function(require,module,exports){
(function (global){
'use strict';

var eventmap = [];
var eventname = '';
var ron = /^on/;

for (eventname in global) {
  if (ron.test(eventname)) {
    eventmap.push(eventname.slice(2));
  }
}

module.exports = eventmap;

}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})

},{}]},{},[1])


</script>
<style>
 .wrapper {
  display: flex;
  width:80%;
  margin-left:10%;
}
.container {
    flex: 1;
    /* background-color: #64b5f6; */
    /* width: 50%; */
    padding: 5%;
    border: 1px solid brown;
}
.container:nth-child(odd) {
  /*background-color: rgba(0, 0, 0, 0.2);*/
}
/*
 * note that styling gu-mirror directly is a bad practice because it's too generic.
 * you're better off giving the draggable elements a unique class and styling that directly!
 */
.container > div,
.gu-mirror {
  margin: 10px;
  padding: 10px;
  /*background-color: rgba(0, 0, 0, 0.2);*/
  transition: opacity 0.4s ease-in-out;
}
.container > div {
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
.gu-mirror {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}
.container .ex-moved {
  background-color: #e74c3c;
}
.container.ex-over {
  background-color: rgba(255, 255, 255, 0.3);
}
#left-lovehandles > div,
#right-lovehandles > div {
  cursor: initial;
}
.handle {
  padding: 0 5px;
  margin-right: 5px;
  background-color: rgba(0, 0, 0, 0.4);
  cursor: move;
}
.image-thing {
  margin: 20px 0;
  display: block;
  text-align: center;
}
.slack-join {
  position: absolute;
  font-weight: normal;
  font-size: 14px;
  right: 10px;
  top: 50%;
  margin-top: -8px;
  line-height: 16px;
}   
    
</style>





<html>
  
  <!-- See live at https://codepen.io/paulera/pen/ejGKEr -->
  
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
    <script>
    /**
     * Sum elements of an array up to the index provided.
     */
    function sumArrayUpTo(arrData, index) {
      var total = 0;
      for (var i = 0; i <= index; i++) {
        if (arrData.length > i) {
          total += arrData[i];
            }
      }
      return total;
    }

    function showBurnDown(elementId, burndownData, scopeChange = []) {

      var speedCanvas = document.getElementById(elementId);

      Chart.defaults.global.defaultFontFamily = "Arial";
      Chart.defaults.global.defaultFontSize = 14;
      var sprint_backlog_starting_size = 400;    
      var sprints = [ "Start",	"Sprint 1",	"Sprint 2",	"Sprint 3",	"Sprint 4",	"Sprint 5",	"Sprint 6",	"Sprint 7",	"Sprint 8", "Sprint 9"];
      var number_of_sprints = sprints.length;
      console.log(number_of_sprints);
      var current_sprint = 0;
      var ideal = [];
        sprints.forEach(function(entry) {
            
            if (current_sprint == 0){ var points = sprint_backlog_starting_size; last_points = sprint_backlog_starting_size;}
            else {
                var remaining_sprints = (number_of_sprints - current_sprint);
                var points = (last_points - ((last_points) / remaining_sprints));
                 points = Math.round(points);
                last_points = points;
            }
            ideal.push(points);
            current_sprint++;
        });
      
      var current_sprint = 0;
      var burned = [];
      var last_pointz = sprint_backlog_starting_size;
      burndownData.forEach(function(entry) {
            
            if (current_sprint == 0){ 
                points = sprint_backlog_starting_size; 
           }
            else {
                var scope_change = 0;
                var scope_change = scopeChange[(current_sprint - 1)];
                points = (last_pointz) - Number(burndownData[(current_sprint - 1)]) + Number(scope_change);
                last_pointz = points;
            }
            burned.push(points);
           // console.log(current_sprint + ':' + entry + '('+points+')');
            current_sprint++;
        });
      
      
      
      
   

      var speedData = {
        labels: sprints,
        datasets: [
          {
            label: "Story points remaining",
            data: burned,
            fill: false,
            borderColor: "#EE6868",
            backgroundColor: "#EE6868",
            lineTension: 0,
          },
          {
            label: "Ideal",
            borderColor: "#6C8893",
            backgroundColor: "white",
            lineTension: 0,
            borderDash: [5, 5],
            fill: false,
            data: ideal,
          //  pointRadius: 0 //shows points on the line
          },
        ]
      };

      var chartOptions = {
        legend: {
          display: true,
          position: 'top',
          labels: {
            boxWidth: 80,
            fontColor: 'black'
          }
        },
        scales: {
            yAxes: [{
                /*ticks: {
                    min: 0,
                    max: Math.round(burndownData[0] * 1.1)
                }*/
            }]
        }
      };

      var lineChart = new Chart(speedCanvas, {
        type: 'line',
        data: speedData,
        options: chartOptions
      });

    }
    </script>
  </head>
  
  <body>

    <div style="width:800px;"><canvas id="burndown43"></canvas></div>
    <script>
    showBurnDown (
      "burndown43",
      //   1    2    3    4    5    6    7    8    9   10
      [  25, 35, 100, 100,  0,  240,  0                  ], // burndown data
      [    0,   0,   0,   0,   100,  0,   0,   0,   0,   0   ]  // scope change
    );
    </script>

  </body>
</html>