Making InvisiClues

[Draconis (Daniel Stelzer)]

Back in the Infocom days, their way of giving out hints was “InvisiClues”: a sheet of hints for each puzzle that got progressively clearer, all of which were invisible until you rubbed them with a special pen. This system seems to have worked pretty well, and I’ve been imitating it for my games. (Nor am I the only one!)

For mine, I’ve been using a basic Python script that I originally threw together for Scroll Thief. The input looks like this:

# How do I set up a ghost detector in…
	# …the Entrance?
		There's a [REDACTED].
		Just [REDACTED].
		You'll need to use the [REDACTED].

The script then turns the indentation into a hierarchy of <ol>s. If a line starts with #, it’s given a CSS/JavaScript class that makes it show or hide its children when clicked. If it doesn’t, it’s given a different class that makes it appear as a gray rectangle until clicked or moused over.

This works great—but it’s quite basic, and the results leave something to be desired visually. (It’s very “web 1.0” in appearance.) So I’m posting it here, both so that other people might find it useful…and so that other people might take inspiration for making a better version, especially in terms of the visual presentation. A bit of nice CSS would probably do wonders.

invisimaker.zip (2.1 KB)

[Draconis (Daniel Stelzer)]

Tagging @aschultz, the reason for this thread existing.

[kamineko (Drew Cook)]

seems very helpful, thanks!

thought: archiving this content with a game at IF archive

[dfabulich (Dan Fabulich)]

I also experimented with generating Invisiclues as HTML when I started making Invisiclues for various works of IF, but I’ve come around to the idea that doing it here on the forum is the best way.

https://intfiction.org/tag/invisiclues

I use the forum’s built-in [spoiler] tag to blur out the answers, like this: spoiler.

• I think the spoiler blur looks great
• It works correctly with screen readers (thanks to a bug fix @Dannii provided in July)
• I don’t have to wonder about where to host the HTML
• I can edit the hints at any time; everyone always sees the latest version of the hints (whereas if I distribute hints as separate file, e.g. as a feelie attachment, folks might get an outdated copy)
• Without the forum, if people have follow-up questions, they’d have to email me, but here, they can just reply
• Even better, other people besides me can answer follow-up questions
• IFTF archives the forum in IF Archive, too, so the hints will always be available. https://ifarchive.org/indexes/if-archive/info/intficforum/

Now, truth be told, when writing a large volume of hints, I don’t love typing [spoiler]hint text[/spoiler] over and over, so I have been known to do a little find-and-replace. At first I was in the habit of writing like this:

* This is hint 1.TK
* This is hint 2.TK
* This is hint 3.TK
* This is hint 4.TK

I’d replace "* " with “* [spoiler]” and replace “TK” with “[/spoiler]”. Any find-and-replace tool should be able to do that for you, e.g. MS Word, Google Docs, Notepad, etc. (Just make sure that your word processor doesn’t transform the asterisks “*” into actual bullets “•”.)

But, later, I used Visual Studio Code’s find-and-replace tool, which supports regular expressions.

That allowed me to write:

* This is hint 1.
* This is hint 2.
* This is hint 3.
* This is hint 4.

And then, in VS Code, I’d use regex find-and-replace to replace /\* (.*)/ with * [spoiler]$1[/spoiler]. That would automatically convert the bullets above to:

* [spoiler]This is hint 1.[/spoiler]
* [spoiler]This is hint 2.[/spoiler]
* [spoiler]This is hint 3.[/spoiler]
* [spoiler]This is hint 4.[/spoiler]

[HanonO (Hanon Ondricek)]

Another good way to make invisiclues-style hint guides and walk-throughs is to use Twine, which can be styled with CSS and images to be pretty and match your game branding.

In general, you just make pages with lists of links and you can make them several layers deep to reveal more detailed information.

[HanonO (Hanon Ondricek)]

@dfabulich

I use the forum’s built-in [spoiler] tag to blur out the answers, like this: spoiler.

You can also use the Details tag to fold a section on the forum so the player has to click.

This text will be revealed on a click, and you can also include spoiler blur within!

And another folded section?

Yes!

[details="Text the player can click"]
This text will be hidden. 
[/details]

You can click “Hide Details” from the gear in the compose window to get a pre-formatted clicky details block.

How this entire message is formatted...

[details="You can also use the Details tag to fold a section on the forum so the player has to click."]
This text will be revealed on a click, and you can also include [spoiler]spoiler blur[/spoiler] within!
[details="And another folded section?"]
Yes!

` ` ` [<- imagine back-ticks with no spaces here]

[details="Text the player can click"]
This text will be hidden. 
[/details]

` ` ` [<- no spaces in reality]

You can click "Hide Details" from the gear in the compose window to get a pre-formatted clicky details block.


[/details]

[/details]

[dfabulich (Dan Fabulich)]

@HanonO

Another good way to make invisiclues-style hint guides and walk-throughs is to use Twine, which can be styled with CSS and images to be pretty and match your game branding.

IMO, if you’re authoring the hints for your own game, the very best approach is to embed the hints directly into the game. Then, of course it’ll match your game’s branding, and be just as pretty as the rest of your game.

It’s especially great if you make the hints detect what to show/hide based on the current game state. Invisiclues in a separate page don’t/can’t know what the player has already accomplished, or what the player already knows. (Even just including a GOALS command that tells the player what they’re trying to work on right now is a huge help.)

For example, often when writing Invisiclues, in order to unlock a door, they need to use a key that’s in a hidden location, but the Invisiclues can’t know whether the player has discovered that location yet. If you write the hints like this:

How do I unlock the brass door?

• The key is behind the secret door in the library.
• Search everywhere in the Safe Room …

