Click in a <div> to <set $> and go to another passage

Twine Version: 2.3.16
Story Format: Sugarcube 2.36.1

Good afternoon.
I need a help of the gods of Twine online, yes… you! :blush:

I’m making an interactive unlinear story in Twine (Sugarcube 2) and some times I need to use a <div>
to adjust the option design. I learned to link this <div> to another passage using:

<a data-passage="some-passage">
   <div class="card">
     Click in this content and go to another passage
   </div>
</a>

My question is:
How can I use the macro <<set $variable>> when the player click in this <div> ?

*Observations:

  • Need to set the $variable in this passage because it will change the content of the next one.
  • Already used this to image only setter:
[img[images\julia.png][passage][$variable to "julia"]]
  • Already used this to text only setter:
<<link "text" "passage">><<set $variable to "julia">><</link>>
  • I was using these “image only” and “text only” options inside the <div>. So the setter works, but only if you click on the text or image. I need this to work when I click anywhere inside the <div>.

Can you help me? I appreciate.
Here’s an example of what I’m trying to do.

You’re looking for the data-setter content attribute.

1 Like

Thank you @TheMadExile, this is exactly what i want!
Now I have something like this, and it works perfectly:

<a data-passage="some-passage" data-setter="$variable to 'julia'">
   <div class="card">
     Click in this content and go to another passage (and set your variable)
   </div>
</a>