#4D4D4D

$\text{Check}$

$\text{NEW BOXES}$

No selection allowed for all input boxes

Fix position and allow selection for all text objects

Empty all input boxes

$\textsf{Number of marbles: }\vphantom{b}$

Reset app

#006758

#B00020

#252525

#757575

#949494

#E44461

#DA2570

#E66B9E

#3A6ED6

#5991FF

#008475

#0F8538

#00a83c

#5145A8

#6557D2

#8575FF

#903D14

#BD6C43

#C75000

#E07415

#eeeeee

#2E006758

#2EB00020

animate

animate End

RESET

input1saved = NaN
countQuestion = 0
randomList1 = Shuffle({1, 2, 3, 1, 2, 3})
randomNum1 = Element(randomList1, Mod[countQuestion, Length[randomList1]] + 1)
factor: randomNum1
randomList3 = Shuffle({2, 3, 4, 2, 3, 4})
randomNum3 = Element(randomList3, Mod[countQuestion, Length[randomList3]] + 1)
den: randomNum3
marblesBox: (factor * den)
delay: 5
randomList2 = Shuffle({0, 0, 0, 0, 1, 1, 2, 2})
randomNum2 = Element(randomList2, Mod[countQuestion, Length[randomList2]] + 1)
whole: randomNum2
num = Random(1, den - 1)
marblesTotal: (factor * ((whole * den) + num))
numBoxes: ceil(marblesTotal / marblesBox)
totalSlots: (numBoxes * marblesBox)
input1 = NaN
timeOrange = If(Defined[input1], Min[input1, totalSlots + 1] + 1, 1)
timePurple = Max(timeOrange, marblesTotal + 1)
time = 0 (slider from 0 to 100, step 0.01)
timeFading: timePurple + If[numBoxes ≟ 1 ∧ input1 ≤ marblesBox, 0, delay]
step(x, y) = If[y < x, 0, y > x + 1, 1, y - x]
A = (9.6654202968023, 1.6935732231507818)
widthReference: marblesBox + (0.2 * (marblesBox + 1))
heightReference: ((whole + 1) * 1.4) + (whole * 0.4)
ratioReference: heightReference / widthReference
C1 = (-5.331368818321063, 0.5676162129098904)
C3 = (4.538722420386326, 7.730619320612583)
C2: (x(C3), y(C1))
C4: (x(C1), y(C3))
ratioPic: Distance[C1, C4] / Distance[C1, C2]
radius = Min(2, If[ratioPic > ratioReference, Distance[C1, C2] / widthReference, Distance[C1, C4] / heightReference])
widthBox: (radius * widthReference)
ExtraCenter: (x(Midpoint[C1, C3]) - widthBox / 2 + (0.9 * radius) + ((radius * 1.2) * marblesBox), y(Midpoint[C1, C3]) - (radius * heightReference / 2) + (0.2 * radius) + radius / 2)
centers = Sequence((x(Midpoint[C1, C3]) - widthBox / 2 + (0.7 * radius) + ((radius * 1.2) * (n - 1)), y(Midpoint[C1, C3]) - (radius * heightReference / 2) + (0.2 * radius) + radius / 2), n, 1, marblesBox)
centersWhole = Flatten(Sequence[Sequence[(x(Midpoint[C1, C3]) - widthBox / 2 + (0.7 * radius) + ((radius * 1.2) * (n - 1)), y(Midpoint[C1, C3]) - (radius * heightReference / 2) + (0.2 * radius) + radius / 2 + ((T * 1.8) * radius)), n, 1, marblesBox], T, whole, 1, -1])
centersTotal = Flatten({centersWhole, centers, {ExtraCenter}})
marblesAnimTotal = Sequence(Circle[FromTo[A, Element[centersTotal, k], step(k, time)], radius / 2], k, input1 + 1, marblesTotal)
goalOpac: 0.4
correct: input1saved ≟ marblesBox
animStep = If(time ≤ 1, 0, time ≤ timeOrange, 1, time ≤ timePurple, 2, time ≤ timeFading, 3, 4)
marblesAnimSt = Sequence(Circle[FromTo[A, Element[centersTotal, k], step(k, time)], radius / 2], k, 1, Min[input1, (numBoxes * marblesBox) + 1])
timeOld = 9.4 (slider from 0 to 10, step 0.01)
timeStepTotal: (timeOld / 10 * timePurple)
textFractionTotal: "\[" + (LaTeX[If[whole > 0, (whole * ""), ""]]) + "\frac{" + (LaTeX[num]) + "}{" + (LaTeX[den]) + "}\]"
InputBox1 = Textfield(input1)
showbuttons = true
pixelsRight: 16
pixelsLeft: 16
pixelsBottom: 16
pixelsTop: 24
borderBox = Polygon(Zip[PixelsToPoint[Corner[1], Corner[3], Corner[5], A], A, {(pixelsLeft, pixelsTop), (pixelsLeft, y(Corner[5]) - pixelsBottom), Corner[5] - (pixelsRight, pixelsBottom), (x(Corner[5]) - pixelsRight, pixelsTop)}])
gapInner: 0.2
heightBox: (radius * heightReference)
boxes = Sequence(Polygon[{(x(Midpoint[C1, C3]) - widthBox / 2, y(Midpoint[C1, C3]) + (((n * 1.8) - heightReference / 2) * radius)), (x(Midpoint[C1, C3]) + widthBox / 2, y(Midpoint[C1, C3]) + (((n * 1.8) - heightReference / 2) * radius)), (x(Midpoint[C1, C3]) + widthBox / 2, y(Midpoint[C1, C3]) + (radius * (1.4 + (1.8 * n) - heightReference / 2))), (x(Midpoint[C1, C3]) - widthBox / 2, y(Midpoint[C1, C3]) + (((1.8 * n) + 1.4 - heightReference / 2) * radius))}], n, 1, whole)
boxUnused = Polygon({(x(Midpoint[C1, C3]) - widthBox / 2 + ((0.1 + ((num * factor) * 1.2)) * radius), y(Midpoint[C1, C3]) + (((-heightReference)) / 2 * radius)), (x(Midpoint[C1, C3]) + widthBox / 2, y(Midpoint[C1, C3]) + (((-heightReference)) / 2 * radius)), (x(Midpoint[C1, C3]) + widthBox / 2, y(Midpoint[C1, C3]) + (radius * (1.4 - heightReference / 2))), (x(Midpoint[C1, C3]) - widthBox / 2 + ((0.1 + ((num * factor) * 1.2)) * radius), y(Midpoint[C1, C3]) + ((1.4 - heightReference / 2) * radius))})
speed: 0.3
brace = Segment((x(Midpoint[C1, C3]) - widthBox / 2 + ((0.1 + ((num * factor) * 1.2)) * radius), y(Midpoint[C1, C3]) + (((-heightReference)) / 2 * radius) - 0.5), (x(Midpoint[C1, C3]) - widthBox / 2, y(Midpoint[C1, C3]) + (((-heightReference)) / 2 * radius) - 0.5))
labelBrace: "\textsf{\[\frac{" + (LaTeX[num]) + "}{" + (LaTeX[den]) + "}\] box}"
labelBracePos = Midpoint(brace)
textTooMany: "\text{" + (LaTeX[input1]) + " marbles do not fit\\\\\\in 1 box.}"
textNotEnough: "\text{" + (LaTeX[input1]) + " marble" + (LaTeX[If[input1 ≟ 1, "", "s"]]) + " " + (LaTeX[If[input1 ≟ 1, "is", "are"]]) + " not \\\\\\enough to fill 1 box.}"
textOK: "\text{" + (LaTeX[input1]) + " marbles fit perfectly \\\\\\in 1 box. Well done!}"
timeStep: (timeOld / 10 * timeOrange)
marblesAnim = Sequence(Circle[FromTo[A, Element[Join[{centers, Sequence[A, p, 1, input1 - marblesBox]}], k], step(k, timeStep)], radius / 2], k, 1, input1)
animatingOrange: animStep ≟ 1
shadowedBoxes = Take(boxes, 1, Length[boxes] - 1)
textDivision: "\[" + (LaTeX[marblesTotal]) + "\div " + (LaTeX[textFractionTotal]) + "" + (LaTeX[If[correct, "=", "\neq"]]) + "" + (LaTeX[input1]) + "\]"
marblesWhole = Zip(Circle[P, radius / 2], P, centersWhole)
marblesMissing = Sequence(Circle[Element[Join[{centers, Sequence[A, p, 1, input1 - marblesBox]}], k], radius / 2], k, input1 + 1, marblesBox)
solutionBox: boxes(Length[boxes])
boxUncomplete = Polygon({(x(Midpoint[C1, C3]) - widthBox / 2, y(Midpoint[C1, C3]) + (((-heightReference)) / 2 * radius)), (x(Midpoint[C1, C3]) - widthBox / 2 + ((0.1 + ((num * factor) * 1.2)) * radius), y(Midpoint[C1, C3]) + (((-heightReference)) / 2 * radius)), (x(Midpoint[C1, C3]) - widthBox / 2 + ((0.1 + ((num * factor) * 1.2)) * radius), y(Midpoint[C1, C3]) + ((1.4 - heightReference / 2) * radius)), (x(Midpoint[C1, C3]) - widthBox / 2, y(Midpoint[C1, C3]) + ((1.4 - heightReference / 2) * radius))})
centersNotTop = Take(centersTotal, marblesBox + 1, Length[centersTotal])
marblesMissingTotal = Sequence(Circle[Element[centersTotal, k], radius / 2], k, input1 + 1, (marblesBox * numBoxes))
fadingOpac = If(animStep < 3, 0, animStep > 3, goalOpac, ((time - timePurple) * goalOpac / (timeFading - timePurple)))
animatinPurple: animStep ≟ 3
showsolution: animStep ≥ 3
fading = Zip(Circle[P, radius / 2], P, centersNotTop)
textFeedback: "\text{" + (LaTeX[textDivision]) + ", so\\" + (LaTeX[If[correct, textOK, input1 < marblesBox, textNotEnough, textTooMany]]) + "}"
textSolution: "\text{" + (LaTeX[marblesBox]) + " marbles fit perfectly\\\\\\in 1 box. Well done!}"
validate: animStep > 0 ∧ (animStep < 4 ∨ correct)
labelBtnValidate: "\text{FILL BOX" + (LaTeX[If[numBoxes > 1, "ES", ""]]) + "}"
textQuestion: "\text{If " + (LaTeX[marblesTotal]) + " " + (LaTeX[If[marblesTotal ≟ 1, "marble fills", "marbles fill"]]) + " \[" + (LaTeX[textFractionTotal]) + "\] box" + (LaTeX[If[whole ≟ 0, "", "es"]]) + ", how many marbles would fill 1 box?} "
Appsize = Corner(5)
enableBtnValidate: Defined[input1] ∧ input1 ≠ input1saved ∧ animStep ≟ 0
enableBtnReset: Defined[input1] ∧ input1 ≠ input1saved ∧ animStep ≟ 0 ∨ animStep ≟ 4

