How to create a system of hints which can be toggled on and off in Harlowe

Question

Hi all,

I'm using Harlowe 1.2.2 in Twine 2.0.11.

I want to be able to include some hints in my passages. Currently I am using click-append so that players can click on an important description and get further info. However, this method tends to make it too obvious what to focus on. I'd like to have a hard mode where the hints aren't available.

What I'd like is to use something like click-append, with inline hints, but which can be toggled on and off globally, perhaps with a button or link in the sidebar. If a player wants hints they leave them on; if they don't want hints, they click on "Hints Off" in the sidebar and all the click-append links disappear or are hidden.

I saw an example not unlike this on the old forum: http://twinery.org/forum/discussion/comment/22826/#Comment_22826

But that is for SugarCube2 and uses commands that aren't available in Harlowe.

Any advice for how to proceed? Thanks!

Answer 1

It is hard to comment on a 'better' way to implement the actual showing/hiding of a particular hint without seeing an example of your existing implementation.

On the topic of globally hiding/showing all hints, you could simple use a story value to achieve that.

1. Initialise the controlling variable in your story's startup tagged passage.

(set: $allowHints to true)

2. Gate each hint show link using the $allowHints variable.

(if: $allowHints)[
<!-- Your existing implementation of a hint link. -->
]

3. Use a (link-repeat: ) macro to toggle the $allowHints variable between true and false somewhere within your story. eg. within a header or footer tagged passage.

(link-repeat: "Allow/Disable Hints")[
(if: $allowHints)[(set: $allowHints to false)]\
(else:)[(set: $allowHints to true)]
]

note: All the above code was written without using Twine and has not been tested, it may contain syntax errors. 

Comments

This is terrific, greyelf, thank you. I just realized I might be able to do this by setting a variable in the startup passage. Your point about putting the toggle in the header or footer is a really good one. I was trying to do something with click-replace but link-repeat makes much more sense. 

Here's what my hints currently look like. I'm setting the font to distinguish it from the game's usual font.

(set: $hint to (font: "Times") )
(click-append: "Description of important item.")[ $hint[(//Have you tried doing X with the item?//)] ]

 

---

And, when I followed your links, I realized that I was still using the Harlowe 1.2.4 manual! This explains some of the difficulty I was having finding macros I thought existed. Better update my bookmark...

---

Okay, this seems to work well but unfortunately this interferes with the autosave script I have in my game.

The autosave is in my Startup passage and looks like this:

{
<!-- Set autosave variables -->
(set: $_version to "1.0")
(set: $_autosave_slot to "autosave")
(set: $_autosave_filename to "save v"+$_version)
(set: $_start_passage to "Start")
}

The other part of the autosave is in the first passage, like so:

(unless: (saved-games:) contains $_autosave_slot and (datavalues: (saved-games:)) contains $_autosave_filename)[(goto: $_start_passage)]

<center><div class="menu">''[[New Game->$_start_passage]]
(link: "Continue Game")[(load-game: $_autosave_slot)]''

Here is the toggle-hints script, adapted from greyelf's suggestions:

(if: $allowHints is true)[(print: "Hints On:")](else:)[(print: "Hints Off:")]
(click-replace: "Hints On")[Click Toggle to change whether hints are displayed in future passages]
(link-repeat: "Toggle")[(if: $allowHints is true)[(set: $allowHints to false)] ](else:)[(set: $allowHints to true)]

However, it seems that something to do with the toggling interferes with the autosave, resulting in this error: 

The game's variables contain a complex data structure; the game can no longer be saved.

The error happens after I click on "toggle", but does not happen when I don't.

---

Further investigation reveals that this is a known error: https://twinery.org/forum/discussion/5767/how-do-i-resolve-a-complex-data-structure-save-game-error

The problem was that I was trying to distinguish my hints visually from the other text. I did that like this: 

(set: $hint to (font: "Times") + (css: "font-size: 12px") + (text-style: "italic") )

However, according to L at that link, "You currently can't use the (savegame:) macro if you store a changer command in a variable."

So it looks like I'll have to choose between having styled hints or having a saved game. But the hint system is currently working!

Answer 2

After a lot of fiddling with various solutions, and following many of greyelf's suggestions, I've implemented a hint system I'm happy with. For posterity, here's how I did it.

In the STARTUP passage:

(set: $allowHints to true)

In the FOOTER passage:

(if: $allowHints is true)[(link: "Turn Hints Off")[(set: $allowHints to false)(goto: (passage: )'s name)] ]

(else:)[(link: "Turn Hints On")[(set: $allowHints to true)(goto: (passage: )'s name)] ]

(This reloads the current passage but with hints toggled to the opposite setting. This won't work well if the player has/will set other variables in the passage, because it causes the passage to re-run. If you take out the goto:, the hints will be toggled in all *future* passages.)

At the top of the START passage:

(if: $allowHints is true)[(link-replace: "Gameplay hints are on.")[(link-replace: "Click a hint link for more information. The hint disappears when clicked again.")[(link-replace: "Click 'Turn Off Hints' in the footer to stop displaying gameplay hints.")[ ] ] ] ] 

And an actual hint, anywhere in the passage where you think a player might need one:

{ (if: $allowHints is true)[(click-replace: "There is a treasure chest here.")[There is a treasure chest here (link-replace: "(If only you had the key.)" )[ ] ] ]

}There is a treasure chest here.

 

Comments

Well done.

In regards to the issue of styling selected text without needing to use a complex variable value like that in your $hint example, you can simply wrap that selected text in a named hook and then used a CSS selector based on the name of that hook to target the styling.

1. Using a named hook to mark text to be styled, the following would be in a Passage.

Some regular text |hint>[some styled text] some more regular text.

2. Using a CSS selector based on the hook name to style the text, the follow would be in the Story Stylesheet.

tw-hook[name="hint"] {
	font-family: Times;
	font-size: 12px;
	font-style: italic;
}