Updated Atom Builder

A couple of my students asked for worksheets to practice drawing atoms and electron shells. I updated the Atom Builder app to make sure it works and to make the app embedable.

So now I can ask a student to draw ²³Na⁺ then show the what they should get:

Worksheet

Draw diagrams of the following atoms, showing the number of neutrons, protons, and electrons in shells. See the example above.

¹⁴C: answer.
³²K⁺: answer.
¹⁸O^2-: answer.
⁴He²⁺: answer.
³²P^–: answer.

I guess the next step is to adapt the app so you can hide the element symbol so student have to figure what element based on the diagram.

Now that I have a new set of microscopes I didn’t think I would actually need to have an online, simulated microscope to show samples. However, I thought having a series of picture that I could scroll through would be useful to illustrate microscopy concepts such as depth-of-field when I talk about them to the whole class. Once I’d created the depth-of-field simulation, I figured it would not be too much extra trouble to put in a few different magnification levels. Now I have this embeddable online microscope simulator.

It’s started off with a single fly wing as a sample, but I’ll be adding to it as I take more pictures.

Graphing Polynomials

Try it. You can change the order and coefficients of the polynomial. The default is the second order polynomial: y = x².

I originally started putting together this interactive polynomial app to use in demonstrating numerical integration, however it’s a quite useful thing on its own. In fact, I’ve finally figured out how to do iframes, which means that the app is embeddable, so you can use it directly off the Muddle (if you want to put it on your own website you can get the embed code).

This app is a rewritten version of the parabola code, but it uses kineticjs instead of just HTML5 canvases. As a result, it should be much easier to adapt to make it touch/mouse interactive.

Atom Builder

This app lets you drag and drop electrons, protons, and neutrons to create atoms with different charges, elements, and atomic masses. You can also enter the element symbol, charge and atomic mass and it will build the atom for you.

Note, however, it only does the first 20 elements.

Solving Quadratic Equations

So here we have a little grapher that solves quadratic equations visually. Just enter the coefficients in the equation.

[inline]

Quadratic Equation: y = a x² + b x + c

Enter:
y =
x² +
x +

Solution:

Analytical solution by factoring (with a little help from the quadratic equation if necessary).

[script type=”text/javascript”]
var width=500;
var height=500;
var xrange=10;
var yrange=10;

mx = width/(2.0*xrange);
bx = width/2.0;
my = -height/(2.0*yrange);
by = height/2.0;

function draw_9114(ctx, polys) {
t_9114=t_9114+dt_9114;
//ctx.fillText (“t=”+t, xp(5), yp(5));
ctx.clearRect(0,0,width,height);

polys[0].drawAxes(ctx);
ctx.lineWidth=2;
polys[0].draw(ctx);
polys[0].write_eqn(ctx);

//polys[0].y_intercepts(ctx);
polys[0].x_intercepts(ctx);
//write intercepts on graph

ctx.fillText (‘x intercepts: (when y=0)’, xp(9), yp(8));
if (polys[0].x_intcpts.length > 0) {
line = “0 = “;
for (var i=0; i 0.0) { sign=”-“;} else {sign=”+”;}
line = line + “(x “+sign+” “+ Math.abs(polys[0].x_intcpts[i].toPrecision(2))+ “)”;
}
ctx.fillText (line, xp(9), yp(7));
// if (polys[0].order == 2 ) {
// if (polys[0].x_intcpts[0] > 0.0) { sign1=”-“;} else {sign1=”+”;}
// if (polys[0].x_intcpts[1] > 0.0) { sign2=”-“;} else {sign2=”+”;}
// ctx.fillText (‘0 = (x ‘+sign1+” “+Math.abs(polys[0].x_intcpts[0])+”) (x “+sign2+Math.abs(polys[0].x_intcpts[1])+”)”, xp(9), yp(7));
// }
for (var i=0; i2 “+polys[0].bsign+” “+Math.abs(polys[0].b.toPrecision(2))+” x “+ polys[0].csign+” “+Math.abs(polys[0].c.toPrecision(2))+”

“;

solution = solution + ‘Factoring: ‘;

if (polys[0].x_intcpts.length > 0) {
solution = solution + ‘0 = ‘;
for (var i=0; i 0.0) { sign=”-“;} else {sign=”+”;}
solution = solution + “(x “+sign+” “+ Math.abs(polys[0].x_intcpts[i].toPrecision(2))+ “)”;
}
solution = solution + ‘

‘;
solution = solution + ‘Set each factor equal to zero:
‘;
for (var i=0; i 0.0) { sign=”-“;} else {sign=”+”;}
solution = solution + “x “+sign+” “+ Math.abs(polys[0].x_intcpts[i].toPrecision(2))+ ” = 0 “;
}
solution = solution + ‘

and solve for x:
‘;
for (var i=0; i‘;
}
document.getElementById(‘equation_9114’).innerHTML = solution;
}

