VGL Guide — Arithmetic
Estimated reading time: 1 minutes.
Arithmetic
Simple equations as diagrams, built for a kids' maths game: numbers, the four operators, and an Equals node that checks them. Deliberately small — no chaining of operators and no variables.
Node types
Number— a value, given or filled in as a candidate answerPlus,Minus,Times,Divide— takes two operands and produces a resultEquals— asserts that everything connected to it, plus its own label if it has one, shares one value. Green and showing the value when they agree, red and showing what is wrong when they don't, neutral while incomplete.
Edge types — for each operator, a first operand, a second operand and a result: plus_first_operand, plus_second_operand (Number → Plus) and
plus_result (Plus → Equals), and likewise minus_…, times_… and
divide_…. Both operand edges join the same pair of types, so these are always named. More than one of each on an operator is an error.
vgraph arithmeticRightAndWrong: Arithmetic "Right and Wrong" {
node two: Number "2";
node five: Number "5";
node three: Number "3";
node four: Number "4";
node plusOp: Plus;
node timesOp: Times;
// Each Equals carries the expected answer as its label.
node eqPlus: Equals "7";
node eqTimes: Equals "11";
// 2 + 5 = 7 — correct, shows "= 7" in green
edge two -> plusOp: plus_first_operand;
edge five -> plusOp: plus_second_operand;
edge plusOp -> eqPlus: plus_result;
// 3 × 4 is 12, but 11 was expected — shows "12 ≠ 11" in red
edge three -> timesOp: times_first_operand;
edge four -> timesOp: times_second_operand;
edge timesOp -> eqTimes: times_result;
}
The editor's Arithmetic — Right and Wrong adds subtraction and division.
Home