0 votes
by (160 points)
retagged by

[Harlowe 2] 

I have an array of strings. I want to replace a string "message goes here" with a random one from my list when you mouseover "Hover here". And when you hover again, it replaces that with another random string ,and so on. For example,

(set: $messages to (a: "msg1", "msg2", "msg3"))
Hover here
* message goes here



1 Answer

+1 vote
by (159k points)
selected by
Best answer

Please user the Question Tags to indicate the story format (and full version) you are using, instead of inducing this information within the Question Text itself.

By default the (mouseover:) macro (and related macros) only triggers a single time before automatically deactivating itself, to get around this behaviour you need to re-applied the macro after each triggering.

This means you will need some means to identify where to reapply the mouse-over to, a way to identify where to show the replacement message, and a way to identify where to run the code that actually attaches the mouseover handler. All three things can be done using named hooks

1. Showing the hover point and defining where to place the message.

The following Passage content assumes that the $messages array has been setup some time prior, ideally within your story's startup tagged special passage.

|hover>[Hover here]
|message>[* message goes here]
|workarea>[(display: "Hover Logic")]

... the hover named hook contains the text you want the used to hover over, the message named hook will contain the outputted message, and the workarea named hook will be used to apply (and re-apply) the mouse-over handler. A (workarea) named hook is used instead of directly calling the "Hover Logic" so that the total depth of HTML element nesting is reduced to the minimum, because nesting too deep can lead to exceeding maximum depth limit related errors.

2. The Hover Logic Passage.

This passage contains the code that applies the mouse-over handler, it's name is not important in so far that whatever you name it needs to be the same as the (display:) macro reference in point 1 as well as the macro reference in the following code. The code uses the (shuffled:) macro to randomly shuffle the messages before selecting the top (1st) one.

(mouseover: ?hover)[\
	(set: _message to (shuffled: ...$messages)'s 1st)\
	(replace: ?message)[_message]\
	(replace: ?workarea)[(display: "Hover Logic")]

 ... replacing the current contents of the workarea named hook with a new copy of this passage causes the mouse-over handle to be re-attached.

3. Hiding the visual output of the workarea named hook.

You will need to use CSS like the following within your Story Stylesheet area to suppress the visual output (line-breaks and such) generated by the "Hover Logic" code.

tw-hook[name="workarea"] {
	display: none;

note: the reason why a named hook is used for the workarea instead of a hidden hook, is because the contents of a hidden hook isn't processed/executed until after it is made visible. (eg. shown)

by (160 points)
Perfect. Thank you so much! very helpful.

Turns out i didn't need to hide the workarea after i enclosed all the lines in {}.
by (159k points)

The Collapsing white-space markup only suppresses line-breaks, it doesn't suppresses any other characters types (like space & tab for instance) which means your workarea may still contain 'visible' content and that content can effect the flow and layout of the page. This is why I suggest using CSS to suppress the rendering of the workarea entirely.