Click to toggle a variable setting (SugarCube)

I used this on my Twine Tutorial for the Story Format setting. Basically, I wanted the tutorial to give both instructions for Harlowe and SugarCube, without having to write two completely separate tutorials. This allows a first-timer to explore the step-by-step and select a Story Format to follow, as well as a regular user who might want to set the Story Format as soon as they get to the tutorial, to ensure they see the relevant instructions even if they skip around.

1. In the StoryInit passage, declare a variable:
   <<set $sf to "none">>
2. Create a “PassageHeader” passage (could maybe also work in StoryAuthor or StoryCaption to put it in the sidebar; didn’t try it) with the following in the body:\

<div class="header"><<if not tags().includes("noheader")>>
Story Format: <<cycle "$sf" autoselect>>
    <<option "Click to select" none>>
    <<option "Harlowe" h>>
    <<option "SugarCube" sc>>
<</cycle>><</if>></div>

<div class="header"><<if not tags().includes("noheader")>>
Story Format: <<cycle "$sf" autoselect>>
    <<option "Click to select" none>>
    <<option "Harlowe" h>>
    <<option "SugarCube" sc>>
<</cycle>><</if>></div>

This creates a header at the top of each passage (as long as they don’t have the tag “noheader”) that has the label "Story Format: " and then a cycling link that goes through “Click to select”, “Harlowe”, and “SugarCube”. Each option sets the variable $sf to none, h, or sc, respectively.

In the CSS, I styled the header to align right:

.header {
    text-align: right;
}

.header {
    text-align: right;
}

3. Wherever in the tutorial there was a difference in how Harlowe and SugarCube code things, I placed the following code:\

<<if $sf is "h">>HARLOWE INSTRUCTIONS<</if>><<if $sf is "sc">>SUGARCUBE INSTRUCTIONS<</if>>

<<if $sf is "h">>HARLOWE INSTRUCTIONS<</if>><<if $sf is "sc">>SUGARCUBE INSTRUCTIONS<</if>>

4. I also had to account for returning users skipping straight ahead to these passages without first going through the process of setting their Story Format, either through the tutorial or by clicking the header cycling link. In each of these passages, I put the following at the top:

<<if $sf is "none">>Please select a story format above, then click <<link "continue">><<goto nameOfThisPassage>><</link>>.<<else>>

<<if $sf is "none">>Please select a story format above, then click <<link "continue">><<goto nameOfThisPassage>><</link>>.<<else>>

Then the closing <</if>> is at the VERY END of the passage, so that nothing displays other than “Please select a story format above, then click continue.” if no Story Format is set. They go to the cycling link in the header, make sure “Harlowe” or “SugarCube” is displayed, and click continue. It reloads exactly the passage they’re on, with the Story Format set, and now the actual passage content (contained in the <<else>> statement) will show.