Hi there guys I’m pretty new to using variables & I’m busy doing a Google course for UI/UX though Coursera.
I’m currently working on a Hi-Fidelity prototype for a movie ticketing app that I’ve created.
If created a Seat selection component for a chair that when changed from its default state it changes to a different colour with a tick. Simple enough it’s working but here is where it gets complicated…
When the seat is selected & changes to the active state I’d like it to then using a number variable reflect the selection in an amount/cost. I did sort of manage to get this far but the problem is, when I click the seat again to make it inactive it stays in its active state and the amount/cost stays there. Then further more I’d like the selected seats to reflect in a number as well.
So as each seat is selected it should change to it’s “Active State” then add a Dollar amount upon selection in the app screen then also display a 1/2/3/4 in terms of how many seats are selected. Then upon deselection it should minus from what is elected and revert back to its default state.
What you are trying to achieve is too complicated for a prototype. This will need to be implemented in the code, there is no need to try to recreate this logic in the prototype. A prototype is a prototype, not a fully functioning app.
I set up an interactive booking calendar example using variables that has similar functionality as your seat selector idea. So feel free to take a look and see if that helps.
I think you can do this, with changes as needed:
Create a component for Seat selector (which you have already done)
Create two Number Variables:
Assign these to respective text fields:
On the page you have these components:
Add interaction After Delay 1ms
Set Variable varSelections = 0
varPrice= 0
So whenever this page is loaded, you start with 0.
Thank you, you’re a genius! Really appreciate it.