# Clickable combined picture

**URL:** <https://community.thunkable.com/t/clickable-combined-picture/516324>\
**Category:** Questions about Thunkable X\
**Created:** [March 15, 2020, 2:38pm UTC](https://community.thunkable.com/t/clickable-combined-picture/516324 "2020-03-15T14:38:21Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![funhall](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/funhall/32/92145_2.png) [@funhall](https://community.thunkable.com/u/funhall)\
**Post date:** [March 15, 2020, 2:38pm UTC](https://community.thunkable.com/t/clickable-combined-picture/516324/1 "2020-03-15T14:38:21Z")

</div>

Hi.  
I like to make a shooting target to count points.  
But how can I make the numbered rings that gives different point the closer to the center you click.  
I hope you understand the problem.  
Can someone help me here.

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [March 15, 2020, 2:54pm UTC](https://community.thunkable.com/t/clickable-combined-picture/516324/2 "2020-03-15T14:54:28Z")

</div>

![Screenshot_20200315-143957](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/5/75a167c78e5524a8685d7b7adb443a8d8047e39f.jpeg)

Something like this, right @funhall?

---

<div class="post-metadata">

**Author:** ![funhall](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/funhall/32/92145_2.png) [@funhall](https://community.thunkable.com/u/funhall)\
**Post date:** [March 15, 2020, 2:55pm UTC](https://community.thunkable.com/t/clickable-combined-picture/516324/3 "2020-03-15T14:55:03Z")

</div>

Exactly yes…

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [March 15, 2020, 4:56pm UTC](https://community.thunkable.com/t/clickable-combined-picture/516324/4 "2020-03-15T16:56:17Z")

</div>

@Funhall\_Viborg here is something that may work for you. What kind of app are you building, if I may ask? Anyway, sounds like a cool idea!

10 buttons. Sized from the largest at 110 ox wide and tall to the smallest being 10 px wide and tall, sized in increments of 10. Layered on top of each other with the highest value circle having the highest index And being the smallest. All text justified right. Every other button has a solid black border 1px wide.

Oooh ideas!!!

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [March 15, 2020, 5:01pm UTC](https://community.thunkable.com/t/clickable-combined-picture/516324/5 "2020-03-15T17:01:39Z")

</div>

> [@jared](#):
>
> Layered on top of each other

Would you need 10 rows (or columns) too to do the layering?

Or would these be sprites on a canvas?

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [March 15, 2020, 5:03pm UTC](https://community.thunkable.com/t/clickable-combined-picture/516324/6 "2020-03-15T17:03:36Z")

</div>

Ahh. I’m thinking absolute positioning for each one. All in one row. Centered for vertical and horizontal. Row height set to fit contents.

[EDIT] actually, i’m making this now and rows are needed

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [March 15, 2020, 5:35pm UTC](https://community.thunkable.com/t/clickable-combined-picture/516324/7 "2020-03-15T17:35:35Z")

</div>

See a brief [not completed because i am going to a kids bday party] in my Sandbox Environment app [here](https://x.thunkable.com/projectPage/5df3c3a9786143b77d64902a)

the halfbuilt example will be on the first screen that shows.

 ![Screen Shot 2020-03-15 at 1.19.24 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/0/40a1b3cca7d002bd4b5bc1d628f14f6b5a619934.png) ![Screen Shot 2020-03-15 at 1.19.27 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/3/43037dfbe67e676bd63ce15c4a97372dcfb5f854.png) ![Screen Shot 2020-03-15 at 1.19.32 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/b/0b0927c043fe9ad6f2f0fe74c547adb1ee207b03.png)

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [March 15, 2020, 6:02pm UTC](https://community.thunkable.com/t/clickable-combined-picture/516324/8 "2020-03-15T18:02:02Z")

</div>

With a single sprite, you need to use the equation for a circle to determine whether or not a click/tap is within a particular circle. And you’ll need to somehow subtract interior circle’s diameters to account for the overlap of circles.

Either that or you make each circle a separate sprite and then have a rule that says something like:

If yellow is clicked  
._._.give points for yellow  
._._.else if orange is clicked  
._._…_._.give points for orange  
._._…_._.else if blue is clicked  
._._…_._…_._.give points for blue

---

<div class="post-metadata">

**Author:** ![funhall](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/funhall/32/92145_2.png) [@funhall](https://community.thunkable.com/u/funhall)\
**Post date:** [March 17, 2020, 1:59pm UTC](https://community.thunkable.com/t/clickable-combined-picture/516324/9 "2020-03-17T13:59:15Z")

</div>

Does anyone have an ideer to show a “shot” on the target so I can see where the shot was hitting?  
so when I have to mark a point there is a “shot” on the right button.

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [March 17, 2020, 4:10pm UTC](https://community.thunkable.com/t/clickable-combined-picture/516324/10 "2020-03-17T16:10:45Z")

</div>

Are you talking angrybirds style?

---

<div class="post-metadata">

**Author:** ![funhall](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/funhall/32/92145_2.png) [@funhall](https://community.thunkable.com/u/funhall)\
**Post date:** [March 17, 2020, 4:11pm UTC](https://community.thunkable.com/t/clickable-combined-picture/516324/11 "2020-03-17T16:11:40Z")

</div>

ha ha dont know angry bird. But maybe yes. So you kind of shooting the target so you can see it later.

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [March 17, 2020, 4:13pm UTC](https://community.thunkable.com/t/clickable-combined-picture/516324/12 "2020-03-17T16:13:23Z")

</div>

Do any of the examples above help?

I still don’t think i understand completely. You want the user to touch the points they want. And then you want the app to keep track of exactly where they touch on the target?

---

<div class="post-metadata">

**Author:** ![funhall](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/funhall/32/92145_2.png) [@funhall](https://community.thunkable.com/u/funhall)\
**Post date:** [March 17, 2020, 4:19pm UTC](https://community.thunkable.com/t/clickable-combined-picture/516324/13 "2020-03-17T16:19:18Z")

</div>

So you get some kind of bullet holes where you touch

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/2/72d0ed0dbc1c0a03c617452fb13a3f616a1d1170.jpeg)

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [March 17, 2020, 4:22pm UTC](https://community.thunkable.com/t/clickable-combined-picture/516324/14 "2020-03-17T16:22:37Z")

</div>

You’ll want to use the method that @tatiang spoke about above. maybe when you figure it out, you can share?

was the click within {the area of the shape excluding the area of the other shapes}  
set var Score as + value of sprite  
save coordinates of click.  
set sprite bullet hole to appear at coordinates saved above

something like that. but I’m not familiar with the canvas yet

---

<div class="post-metadata">

**Author:** ![funhall](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/funhall/32/92145_2.png) [@funhall](https://community.thunkable.com/u/funhall)\
**Post date:** [March 17, 2020, 4:25pm UTC](https://community.thunkable.com/t/clickable-combined-picture/516324/15 "2020-03-17T16:25:12Z")

</div>

wooow i am quite newbi in this. So that seems a little complicated for me…

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [March 17, 2020, 4:27pm UTC](https://community.thunkable.com/t/clickable-combined-picture/516324/16 "2020-03-17T16:27:24Z")

</div>

yes. it sounds like a lot of work. you might want to take time to learn about it [and post a tutorial], hire a freelancer[who can make it for you and explain it all], or just wait for someone to make it for you [free option but could take forever]

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 11:40am UTC](https://community.thunkable.com/t/clickable-combined-picture/516324/17 "2024-11-08T11:40:21Z")

</div>


