A/B voting system implementation

Hello Guys!

I’m facing a problem that I don’t know if it can be solved with Adalo. I’m creating an app where users have to vote images from a collection.

The idea is simple, I want to load 2 images at a time and the user must chose between one of the 2 options. The voted image will have an upvote and the other one will have a downvote. Once the user has voted, 2 new images show up and the process repeats until all the images have been voted by the user.

My approach so far has been to load the images on a slider (by groups of 2) and I would like to add 2 buttons at the bottom where users would chose which option they prefer. See image attached:

The problem is that I’m not able to chose the images on the buttons “Add Action” options. Let’s say Update > Image 1 or Update > Image 2.

Another option which I don’t like it that much would be to add an action when the user clicks on the slider image (that would be the upvote) by adding an action like Update > Current Post. The problem with this second approach is that I’m not able to “downvote” the unvoted image.

Is it possible to have this app made with Adalo? Are there other components that would work better for this approach?

Thank you very much.

Hi @marc,

Welcome to the forum!

To my mind, it is quite possible to implement what you want, though “the devil’s in the details” :slight_smile:
As for me, the way of implementation depends on the logic of image selection. How do you choose the images for the slider? Do you have some unique image IDs stored somewhere?

Best regards, Victor.

P.S. you could also have a look at new horizontal card list component, may be it could be useful for your app.

I think it will be good to do via Deck Swiper

image

Hello @Victor once you upload an image it has an empty “upvote” array of users and an empty “downvote” array of users. What I do then is select the latest uploaded images where the current logged in user is neither on the upvoted array nor the downvoted array.

I have no IDs stored at the time, here’s a screenshot of my collection.

Captura de pantalla 2020-11-12 a les 15.08.36

Is there a way to have the IDs stored somewhere so when the user selects an option I can upload both, the upvoted and the downvoted one?

@oper2k I’m not interested in using the deck swiper, I know it could be done this way but I really want the user to choose between options.

Thank you

What I would do is make these option buttons either lists individually or just make a list that contains both image and button. Sort of what @Victor is suggesting with the horizontal list component.

Because of the relationship between users and images, you can technically update the Logged in User’s upvoted (or downvoted) images which will reciprocally also update those images’ “User upvotes” and “User downvote” Fields

Hi @marc,

Sorry, I don’t quite get the idea here. At the beginning you mentioned that you are choosing between 2 images. Do you just take the 2 latest ones? Or what other logic are you using?
Or you want to present 1 image at a time?

As @pfordmedia mentioned, one of the solutions could be to create the custom list with image & the button(s).

But if you would like have an Image Slider with 2 images + 2 separate buttons (choose 1st / choose 2nd), then you will need to somehow link this button to the images. This could be done with the help of single-item lists (you convert each button to the list, filtered by the image). But the problem here is that you need to know some kind of ID for each of the images. And whole set up becomes pretty complicated.

Hi @pfordmedia thank you for your reply. I have created an horizontal card list (limiting it to two) and now buttons and images are linked but the problem persists.

@Victor I will explain myself again, maybe it wasn’t clear enough the first time:

