-
Notifications
You must be signed in to change notification settings - Fork 0
javascript usage in passages
Passages contains the text to display on the screen. This text can be plain text or html-code including script and style partitions.
If you enter something like "[[Next|Encounter]]"
it will be converted when the passage is rendered to
<a href="javascript:void(0)" data-passage="Encounter">Next</a>
If you want to create something that looks like a passage link but calls a function isntead you can use
<a href='javascript:void(0)' onclick='myFunc'>Button</a>
Also, if you have to create dynamic passage links by adding them to html you cannot use [[]]
but have to create the this link by yourself.
Instead of using the <a data-passage>
from above, you could do something like this: fadeout current pasage, switch to other passage (you have to do fadeIn on sm.passage.showing-event)
<a href="javascript:void(0)" onclick='(
$("tw-passage").fadeOut(2000, function(){window.story.show("SleepUntilEvening");}));'
>Sleep Until Evening</a>
If you have a choice in a passage but you dont want to add write a separate passage for the choice outcome, you can change the current passage in place:
<div id="choice">
<a href="javascript:void(0)" id="yes" onclick='choice(this,"div#choice")'>Yes I will come by.</a></br>
<a href="javascript:void(0)" id="no" onclick='choice(this,"div#choice")'>Im not sure about this.</a></br>
</div>
<script>
function choice(elmt,replaceThis) {
var msg ='';
if(elmt.id==="yes") {
msg = "You aggreed to visit them.</br>";
} else {
msg = "You have to think about this.</br>";
}
$(replaceThis).replaceWith(msg);
}
</script>
In the examples above, the html is created in the form of text. This can cause problems if it contains script-code, since the code is embedded as text too.
If it occurs that your code is not working, try to modify the html-DOM-nodes instead modifiying the html-text directly:
function createLink= (itemid,linktext,PointerToFunction){
var entry = document.createElement('a');
entry.id=itemid;
entry.href='javascript:void(0)';
entry.addEventListener("click", PointerToFunction, false);
entry.textContent=linktext;
$("div#panel")[0].appendChild(entry);
$("div#panel")[0].appendChild(document.createElement('br'));
}
What is twine and interactive fiction
Exampl. SuperSimpleStory
What are storyformats
Why snowman
Setup tweego and snowman
Switching between Tweego and Twine
Snowman template methods
Snowman markup
javascript usage
debugging your story
Common issues with template methods and scripting
Story Telling in general
General concepts for IF
Scenes & Sequels
Designing Puzzles
See here about my js-framework running in snowman:
==> problems & solutions <==