Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Cycling link

Hi! Newbie here. I'm using Twine 2 and Harlowe.
I'm trying to figure out how to include a cycling link, where what you click on will determine the next passage.
I've been looking at forums but getting really lost in all the code.

I would like to code this:

"Young people in Cuba are compassionate/aware/committed." (with these adjectives on a cycling link)

" (+) " (where clicking on this takes you to a different passage depending on which adjective was chosen above.)

This is the format used in the game "Conversations with my mother." and it feels like the best way to present this part of the story.

I understand i need to create a cycling link (i found some code for that and copy pasted it- i dont understand it) and insert a (if:) code so Twine registers what adjective was chosen.

Thank you so much!!


  • The following answer consists of three parts:

    1. Adding the clickCyclingLink function to your Story Javascript area.

    a. Open the Story Javascript editor by clicking on the upwards pointing blue triangle in the lower left corner of the Story Passage Map and select the Edit Story Javascript option.

    b. Open this website, scroll down to the Insert into Story JavaScript (minified):, and then highlight and copy the text within the grey box.

    c. Paste the text into the Story Javascript editor and then close the editor.

    2. Creating the Cycling Link.
    Add the following to the passage you wish the cycling link to appear in, it sets up the variable $peopleAre that the Reader's choice will be store in as well as displays the related text and link.
    (set: $peopleAre to "compassionate")
    Young people in Cuba are <tw-link class='cyclingLink' data-cycling-texts='["compassionate", "aware", "committed"]' onclick='clickCyclingLink(this, "$peopleAre");'>$peopleAre</tw-link>.

    3. Create the conditional next passage link.
    The following creates a link which uses the $peopleAre variable to determine which passage to display next. There are two basic ways this can be done but whichever method you choose you need to add it to the same passage as point 2.

    3a. If the three target passages are named compassionate, aware, and committed then all you need to do is the following:
    (link: "(+)")[(goto: $peopleAre)]

    3b. If the three target passages are not named compassionate, aware, and committed then you will need to do something like the following:
    (link: "(+)")[{
    (if: $peopleAre is "compassionate")[(goto: "First Passage")]
    (elseif: $peopleAre is "aware")[(goto: "Second Passage")]
    (else:)[(goto: "Third Passage")]}]
    ... you will need to replace the First Passage, Second Passage and Third Passage in the above with the actual target passage names.
Sign In or Register to comment.