I want every user to vote all images that he has not voted. For voting he always has to choose between 2 images until he has voted them all. Once he selects which image likes the most, 2 new images show up. The sequence is as follows:

  1. 2 images show up (The filter is “newest images that have no upvotes or downvotes from logged in user”
  2. I “vote” for an image:
  • If I vote for image 1, an upvote from the user will be given to image 1 and a downvote from the same user will be given to image 2.
  • If I select image 2, an upvote from the user will be given to image 2 and a downvote from the same user will be given to image 1.
  1. Since these 2 images have been voted (one upvoted ant the other one downvoted), 2 new images show up.

In this example, by clicking on VOTE, I would be voting for the second image. First image is on the left with its own VOTE button.

Captura de pantalla 2020-11-12 a les 16.50.13

The problem is, when the user selects the one to “upvote” by clicking on the “VOTE” button I can update the Upvoted Post but no the Downvoted post.

Upvoted Post: I add an action to the “VOTE” button which is Logged in user > Upvoted Post > Add current post
Downvoted post: Logged in user > Downvoted Post > “Add no voted post”. How do I add in the logged in user downvoted post the one that has not chosen?

Hope I made everything more clear now…

Thank you guys for your help!

Hi @marc,

Well, this appears to be a complex issue :thinking:

I’ve managed to address another image record from inside the current image (see screenshot below).
Basically, this is a “list inside the list” - a button is a list of images, which is filtered by all images except the “parent” image. You will have similar “Images” to address (see another screenshot), but the one is for “Parent” list, the other is for “Child” list. You can find the right one to update with trial and error :slight_smile:

However, the problem which I don’t know how to solve (yet) is with “maximum number of items”.
It seems it works for all list, and does not respect the filters. When I fix it to 2, upon clicking the button (and upvoting / downvoting 2 latest images), the screen is empty - nothing is refreshed.

The possible way to explore could be trying to somehow limit the number of images in a list displayed with some sort of another filter, like ID. But I don’t have the solution right now.

Screenshot 2020-11-13 at 11.44.44

Best regards, Victor.

Hi @Victor,

Thanks for your reply. I’ve been playing around during the weekend and I have managed to get the “other image” with the list within the list that you mentioned.

The problems I have right now are the ones you mention:

  1. I cannot get the “next” items once the user votes. The screen is empty.
    Acording to the filtering options, 2 new images should show up, the 2 newest ones that the user has not voted.
    At first I thought that maybe Adalo was sorting and then filtering but even if I set the maximum number of items to 4 (in order for the next 2 images to appear) the list doesn’t refresh.
  2. No mater what I put on the “Sorting” section, 2 images always show up, even if I leave empty the “Maximum number of items”.
    Captura de pantalla 2020-11-16 a les 14.05.25

Regarding your answer:

Could you explain this idea a little bit more please?

Hi @marc,

This is the exact same problem I’ve eventually faced. This “maximum number of items” works in a strange way…

With the ID - I’ll write a bit later

Hello @Victor would you be so kind to explain the IDs idea a little bit more please?

Hi @marc,

I’ve made a small POC, please see the video here:

There are some constraints though:

  • images are displayed starting from the ID=1 (oldest)
  • it is obligatory to have even number of images
  • image IDs should be unique and sequential (i.e. 1,2,3,4,…)

Apologies for delay.

Best regards, Victor.

1 Like

Hi @Victor,

Thank you very much for your video and the time you spend trying to solve the problem. Unfortunately, I will not be able to control the total number of images uploaded by the users and I will also have to show the newest images first.

Again, thank you very much for the time you have dedicated to this topic.

Best regards,

Marc

1 Like

Hi @marc, are you still trying to solve it?
I think the “problem” is with the underlying data model, or the relations of images, post, and users.
I read through the conversation several times, and I still don’t get the full picture.
You describe that you want to vote on images, but the link to the users is in posts.
So what do you want to achieve with the voting?
Is it that you want to find the best image for a post?
Meaning a post can have several images and the user votes what fits best.
or
Do you want to find the most voted image in a certain category?
What is the relation of posts and images?
What is the relation of category and images?

Other questions I have:
What is the reason to separate upvote and downvote?
An alternative for voting would be to use just a number to increase or decrease the votings per image/post/category…
This would make ranking much easier.
At least I assume there is a sort of analysis/decision following the voting.
What are you going to do with the voting data?
Ranking, Top lists, Sharing…

Lot’s of questions :slight_smile:

I know, Adalo is a cool and easy tool to build up nice screens with a great app idea in mind.
But when it get’s more complex, it’s better to take a step back and clarify:

  • What do I want to achieve? What problem should the app solve?
  • What data do I need to achieve the goal?
  • What are the relations between the data objects?
  • What are the user input’s/interactions?

Sound a little academic? :wink:
Just one way to get re-started, when hitting a wall.

2 Likes

Hi @marc,

I think I have the start of a solution for your problem.

I reproduced the interesting part of your app with 3 screen https://i.imgur.com/BFc16OK.png

To make this working I’ve slightly changed the database schema:

In the first screen, the “Vote” button create a new Vote entity https://i.imgur.com/KyPsbBd.png and then redirect to the vote screen.

The second screen is constitued of 2 lists of 1 image element and 2 button.
The first list is configured this way: https://i.imgur.com/Wl7Q46A.png
The second is configured in the same way, but for the Post2 Id.
The buttons update the vote by changing the choice value (1 or 2 depending of the button clicked) https://i.imgur.com/YZWBogI.png

Then we calculate the votes for each post (screen 3)
For this we use a custom formula https://i.imgur.com/GNHaaRj.png
Each magic text correspond to a filtered vote count.
There is the 4 filters I’ve used: https://i.imgur.com/wxH7LOv.png , https://i.imgur.com/5QqTuSX.png , https://i.imgur.com/OzIH4qk.png , https://i.imgur.com/yvB1Uks.png

And voilà !

3 Likes

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.