0 votes
by (190 points)

I'm probably asking the most noobish question... Someone on this forum taught me something, and I forgot how to do it. I thought it was the Click macro, or maybe link, but neither seem to work for specifically what I want. I want it to be that when you click this one thing, text will appear, and when clicked off, the text would disappear- a toggle switch, if you will.

Now, of course, that can't be enough.. I have to make things complicated- sorry :P while yes I do want this for text only, I also have plans for having one link inside another. Say, random example:

 

<click this macro here>
 <another variable appears that you can click>
  [[goto link here?]]
 <close that link, of course>
<and that one, too>

 

1 Answer

0 votes
by (35.5k points)
edited by

Well, just to start with, the <<click>> macro is the depreciated version of the <<link>> macro.  So, any place where you're using <<click>> you should replace it with <<link>>.

As for toggling the visibility of something, there are a couple of ways to do that, depending on what you need to do.  Probably the simplest involves using the <<toggleclass>> macro with a class which hides things.  So, if you had this in your Stylesheet section:

.hidden {
	display: none;
}

Then you could do something like this:

<<link "Click to toggle visibility of the text below.">>
	<<toggleclass "#togglethis" "hidden">>
<</link>>
@@#togglethis;Click the link above to hide this.@@

(Note: The "@@" stuff is SugarCube's custom style markup.  The final line above is equivalent to "<span id="togglethis">Click the link above to hide this.</span>".)

Of course, the "togglethis" part isn't limited to having text inside, it could be an image or another link or whatever.  If you want it to start out hidden, then you'd do this:

@@#togglethis;.hidden;Click the link above to hide this.@@

Unfortunately, as you may notice if you test that, text you're clicking on in the link will become selected if you click that link too rapidly.  To prevent text from getting selected you could first add this to your Stylesheet section:

.noselect { /* Prevents things from being highlighted/selected. */
	-webkit-touch-callout: none;  /* iOS Safari */
	-webkit-user-select: none;    /* Safari */
	-khtml-user-select: none;     /* Konqueror HTML */
	-moz-user-select: none;       /* Firefox */
	-ms-user-select: none;        /* Internet Explorer/Edge */
	user-select: none;            /* Non-prefixed version, currently supported by Chrome and Opera */
}

and then in your passage you would put something like this:

@@.noselect;<<link "Click to toggle visibility of the text below.">>
	<<toggleclass "#togglethis" "hidden">>
<</link>>@@
@@#togglethis;Click the link above to hide this.@@

That "noselect" class would allow you to spam click that link if you wanted to, and no text would get selected on that link.

If that isn't quite what you're looking for, then an example of what you want it to look like to the user would help.

In any case, that should help you get started.  Have fun!  :-)

by (190 points)

Sadly, I'm not sure of exactly how to use this, nor do I think I used it right. I'm unsure what the final bit in the @@ is supposed to be, after the semicolon. But, using it as is, I would basically create something like... 

 

<<link "People around:">>
	<<toggleclass "#people" "hidden">>
<</link>>
@@#people;Click the link above to hide this.@@

Still not sure what that is supposed to mean, but sort of something like that. But then the problem seems to be, adding links inside of links. Either they both appear, or one appears but clicking leads to nothing. basically I'm trying to get

 

<<link "People you can see around you: ">>
	<<toggleclass "#people" "hidden">>
<<link "Frank">>
    <<toggleclass "#frank" "hidden">>
<<link "other person">>
    <<toggleclass "#stranger" "hidden">>
<</link>>
<</link>>
<</link>>

^something like that, or something. Though i know this likely won't be easy

by (35.5k points)

As I explained above, this:

@@#togglethis;Click the link above to hide this.@@

is equivalent to this:

<span id="togglethis">Click the link above to hide this.</span>

You can replace the "Click the link above to hide this." part with a <<link>> if that's what you want to toggle the visibility of.

For a further explanation of how the "@@" stuff works, see the custom style markup section of the SugarCube documentation.

As for what you're trying to get, I'm having trouble understanding because you keep showing some non-functional pseudo-code, instead of showing me what you actually want the users to see.

Do you want the user to see this?:

People you can see around you: Frank

