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

**URL:** <https://cl.desmos.com/t/help-with-new-staar-item-type-graphing-on-a-number-line/4742>\
**Category:** Questions\
**Created:** [February 23, 2023, 9:55pm UTC](https://cl.desmos.com/t/help-with-new-staar-item-type-graphing-on-a-number-line/4742 "2023-02-23T21:55:10Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![LAMitchellMath](https://avatars.discourse-cdn.com/v4/letter/l/df788c/32.png) [@LAMitchellMath](https://cl.desmos.com/u/LAMitchellMath)\
**Post date:** [February 23, 2023, 9:55pm UTC](https://cl.desmos.com/t/help-with-new-staar-item-type-graphing-on-a-number-line/4742/1 "2023-02-23T21:55:10Z")

</div>

Hello!

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

> **[inequalities on number line self checking • Activity Builder by Desmos](https://teacher.desmos.com/activitybuilder/custom/63f7dd568d3a729f685f0835)**
>
> by Leigh Ann Mitchell

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](https://canada1.discourse-cdn.com/flex031/uploads/desmos/original/2X/8/842197d33051d21e05385c4a7d5a60cca2d7f8c2.png)

Thank you!

---

<div class="post-metadata">

**Author:** ![aknauft](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/aknauft/32/3701_2.png) [@aknauft](https://cl.desmos.com/u/aknauft)\
**Post date:** [February 24, 2023, 4:51pm UTC](https://cl.desmos.com/t/help-with-new-staar-item-type-graphing-on-a-number-line/4742/2 "2023-02-24T16:51:07Z")

</div>

Hi!

(1) I sometimes say the only thing harder than building a Desmos animation is deciphering someone else’s graph 😆 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](https://teacher.desmos.com/activitybuilder/custom/604792ebaed23f0c8da34018?collections=5fff36c7a65b820b3c57bc64%2C5fff2b39b97f313126e0f531#preview/60da5d5b-7fa1-43eb-9922-362bc52b35ee) 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) 🤔 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](https://www.desmos.com/calculator/xpvy2ynvbu). 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](https://www.desmos.com/calculator/r52dc43ax4) below the other folders, I put together a real quick implementation of my sequence from (1)!

---

<div class="post-metadata">

**Author:** ![LAMitchellMath](https://avatars.discourse-cdn.com/v4/letter/l/df788c/32.png) [@LAMitchellMath](https://cl.desmos.com/u/LAMitchellMath)\
**Post date:** [February 28, 2023, 9:07pm UTC](https://cl.desmos.com/t/help-with-new-staar-item-type-graphing-on-a-number-line/4742/3 "2023-02-28T21:07:05Z")

</div>

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!

> **[inequalities on number line self checking • Activity Builder by Desmos](https://teacher.desmos.com/activitybuilder/custom/63f7dd568d3a729f685f0835)**
>
> by Leigh Ann Mitchell

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!

---

<div class="post-metadata">

**Author:** ![aknauft](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/aknauft/32/3701_2.png) [@aknauft](https://cl.desmos.com/u/aknauft)\
**Post date:** [March 1, 2023, 5:17pm UTC](https://cl.desmos.com/t/help-with-new-staar-item-type-graphing-on-a-number-line/4742/4 "2023-03-01T17:17:43Z")

</div>

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:

```auto
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!!
