don't allow 4 or 5, so that the distance from the initial starting place of 500 will be large.

showhinttypicalerror ∧ (tries ≟ 2 ∨ currentBar ≟ saveBar)

Sequence(Element(randomHundreds, Mod(countQuestion + currentOffset + A, Length(randomHundreds)) + 1) * 100 + 10 * Element(randomTens, Mod(countQuestion + A, Length(randomTens)) + 1), A, 0, 4)

#006758

#E07415

#C75000

#a0fff4

#4D4D4D

$\text{NEW PROBLEM}$

Reset app

#B00020

#252525

#757575

#949494

#E44461

#DA2570

#E66B9E

#3A6ED6

#5991FF

#008475

#0F8538

#00a83c

#5145A8

#6557D2

#8575FF

#903D14

#BD6C43

#eeeeee

#2E006758

#2EB00020

\text{Make a cityscape by\constructing a bar graph\
that matches the table.}

\text{\hspace{52px}Drag up or down}

\text{Height (ft)}

\text{\bold{Solution}\Building heights are shown\on the graph.}

$\textsf{SHOW ME}$

randomTens = Shuffle({0, 5, 0, 5, 0, 5, 0, 5})
randomOffsets = Shuffle(Sequence[100])
randomHundreds = Shuffle({3, 6, 7, 8, 9})
inputChanged = false
inputSaved: {NaN, NaN}
onboarding = true
Bar1a = (30, 500)
Bar5a = (1062, 500)
Bar4a = (804, 500)
Bar3a = (546, 500)
Bar2a = (288, 500)
inputCurrent: {y(Bar1a), y(Bar2a), y(Bar3a), y(Bar4a), y(Bar5a)}
saveBar = 1
tries = 0
showhinttypicalerror = false
currentBar = 0
showGraphicHint = false
countQuestion = 0
currentOffset = Element(randomOffsets, Mod[countQuestion, Length[randomOffsets]] + 1)
expectedHeights = Sequence((Element[randomHundreds, Mod[countQuestion + currentOffset + A, Length[randomHundreds]] + 1] * 100) + (10 * Element[randomTens, Mod[countQuestion + A, Length[randomTens]] + 1]), A, 0, 4)
tolerance: 10
correct2: abs(y(Bar2a) - expectedHeights(2)) ≤ tolerance
correct3: abs(y(Bar3a) - expectedHeights(3)) ≤ tolerance
correct4: abs(y(Bar4a) - expectedHeights(4)) ≤ tolerance
correct5: abs(y(Bar5a) - expectedHeights(5)) ≤ tolerance
correct1: abs(y(Bar1a) - expectedHeights(1)) ≤ tolerance
enableBtnValidate: (¬onboarding) ∧ inputChanged
displayX: (("\textcolor{#B00020}{" * If[enableBtnValidate, "", "X"]) * "}")
showhint = false
pixelGap: 7
pulsing = 0.7 (slider from 0 to 1, step 0.1)
validate = false
showsolution = false
names: {"Guerrero", "Patel", "Turner", "Byrd", "Romero"}
gap: 30
maxX: 1320
barWidth: (maxX - gap) / 5 - gap
maxY: 1000
barPositions = Sequence({gap + (A * (barWidth + gap)), gap + (A * (barWidth + gap)) + barWidth}, A, 0, 4)
pixelsRight: 16
pixelsLeft: 16
pixelsBottom: 16
pixelsTop: 24
Bar2b = (516, 500)
Bar3b = (774, 500)
Bar4b = (1032, 500)
Bar1b = (258, 500)
Bar5b = (1290, 500)
bar1 = twoPointBox(Bar1a, Bar1b)
bar2 = twoPointBox(Bar2a, Bar2b)
bar3 = twoPointBox(Bar3a, Bar3b)
bar4 = twoPointBox(Bar4a, Bar4b)
bar5 = twoPointBox(Bar5a, Bar5b)
correct: correct1 ∧ correct2 ∧ correct3 ∧ correct4 ∧ correct5
minHeight: 100
buildingColor: {59 / 255, 28 / 255, 50 / 255}
row1 = Zip((("\text{" * A) * "}"), A, Append["\textbf{Building}", names])
row2 = Append("\textbf{Height (ft)}", Sequence[If[B ≟ currentBar, (((("\cellcolor{" * colorOrange) * "}\textcolor{white}{") * expectedHeights(B)) * "}"), ("" * expectedHeights(B))], B, 1, 5])
dataTable = TableText(row1, row2, "|_vc")
window1 = Polygon({(0, 0), (0, gap), (gap, gap), (gap, 0)})
window3 = Polygon({(0, 0), (0, gap), (barWidth - (2 * gap), gap), (barWidth - (2 * gap), 0)})
window2 = Polygon({(0, 0), (0, gap), ((barWidth - (2 * gap)) / 2, gap), ((barWidth - (2 * gap)) / 2, 0)})
questionNumbersY = Zip(Text[("" * A), (0, 0) + (0, A), true, true, -1, 0], A, Sequence[A, A, 100, maxY, 100])
axes: {Segment[(0, 0), (0, maxY)], Segment[(0, 0), (maxX, 0)]}
pulsingDistance: (pulsing * pixelsToDistanceX[pixelGap, Corner[1], Corner[3], Corner[5]])
pulsingBar = Polygon(expandQuad[(x(Bar1a), 0), (x(Bar1b), 0), Bar1b, Bar1a, pulsingDistance])
speed: 8
textFeedback: "" + (LaTeX[If[correct, "$\text{✓ Correct}$", "$\text{✕ " + (If[tries < 3, "Try again", "Maybe next time"]) + "}$"]]) + ""
countCorrect = 0
lblBtnValidate: "\text{CHECK (" + (LaTeX[3 - tries]) + ")}"
isTypicalError: ¬correct
showanswer = false
showbuttons: true
name1 = Text(names(1), ((barPositions(1, 1) + barPositions(1, 2)) / 2, 0), false, true, 0, -1)
name2 = Text(names(2), ((barPositions(2, 1) + barPositions(2, 2)) / 2, 0), false, true, 0, -1)
name3 = Text(names(3), ((barPositions(3, 1) + barPositions(3, 2)) / 2, 0), false, true, 0, -1)
name4 = Text(names(4), ((barPositions(4, 1) + barPositions(4, 2)) / 2, 0), false, true, 0, -1)
name5 = Text(names(5), ((barPositions(5, 1) + barPositions(5, 2)) / 2, 0), false, true, 0, -1)
textHint: "\text{\textbf\textcolor{" + (LaTeX[colorOrange]) + "}{Hint}\\\\Slide the bars to match \\the heights shown.}"
correctColor: {0 / 255, 132 / 255, 117 / 255}
colorB1 = If(correct1, correctColor, buildingColor)
colorB2 = If(correct2, correctColor, buildingColor)
colorB3 = If(correct3, correctColor, buildingColor)
colorB4 = If(correct4, correctColor, buildingColor)
colorB5 = If(correct5, correctColor, buildingColor)
windowsByrd = Zip(Translate[window1, (x(Bar4a) + A, If[B < If[showsolution, expectedHeights(4), y(Bar4a)] - gap, B, 5000])], A, {barWidth - (2 * gap), barWidth - (2 * gap), barWidth - (2 * gap), gap, (barWidth + gap) / 2}, B, {300, 350, 400, 600, 800})
windowsGuerrero = Zip(Translate[C, (x(Bar1a) + A, If[B < If[showsolution, expectedHeights(1), y(Bar1a)] - gap, B, 5000])], A, {gap, gap, barWidth - (2 * gap), (barWidth + gap) / 2, gap}, B, {250, 300, 600, 600, 800}, C, {window2, window3, window1, window1, window1})
windowsPatel = Zip(Translate[window1, (x(Bar2a) + A, If[B < y(Bar2a) - gap, B, 5000])], A, {barWidth - (3 * gap), gap, barWidth - (2 * gap), barWidth / 2 + gap, gap}, B, {200, 300, 600, 800, 900})
windowsRomero = Zip(Translate[C, (x(Bar5a) + A, If[B < If[showsolution, expectedHeights(5), y(Bar5a)] - gap, B, 5000])], A, {barWidth / 2, gap, barWidth - (2 * gap), barWidth - (2 * gap), (barWidth + gap) / 2}, B, {150, 200, 500, 700, 700}, C, {window2, window3, window1, window1, window1})
windowsTurner = Zip(Translate[C, (x(Bar3a) + A, If[B < If[showsolution, expectedHeights(3), y(Bar3a)] - gap, B, 5000])], A, {gap, barWidth - (4 * gap), barWidth / 2 + gap, gap, barWidth - (2 * gap)}, B, {200, 200, 400, 600, 800}, C, {window2, window2, window1, window1, window1})
colorSoln = If(¬showsolution, {199 / 255, 80 / 255, 0}, {0, 103 / 255, 88 / 255})
HintStart: (x(Element[{Bar1a, Bar2a, Bar3a, Bar4a, Bar5a}, currentBar]) - gap, expectedHeights(currentBar))
GradientAnchor: HintStart + (0, -1000)
setupMode = false
showChecks = Zip(A ≟ B, A, inputSaved, B, expectedHeights)
layoutX: 325
layoutY: 448
horizGrids = Sequence(Segment[(0, A), (maxX, A)], A, 0, maxY, 100)
viewbox = Polygon({(0, 0), (maxX, 0), (maxX, maxY), (0, maxY)})
onboardingX: 350
onboardingY: 200
onboardingCase: 4
OnboardingTextOffset = onboardingTextOffset(Corner[onboardingText, 1], Corner[onboardingText, 3], onboardingCase, Corner[1], Corner[3], Corner[5])
onboardingTextDisplay: "" + (LaTeX[onboardingText]) + ""
CheckAnchor: (110, -175)
allCheckAnchor = Sequence(CheckAnchor + ((A * 250), 0), A, 0, 4)
checkWidth: 100
showOutlines: {false, false, false, false, false}
solnBars = Zip(If[C, Polygon[{(barPositions(A, 1), 0), (barPositions(A, 2), 0), (barPositions(A, 2), B), (barPositions(A, 1), B)}]], A, {1, 2, 3, 4, 5}, B, expectedHeights, C, showOutlines)
textCountCorrect: "\text{Number correct: " + (LaTeX[countCorrect]) + "}"
lblHeights = Zip(Text[If[C ∨ D, ("" * A), ""], (B + (0.5 * barWidth), A + 20), false, true, 0, 1], A, expectedHeights, B, {x(Bar1a), x(Bar2a), x(Bar3a), x(Bar4a), x(Bar5a)}, C, showOutlines, D, {correct1, correct2, correct3, correct4, correct5})
showGraphHint: true
prevBar = 0
countTries1 = 0
countTries2 = 0
countTries3 = 0
countTries4 = 0
countTries5 = 0

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: twoPointBox
twoPointBox(A,B)
Input: C, D
Output: box2