where "Frank" is one link and the rest is another link?  And if they click on "People you can see around you:" then it becomes this?:

People you can see around you: Frank and another person

where "Frank" is one link and "another person" is another link?  And do you want clicking the "People you see" line again to then hide the "and another person" part?

I'm really unclear on what you want, so if you could explain it like that, it would help a lot.

by (190 points)
Yes, thank you, that is what I wanted. Where clicking on the first link would show another link, which in turn might show information about it. So if a player clicked on "People you can see around you: ", then it would show Frank and the stranger. If they clicked on Frank, it woukld show information about him, and if they clicked on the stranger, of course information about them. From there, if they had the link for people around them clicked and showing Frank and the other person and then clicked on Frank, I would want a few goto links showing things like "Talk to Frank" or "steal his hat", etcetera. I am sorry for any confusion I gave.
by (35.5k points)

OK, in that case what you might actually want to use are the <<linkreplace>> and <<replace>> macros, like this:

<<linkreplace "Look around for other people.">>People you can see around you: \
	<<link "Frank">>
		<<replace "#info">>You see your buddy, Frank.
		You're kind of surprised to see him here.
		[[Ask Frank for help.|Frank helps]]<</replace>>
	<</link>> and <<link "another person">>
		<<replace "#info">>There's also a stranger looking at you.
		He's wearing a trenchcoat and a hat pulled forward over his eyes, so you can't get a good look at him.
		[[Ask the stranger for help.|Stranger helps]]<</replace>>
	<</link>><</linkreplace>>
@@#info;<br><br>@@

The <<linkreplace>> displays the text in quotes as a link.  When that link is clicked on, it gets replaced with the contents of the <<linkreplace>> macro.

The <<replace>> macro, as used above, targets the "#info" span and replaces that span's contents with the contents of the <<replace>> macro.  That will allow you to swap between showing the descriptions of Frank and the stranger, and their links to the next passage, within that span.

The <br>s inside the "#info" span are just linebreaks so that any content below there won't get moved around as much when the <br>s are replaced with text which takes up those lines.  (See info on the HTML <br> element here.)

Hopefully that's what you're looking for.  :-)

by (190 points)

Well, I tried it with link replace, and that does seem to all work. But sadly, it taking the links away wasn't exactly what I was looking for- I wanted the links to stay there, simply lead to more. Now I did manage to make it to where one link will lead to a second, which I will paste below, but it seems that having one lead to another or simply lead to a goto macro isn't going to work. Unsure what the problem is but it keeps saying one of the <</replace>> macros is independent of a parent <<replace>>?

 

<font size=8>Welcome back, <font style=bold>Richard!</font></font>

Friends: 90 
<<link "Friends online: 1">>
	<<replace "#info">><<link "Jackie10">>
<<replace "#info">>[[Message him|chat1]]
<</link>>
<</replace>>
<</replace>>
	<</link>>
@@#info;@@

Thank you for all your help so far. This is a great help, especially if I do need linkreplace later. And, hey, it did evven help me with my non-replaced links, all the same! <3

by (35.5k points)

The problem with that code becomes more obvious if you use proper indentation:

<font size=8>Welcome back, <font style=bold>Richard!</font></font>

Friends: 90 
<<link "Friends online: 1">>
	<<replace "#info">>
		<<link "Jackie10">>
			<<replace "#info">>
				[[Message him|chat1]]
			<</link>>  /* This doesn't match this indent. */
		<</replace>>  /* This doesn't match this indent. */
	<</replace>>
<</link>>
@@#info;@@

What I'm saying about "proper indentation" is that if you have an element in the form "<x>...</x>" then you should indent everything inside that element one "TAB" further in, and then tab back out for the "</x>" part.  This technique ensures that, if you did everything correctly, then all of the elements should have their "head" and "tail" aligned with the same indentation.

Thanks to indenting you can look at the above and easily see that you have your <</link>> and your <</replace>> lines in the wrong order, because those "tails" don't line up properly with their "heads".

As for giving you what you're looking for, it's difficult to do that when you don't write out exactly what you're looking for, even when I ask for it.  I asked you to show me what you actually want the users to see, and the first time you showed me pseudo-code, and the second time you tried to describe it, instead of simply writing: "I want them to see exactly this..." and showing me exactly what it should look like.

