Fast Tracking Your Branching Scenarios

These are the resources for my workshop on April 19, 2022 at the Learning Solutions Conference in Orlando.

Downloads

Download Twine and install it.

Download the PDF workbook.

If you’d rather plan and brainstorm with a digital version than on paper, use the Word version of the worksheets for Activities 1 and 2. If you don’t have Word available, try the Google Docs version instead.

Examples

See an example of a branching scenario prototype in Twine.

Try another Twine example with conditional feedback.

This chat simulation was built in Twine.

Links from footnotes

  1. How to Conduct a Lightning-Fast Needs Assessment Clients Will Love
  2. CCAF Design
  3. Build Branched E-Learning Scenarios in Three Simple Steps
  4. Twine Cookbook
  5. Harlowe Documentation
  6. A Catalog of Twine Story Formats
  7. Standard Patterns in Choice-Based Games
  8. same
  9. Elearning Art

Enchant macros

It may be easier to copy these enchant macros from here than in the workbook.

Formatting (p. 39)

(enchant:?page,
	(text-color:black)+
	(background:(gradient: 157, 0,#EAF0F7,0.7102,#C1D2E7,1,#F8F7FF))+
	(font:"Open Sans")
)(enchant:?passage,
	(background:(white)) +
	(corner-radius:20) +
	(border:"none", "none", "none", "solid")+
	(border-size:120) +
	(border-color:#6F95C8)
)(enchant:?link,
	(background:#052650) +
	(border:'solid') +
	(color:white) +
	(corner-radius: 12) +
	(border-color:#F8F7FF) +
	(border-size:1) +
	(hover-style: (bg:#3168b0) + (border-color:white))
)

Hide the sidebar (p. 40)

(enchant:?passage,
	(background:(white)) +
	(corner-radius:20) +
	(border:"solid")+
	(border-size:3) +
	(border-color:#6F95C8)
)
(hide:?sidebar)

Add an image to a passage (p.38)

<img src="nia_thinking.png" alt="Jeanne with 1 finger pointing up" width=40% style="float:right">

The only critical part of the code above is the src (source) with the file name; the rest is optional.

If you put your images in a folder, the code looks like this:

<img src="images/nia_thinking.png" alt="Jeanne with 1 finger pointing up" width=40% style="float:right">