Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!–– JSBIN MASTER COPY /// VOID IF LINE NOT PRESENT /// REMOVE IF CHANGED––>
<!–– Made by Mark Brown for The Construct @ RIT. All rights reserved. DO NOT COPY––>
​
<h3 style="text-align: center;">EARLY ACCESS! Many features may not work for all users.
Please see instructions page for more information.</h3>
​
<h3 style="text-align: center;">An interactive electronics lesson plan builder for teachers
By Mark Brown in partnership with The Construct @ RIT</h3>
​
<div 1d="bin0" padding="-16">
​
<p>The main board:</p>
<div id="bin1">
  
<div id="divNA2"></div>
<div id="divNA2">+</div>
<div id="divNA2"></div>
<div id="divp1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divp2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divp3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divp4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divp5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divNA2"></div>
<div id="divp6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divp7" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divp8" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divp9" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divp10" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
 
<div id="divNA2"></div>
<div id="divNA2">-</div>
<div id="divNA2"></div>
<div id="divg1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divg2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divg3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divg4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divg5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divNA2"></div>
<div id="divg6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divg7" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divg8" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divg9" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divg10" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA"></div>
  
<div id="divNA2">A</div>
<div id="divn1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2">B</div>
<div id="divn2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2">C</div>
<div id="divn3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2">D</div>
<div id="divn4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2">E</div>
<div id="divn5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
​
<div id="divNA"></div>
​
<div id="divNA2">F</div>
<div id="divn6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2">G</div>
<div id="divn7" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2">H</div>
<div id="divn8" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2">I</div>
<div id="divn9" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2">J</div>
<div id="divn10" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
​
<div id="divNA"></div>
​
<div id="divNA2"></div>
<div id="divNA2">+</div>
<div id="divNA2"></div>
<div id="divp11" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divp12" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divp13" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divp14" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divp15" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divNA2"></div>
<div id="divp16" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divp17" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divp18" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divp19" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divp20" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
  
<div id="divNA2"></div>
<div id="divNA2">-</div>
<div id="divNA2"></div>
<div id="divg11" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divg12" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divg13" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divg14" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divg15" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divNA2"></div>
<div id="divg16" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divg17" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divg18" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divg19" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA2"></div>
<div id="divg20" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="divNA"></div>
  
</div>
​
<p>Off the board:</p>
<div id="bin2">
<div id="divo1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
​
</div>
​
<p>Select Parts:</p>
<div id="bin3">
<img id="drag1" src="http://i.imgur.com/KliLtQ6.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)"><img id="drag3" src="http://i.imgur.com/uGvqbbK.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)"><img id="drag6" src="http://i.imgur.com/7Q6ym4O.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)"><img id="drag8" src="http://i.imgur.com/dywyFeu.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)"><img id="drag12" src="http://i.imgur.com/v76St3j.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)"><img id="drag14" src="http://i.imgur.com/vO6a0ae.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)"><img id="drag15" src="http://i.imgur.com/50c1YvW.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)"><img id="drag16" src="http://i.imgur.com/BHn8uyJ.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)"><img id="RED1" src="http://i.imgur.com/By4xvE5.png" draggable="true" ondragstart="drag(event)" align="left"><img id="RED2" src="http://i.imgur.com/By4xvE5.png" draggable="true" ondragstart="drag(event)" align="left"><img id="GREEN1" src="http://i.imgur.com/nFzIajN.png" draggable="true" ondragstart="drag(event)" align="left"><img id="GREEN2" src="http://i.imgur.com/nFzIajN.png" draggable="true" ondragstart="drag(event)" align="left"><img id="BLUE1" src="http://i.imgur.com/dYNAatC.png" draggable="true" ondragstart="drag(event)" align="left"><img id="BLUE2" src="http://i.imgur.com/dYNAatC.png" draggable="true" ondragstart="drag(event)" align="left"><div id="RedLine"></div><div id="GreenLine"></div><div id="BlueLine"></div>
</div>
​
<p>Parts List:</p>
<div id="bin3">
</div>
<p></p>
<input type="button" onclick="printDiv('div0')" value="Print" />
<p></p>
<FORM METHOD="LINK" ACTION="http://hack.rit.edu/index.php/paper-bread-1/">
<INPUT TYPE="submit" VALUE="Instructions">
</FORM>
 
