Last active
August 21, 2016 06:37
-
-
Save 1wheel/12bdfef9ef07cf9ee39c to your computer and use it in GitHub Desktop.
bug-zap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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') | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment