bug-zap

bug.js

var width = 960,
    height = 500

var svg = d3.select('#bugs').append('svg')
    .attr({width: width, height: height})
    .style({position: 'absolute', top: '0px'})



var bugs = [
  { img: 'bug.svg',
    pos: [width*.01, height*.05],
    wrong: 'var salesPlusFour = "4" + sales;',
    right: 'var salesPlusFour = 4 + sales;'},
  { img: 'bug.svg',
    pos: [width*.75, height*.05],
    wrong: 'for (var i = 0; i < 10 i++)',
    right: 'for (var i = 0; i < 10; i++)'},
  { img: 'bug.svg',
    pos: [width*.75, height*.75],
    wrong: 'if (newBug == oldBug)',
    right: 'if (newBug === oldBug)'},
  { img: 'bug.svg',
    pos: [width*.02, height*.75],
    wrong: 'var total += currentValue',
    right: 'var total = +currentValue'},
  { img: 'bug.svg',
    pos: [width*.50, height*.50],
    wrong: 'isBetween = min < next < max',
    right: 'isBetween = min < next && next < max'},
  { img: 'bug.svg',
    pos: [width*.0, height*.4],
    wrong: 'var x = Math.Sin(θ)',
    right: 'var x = Math.sin(θ)'},
  { img: 'bug.svg',
    pos: [width*.40, height*.10],
    wrong: 'obj.function()',
    right: 'obj && obj.function && obj.function'},
]

bugs.forEach(function(d){
  d.correct = false
  d.img = 'bug.svg'
  d.t = Math.random()
  d.visable = false
  d.spawned = false
})

function addBug(d, prev){
  if (!d || d.visable) return

  d.visable = true

  d.div = d3.select('#bugs').append('div.bug')

  d.imgEl = d.div.append('img.bug-img').attr('src', d.img)

  d.qcontainer = d.div.append('div.q-container')
  d.qcontainer
    .dataAppend(_.shuffle([d.right, d.wrong]), 'div.awnser')
      .text(ƒ())
      .on('click', function(e){
        if (d.correct) return

        if (d.right == e){
          d.correct = true
          d.imgEl.transition().delay(300).style('opacity', .3)
          d3.select(this).style('color', 'green')
          d.div.classed('correct', true)

          svg.append('g').dataAppend([[Math.random()*width, 0], [0, Math.random()*height]], 'path.lazer')
              .attr('d', function(e){ return ['M', e, 'L', e].join('') })
              .style({'stroke-width': 1, stroke: 'yellow'})
            .transition().duration(400)
              .attr('d', function(e){ return ['M', e, 'L', [d.pos[0] + 150, d.pos[1] + 50]].join('') })
              .style({'stroke-width': 8, stroke: 'green'})
            .transition()
              .style('opacity', 0)
              .style('stroke-width', 50)

        } else{
          addBug(bugs.filter(_.negate(ƒ('visable')))[0], d)
          d3.select(this).style('color', 'red')
        }
      })


  if (prev && prev.pos){
    d.qcontainer.style('opacity', 0)
    d.imgEl.style('width', '0px')
      .transition().duration(800)
        .style('width', '100px')
    d.div.call(posAt, prev.pos)
      .transition().duration(1000).ease('cubic')
        .call(posAt, d.pos)
        .each('end', function(){
          d.qcontainer.transition().style('opacity', 1)
        })
    //todo - hide questions, till pos is done, scale bug size
  } else{
    d.div.call(posAt, d.pos) 
  }

}
addBug(bugs[0])
addBug(bugs[1])
addBug(bugs[2])


d3.timer(function(t){
  bugs.forEach(function(d){
    if (d.correct || !d.visable) return
    d.imgEl
      .style('-webkit-transform', 'rotate(' + Math.sin(t/500 + d.t*500)*30 + 'deg)') 
      .style('padding-left', Math.sin(t/743 + d.t*500)*60 + 'px') 
      .style('padding-top', Math.sin(t/343 + d.t*700)*20 + 'px') 
  })
})


