# Drag & drop points to a desired location

**URL:** <https://cl.desmos.com/t/drag-drop-points-to-a-desired-location/3925>\
**Category:** Examples\
**Tags:** validation, correctness\
**Created:** [January 3, 2022, 6:19pm UTC](https://cl.desmos.com/t/drag-drop-points-to-a-desired-location/3925 "2022-01-03T18:19:47Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alain\_Mangan](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/alain_mangan/32/3174_2.png) [@Alain\_Mangan](https://cl.desmos.com/u/Alain_Mangan)\
**Post date:** [January 3, 2022, 6:19pm UTC](https://cl.desmos.com/t/drag-drop-points-to-a-desired-location/3925/1 "2022-01-03T18:19:47Z")

</div>

### Feel free to post your improved solution!

Link:  
https://www.desmos.com/calculator/4g6zpejhkq?embed

### Idea:

Detect when objects are in the “correct” location to provide user feedback.

### (Select) Challenges:

- Desmos GRAPHS do not appear to support boolean algebra: Must get clever… see “Details on workarounds” below.
- Cannot independently set color of control point and its text (unless you use LaTeX, I suppose). Needed to copy all points to generated labels of desired colour.
- Cannot generate array of string (only numeric values). Could have created labels for point as a \>\>single\<\< array (instead of 4 seperate `PLi` points).
- Labels do not have access to `index` variable like you do for the “on-click” event. This also would have allowed me to bundle-up the labels in a \>\>single\<\< array.
- Cannot

### Details on (select) workarounds

- Seems like `sign()` function is our best tool to carry out logical operations in graphs. It would be nice to get access to boolean operators (I don’t believe `sign()` is particularly intuitive for most people).
- To check for equality in this example: `sign()` was used on the distance between a point & its intended location to see if is “home”.

### Comments

Many of the workarounds I described above make it inefficient to build activities. The amount of “code”/lines you need to manage for even simple activities gets somewhat unwieldy. I fear issues like these might dissuade many from creating interesting activities.

Some of my personal hurdles:

- Handling state within a graph widget.
- Handling event detection.
- Re-thinking how to do simple \<, =, \> comparisons.
- Needing to manage/hide multiple objects because we can’t easily manipulate colors, text “on an event”.
- Managing large number of “code” lines - because of duplication (Folders are not sufficient for more complicated activities).

---

<div class="post-metadata">

**Author:** ![Daniel\_Grubbs](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/daniel_grubbs/32/719_2.png) [@Daniel\_Grubbs](https://cl.desmos.com/u/Daniel_Grubbs)\
**Post date:** [January 3, 2022, 10:14pm UTC](https://cl.desmos.com/t/drag-drop-points-to-a-desired-location/3925/2 "2022-01-03T22:14:48Z")

</div>

You may be able to use conditionals to achieve what you want.

```auto
{distance(P1,PH1)=0:1,0}

```

The above is essentially “If the distance from P1 to PH1 = 0, then 1, otherwise 0”.

You can also create a list of rgb( ) values to have a list of colors, which will show up in your color options if you wanted to more easily change text/points.

---

<div class="post-metadata">

**Author:** ![Alain\_Mangan](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/alain_mangan/32/3174_2.png) [@Alain\_Mangan](https://cl.desmos.com/u/Alain_Mangan)\
**Post date:** [January 3, 2022, 10:29pm UTC](https://cl.desmos.com/t/drag-drop-points-to-a-desired-location/3925/3 "2022-01-03T22:29:43Z")

</div>

Thanks @Daniel_Grubbs !

- I was unaware of the `distance()` function.
- I’ve actually never seen the “ternary operator” version of conditionals before. Thanks!

I completely forgot about conditionals as a means to hide objects. I am in the process of changing other activities that were multiplying by 0 to make stuff disappear. Conditionals are much better!

- I have only ever seen the {x\<a} version to restrict the domain – so thanks for that!
- I have been using something more like `y=mx+b {B_wantshow = 1}`. I think it works a bit better for this application.

---

<div class="post-metadata">

**Author:** ![Alain\_Mangan](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/alain_mangan/32/3174_2.png) [@Alain\_Mangan](https://cl.desmos.com/u/Alain_Mangan)\
**Post date:** [January 3, 2022, 10:30pm UTC](https://cl.desmos.com/t/drag-drop-points-to-a-desired-location/3925/4 "2022-01-03T22:30:25Z")

</div>

> [@Daniel\_Grubbs](#):
>
> You can also create a list of rgb( ) values to have a list of colors, which will show up in your color options if you wanted to more easily change text/points.

Can you expand on this? I think I might have seen an example log ago, but I have since forgotten about it.

---

<div class="post-metadata">

**Author:** ![Daniel\_Grubbs](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/daniel_grubbs/32/719_2.png) [@Daniel\_Grubbs](https://cl.desmos.com/u/Daniel_Grubbs)\
**Post date:** [January 4, 2022, 12:24am UTC](https://cl.desmos.com/t/drag-drop-points-to-a-desired-location/3925/5 "2022-01-04T00:24:33Z")

</div>

Here’s a quick one. Notice I used a list for conditional display as well, which you might be able to use in conjunction with actions.

> **[Desmos | Graphing Calculator](https://www.desmos.com/calculator/lhqjrfefjb)**
>
> Explore math with our beautiful, free online graphing calculator. Graph functions, plot points, visualize algebraic equations, add sliders, animate graphs, and more.

---

<div class="post-metadata">

**Author:** ![Alain\_Mangan](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/alain_mangan/32/3174_2.png) [@Alain\_Mangan](https://cl.desmos.com/u/Alain_Mangan)\
**Post date:** [January 4, 2022, 2:27am UTC](https://cl.desmos.com/t/drag-drop-points-to-a-desired-location/3925/6 "2022-01-04T02:27:41Z")

</div>

Thanks for the example.

This does not appear to let me independently set the colour of a point from its text label, but good to know you can independently set colours of different points in an array.

---

<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:** [January 4, 2022, 7:27am UTC](https://cl.desmos.com/t/drag-drop-points-to-a-desired-location/3925/7 "2022-01-04T07:27:24Z")

</div>

Oh very nice! I had a go before digging into your approach, and there’s definite similarities: [Untitled Graph](https://www.desmos.com/calculator/mncchxr2yn)

I used `distance(A,B)` in my check, while you went with “sign of the length for vector A-B”. I can see both methods being preferred in different contexts; really just boils down to how you want to think about the logic!

I’ll call out especially line 34 (where I get a list of strings!). Also, ctrl+f (or cms+f) is invaluable for those more involved builds.

---

<div class="post-metadata">

**Author:** ![Alain\_Mangan](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/alain_mangan/32/3174_2.png) [@Alain\_Mangan](https://cl.desmos.com/u/Alain_Mangan)\
**Post date:** [January 5, 2022, 1:48am UTC](https://cl.desmos.com/t/drag-drop-points-to-a-desired-location/3925/8 "2022-01-05T01:48:19Z")

</div>

### Detecting “correctness”

> [@aknauft](#):
>
> I used `distance(A,B)` in my check, while you went with “sign of the length for vector A-B”. I can see both methods being preferred in different contexts; really just boils down to how you want to think about the logic!

Well, that’s because I was unaware of the existence of `distance(A,B)` before @Daniel_Grubbs told me. I _ **much** _ prefer your method here.

Note that you can simplify your statement a bit:

- `IsCorrect={distance(Ptargets,Pmovers)<1:1,0}`

can be reduced to:

- `IsCorrect={distance(Ptargets,Pmovers)<1}`

This effectively gives a boolean… though you still need to use `[1=I_sCorrect]` to use it later on (as, apparently Desmos treats it as a number — not a true boolean).

### List of strings

> [@aknauft](#):
>
> I’ll call out especially line 34 (where I get a list of strings!).

Oh yeah. I forgot I can do that. I have used it before in other graphs.

It is somewhat unfortunate that I cannot store this “list of strings” for later evaluation (like I can with lists of numbers). However, at least “interpolating” values from a list to generate a “label” makes it possible to do _ **some** _ simplification to our code.

### ctrl+f

Good to know. Didn’t even think to look for a search tool.

---

<div class="post-metadata">

**Author:** ![Alain\_Mangan](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/alain_mangan/32/3174_2.png) [@Alain\_Mangan](https://cl.desmos.com/u/Alain_Mangan)\
**Post date:** [January 5, 2022, 1:59am UTC](https://cl.desmos.com/t/drag-drop-points-to-a-desired-location/3925/9 "2022-01-05T01:59:45Z")

</div>

### Alternative way to draw circles

Excerpt from @aknauft’s code:  
 ![image](https://canada1.discourse-cdn.com/flex031/uploads/desmos/original/2X/a/a0cca726110f2e8fd080c9c93c274ff092cd8ead.png)  
Well that is an awesome way to draw a circle in Desmos!

I didn’t know you could “instantiate” a parameter, `t`, like this! I can’t actually figure out what triggers it to be generated. I tried using `t` with the following statement:

```auto
y=cos(6.28*t)

```

…but Desmos assumes “`t`” means “`x`”, and draws a sin-wave going from -inf to inf.

### Request for documentation

Where is the documentation for this “localized parameter” anyhow?

---

<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:** [January 5, 2022, 5:54pm UTC](https://cl.desmos.com/t/drag-drop-points-to-a-desired-location/3925/10 "2022-01-05T17:54:05Z")

</div>

Yeah, I like doing `(cos(t), sin(t))` for circles. Desmos treats `t` as a special parameter when it’s used with an `(x, y)` structure, turning it into a _parametric equation_! Relevant documentation: [https://help.desmos.com/hc/en-us/articles/4406906208397-Parametric-Equations](https://help.desmos.com/hc/en-us/articles/4406906208397-Parametric-Equations)

---

<div class="post-metadata">

**Author:** ![pirsquared](https://avatars.discourse-cdn.com/v4/letter/p/4af34b/32.png) [@pirsquared](https://cl.desmos.com/u/pirsquared)\
**Post date:** [January 5, 2022, 5:55pm UTC](https://cl.desmos.com/t/drag-drop-points-to-a-desired-location/3925/11 "2022-01-05T17:55:35Z")

</div>

> [@Alain\_Mangan](#):
>
> I tried using `t` with the following statement:
> 
> ```auto
> y=cos(6.28*t)
> 
> ```
> 
> …but Desmos assumes “ `t` ” means “ `x` ”, and draws a sin-wave going from -inf to inf.

You can use `(t, cos(6.28t))` for this; I think Desmos largely expects an ordered pair.

> [@](#):
>
> Where is the documentation for this “localized parameter” anyhow?

Some useful info here:

> **[Parametric Equations](https://help.desmos.com/hc/en-us/articles/4406906208397-Parametric-Equations)**
>
> Graphing parametric equations on the Desmos Graphing Calculator is as easy as plotting an ordered pair. Instead of numerical coordinates, use expressions in terms of t, like (cos t, sin t). Graph l...

---

<div class="post-metadata">

**Author:** ![Alain\_Mangan](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/alain_mangan/32/3174_2.png) [@Alain\_Mangan](https://cl.desmos.com/u/Alain_Mangan)\
**Post date:** [January 6, 2022, 12:35am UTC](https://cl.desmos.com/t/drag-drop-points-to-a-desired-location/3925/12 "2022-01-06T00:35:45Z")

</div>

I see: parametric equations only exist on ordered pairs. Makes sense… just wasn’t expecting that to be the trigger (nor the fact that “t” would be special somehow).

Thanks for the help @aknauft & @pirsquared!