# \[Solved\] With logic screencaps = Adding an Award/Achievement System in app **URL:** \ **Category:** Questions about Thunkable X\ **Tags:** beginner, javascript\ **Created:** [September 7, 2021, 4:04pm UTC](https://community.thunkable.com/t/solved-with-logic-screencaps-adding-an-award-achievement-system-in-app/1492980 "2021-09-07T16:04:04Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![ashesdroid](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ashesdroid/32/127531_2.png) [@ashesdroid](https://community.thunkable.com/u/ashesdroid)\ **Post date:** [September 7, 2021, 4:04pm UTC](https://community.thunkable.com/t/solved-with-logic-screencaps-adding-an-award-achievement-system-in-app/1492980/1 "2021-09-07T16:04:04Z")
Hello all, I’ve looked around and couldn’t find anything regarding my idea; so if you know of a topic already about this feel free to link it and I can go look at it. Here’s my idea: The person I’m making the app for wants to have a reward/award/achievement system for completing tasks. They would like to have a page where you can view the achievements, their description, an icon, and for them to trigger on specific triggers. The majority of the app is running on dynamic Local DB using DataViewer lists to display the assets. It is a therapy card app - You tap on a data viewer list item and it using a Row ID variable to pull the image from the Local DB into a full screen view. Here is my perceived problem with the achievement system and making it function. I feel that I could block out the code for achievements for generic actions (like “Make your first note” or “Open your first card”) but my boss wants the achievements to be for specific triggers like “50% completion” and “100% completion” and “Checked in for 5 days in a row” kind of stuff. I don’t even know if those kinds of things are possible in the software in Thunkable. I told them that I would research to see if Thunkable had that capability and would get back to them. Any ideas? I’m just looking for ideas to see if it would work and if anyone knows for certain that this is possible/impossible with the resources at our disposal. Let me know if you have questions; I’ll get back to you as soon as possible. Thank you in advance. **SOLUTION** So I designed the solution after many days of trying to solve the problems I was having in making everything work seamlessly. This is going to be a lengthy edit… so buckle up! FIRST: I decided to scrap the `Data Viewer Grid` since I couldn’t figure out how to reference a specific `Row Id` that functioned. I decided to go with this layout instead: ![Image List Layout](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/e/ee0a2730c4fcea950fe287e0a915e54e19febaea.jpeg) Instead of using a `Data Viewer Grid` and a LDB, I used image place holders and rows in a scrollable column. After some testing and editing, I got it looking and working the way I wanted it to. Then I set each image to have a default grayscale version of each reward I wanted to give: ![Preview of Awards](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/7/470d5ff9ea70439efcbf93f61225a819be266c5a.jpeg) When the event triggers to give the award, it changes the image to the colored version of the image using `When Screen Opens` logic. I’ll post all of the logic I used too. Then it was just figuring out how to get the events to trigger correctly. That was the hard part. What I did was set a database with my references from another screen to have an “opened?” column. When each row was clicked, that `Row Id` would set it’s opened? value to “1”. Then I put a `Sum of List` using those values. Instead of fighting it to make it 1+1=2, I decided to just stick with 1+1=“11” and not fuss with it. See Images below for reward trigger logic blocks: ![Check for Award Logic](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/c/ec3a14afbe6514dd9427eaac4dac4a7676587ba8.jpeg) Above is the beginning of the awards triggering a % complete award. ![Check for Award Logic end of list](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/8/78bf30ff8ca979861dcdc5f9948fd5e6513e507f.jpeg) Above is the end of the logic with a completionist reward `Function` for getting all rewards. I added a `Not` block so that it wouldn’t add a new row to the list (see below) that I was using to keep track of what rewards were earned. Once that `text` value was added (eg. the “9”) it would check before adding another if it found a value that matched it already. If so, it wont add a new line in the list with the matching `text` value. The Text value that it sets is a list that is set as a variable as seen below: ![Variables when screen opens](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/c/dc3688168558349da692113612ccaf47bda361c8.jpeg) To control the list values, I set it to be ordered from Least to Greatest, thus creating a new variable. This was so that the rewards don’t trigger multiple times leading to getting repeat values triggering the event before the actual reward was earned. It’s just what my particular rewards needed (I have 1 card, 5 cards, 10 cards… set to when page opens. I didn’t want them to get a reward value each time the page opened…). The sorted list then checks for the ‘code’ of 123456789 and if that specific value is seen in the sum of the sorted list, then you get the platinum trigger. ![Platinum Logic](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/9/f9ca3cbf4133faa71fe50edb43282bf2524caa63.jpeg) Lastly, I wanted people to know what they are trying to get to I set an `Alert` to trigger when they tap the image and depending on what image they tap, it sets the alert text accordingly: ![When Image Tap set...](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/f/6f244aab9e18f8296a9860abcbd69a22d404a252.jpeg) I disabled the Cancel button and set the Confirm button’s text to say “back” so that they weren’t confused: ![AlertPopUp Logic](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/1/41765ff41669b983878accb90e1518c87dfd7b54.jpeg) ![Alert on Tap](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/b/4b62320f6e3522d474e469a02c52c2965e50a8d9.jpeg) I hope this works for anyone else that needs idea’s on how to set awards or achievements in your own app. ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [September 7, 2021, 4:15pm UTC](https://community.thunkable.com/t/solved-with-logic-screencaps-adding-an-award-achievement-system-in-app/1492980/2 "2021-09-07T16:15:23Z")
If i understand you correctly, you are talking about programming logic and workflow and not any particular component in Thunkable. You can achieve what you want if you have designed your database correctly and build blocks that implement the logic you stated. Of course this is achievable with Thunkable. ---
**Author:** ![ashesdroid](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ashesdroid/32/127531_2.png) [@ashesdroid](https://community.thunkable.com/u/ashesdroid)\ **Post date:** [September 7, 2021, 4:41pm UTC](https://community.thunkable.com/t/solved-with-logic-screencaps-adding-an-award-achievement-system-in-app/1492980/3 "2021-09-07T16:41:18Z")
Hi @muneer here is an idea I came up with to try and make it work - could you tell me if the logic makes sense? My idea is: Add “Opened” column in my LDB that the Data Viewer uses. Default value “0” in Opened column. When `Item Clicked for RowID`, "`if Opened text = "0"`, then `change text to` “1.” Then use math logic to add up the 1’s and 0’s. If Sum \< 50% of number of rows in table1 (_however many we end up with_), set Achievement value to `False` (_whatever that will look like in the future_) If Sum \> 50% number of rows in table1, set Achievement value to `True`. Then just change the variables depending on the task that my boss wants. Does this logic flow work or make sense? Do you have a more efficient way you think I should try first? Thanks. ---
**Author:** ![ashesdroid](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ashesdroid/32/127531_2.png) [@ashesdroid](https://community.thunkable.com/u/ashesdroid)\ **Post date:** [September 7, 2021, 8:52pm UTC](https://community.thunkable.com/t/solved-with-logic-screencaps-adding-an-award-achievement-system-in-app/1492980/4 "2021-09-07T20:52:42Z")
Here is an update; I used this method and it broke the screen - as in it wouldn’t even display the screen on testing. ![Screencap To change DB Grid Viewer image on trigger](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/9/692a22b01f16b5c95f936bdb8efa37a565323404.jpeg) So then I went back to my original idea and tried this: ![Screencap To change DB Grid Viewer image on trigger v2](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/e/7e4fbe2229140905018ed3c2bf9fbf8f1aec4066.jpeg) This now displays the screen and the elements work just fine. However, the triggers wont update the value so that the image changes from the grayed out version to the colored version of the icon. This is a screencap of the database I’m using and how I have a “opened” column and when that card row is opened it should change the “opened” value to “1” ![Database for cards and TrueFalse value for opened](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/a/2ae7a0a5cf70a27db4a3f8c53a56f0a95a5ad261.jpeg) This is my screencap of the logic I’m trying to get the value in the database to change to “1” so that the list can sum up the value to trigger the greater than or less than statements. ![Screencap To set LDB value to 1 on trigger](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/2/a2ca7709695b5af540a10bb46d1ea7dac2895444.jpeg) Where am I going wrong? I feel like the logic makes sense but nothing is updating in my tests. I know it works with other values because in my note taker I use the same kind of logic and it updates notes that are saved to a local data base. P.S. sorry for the over exposed screencaps; idk why my display started doing that when I use “Snip & Sketch.” ---
**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:** [September 7, 2021, 10:56pm UTC](https://community.thunkable.com/t/solved-with-logic-screencaps-adding-an-award-achievement-system-in-app/1492980/5 "2021-09-07T22:56:11Z")
The list gear with block is not needed when you are using a list block. It’s redundant and worse, it causes problems because you are assigning a list of values as the first item in a list. So take out the list gear block and test it again. **Edit:** Well, now you’ve deleted your screenshots so I’m not sure it will make sense to other people but hopefully that helps guide you a bit. ---
**Author:** ![ashesdroid](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ashesdroid/32/127531_2.png) [@ashesdroid](https://community.thunkable.com/u/ashesdroid)\ **Post date:** [September 7, 2021, 11:07pm UTC](https://community.thunkable.com/t/solved-with-logic-screencaps-adding-an-award-achievement-system-in-app/1492980/6 "2021-09-07T23:07:35Z")
Sorry, I was just in the process of writing a new reply with new screenshots right as you posted. I also realized that I was using `Row Id` wrong; so I found a way of getting the specific row id value (not just the green block). I’ll undelete for others and type my latest update here: Update 2: I realized that row id “1” only works if it is a Google Sheets table and not a local or Airtable DB. I had to use a trick from another post about creating a list with the text being updated as the `Row ID` value and then viewing that list and writing down the alpha-numeric value. I’m going to try that now. I erased the `List` block with the gear, put the `Sum of list` in the `initialize app variable` block chain, and am just using the variable block in the `if/do` sequence. I’m going to test this to see if it works. ![Screencap of changed code blocks for changing DB image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/7/67bbc17ca287c8a90c80b0a986d4c26146c5d2a4.jpeg) I have noticed in my control tests that even if I manually enter numeric values that should trigger the event, the image still doesn’t change… will do more digging. Here is the post that helped me find the `Row ID` alpha-numeric code: > [@tada Latest Thunkable ✕ Release; NEW COMPONENTS Data Viewer List and Data Viewer Grid! 2020-05-05](https://community.thunkable.com/t/latest-thunkable-release-new-components-data-viewer-list-and-data-viewer-grid-2020-05-05/564204/73): > > The only way I’ve been able to do it is to save the Row IDs in a list upon creation: [image] **Edit:** I’ve tried a few different things and the image wont change. I emptied the img column in my control test and now the image is just blank on the `Grid Viewer` . I tried this: ![Screencap of empty value in DB with setImageAs](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/b/1bcff86a5b4e37fc3806710afd48798442633742.jpeg) This didn’t change the image when I manually set the trigger. I then tried this: ![Moved SumOfLIst](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/a/fac7e553b16dfbc6c4acb36e485a9e05f8da4bc9.jpeg) When I did this, the page will no longer display at all. I also tried using `create app variable empty list` and then `on screen open` set variable as `list of values` and then used that variable for the `sum of list` function. No joy. Still going to be trouble shooting. ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [September 8, 2021, 1:10am UTC](https://community.thunkable.com/t/solved-with-logic-screencaps-adding-an-award-achievement-system-in-app/1492980/7 "2021-09-08T01:10:34Z")
Try this, I made it in response to another post but it has the basic idea of updating a `counter field`. [https://x.thunkable.com/projectPage/613616bb80cb6100104bebc6](https://x.thunkable.com/projectPage/613616bb80cb6100104bebc6) I know this is not an answer to your question but it shows you how to select a row in a table and how to update a column in that row. ---
**Author:** ![ashesdroid](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ashesdroid/32/127531_2.png) [@ashesdroid](https://community.thunkable.com/u/ashesdroid)\ **Post date:** [September 8, 2021, 1:59am UTC](https://community.thunkable.com/t/solved-with-logic-screencaps-adding-an-award-achievement-system-in-app/1492980/8 "2021-09-08T01:59:04Z")
Thanks. I took a look at your coupon project and I think I need to eat dinner because I’m having a hard time thinking. It’s really strange - at this point, I can’t even get the value to change in the LDB even when I force it (aka, the only logic is when the page opens change value to…). By now I’m tired and need a break. If you or @tatiang can put your minds to it: the simplest form of what I need to logic out is I push a button, that changes the value in a specific row and column to “color.png” so that the display image is different (without tapping on the list item, because that would be easy. I’ve done that. I need it to change image from a different trigger). At this point I just want to see if I can even get the blocks to respond with a new image by changing the text in the LDB. I’m not sure if that makes sense - sorry if it doesn’t. My brain is kind of fried right now. The complicated form is: I need a logic to add up 1’s and 0’s in a database, and when the sum = 1 it triggers the image change. When the sum equals \> 3 it triggers another specific image change. When sum = 7 it triggers a third and final image change. All three images have their own rows with different messages and their own display on the grid viewer (See below). ![Web Preview of Progress screen](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/7/67a98c58bc4da6a719d88bb4cd1d19ef240514d3.jpeg) The pictures are supposed to change from the grey picture to a colored version of it. I apologize if this is frustrating or confusing - believe me. I wish it wasn’t and I could just understand this easily. If you spend any time on this I thank you very much and am forever grateful to you both. Good health to you and have a nice evening (at least it’s evening for me). **Edit** Unless there is a simpler way without even using the database or a different work around using different components. I’m up for ideas. ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [September 8, 2021, 10:28am UTC](https://community.thunkable.com/t/solved-with-logic-screencaps-adding-an-award-achievement-system-in-app/1492980/9 "2021-09-08T10:28:00Z")
I created a project assuming a research center wants to track **Article Progress**. Each article could have number of stages and when adding a new article it starts with stage 0. You can then update the current stage of the article in the app and the image will reflect the progress. The app is simple and does not check for errors like a production app should but this is just done to show what you can design **programmatically**. Play with it and it should prove the concept and give you few **hints** in what to do with your app. [https://x.thunkable.com/projectPage/613868bb669f2d0011226c47](https://x.thunkable.com/projectPage/613868bb669f2d0011226c47) Screen view ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/2/227ead7a45c6c7ef2f08a7884280e6eda2b945bc.png) ---
**Author:** ![ashesdroid](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ashesdroid/32/127531_2.png) [@ashesdroid](https://community.thunkable.com/u/ashesdroid)\ **Post date:** [September 10, 2021, 6:39pm UTC](https://community.thunkable.com/t/solved-with-logic-screencaps-adding-an-award-achievement-system-in-app/1492980/10 "2021-09-10T18:39:56Z")
Hello comrades. Well, I’m back with an update: I’ve diagnosed where the problem lies but not the solution yet. I created a `label` and then a `button` to `change labels text` to whatever value the `sum of list` \> `list of values in column` blocks were. What I found was not 1 + 1 + 1 = 3. I found that it combined all of the 1’s and 0’s into a long number. Essentially: 1+1+1=111. See image below - ![Screencap of Sumlist value](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/f/6f0e5519ed77901688e53ea18776b0296249a517.jpeg) Thats when I decided to just work around it. So if I have 7 cards, 100% would = 1111111. 50% would just be the quotient of the live progress (1110000) divided by the 1111111 and an if/then statement of greater than or equal to 0.5 etc etc. Here’s the problem I came to now: I created this logic to test my theory - ![Screencap of trying to change the img on purpose](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/a/da1afcea47dfd5c89fa78b6de8a7fb806aca265f.jpeg) However, when I loaded up the page - it vanished. (See image below) ![No screen or error](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/1/a13a3bce81ec4f3c232585629eddff674a11129c.jpeg) The app was no longer visible and the if I try it on my Live Test app I end up getting an error message with a lot of code reference’s to facebook… I don’t have a facebook plugin on my app so I assume that’s something that thunkable is doing in the background? Anyways; here is the kicker… When I changed the logic to the image below: ![Screencap Not Changing the img on purpose](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/7/e739cef058f22f1847500bced9c8134855cdb891.jpeg) It works just fine. All I did was add one more 0 to the end of the `>=` statement. So: when the app DOESN’T try to change the value in the LDB for the image, it works okay. When the app DOES try to change it, I get errors. I know it is this because I slowly tried taking things out and adding them back in each test and I only got the problem when reintroducing the logic to change the image as triggered. Idea’s on workarounds or why this kind of error is happening? ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [September 11, 2021, 4:39pm UTC](https://community.thunkable.com/t/solved-with-logic-screencaps-adding-an-award-achievement-system-in-app/1492980/11 "2021-09-11T16:39:22Z")
In computers, 1 can be a **number** or a **text** when you try to add numbers together you get the sum of these numbers so 1+1+1=3 However, when you add characters together you are actually placing them one followed the other so “1” + “1” + “1” = “111”. I used the quotes to differentiate between the number and the text but in reality they will be displayed in the screen exactly the same way. ---
**Author:** ![ashesdroid](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ashesdroid/32/127531_2.png) [@ashesdroid](https://community.thunkable.com/u/ashesdroid)\ **Post date:** [September 12, 2021, 11:51pm UTC](https://community.thunkable.com/t/solved-with-logic-screencaps-adding-an-award-achievement-system-in-app/1492980/12 "2021-09-12T23:51:34Z")
That makes sense with what I found on my troubleshooting. The one thing I can’t figure out is how to get the picture to change without crashing the app. No matter what I have tried (even just using a button to change the text for the img reference), the app wont change the image - it just ends up crashing. At this point I’m not even trying to get my triggers to work. I just need to see if I can change the Image for the Data Viewer Grid from ‘A.png’ to ‘B.png’. I wonder if it is because I’m using the alpha-numeric `Row Id` instead of the block? The reason I’m using the Alphanumeric `Row Id` is because I need a specific trigger to activate a specific row; not dynamically. So using the `Row Id` block isn’t really an option because I’m not clicking a `Data Viewer Grid Item`. Do you have any suggestions on how to troubleshoot the problem? I used your logic from the article project you shared with me and adapted it to my project - but it still crashes. **EDIT** I had a thought: What if instead of using a data viewer grid, I use these: A `Column` and make it scroll true. Place multiple Image placeholders with the default image set to ‘A.png’ Then create a button (simulating a triggering event) to change one image since I can use it as a specific block. I’m going to try it in the mean time, but I wanted to post by idea here in the event that you read this and replied before I finished it. ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [September 13, 2021, 1:49am UTC](https://community.thunkable.com/t/solved-with-logic-screencaps-adding-an-award-achievement-system-in-app/1492980/13 "2021-09-13T01:49:41Z")
You’re app crashes because the `row ID` you supply **does not exist**. Use a valid `row ID` and the block would act as expected. ---
**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, 1:16pm UTC](https://community.thunkable.com/t/solved-with-logic-screencaps-adding-an-award-achievement-system-in-app/1492980/14 "2024-11-08T13:16:52Z")