How to build a form that consumes points (like The Sims!)

Hello Bubblers!

I’m trying to make a form similar to that in the computer game “The SIMS” where a user has some options and can score themself against each one - for example, the options would be as below with the user able to set (preferably on a slider) their score out of 10 for each element.

  • Patient | 1 to 10
  • Kind | 1 to 10
  • Likeable | 1 to 10
  • Intelligent | 1 to 10

But then only have 20 points to be able to make the choices so they can’t be perfect at everything.

I’ve created a hidden text input for

  • Total points
  • Spent points
  • Remaining Points

And built a condition on the sliders that disables them and changes the max value when the remaining points hits zero. The problem is that neither of these things solves the problem.

  • Deactivating the slider means the user can’t then reduce that choice should they need to; it also fails to deactivate when all the points have been spent as the deactivation does not remove the users focus on the control
  • Changing the max value just means that if one point is available, the slider would display this point in the previous position 10, confusing the user

I need either a maximum selectable value (different from max possible value) property to limit in the slider, and for that property to recalculate after every change on any slider linked to the number of points…

Unless - any of you clever people have a better way?? :slight_smile:

Something like this? https://tylerboodman-test-app.bubbleapps.io/version-test/scores?debug_mode=true
I couldn’t get the slider to behave because like you said it’s a little odd setting the max values. So I did + - icons instead.

Here’s the editor link it uses custom states mostly.

Basically I just have conditionals on the + buttons so if the total adds up to 20 then disable input, and if that specific one is 10 disable the input. Then the - disables input when it is 0. Then each + adds 1 to their respective custom state.

#MemoryLane

1 Like

Aaaand this is now stuck in my head late at night before bed

Provided to you with :black_heart: by wise:able :wink:

1 Like

Hi there, @rob.baldwin91… your post posed what I thought was an interesting challenge, and once I started playing around with it, I couldn’t stop until I got something working. To me, though, the challenge got more interesting when I thought about it more holistically (stuff like should the traits be defined via an option set, how will each trait’s points be stored for a user, etc.), so I went all the way down that path, and what I came up with might be, well, awful. That being said, it does do exactly what you described, so what the hell, here goes nuthin’.

First, I did go with an option set for the traits because I use option sets as much as I can.

Next, I was kind of all over the place with my thinking about how to store and display a user’s traits, but ultimately, I couldn’t get away from a repeating group for the display because that just makes sense (to me, at least). So, I landed on using a data type to store each trait for each user.

I didn’t build out the functionality that creates a thing in that data type for each option in the option set when a user signs up, so I am going to skip to the part where a user has signed up and already has four things in that data type.

At this point, displaying the traits for a user is simply a repeating group with a data source of Search for Traits and a constraint on the search of Created By = Current User.

We obviously have a text element in the repeating group that displays the Current cell's Trait's label's Display, but it’s all about the slider element, so let’s get to that now.

First, the slider element is in a group (you’ll see why in a bit) that looks like this.

slider-group

The slider itself is configured like this.

I also have an alert in the repeating group that looks like this.

alert

With all of that stuff in place, we only need two workflows to round out my example. The first workflow sets the current cell’s trait’s points to the slider’s value only when the user isn’t trying to add too many points based on the sum of the points of the other traits.

The second workflow shows an alert and resets the slider group when the user is trying to add too many points.

Finally, with everything above, you get the following, where if the user slides the slider for Kind to any value up to 5, it will work. If they try to slide it past 5, they will get this.

Anyway, that’s what I’ve got, and I hope it helps. even if it’s just food for thought or fodder for someone to ridicule the hell out of me for having way too much time on my hands at a stupidly early time on a Saturday morning.

Best…
Mike

Brilliant response sir, well done!

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.