+2 votes
by (200 points)
Hi! I'd like to create a passage at the beginning of my story with some options for changing how the story is displayed for accessibility reasons, and I'm wondering what the best way to do that is. I know this is a big question, and I'd appreciate any help you're able to give. I'm using Twine 2.2.1 and Harlowe 2.1.0.

There are three options I'd like players to be able to toggle on or off:

1) a "high-contrast" mode for people with reduced vision, which would change the color of the backward/forward arrows on the left of each passage.

2) a "disable movement" mode for people who are sensitive to visual movement, which would eliminate the several instances of rumble or shudder text-style effects in the story.

3) and an "underline links" mode for colorblind people or people with reduced vision, which would make all links underlined.

I'm hoping the syntax can appear like this to the user:

"Click here to turn on high-contrast mode."

where "here" is a link that toggles the option and changes the text to "Click here to turn off high-contrast mode."

If that implementation is too complicated, I welcome other simpler suggestions. Thanks for your time in advance!

1 Answer

+1 vote
by (230 points)

Hi Palimrya!

I'm not super-experienced with Twine and Harlowe, but I liked this question and I thought I had an idea for a decent answer. I figured it'd take an hour to answer maybe.

Several hours later, I think I've finally got a workable answer for you.

This is my first time trying to answer somebody, so I apologize if it's a bit verbose. I didn't want to make any assumptions about what you knew, so I tried to explain everything as clearly as I could.

I hope this helps!

 

First I'm going to cover the startup passage. This runs before all other code.

<!--
Passage name: "Startup"
Tags: "startup"

Hello Palimrya!
I've written this code as an example of what you want to do. I'm not
assuming anything about your skill level, so if this gets a little
verbose I apologise.

To start with, these backslashes "\" hide the linebreaks in our
code. The code text itself won't appear, but the linebreaks will, so
without them, you'd see loads of empty space.

Additionally, these arrows mark all this text as comments, so it won't
appear when you run the game.

This passage has been tagged with the "startup" tag. That means it'll run
once when your game is started. Any plain text you see here will show up
at the top of the first passage that is displayed.
-->\
(set: $noshudder = false)\
<!--
This function creates our $noshudder variable and sets it to false. We
need to do this before the 
-->\
(set: $rstyle to (color: "red"))\
(set: $sstyle to (text-style: "shudder"))\
<!--
These functions create our style variables $rstyle and $sstyle.
"rstyle" stands for "red-style", and "sstyle" stands for "shudder-style".
We'll use these later.
-->\
This is the startup text. It's going to disappear.\
<!--
These last lines aren't necessary, they're just to show you how the startup
passage works. This code gets run at startup, and everything in it gets
temporarily appended to the first passage. Functionally, that means this
text will appear once at startup, but then disappear for the rest of your
game.
-->

Next up is the First Passage, namely the passage your players will start on.

<!--
Passage: "First Passage"
Tags:

This is the first passage that your players will see. In Twine, it'll be
displayed with a green rocketship in the top left corner. If that's not the
case, you'll have to set it:

- Mouse over this passage.
- Click the ellipsies (...).
- Check the "Start Story Here" option.
-->\
\
\
(if: $noshudder)[(set: $cstyle = $rstyle)]\
(else:)[(set: $cstyle = $rstyle + $sstyle)]\
<!--
This code sets our $cstyle variable according to our $noshudder variable.
If $noshudder is true, then $cstyle won't include our shudder style
variable: $sstyle. Otherwise, it will.
-->\
\
\
$cstyle[Type anything you want here]
<!--
This code uses the $cstyle variable to format some text.
-->\
\
\
(if: $noshudder)[No Shudder.]\
(else:)[Shudder.]
(click-replace: "Shudder")[(display: "choice_noshudder")]\
(click-replace: "No Shudder")[(display: "choice_shudder")]\
<!--
This code is what allows us to toggle between the "Shudder" and "No
Shudder" links.

First it uses an if:else statement to print either "No Shudder" or
"Shudder", depending on the state of our $noshudder variable.

The "click-replace" statements change our keywords into links. Instead of
replacing them with normal text, we use the code from our choice passages.
We'll see how that code works later.
-->\
\
[[Apply|First Passage]]
<!--
This just links back to the current passage. You have to do this in order
to apply the formatting to the text inside. In your game, this will
probably just link back to the main menu or something.
-->

Finally, the two choice passages you'll need to get the toggling to work:

<!--
Passage: "choice_noshudder"
Tags:

This code is very simple. It does three things.
-->\
\
\
No Shudder\
<!--
First, there's the text we want to appear to replace "Shudder" in the passage.
-->\
\
\
(click-replace: "No Shudder")[(display: "choice_shudder")]\
<!--
Second, we run this "click-replace" statement, to turn the code into a link
that will run the code in our "choice_shudder" passage.
-->\
\
\
(set: $noshudder = true)\
<!--
Finally, we set our $noshudder variable to true.
-->
<!--
Passage: "choice_shudder"
Tags:

This code is a mirror of the code in "choice_shudder", so I'm not going to
repeat my comments.
-->\
\
\
Shudder(click-replace: "Shudder")[(display: "choice_noshudder")]\
(set: $noshudder = false)

 

by (157k points)

The (click:) related macros should be avoided whenever possible because each instance needs to scan the whole of the HTML document to find its targets, and because any change made to the structure of the HTML document (like those done by 'append' & 'replace' like macros) can cause these scans to be re-done.

by (230 points)
Yikes. Good to know! Thanks!
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...