function posAt(sel, pos){
  sel .style('left', pos[0] + 'px')
      .style('top' , pos[1] + 'px')
}

bug.svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="512px" height="553.861px" viewBox="0 0 512 553.861" enable-background="new 0 0 512 553.861" xml:space="preserve">
<path d="M376.889,0c19.639,0,35.556,15.917,35.556,35.556c0,19.639-15.917,35.556-35.556,35.556l-9.041-1.16l-32.82,42.007
	c22.64,16.292,42.306,39.375,57.542,67.278c-38.861,12.541-85.902,19.875-136.569,19.875c-50.674,0-97.708-7.334-136.569-19.875
	c14.729-26.973,33.59-49.438,55.277-65.625l-33.597-43c-1.951,0.326-3.951,0.5-6,0.5c-19.639,0-35.556-15.917-35.556-35.556
	C99.556,15.917,115.473,0,135.111,0s35.556,15.917,35.556,35.556c0,7.139-2.104,13.784-5.723,19.354l34.194,43.764
	c17.785-8.639,36.924-13.341,56.861-13.341c18.973,0,37.223,4.257,54.264,12.111l35.264-45.125c-2.68-5-4.194-10.701-4.194-16.764
	C341.333,15.917,357.25,0,376.889,0z M490.667,298.667c11.777,0,21.333,9.556,21.333,21.333s-9.556,21.333-21.333,21.333h-64.694
	c-1.015,15.431-3.111,30.417-6.195,44.848l75.236,35.069c10.681,4.986,15.292,17.681,10.319,28.361
	c-4.972,10.666-17.666,15.291-28.347,10.319l-69.292-32.319c-26.306,70-77.5,119.444-137.472,126.25v-326.5
	c50.36-1.375,96.583-10,134.027-23.694l2.777,6.931l72.695-27.91c11-4.223,23.333,1.271,27.555,12.271
	c4.223,11-1.277,23.341-12.277,27.562l-75.694,29.062c3.333,15.104,5.611,30.861,6.667,47.084H490.667z M21.333,298.667h64.694
	c1.062-16.223,3.327-31.979,6.674-47.084l-75.708-29.062c-11-4.222-16.493-16.562-12.271-27.562s16.562-16.493,27.562-12.271
	l72.695,27.91l2.771-6.931c37.438,13.694,83.667,22.319,134.027,23.694v326.5c-59.979-6.806-111.166-56.25-137.479-126.25
	l-69.285,32.319c-10.68,4.986-23.375,0.347-28.354-10.319c-4.979-10.681-0.354-23.375,10.319-28.361l75.236-35.069
	c-3.076-14.431-5.173-29.417-6.188-44.848H21.333C9.549,341.333,0,331.777,0,320S9.549,298.667,21.333,298.667z"/>
</svg>

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body{
  width: 960px;
  height: 500px;
  font-family: monospace;
}

#bugs{
	position: relative;
}

.bug{
	width: 300px;
	position: absolute;
}

.bug-img{
	width: 100px;
	display:block;
	margin:auto;
	height: 108px;
}

.q-container div{
	border: 1px solid black;
	padding: 5px;
	margin-top: 5px;
	cursor: pointer;
}
.correct .q-container div{
	border: 1px solid lightgrey;
	color: lightgrey;
}

.lazer{
}

#bug svg{
	pointer-events: none;
}

</style>

<body>
	<div id='bugs'></div>
</body>


<script src="/1wheel/raw/67b47524ed8ed829d021/d3-3.5.5.js"></script>
<script src="/1wheel/raw/67b47524ed8ed829d021/lodash-3.8.0.js"></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-jetpack.js'></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-starterkit.js'></script>


<script src='bug.js'></script>

preview.png

thumbnail.png