box2, f, g, h, i = Polygon(C, D, (x(D), 0), (x(C), 0))

Tool: expandQuad
expandQuad(A,B,C,D,gap)
Input: A, B, C, D, gap
Output: simplePoints

allVertsQuad: {A, B, C, D}
allVerts: allVertsQuad
allVecs = Zip(Vector[J, K], J, allVerts, K, Append[Take[allVerts, 2], allVerts(1)])
sideLines = Zip(Line[J - (gap * UnitOrthogonalVector[K]), Vector[K]], J, allVerts, Vector[K], allVecs)
simplePoints = Zip(Intersect[A, B], A, Append[sideLines(-1), sideLines], B, sideLines)

Tool: pixelsToDistanceX
pixelsToDistanceX(inputPixels,corner1,corner3,corner5)
Input: inputPixels, Corner1, Corner3, Corner5
Output: outputDistance

inputPixels: 5
Corner1: (-4, -2)
Corner3: (6, 6)
Corner5: (800, 500)
xLeft: x(Corner1)
xRight: x(Corner3)
outputDistance: (inputPixels / x(Corner5) * (xRight - xLeft))

Tool: boxTool
(length,width,Point)
Input: width, length, A
Output: myBox

length: 1
width: 1
D: A + (0, length)
B: A + (width, 0)
C: A + (width, length)
myBox = Polygon({A, B, C, D})

Tool: onboardingTextOffset
onboardingTextOffset(textCorner1,textCorner3,case,corner1,corner3,corner5)
Input: CornerText1, CornerText3, case, Corner1, Corner3, Corner5
Output: TextOffset

xPixels: ((x(CornerText3) - x(CornerText1)) * x(Corner5) / (x(Corner3) - x(Corner1)))
yPixels: ((y(CornerText3) - y(CornerText1)) * y(Corner5) / (y(Corner3) - y(Corner1)))
xOffset = Element({27, (-xPixels) + 2, 16 - xPixels / 2, 16 - xPixels / 2}, case)
yOffset = Element({-23, -23, yPixels - 27, -49}, case)
TextOffset: (xOffset, yOffset)