(set: ?passage to "
<div class='container'>
<div class='topBackground'></div>
<div class='textBubble'>
We can also use a background of sorts, too, through mixing in some JavaScript using the jQuery library built into Twine already.
</div></div>")
(click: ?passage)[(goto: "Scene 3")]
|passage>[]
<script>
$('.topBackground').css('background', 'blue');
</script>
Although Twine already has the same functionality of most Visual Novel libraries and frameworks, it doesn't usually *look* like one. However, with some CSS and a couple JavaScript functions, we can replicate the look and feel of a visual novel fairly easily.
[[Scene 1]]
(set: ?passage to "
<div class='container'>
<div class='topBackground'></div>
<div class='textBubble'>
For example, through using some CSS positioning, adding a border, and changing a background, we can create the same textboxes commonly found in visual novels.
</div></div>")
(click: ?passage)[(goto: "Scene 2")]
|passage>[]
<div class='container'>
<div class='topBackground'></div>
</div>
<div class="centered">
{(set: ?question1 to "
<div class='question'>Do we want choices?</div>")
(click: ?question1)[(goto: "Scene 4")]
|question1>[]}
{(set: ?question2 to "
<div class='question'>Or maybe we don't care about choices?</div>")
(click: ?question2)[(goto: "Scene 5")]
|question2>[]}
</div>
<script>
$('.topBackground').css('background', 'green');
</script>
(set: ?passage to "
<div class='container'>
<div class='topBackground'></div>
<div class='textBubble'>
Of course! We always want choices!
</div></div>")
(click: ?passage)[]
|passage>[]
(set: ?passage to "
<div class='container'>
<div class='topBackground'></div>
<div class='textBubble'>
Nah. Who needs choices, right?
</div></div>")
(click: ?passage)[]
|passage>[]