Short Sims or iSpring Style in Twine

Twine’s formatting options are flexible enough to replicate other styles as well. For example, you can mimic the look and feel of the Short Sims (which are mostly built in iSpring) by adjusting the style with enchant macros (and a tiny bit of CSS). It’s not a perfect match, but it’s fairly similar. Overall, if you really like this style, it’s probably best to use iSpring (or BranchTrack, which has a similar style that iSpring copied). But, you can a similar effect in Twine.

Here’s the code for your Style passage. Make sure you tag it “header.”

{(enchant:?page,
	(text-colour:#34383D)+
        (bg:#EBEBEB)+
        (font:"Arial")
)(enchant:?passage,
	(bg:(white)) +
	(b4r:"solid")+
	(b4r-size:3) +
	(b4r-colour:#34383D)+
        (css:"padding:1.2em")
)(enchant:?link,
	(text-colour:#34383D)+
        (b4r:"solid")+
	(b4r-color:white) +
	(b4r-size:1) +
	(corner-radius: 10) +
	(hover-style: (bg:#DDE9FF) + (b4r-color:gray))
)(hide:?sidebar)}

Style notes

The page settings are fairly straightforward with text color, background, and font. Where possible, I used the same colors as iSpring’s defaults. I used a light gray background to set it apart from the passage. Arial is the default font used in iSpring.

The passage has a white background and a thin dark gray border in the same color as the text. The one line of CSS here adds some padding inside the passage so the text isn’t right to the edges of the passage.

Even though the links and background are the same color, I found that I needed a white border around the links to get Twine to consistently treat them as slightly rounded rectangles.

The image below is a free character image from Freepik in a similar style to what Clark Aldrich uses for his “pen and ink” style. For free images from Freepik, you need to include attribution like this: Image by callmetak on Freepik.

Tips for the choices

The trick with the links is to use emoticons to add the numbers for each choice. You can add emoticons either to the link text or the passage name. If you add them to the passage name, make sure the choice is always listed in the same order. If you reuse passages multiple times, it’s better to add the number emoticons in the link text where you can adjust them each time.

Add a few blank lines between the text and the choices.

It also helps to enclose the links within the left column so they don’t extend the whole width of the passage.

The second passage shown below uses this markup in the passage.

|||=
Our style guide says we can't use first and second person, so you'll have to change everything to third person.




[[1️⃣ Of course! That will make the training sound more professional, so people will take it more seriously.->Of course! That will make the training sound more professional, so people will take it more seriously.]]

[[2️⃣ Actually, the research tells us that addressing learners directly leads to better results.->Actually, the research tells us that addressing learners directly leads to better results.]]

[[3️⃣ I suggest we keep it mostly third person, but address learners directly in the intro and maybe a few other key places.]]
=|
<img src="images/smile.png" alt="Jeanne smiling">
|==|

Comparing Twine and iSpring

This is the result in Twine.

Twine styled to look like iSpring
Twine styled to look like iSpring, with 3 choices and a light blue hover

Compare that to Short Sims example in the “pen and ink” style.

Screenshot of a short sim