Hey everybody,
I am in need for orientation for the following problem:
I want to have a "hint" button in almost every passage which opens a <div> with a hint on how to solve the passage's task. The text for the hint is different for each passage and will be stored in a string within each passage.
I figured the PassageHeader-passage in combination with some <<button>> and <<replace>> macros within a custom widget would do the job. But isn't there a more elegant, maybe pure CSS/jQuery solution?
Thanks!
Comments
My go looks like this: Every passage which can show a hint holds
In the "PassageHeader" special passage I put:
This works as I expected it to, I just wasn't sure, if there wasn't a more elegant way to achieve the same result.
What I am struggling with is when I want to exclude the button from certain passages: works, but doesn't. Could you give me a hint on what I am overlooking?
That said, if you have many passages where the hint button should not be shown, then you're better off tagging each of those passages—e.g. with a tag like nohint—and checking the passage's tags. I'd also suggest a simplification by making the hint spoiler-like, rather than injecting it.
For example, in the PassageHeader special passage: You'll also need the following CSS: (Twine 2: goes in Story Stylesheet; Twine 1: goes in stylesheet-tagged passage) SEE: tags() function and <<toggleclass>> macro.
Actually, if you inject it into the top of the passage via the PassageDone special passage, then you could trigger the whole thing off of the existence of the _hint variable itself—meaning you wouldn't have to check for passage names, tags, or anything else.
For example. Put something like the following in the PassageDone special passage. It prepends the hint spoiler to the top of the passage if and only if you've set the _hint temporary variable within the passage: You'll also need the following CSS: (slightly changed from the previous version) SEE: <<prepend>> macro.
I tried
using
It works as I wanted it to, but the text appears outside of the button.
Continuing with your current method. First problem, you aren't selecting the button, so obviously the text will be outside. You'd need something like the following to target the button: I believe that will do what you need.
That said, I'd probably recommend using a short ID, rather than a class, and a shorter toggled class. For example: And:
PS: Sent from my smartphone, so this is a little light.
can I bug you again? I want a div to appear on the very top of all passages, so I put
in PassageHeader.
I expected it to appear on top of every passage BEFORE the hint button, but the button actually appears first, messing up my layout.
I guess it has something to do with the task object order of execution, but I can't figure it out.
I'll labor under that assumption for now. As PassageDone is executed last among the Passage* special passages, when it prepends the hint button to the passage element, then it, naturally, becomes the first thing within it.
You could resolve that dilemma in a couple of different ways. Here's one example: (based on your examples past and present)