[Solved] With logic screencaps = Adding an Award/Achievement System in app

[ashesdroid]

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:

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:

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:

Above is the beginning of the awards triggering a % complete award.

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:

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.

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:

I disabled the Cancel button and set the Confirm button’s text to say “back” so that they weren’t confused:

I hope this works for anyone else that needs idea’s on how to set awards or achievements in your own app.

[muneer]

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.

[ashesdroid]

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.

[ashesdroid]

Here is an update;

I used this method and it broke the screen - as in it wouldn’t even display the screen on testing.

So then I went back to my original idea and tried this:

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”

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.

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.”

[tatiang]

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.

[ashesdroid]

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.

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:

Latest Thunkable ✕ Release; NEW COMPONENTS Data Viewer List and Data Viewer Grid! 2020-05-05

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:

This didn’t change the image when I manually set the trigger.

I then tried this:

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.

[muneer]

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

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.

[ashesdroid]

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).

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.

[muneer]

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

Screen view

[ashesdroid]

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 -

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 -

However, when I loaded up the page - it vanished. (See image below)

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:

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?

[muneer]

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.

[ashesdroid]

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.

[muneer]

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.