Help with New STAAR Item Type - Graphing on a Number Line

Questions
1

Hello!

I found a screen from an activity that is similar to what I am looking for and copied/tweaked it here:

Two questions -

  1. Do I need all the entry lines? I am not sure where the animation is coming into play here.
  2. How can I add more numbers/tick marks on the number line?

Here is what I am aiming for:
image

Thank you!

2

Hi!

(1) I sometimes say the only thing harder than building a Desmos animation is deciphering someone else’s graph :laughing: It’s tough to tell what the original animation in this graph was, but I suspect it was some form of interpretive feedback for the student — I know Tunnel Travels from the curriculum has a similar graph.
If you’re just collecting answers from your students, and don’t need to tell them if they are right or wrong, then yeah you’re safe to delete the animation stuff. If you do want to give them some feedback, I’d actually still recommend deleting things and building in a way that makes sense to you. I’d recommend the following sequence:

  1. Show the given inequality above the numberline right from the start
  2. Add a submit button. When students press the button, fade in the (solved) inequality expression for what they graphed.
  3. If it’s correct, show a check mark. If it’s not, say “not equivalent.”
  4. (Optional, because it’s tricky!) Cleverly choose a test value that satisfies the student’s inequality but not the given inequality. Show that value on the numberline as a point, and also substitute it into the given expression, then draw a slash through the > as a way of calling out “this value isn’t a solution!”

(2) :thinking: Okay I think I see some things. In “Setup”, there’s c_enter and s_tep that control the middle value and the step between that value and the next number that gets plotted. In “Tweakables”, there’s a w_idthScale parameter that will let you shrink the gaps between tick marks and get more values on the screen. I’m not seeing anything built-in for minor tickmarks, so you’d need to draw those yourself. The major tickmarks are drawn on line 35; if you duplicate that expression, you can multiply the x-coordinate by 0.5 to crunch them closer together and the y-coordinate by 0.7 or something to shrink it a bit.

(2, alternate) I’m definitely biased because I put this version together, but if you don’t mind starting over with a new graph, I recommend this one. Some details:

  • V_numberlineLabels (in line 3) picks out which labels you want visible. If you want to include a different range of the number line, modify v_numberlineMin and v_numberlineMax right below it.
  • Minor tickmarks can be modified through lines 39 and 40 — V_numberlineMinorTicks.
  • Set your expected answer with lines 17–20: what is the boundary value? Should the student shade to the left, or right? Should they have a strict inequality?
  • In the CL, you can use correct: this.number("i_{sCorrect}") = 1

There’s no animation in that graph, but if you copy-paste this link below the other folders, I put together a real quick implementation of my sequence from (1)!

3

I definitely do not mind starting over! I think I am WAY over my head though. My previous experience has just been copying and pasting, so I am trying to learn!

I don’t understand what I am changing for “correctness”. I am also looking to give students feedback in addition to it showing on the dashboard.

Any and all help is greatly appreciated. THANK YOU!

4

Ahh yes I should have called that out — for correctness on different problems, you’d be changing a few things inside “Inequality Setup and Correctness Calculations”:

  • Line 17, v_boundaryCorrect is what you’d change for a different solution point. When students drag the movable point to create their graph, they are modifying v_boundaryStudent; in line 22 we ask if the student’s value for the boundary is “close enough” to the correct value in the first set of curly braces.
  • Line 18, s_houldShadeLeft is what you’d set to 1 if the correct answer shades to the left of the boundary point, or to 0 if the correct answer shades to the right.
    • When students click on the numberline to pick a direction to shade, i_shadeLeft and i_shadeRight are updated to be either 0 or 1. You can find those actions in lines 49 and 50.
  • Line 20, s_houldBeStrict, is what you’d set equal to 1 if the inequality is strict (i.e., does not include the boundary point) or 0 otherwise. When students click their boundary point to toggle between a filled circle and open circle, they are updating i_sStrict; and we compare i_sStrict to s_houldBeStrict in the second set of curly braces for i_sBoundaryCorrect in line 22.

In the Animation folder, you’d be changing the label text for p_labelGiven, and the p_labelCreated points. Looks like I missed two cases in my p_labelCreated work! Currently, nothing will show up if students have i_sStrict=0 (i.e., they’ve filled in the boundary point), so you’ll want to duplicate and modify lines 73 and 74.

If you slide t0 in the graph, you’ll see those labels fade in to let the students know how they did. To make that happen after students press the button, you’ll want to add a bit of CL to the graph:
number(`t_0`): button.timeSincePress() (using button, as the name for your button component!)

In the button, you’ll want things to reset if students change their answer. This should do the trick:

b = graph.number(`v_{boundary}`)
s = graph.number(`i_{sStrict}`)
l = graph.number(`i_{shadeLeft}`)
r = graph.number(`i_{shadeRight}`)

resetOnChange: "${b}${s}${l}${r}"
resetLabel: "reset"

Hope at least some of that is helpful! Good luck!!