How can I change the color of a button if it's been previously pressed? [Snowman 1.3]

0 votes
asked Jul 17 by cwcorella (240 points)

An example of this might be when the player is asking a series of questions that all lead back to a single passage. I need to alter the color of choice buttons that have been previously selected. The player can still access them, but this will make the process easier to follow. 

Here's my stylesheet.

/*choice button*/

#choices {
	list-style: none;
	padding: 0;
	border: 1px solid #bbb;
}
#choices li {
	margin: 0;
	padding: 0;
}
#choices li:not(:first-child) {
	border-top: 1px solid #bbb;
}
#choices li a {
	display: block;
	margin: 0;
	padding: 0.5em 0.8em;
	border: none;
	text-decoration: none;
	font-size: 75%;
}
#choices li a:hover {
	color: #fff;
	background-color: #718389;
}

/*name input button*/

#nameinput button {
  display: block;
	width: 100%;
	border: 1px solid #bbb;
	background-color: inherit;
	line-height: inherit;
  	padding: 0.5em 0.8em;
	text-align: left;
  	font-size: 75%;
  
}
#nameinput button:hover {
	color: #fff;
	background-color: #718389;
}

 

2 Answers

0 votes
answered Jul 17 by greyelf (37,690 points)

You're not going to be able to use the standard :visited CSS pseudo class normally used with link to style selected options due how the web-application works by default.
eg. Doesn't alter the location bar URL, nor does it track history using the web-browser's Navigation History.

I believe you're going to need to use (a) story variable(s) to track which options have been previously selected and then use that information when (dynamically) creating the option links.

0 votes
answered Jul 18 by Mr_Robot (280 points)

As greyelf has already said, the standart :visited pseudo class doesn't work, but Twine is aware of that.

Therefore it adds every visited Button to the .visited class.

So just Swap every ":" in front of "visited" with a "." and it should work.

commented Jul 18 by greyelf (37,690 points)

@Mr_Robot

...but Twine is aware of that. Therefore it adds every visited Button to the .visited class.

The Harlowe story format supports this functionality, unfortunately the Snowman story format that cwcorella is asking this question about does not.

note: The Twine application itself handles the editing of Passage content and the combining of those Passages with a story format to create a story HTML file. It is the story format that supplies all the core functionality and default layout of the generated story HTML file.

commented Jul 18 by Mr_Robot (280 points)
Oh, sorry for the mistake and thank you for the correction, then
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.
...