… well, now you’ve just spoiled the fact that there’s a secret door in the library, which may not be what the player wanted. Typically I try to write the clues like this:

How do I unlock the brass door?

• You can’t unlock it until you find the Safe Room. See hints earlier in this section.
• Search everywhere in the Safe Room …

… but it’s still pretty clumsy.

@HanonO

You can also use the Details tag to fold a section on the forum so the player has to click.

I prefer to use [spoiler] blur instead of [details]. If you don’t include display text, the [details] tag just shows a little triangle, which doesn’t look good and is not obviously clickable.

[details]This is a hint[/details]

This is a hint

But [details] can be useful when the hint’s question is inherently spoilery, like this:

[details="Part Four"]
How do I prevent my best friend from betraying me?
* [spoiler]First hint[/spoiler]
* [spoiler]Second hint[/spoiler]
* [spoiler]Third hint[/spoiler]
[/details]

Part Four

How do I prevent my best friend from betraying me?

• First hint

• Second hint

• Third hint

Even then, you can often get something useful just by blurring out part of the question.

How do I prevent [spoiler]my best friend[/spoiler] from betraying me?
* [spoiler]First hint[/spoiler]
* [spoiler]Second hint[/spoiler]
* [spoiler]Third hint[/spoiler]

How do I prevent my best friend from betraying me?

• First hint

• Second hint

• Third hint

[severedhand]

I write invisiclues with lemon juice. Just apply some heat to make them appear. My monitor is getting a bit scarred, though.

-Wade

[jbg]

For the hints for my WIP, I wrote a little JavaScript snippet to emulate the behavior of InvisiClues: clues are empty boxes, click, hold, and wiggle the cursor around to “develop” the clue.

Not sure what I’m going to do for the accessible version yet.

[aschultz]

That’s some good Python code … I learned a bit of CSS from it too!

I just looked through my PERL script and it’s a bit tangled. I’m happy with what it does, but it’s not so easily shareable.

I agree that in-game hints are worthwhile but they do require time to verify everything works and you’re being pointed in the right direction. For Inform, fortunately, you can have

autohint is a truth state that varies.

understand "autohint on" as turning hints on.
understand "autohint off" as turning hints of. [pseudocode]

every turn when autohint is true (this is the autohint rule to invoke for out of world actions too):
    try hinting;
[also we could have "to decide which item is hint-item" then make an itemhinting function and say "hinting [hint-item]".]

In Inform it’s not too bad with the [one of][or][cycling] construction, too. And I genuinely think that implementing hints forces you to ask questions about how solid your puzzles are.

But if the author is low on time, having quick and dirty invisiclues is handy to have something more than good enough. it’s also nice to be able to have a walkthrough in a text window and the text adventure in the other.

[fredrik (Fredrik Ramsberg)]

There’s also SLAG, a Perl script which turns a text file with hints into Inform 6 source code, producing hint menus.

You can either compile the code as is to produce a standalone program, or cut and paste it into an Inform 6 game.

A Z-code program can of course be made playable online, using borogove.io or some other service.

Here’s the script and a bunch of source files and z5 files: Index: if-archive/solutions/slag

[jbg]

@jbg

For the hints for my WIP, I wrote a little JavaScript snippet to emulate the behavior of InvisiClues: clues are empty boxes, click, hold, and wiggle the cursor around to “develop” the clue.

Replying to myself because I just put up a little demonstration with placeholder names/questions/hints: on a github page.

There’s instructions in the “Introduction” section, but you just click and hold in a clue and move the mouse around to “develop” the clue (like you’re using a marker).

Still no accessible version, but the page is built by a (Bourne shell) script from hint definitions. For example, the “example” question in the intro is defined in a short text file containing:

id: 'sample',
question: 'How many IF authors does it take to screw in a light bulb?',
hints: [
        'Have you tried examining the authors?',
        'Yeah, I wouldn\'t want to either.',
        'It really depends on the size of the lightbulb and the personal preferences of the individual authors.'
],

…so it shouldn’t be difficult to build a parallel, more accessible version from the same clue definitions.

Edit: I noticed that the “click and drag” mechanics used to “develop” a clue weren’t working on touch devices. They should be working now.

[SeanHuxter]

I see some perl and phython and html solutions. What about in-game?

For in-game hints, you might create a command that displays a list of hints you can ask for, and then use a - Understand “lsjuw” as Giving Clue A - and in the hint list just make people type a random set of letters to reveal clues.

This way you are VERY unlikely to reveal a hint accidentally, but will always give the player the key right there in the hint question.

How so I release the pigeon?
Hint 1 - type lkjyyf
Hint 2 - type jj2qd
Hint 3 - type FJJA

Of course this way the player can jump to Hint 3. But if you put the command for the next hint in the previous hint text, you can prevent that too.

How do I release the pigeon?
Hint 1 - LKJF"

LKJF

Have you examined the cage? Hint 2: KRRL

KRRL

Look at the lock. Hint 3: RRJS

RRJS

Break the lock with the hammer.

Etc.

[fredrik (Fredrik Ramsberg)]

The Perl script called SLAG is used to generate source code which you can paste into your Inform 6 / PunyInform game.

When SLAG was created, Inform 6 was one of the most popular platforms for writing IF. Now it’s not quite the same of course.

[SeanHuxter]

Not like I know Inform 7 well, but isn’t it just built over Inform 6? Is there a way to dive down into Inform 6 IN an Inform 7 program? (ie: insert the code generated by SLAG to work within the I7 game)?

[Draconis (Daniel Stelzer)]

There is, but it’s a bit of a pain. Easier to adapt SLAG to produce code intended for I7 use.