Has anyone had any experience with getting Squiffy to allow users to set attributes without having to click to the next section?

I'm trying to implement a character creator - a paper doll style thing where the user can select hair colour, hair style, eye colour, skin tone etc. And it's easy enough to implement with a series of dropdowns and a layered PNG to output the chosen features. But it's clunky - you have to click through to another section each time to update eg the selected hairstyle.

I really want my users to see the paper doll update immediately, rather than having to do all of them and then output the result (and require the user to go through the whole thing each time to find a combination they like). So they select red - blonde - black - purple from a dropdown, and the paper doll updates immediately with the chosen colour. Is there a way to do this in Squiffy?

There’s two ways that I can think of:

1. One page has all of the paper doll images and text triggered by variables. Each link just links it back to the same page while updating a variable.

Something like:

[[Character Designer]]:

code code code code (this is where all of the doll stuff you’ve programmed goes)

{if eyes=0:
[[Change eyes]](Character Designer, eyes=1)
}
{if eyes=1:
[[Change eyes]](Character Designer, eyes=2)
}
{if eyes=2:
[[Change eyes]](Character Designer, eyes=3)
}
{if eyes=4:
[[Change face]](Character Designer, eyes=0)
}

Notice how it’s programmed to cycle. Repeat this code for other parts of the doll.

2. If for some reason it’s janky to link a link to itself, just switch between two panels that are practically the same. It should update the image instantly.

This is all off the top of my head. If you need me to clarify anything, don’t hesitate! I hope this was of some help! This is actually my first time offering coding help on this site. Usually I’m on the other end of the conversation. Good luck with your game. Happy squiffying!

Thanks broadwaydude! I've actually been attacking this with a will this weekend and figured out a way of doing it within a single section with jQuery, with each layer of the PNG changing as the user changes the associated dropdown value. I'll share it with the group when it's finished - it's really cool!

What I find frustrating with getting more complex javascript to work withinb Squiffy is that any script after the very first section gets ignored. So for example you can't have some initial script that relies on an onClick in an element later - the onClick just isn't recognised.

I'd really like to get something like an old-school Concentration card-matching game working within Squiffy - you know the sort, a number of face down cards, user clicks on two to reveal the face image, if they match they remain face up, if not they go face down and the user tries again until all pairs have been matched, with a time and score at the end. But I can't figure out how to set that up without onClick (and other) events on the card elements!

And another update to this - I've managed to get a jQuery based card-matching game working in Squiffy - now I just need to figure out how to get data from Squiffy into it!

It's exciting news to hear you're progressing fast with seemingly sophisticated code. Let us know when it's out!