Can this be done in Twine?

kwilby

I would like to have a passage similar to this:

Your favorite color is PURPLE and you have a lavender car.

Where someone can click on the bold part, choose between several colors, have the car color change automatically, then be able to change the favorite color (which will then update the car color) as many times as they want before moving on to the next passage.

Is this sort of thing supported in Twine, or would it require reloading the entirety of the passage every time?

Claretta

Depends on the story format. You need to trigger a Javascript function when you click the colour. I know how to do this in SugarCube using the GSAP text replace plugin easy enough. You'd put PURPLE into a click macro where you'd have a GSAP text replace script referencing a <span> around the car text.

Claretta

Eg in SugarCube, after either copying the GSAP TweenMax script into the userlib.js file in Twine 1 (create a new file in the targets/sugarcube directory with this name), or copying the GSAP script straight into the final published HTML file built by Twine 2 (Kinda awkward), and ensuring you also have the sugarcube replace macros installed, you'd write:

Your favorite color is <<replacelink>>black<<becomes>>PURPLE<<script>>var $yourElement = $("#yourElement");TweenLite.to(yourElement, 0, {text:{value:"PURPLE", delimiter:" "}, ease:Linear.easeNone});<</script>><</replacelink>> and you have a <span id="yourElement">black</span> car.

I have no idea how to do this in any other story format, since I am not positive if any other supports simple Javascript use. SugarCube in Twine 1.4 is also the only format that can really easily include a javascript user library.

greyelf

kwilby wrote: »

Is this sort of thing supported in Twine, or would it require reloading the entirety of the passage every time?

The functionality you describe is sometimes knows as a Cycling Link, and there are some simple examples of these on the forum.

As Claretta stated, how you implement this functionality depends totally on which Story Format you chose because each Story Format defines it's own macro language, it's own list of core macros, and the core features available to an Author.

You can implement what you want in one of three ways:

1. Using a story format's built in click/link/replace related macros.

This is possible in both Harlowe and SugarCube (1.x and 2.x), although the solution can become quiet complex.

2. Use custom Javascript to extend the story format's core features.

This can be done (one way or another) for all story format, how you do it depends on the story format.

3. Use a third-party Javascript library (like GSAP) to extend the story format.

Not all third-party Javascript libraries work in all (or any) story formats, it depends on how the library and the story format was designed.

Claretta

Another more simpler way might be to use one of the methods described in here for transition-less passages and just switch back and forth between two identical passages, using <<if>> macros to determine what each shows: http://twinery.org/forum/discussion/6327/removing-transition-completely-from-certain-passages#latest

Sometimes click/replace inside passages can be overly complex if you can just solve the issue with a quick copy and paste to several passages. I use that technique a fair bit - am not sure why it is looked down on sometimes.