Tool: PixelsToPoint
PixelsToPoint(Corner1,Corner3,Corner5,PixelCoords)
Input: Corner1, Corner3, Corner5, InputPixels
Output: OutputPoint

InputPixels: (100, 200)
xRight: x(Corner3)
xLeft: x(Corner1)
yTop: y(Corner3)
yBottom: y(Corner1)
yCoord: yTop - (y(InputPixels) / y(Corner5) * (yTop - yBottom))
xCoord: (x(InputPixels) / x(Corner5) * (xRight - xLeft)) + xLeft
OutputPoint: (xCoord, yCoord)

Tool: PixelsToPoint (command PixelsToPoint1)
PixelsToPoint(Corner1,Corner3,Corner5,PixelCoords)
Input: Corner1, Corner3, Corner5, InputPixels
Output: OutputPoint

InputPixels: (100, 200)
xRight: x(Corner3)
xLeft: x(Corner1)
yTop: y(Corner3)
yBottom: y(Corner1)
yCoord: yTop - (y(InputPixels) / y(Corner5) * (yTop - yBottom))
xCoord: (x(InputPixels) / x(Corner5) * (xRight - xLeft)) + xLeft
OutputPoint: (xCoord, yCoord)

Tool: FromTo
(start,end,slider)
Input: A, B, t
Output: P

P: A + (t * (B - A))