This is the third video in the Teaching Twine series. In it, I cover user-defined macros and changing several visual settings through overwriting the CSS properties of the body and passage elements. I also mention that there will be one more, final video in this series.

Next week, I will be showing one of my own projects, walking through how I am personally using CSS and JavaScript with Twine to make my weekly stories. It will combine all the topics I have covered through the three videos and demonstrate how I use them.

Announcement: After I finish this series, I will be starting one teaching what I have learned to do in Inform 7 to make interactive fiction. It will run at least two videos and most likely finish in early March.

Current Source:

:: Start
<<display “NamePrompt”>>
<<NamePrompt>>

Hi, <<print $name>>. How are you?

:: NamePrompt
<<silently>>
<<set $macroNamePrompt =
function ()  {
macros[‘NamePrompt’] = {
handler: function()  {
$name = prompt(“Please enter your name:”,”Dan”);
if($name eq null or $name eq “”)  {
$name = “Fred”;
}  }  }  }
>>
<<print $macroNamePrompt()>>
<<endsilently>>

:: StoryTitle
A Pirate Tale

:: StoryAuthor
Dan

:: Styles [stylesheet]
body {
font-size: 1.4em;
background: green;
color: white;
}

.passage {
background: green;
color: pink;
font-size: 1.5em;
}

.passage .title {
font-size: 1.6em;
}