29:null 2a:["$","title",null,{"children":"Standard Addition Algorithm | Charles Redmond | Observable"}] 2f:T553,addColumn = async (element,a,col,rows,cl) => { const sum = a.arr.map(d => parseInt(d[col].text())).reduce((a,b)=>a+b) + a.carry[col] const ones = sum%10 const tens = Math.floor(sum/10) let onesText = element.append("text").attr("class",cl) let tensText = element.append("text").attr("class",cl) if(tens == 0){ onesText .attr("x",col*10+5) .attr("y",rows*15+3) .text(`${ones}`) .attr("font-size",10) .attr("fill","cornflowerblue") await onesText.transition().duration(500).ease(d3.easeLinear).attr("font-size",15).attr("x",col*10).end() }else{ tensText .attr("x",col*10) .attr("y",rows*15+3) .text(`${tens}`) .attr("font-size",10) .attr("fill","cornflowerblue") onesText .attr("x",col*10+5) .attr("y",rows*15+3) .text(`${ones}`) .attr("font-size",10) .attr("fill","cornflowerblue") if(col!=0){ tensText.transition().duration(500).ease(d3.easeLinear).attr("y",-15).attr("font-size",15).attr("x",(col-1)*10).attr("fill","tomato") a.carry[col-1] = tens }else{ tensText.transition().duration(500).ease(d3.easeLinear).attr("font-size",15).attr("x",(col-1)*10) } await onesText.transition().duration(500).ease(d3.easeLinear).attr("font-size",15).attr("x",col*10).end() } return }30:[] 2d:{"id":"6f1f9a129c6621dc","slug":"standard-addition-algorithm","title":"Standard Addition Algorithm","thumbnail":"9566bed4008572d8605e864f95aa3417af3222611c0957beab642f6156c8d873","access_level":"public","create_time":"$D2020-06-29T14:16:06.270Z","update_time":"$D2020-06-29T21:53:50.961Z","view_time":null,"first_public_time":"$D2020-06-30T16:06:15.637Z","has_unpublished_edits":null,"fork":false,"stars":15,"starred":false,"owner":{"type":"team","id":"66151b62b45d9fca","login":"credmond","name":"Charles Redmond","avatar_url":"https://avatars-next.observableusercontent.com/50425ed9f407a7b47d1c471a09963f335e0652ab9acc237869e2d7949fb04a77","tier":"starter_2024"},"version":278,"publish_version":278,"role":null,"authored":false,"authors":[{"type":"individual","id":"37a987477e8b6db3","login":"credmond","name":"Charles Redmond","avatar_url":"https://avatars-next.observableusercontent.com/50425ed9f407a7b47d1c471a09963f335e0652ab9acc237869e2d7949fb04a77","tier":null}],"members":[{"type":"individual","id":"37a987477e8b6db3","login":"credmond","name":"Charles Redmond","avatar_url":"https://avatars-next.observableusercontent.com/50425ed9f407a7b47d1c471a09963f335e0652ab9acc237869e2d7949fb04a77","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"09ba641f1657743c","slug":"arithmetic-algorithms","title":"Arithmetic Algorithms","owner":{"id":"66151b62b45d9fca","login":"credmond","name":"Charles Redmond"}},"type":"notebook","body":{"title":"Standard Addition Algorithm","cells":[{"id":0,"value":"md`# Standard Addition Algorithm`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"html`Click the white square to solve the problem step by step. Keep clicking to see it again.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"html`

Two Columns

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"viewof b = button({value:\"new problem\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"{\n b\n const svgDims = [430,400]\n const svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n const group = svg.append(\"g\").attr(\"transform\",`translate(150,150) scale(5)`)\n const a = makeArray(group,2,2)\n let count = 0\n \n svg.on(\"click\",function(){\n if(count==0){d3.selectAll(\".ans\").remove()}\n addColumn(group,a,1-count,2,\"ans\")\n count = (count+1)%2\n })\n \n\n \n\n yield svg.node()\n \n\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"html`

Three Columns

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"viewof b1 = button({value:\"new problem\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"{\n b1\n const svgDims = [430,400]\n const svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n const group = svg.append(\"g\").attr(\"transform\",`translate(150,150) scale(5)`)\n const a = makeArray(group,2,3)\n let count = 0\n \n svg.on(\"click\",function(){\n if(count==0){d3.selectAll(\".ans2\").remove()}\n addColumn(group,a,2-count,2,\"ans2\")\n count = (count+1)%3\n })\n \n\n \n\n yield svg.node()\n \n\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"html`

Variables and Code

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"makeArray = (element,rows,columns) => {\n const arr = []\n const carry = []\n for(let i = 0; i < rows; i++){\n const row = []\n let n\n for(let j = 0; j < columns; j++){\n if(j == 0){\n n = Math.floor(Math.random()*9) + 1\n }else{\n n = Math.floor(Math.random()*10)\n }\n const d = element.append(\"text\")\n .attr(\"x\",10*j)\n .attr(\"y\",15*i)\n .text(`${n}`)\n row.push(d)\n }\n arr.push(row)\n }\n for(let j = 0; j < columns; j++){\n carry.push(0)\n }\n element.append(\"line\")\n .attr(\"x1\",-13)\n .attr(\"y1\",15*rows-10)\n .attr(\"x2\",10*columns)\n .attr(\"y2\",15*rows-10)\n .attr(\"stroke\",\"black\")\n element.append(\"text\")\n .attr(\"x\",-13)\n .attr(\"y\",15*(rows-1))\n .text(`+`)\n return {arr:arr,carry:carry}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"html`

Libraries

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"