Efficiently Creating 'Conversational Style' in Sugarcube

Question

Hi Everyone. I'm very, very new at Twine and Sugarcube, so forgive me for any silly questions.

I'm trying to create an effect where players can make multiple conversational choices without leaving the passage. When the player makes one choice, that choice should highlight and the other choices should fade out, then the appropriate answer appears below. I want to do this for multiple choices in a single passage, then switch passages however I want.

I was able to achieve a single choice version of this (code is below). But I've discovered a few problems with my method:

1. I have to write the text of each choice 3 times, which is really bad. Can I declare all of these as references and then change the CSS style of the text in real time?
2. To get the correct spacing I have to remove all of the linebreaks. However that makes the code practically unreadable. Any tricks to fix this?
3. I don't understand the correct way to reveal the next choice text. After the player chooses one of the first two choices, I want the answer revealed and the next two choices revealed. Do I just have to do a big <<replace>> to do this? Are there any best practices?

This is my current Sugarcube code:

<span id="C1">
		<<click "Choice 1">>
			<<replace "#C1">>
				<<print "@@#choice;Choice 1">>
			<</replace>>
			<<replace "#C2">>
				<<print "@@#unchoice;Choice 2@@">>
			<</replace>>
			<<set _A1 to "Choice 1 Answer">>
			<<replace "#Text_A1">>_A1
			<</replace>>
		<</click>>
</span>


<span id="C2">
		<<click "Choice 2">>
			<<replace "#C2">>
				<<print "@@#choice;Choice 2">>
			<</replace>>
			<<replace "#C1">>
				<<print "@@#unchoice;Choice 1">>
			<</replace>>
			<<set _A1 to "Choice 2 Answer">>
			<<replace "#Text_A1">>_A1
			<</replace>>
		<</click>>
</span>

<span id="Text_A1"></span>

This is my CSS stylesheet:

#unchoice {
 color: rgb(60, 60, 60);
}

#choice {
 color: rgb(190, 130, 0);
}

Thanks in advance.

Answer 1

WARNING:
SugarCube Story History system only persists the changes made to story variables when a Passage Transition occurs which is the activity of moving from one Passage to another (can be the same Passage again), and a Save is a snapshot of the current Story History at the time the save was made.
This means that all the story variable changes you make during your 'conversational' interaction code will NOT be tracked by the History system (and will not be persisted in a Save) until after the next Passage Transition is made.

There are a number of different ways you could implement this, the following is one of them.

1. Place the following CSS within your Story Stylesheet area.

.opaque {
	opacity: 0;
}

.fade-in {
	opacity: 1;
	-webkit-transition: opacity 2s ease-in;
	   -moz-transition: opacity 2s ease-in;
        -ms-transition: opacity 2s ease-in;
         -o-transition: opacity 2s ease-in;
            transition: opacity 2s ease-in;
}

.not-selected {
	opacity: 0;
	-webkit-transition: opacity 2s ease-in;
	   -moz-transition: opacity 2s ease-in;
        -ms-transition: opacity 2s ease-in;
         -o-transition: opacity 2s ease-in;
            transition: opacity 2s ease-in;
	pointer-events: none;
	cursor: default;
}

.selected {
	color: rgb(190, 130, 0);
}

2. Place the following TwineScript with the passage you want to contain the conversation.

<div id="first-question">
	First question?

	<span class="first-choice">
		\<<linkreplace "Choice 1">>
			\@@.selected;Choice 1@@
			\<<addclass "#first-question .second-choice" "not-selected">>
			\<<addclass "#second-question" "fade-in">>
		\<</linkreplace>>
	\</span>
	<span class="second-choice">
		\<<linkreplace "Choice 2">>
			\@@.selected;Choice 2@@
			\<<addclass "#first-question .first-choice" "not-selected">>
			\<<addclass "#second-question" "fade-in">>
		\<</linkreplace>>
	\</span>
</div>
<div id="second-question" class="opaque">
	First Question's Answer.

	Second question?

	<span class="first-choice">
		\<<linkreplace "Choice 1">>
			\@@.selected;Choice 1@@
			\<<addclass "#second-question .second-choice" "not-selected">>
			\<<addclass "#third-question" "fade-in">>
		\<</linkreplace>>
	\</span>
	<span class="second-choice">
		\<<linkreplace "Choice 2">>
			\@@.selected;Choice 2@@
			\<<addclass "#second-question .first-choice" "not-selected">>
			\<<addclass "#third-question" "fade-in">>
		\<</linkreplace>>
	\</span>
</div>
<div id="third-question"  class="opaque">
	... see code for second question....
</div>

... the above works by 'hiding' all the questions but the first and only revealing the next once the previous has been answered, this makes it a little easier to layout the full page of questions and answers because you're not trying to inject each question/answer combination into the page using a <<replace>> macro.

Comments

First off, thanks for warning me about the Save issues. I'll be sure to force a passage transition during important moments.

Secondly, I tried the code and it worked exactly how I expected! Thank you so much for the example, I'll be able to learn from this.

Thanks again!