The other problem, if I'm understanding what you're asking for now, is that it doesn't sound like good design.  I tried to interpret what you were saying in terms of good design, which also made it difficult to figure out what you were asking for.

The thing is, you shouldn't make the user have to do needless extra clicks, because this is often annoying to the player.  The player shouldn't have to perform multiple tasks to perform one simple action.  Generally speaking, clicks should affect the outcome of the game and be as minimized as possible.  For example, think of a game you've played where the option you frequently needed was buried three levels deep in the menu system.

The second problem is that keeping links around which do nothing useful can be needlessly confusing to the player.  For example, if you click a link, and that link then becomes unnecessary, you should disable that link so the player doesn't waste time trying to figure out why it's still enabled.  That's why I had the "Look around for other people." link turn into "People you can see around you: Frank and another person".

Also, you don't need a <<goto>> macro for anything you've described, because you can make clicking a link take you to another passage.

Now, maybe you have a good reason for doing what you've described, however you haven't communicated what you're trying to do very clearly, so it doesn't look like something you should do.  That's why, "Here's what I'd like to do..." works better than "Please fix this code..." if you're trying to have another person help you.

Anyways, if I understand what you want this time, it would be this:

<font size=8>Welcome back, ''Richard!''</font>

Friends: 90 
<<nobr>>
	<span class="noselect">
		<<link "Friends online: 2">>
			<<toggleclass "#info" "hidden">>
			<<toggleclass "#br1" "hidden">>
		<</link>>
		<span id="br1">
			<br>
		</span>
		<span id="info" class="hidden">
			<blockquote>
				<<link "Jackie10">>
					<<toggleclass "#jchat" "hidden">>
					<<toggleclass "#br2" "hidden">>
				<</link>>
				<span id="jchat" class="hidden">
					<blockquote>
						[[Message him|chat1]]
					</blockquote>
				</span>
				<span id="br2">
					<br>
				</span>
				<<link "Bob1999">>
					<<toggleclass "#bchat" "hidden">>
				<</link>>
				<span id="bchat" class="hidden">
					<blockquote>
						[[Message him|chat2]]
					</blockquote>
				</span>
			</blockquote>
		</span>
	</span>
<</nobr>>

Which also requires this in your Stylesheet section:

.hidden {
	display: none;
}
.noselect { /* Prevents things from being highlighted/selected. */
	-webkit-touch-callout: none;  /* iOS Safari */
	-webkit-user-select: none;    /* Safari */
	-khtml-user-select: none;     /* Konqueror HTML */
	-moz-user-select: none;       /* Firefox */
	-ms-user-select: none;        /* Internet Explorer/Edge */
	user-select: none;            /* Non-prefixed version, currently supported by Chrome and Opera */
}
blockquote {
	-webkit-margin-before: 0px;
	-webkit-margin-after: 0px;
}

That said, I'd simply do something more like this instead:

<font size=8>Welcome back, ''Richard!''</font>

Friends: 90 
Friends online: 2
* Jackie10 ([[Send Message|chat1]])
* Bob1999 ([[Send Message|chat2]])

It's both far simpler to code and it only takes the user one click to do what would take 3 clicks with what I believe you're asking for.

Now, is this less realistic than the interface a real chat program would likely have?  Yes, but "realism" doesn't necessarily equal "fun game play".  Sometimes you have to sacrifice a bit of realism, for the sake of the user's enjoyment, by removing any unnecessary tedium.  This is why games have things like "fast travel".

Anyways, that's my opinion.  I hope you'll think about that at least.

Hope that helps!  :-)

by (190 points)
Thank you, the code does appear to work now. I understand it may be tedious and unnecessary, but for sake of realism I was wanting to add that in for a more realistic interface. I also wish to apologize for not having made clear my wishes. While I'm not all sure what I could have added to make things more understood, I understand that it wasn't peoperly conveyed and thus I apologize for all the troubles it must have caused. Perhaps I should have gone more in-dept about what would be seen by the player's perspective, and how each link would lead in to each other? That likely would have helped. Yet, all the same, it appears to work properly and I am ever thankful and endebted for it.
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.
...