function printDiv(divId) {
    var divToPrint = document.getElementById('bin0');
    var popupWin = window.open('', '_blank', 'width=300,height=300');
    popupWin.document.open();
    popupWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
    popupWin.document.close();
}
var r=document.querySelector("#RedLine");
var red1=document.getElementById("RED1");
var red2=document.getElementById("RED2");
var g=document.querySelector("#GreenLine");
var green1=document.getElementById("GREEN1");
var green2=document.getElementById("GREEN2");
var b=document.querySelector("#BlueLine");
var blue1=document.getElementById("BLUE1");
var blue2=document.getElementById("BLUE2");
var delta=0;
​
function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
    ev.preventDefault();
    var data=ev.dataTransfer.getData("text");
    
    ev.target.appendChild(document.getElementById(data));
    
    if(data=="RED1" || data =="RED2") {
    dot1=red1;
    dot2=red2;
    line=r;    
    }   
    else if(data=="GREEN1" || data =="GREEN2") {
    dot1=green1;
    dot2=green2;
    line=g;   
    }   
    else if(data=="BLUE1" || data =="BLUE2") {
    dot1=blue1
    dot2=blue2;
    line=b;
    }   
    line.style.left=dot1.offsetLeft+5+"px";
    line.style.top=dot1.offsetTop+5+"px";    
    line.style.visibility="visible";
    var Rangle=Math.atan2(dot2.offsetTop-dot1.offsetTop, dot2.offsetLeft-dot1.offsetLeft)*180/Math.PI;
    var Rlength=Math.sqrt((dot2.offsetLeft-dot1.offsetLeft)*(dot2.offsetLeft-dot1.offsetLeft)+(dot2.offsetTop-dot1.offsetTop)*(dot2.offsetTop-dot1.offsetTop));
    line.style.width=Math.abs(Rlength)+"px";    
    line.style.transform="rotate("+Math.round(Rangle)+"deg)";
    line.style.transformOrigin ="0 0";  
}
function rotate90(ele){
  ele.style.webkitTransform="rotate("+delta+"deg)";
  delta+=90;
}
function multiplyNode(node, count, deep) {
    for (var i = 0, copy; i < count - 1; i++) {
        copy = node.cloneNode(deep);
        node.parentNode.insertBefore(copy, node);
    }
}
multiplyNode(document.querySelector("#divp1"), 5, true);
multiplyNode(document.querySelector("#divp2"), 5, true);
multiplyNode(document.querySelector("#divp3"), 5, true);
multiplyNode(document.querySelector("#divp4"), 5, true);
multiplyNode(document.querySelector("#divp5"), 5, true);
multiplyNode(document.querySelector("#divp6"), 5, true);
multiplyNode(document.querySelector("#divp7"), 5, true);
multiplyNode(document.querySelector("#divp8"), 5, true);
multiplyNode(document.querySelector("#divp9"), 5, true);
multiplyNode(document.querySelector("#divp10"), 5, true);
​
multiplyNode(document.querySelector("#divg1"), 5, true);
multiplyNode(document.querySelector("#divg2"), 5, true);
multiplyNode(document.querySelector("#divg3"), 5, true);
multiplyNode(document.querySelector("#divg4"), 5, true);
multiplyNode(document.querySelector("#divg5"), 5, true);
multiplyNode(document.querySelector("#divg6"), 5, true);
multiplyNode(document.querySelector("#divg7"), 5, true);
multiplyNode(document.querySelector("#divg8"), 5, true);
multiplyNode(document.querySelector("#divg9"), 5, true);
multiplyNode(document.querySelector("#divg10"), 5, true);
​
multiplyNode(document.querySelector("#divn1"), 63, true);
multiplyNode(document.querySelector("#divn2"), 63, true);
multiplyNode(document.querySelector("#divn3"), 63, true);
multiplyNode(document.querySelector("#divn4"), 63, true);
multiplyNode(document.querySelector("#divn5"), 63, true);
multiplyNode(document.querySelector("#divn6"), 63, true);
multiplyNode(document.querySelector("#divn7"), 63, true);
multiplyNode(document.querySelector("#divn8"), 63, true);
multiplyNode(document.querySelector("#divn9"), 63, true);
multiplyNode(document.querySelector("#divn10"), 63, true);
​
multiplyNode(document.querySelector("#divp11"), 5, true);
multiplyNode(document.querySelector("#divp12"), 5, true);
multiplyNode(document.querySelector("#divp13"), 5, true);
multiplyNode(document.querySelector("#divp14"), 5, true);
multiplyNode(document.querySelector("#divp15"), 5, true);
multiplyNode(document.querySelector("#divp16"), 5, true);
multiplyNode(document.querySelector("#divp17"), 5, true);
multiplyNode(document.querySelector("#divp18"), 5, true);
multiplyNode(document.querySelector("#divp19"), 5, true);
multiplyNode(document.querySelector("#divp20"), 5, true);
​
multiplyNode(document.querySelector("#divg11"), 5, true);
multiplyNode(document.querySelector("#divg12"), 5, true);
multiplyNode(document.querySelector("#divg13"), 5, true);
multiplyNode(document.querySelector("#divg14"), 5, true);
multiplyNode(document.querySelector("#divg15"), 5, true);
multiplyNode(document.querySelector("#divg16"), 5, true);
multiplyNode(document.querySelector("#divg17"), 5, true);
multiplyNode(document.querySelector("#divg18"), 5, true);
multiplyNode(document.querySelector("#divg19"), 5, true);
multiplyNode(document.querySelector("#divg20"), 5, true);
multiplyNode(document.querySelector("#divo1"), 64, true);
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
McCossumpro
0viewers