Skill: fractions-intro
Equivalent Fraction Visualizer
Type a fraction and see it as a bar, its simplest form, and a family of equivalents — multiply or divide top and bottom by the same number.
Equivalent fraction visualizer
Remember
Multiply or divide the top and bottom by the same number — the value never changes.
/* == PURE (tested by test_tool.js) == */
function tGcd(a, b){ a = Math.abs(a); b = Math.abs(b); while (b){ var t = a % b; a = b; b = t; } return a; }
function tEquivInfo(n, d){
n = Math.round(n); d = Math.round(d);
if (d === 0) return { ok: false, err: 'The denominator cannot be 0.' };
if (d < 0){ n = -n; d = -d; }
var g = tGcd(n, d);
var sn = n / g, sd = d / g;
var fam = [];
for (var k = 2; k <= 5; k++) fam.push({ n: sn * k, d: sd * k, k: k });
return { ok: true, n: n, d: d, sn: sn, sd: sd, g: g, fam: fam, decimal: n / d };
}
/* == /PURE == */
/* == PURE (tested by test_tool.js) == */ function tGcd(a, b){ a = Math.abs(a); b = Math.abs(b); while (b){ var t = a % b; a = b; b = t; } return a; } function tEquivInfo(n, d){ n = Math.round(n); d = Math.round(d); if (d === 0) return { ok: false, err: 'The denominator cannot be 0.' }; if (d < 0){ n = -n; d = -d; } var g = tGcd(n, d); var sn = n / g, sd = d / g; var fam = []; for (var k = 2; k <= 5; k++) fam.push({ n: sn * k, d: sd * k, k: k }); return { ok: true, n: n, d: d, sn: sn, sd: sd, g: g, fam: fam, decimal: n / d }; } /* == /PURE == */
(function(){
'use strict';
function $(id){ return document.getElementById(id); }
function bar(n, d, w){
w = w || 420;
var h = '';
for (var i = 0; i < d; i++){
h += '
' + r.err + '
'; return; } var h = '
' + r.n + '/' + r.d + '
' + bar(r.n, r.d); h += '
'; h += '
Equivalent family
| × | Equivalent | Bar |
|---|---|---|
| ×' + f.k + ' | ' + f.n + '/' + f.d + ' | ' + bar(f.n, f.d, 160) + ' |
'; } $('calcBtn').addEventListener('click', render); render(); })();