else if (polys[0].order == 1) {
solution = solution + ‘
‘;
solution = solution + “y = “+” “+Math.abs(polys[0].b.toPrecision(2))+” x “+ polys[0].csign+” “+Math.abs(polys[0].c.toPrecision(2))+”

“;
solution = solution + ‘

Set y=0 and solve for x:
‘;
solution = solution + ” 0 = “+” “+Math.abs(polys[0].b.toPrecision(2))+” x “+ polys[0].csign+” “+Math.abs(polys[0].c.toPrecision(2))+”

“;
solution = solution + ‘ ‘;
solution = solution + (-1.0*polys[0].c).toPrecision(2) +” = “+” “+Math.abs(polys[0].b.toPrecision(2))+” x “+”

“;
solution = solution + ‘ ‘;
solution = solution + (-1.0*polys[0].c).toPrecision(2)+”/”+polys[0].b.toPrecision(2)+” = “+” x “+”

“;
solution = solution + ‘ ‘;
solution = solution + “x = “+ (-1.0*polys[0].c/polys[0].b).toPrecision(4)+”

“;

document.getElementById(‘equation_9114’).innerHTML = solution;
}

}

//init_mouse();

var c_9114=document.getElementById(“myCanvas_9114”);
var ctx_9114=c_9114.getContext(“2d”);

var change = 0.0001;

function create_lines_9114 () {
//draw line
//document.write(“hello world! “);
var polys = [];
polys.push(addPoly(1,6, 5));

// polys.push(addPoly(0.25, 1, 0));
// polys[1].color = ‘#8C8’;

return polys;
}

var polys_9114 = create_lines_9114();

var x1=xp(-10);
var y1=yp(1);
var x2=xp(10);
var y2=yp(1);
var dc_9114=0.05;

var t_9114 = 0;
var dt_9114 = 100;
//end_ct = 0;
var st_pt_x_9114 = 2;
var st_pt_y_9114 = 1;

var move_dir_9114 = 1.0; // 1 for up

var a_coeff_9114 = document.getElementById(“a_coeff_9114″);
a_coeff_9114.value = polys_9114[0].a+””;
var b_coeff_9114 = document.getElementById(“b_coeff_9114″);
b_coeff_9114.value = polys_9114[0].b+””;
var c_coeff_9114 = document.getElementById(“c_coeff_9114″);
c_coeff_9114.value = polys_9114[0].c+””;

//document.write(“test= “+c_coeff_9114.value+” “+polys_9114[0].c);
//setInterval(“draw_9114(ctx_9114, polys_9114)”, dt_9114);
draw_9114(ctx_9114, polys_9114);

a_coeff_9114.onchange = function() {
polys_9114[0].set_a(parseFloat(this.value));
draw_9114(ctx_9114, polys_9114);
}
b_coeff_9114.onchange = function() {
polys_9114[0].set_b(parseFloat(this.value));
draw_9114(ctx_9114, polys_9114);
}
c_coeff_9114.onchange = function() {
polys_9114[0].set_c(parseFloat(this.value));
draw_9114(ctx_9114, polys_9114);
}

[/script]

[/inline]

Hopefully, this can help students learn about factoring and quadratics in a more graphical way.

Notes:

This is my first interactive post. I use Javascript in combination with HTML5. Now I need to figure out how to interact with the image itself, instead of the textboxes.

Category: Interactive