2013-06-14 00:21:34 +03:00
<!DOCTYPE html>
< html >
< head >
< meta charset = 'utf-8' >
< meta name = "viewport"
content="width=device-width, initial-scale=1, maximum-scale=1">
2013-06-16 23:12:53 +03:00
< title > Format< / title >
< script type = "text/javascript" src = "gamebookformatplay.js" > < / script >
< link rel = "stylesheet" href = "gamebookformat.css"
type="text/css" />
2013-06-14 00:21:34 +03:00
< script >
2013-06-20 23:59:25 +03:00
if (typeof gamebook !== 'undefined') {
gamebook.id = 'format2';
}
2013-06-14 00:21:34 +03:00
< / script >
< / head >
< body >
< div class = "hideintrolink nodisplay"
onclick="gamebook.hideIntroSections()">HIDE THE INTRO< / div >
< div class = "gamebook" >
< div class = "introsection" >
2013-06-16 22:42:02 +03:00
< div class = "introsectionheading" > Introduction< / div >
2013-06-14 00:21:34 +03:00
< div class = "introsectionbody" >
Adding an introduction to the gamebook here. This will create a section, but it will not be shuffled nor numbered with the gamebook sections below.
< / div >
< / div >
< div class = "introsection" >
2013-06-16 22:42:02 +03:00
< div class = "introsectionheading" > Another Heading< / div >
2013-06-14 00:21:34 +03:00
< div class = "introsectionbody" >
This starts another non-shuffled section.
< / div >
< / div >
2013-06-15 00:25:52 +03:00
2013-06-16 22:18:28 +03:00
< div class = "resumelink nodisplay"
onclick="gamebook.loadGame()">Resume saved game.< / div >
2013-06-14 00:21:34 +03:00
< div class = "startlink"
onclick="gamebook.turnTo(1)">Adventure begins in section 1.< / div >
2013-06-16 22:18:28 +03:00
< script >
2013-06-20 23:59:25 +03:00
if (typeof gamebook !== 'undefined' & & gamebook.hasSavedGame()) {
2013-06-16 22:18:28 +03:00
var resumeLinks = document.getElementsByClassName('resumelink');
Array.prototype.forEach.call(resumeLinks, function(e) {
e.classList.remove('nodisplay');
});
}
< / script >
2013-06-14 00:21:34 +03:00
< div class = "section" id = "section1" >
2013-06-16 22:42:02 +03:00
< div class = "sectionnumber" id = "para1" > 1< / div >
2013-06-14 00:21:34 +03:00
< div class = "sectiontext" >
2013-07-28 19:45:02 +03:00
This examples tests gamebook formatting, not so much game mechanics or references. Currently there is nothing here really. This section contains some tricky characters to quote, like } and { and " and ' and \. HTML will probably not like < div> or & boom;. You can make named references < a class = "sectionref enabledlink" data-ref = "5"
href="#section5">like this< / a > (just happens to be exactly the same syntax as in emacs org-mode btw). There should be an image below as well. If something broke, turn to < a class = "sectionref enabledlink" data-ref = "2"
2013-06-20 23:59:25 +03:00
href="#section2">2< / a > , otherwise turn to < a class = "sectionref enabledlink" data-ref = "3"
href="#section3">3< / a > . < img src = "testimage.png" class = "sectionimage" > < / img >
2013-06-14 00:21:34 +03:00
< / div >
< / div >
< script >
2013-06-29 23:21:06 +03:00
if (typeof gamebook !== 'undefined') {
2013-06-14 00:21:34 +03:00
gamebook.addSection(1, document.getElementById('section1'));
}
2013-06-15 00:25:52 +03:00
< / script > < div class = "section" id = "section2" >
2013-06-16 22:42:02 +03:00
< div class = "sectionnumber" id = "para2" > 2< / div >
2013-06-14 00:21:34 +03:00
< div class = "sectiontext" >
2013-06-16 22:18:28 +03:00
Bad.
2013-06-14 00:21:34 +03:00
< / div >
< / div >
< script >
2013-06-29 23:21:06 +03:00
if (typeof gamebook !== 'undefined') {
2013-06-14 00:21:34 +03:00
gamebook.addSection(2, document.getElementById('section2'));
}
2013-06-15 00:25:52 +03:00
< / script > < div class = "section" id = "section3" >
2013-06-16 22:42:02 +03:00
< div class = "sectionnumber" id = "para3" > 3< / div >
2013-06-14 00:21:34 +03:00
< div class = "sectiontext" >
2013-06-16 22:18:28 +03:00
Good!
2013-06-14 00:21:34 +03:00
< / div >
< / div >
< script >
2013-06-29 23:21:06 +03:00
if (typeof gamebook !== 'undefined') {
2013-06-14 00:21:34 +03:00
gamebook.addSection(3, document.getElementById('section3'));
}
2013-07-28 19:45:02 +03:00
< / script > < div class = "section" id = "section4" >
< div class = "sectionnumber" id = "para4" > 4< / div >
< div class = "sectiontext" >
Very good. < a class = "sectionref enabledlink" data-ref = "3"
href="#section3">You win< / a > .
< / div >
< / div >
< script >
if (typeof gamebook !== 'undefined') {
gamebook.addSection(4, document.getElementById('section4'));
}
< / script > < div class = "section" id = "section5" >
< div class = "sectionnumber" id = "para5" > 5< / div >
< div class = "sectiontext" >
This is where you should end up when you follow the named reference from the starting section. From here you can go to < a class = "sectionref enabledlink" data-ref = "4"
href="#section4">the second named section< / a > or to the < a class = "sectionref enabledlink" data-ref = "3"
href="#section3">good end< / a > .
< / div >
< / div >
< script >
if (typeof gamebook !== 'undefined') {
gamebook.addSection(5, document.getElementById('section5'));
}
2013-06-18 23:21:29 +03:00
< / script > < div id = "counters" class = "counters" >
< / div >
< div id = "counterTemplate" class = "counterTemplate" >
< span class = "counterheading" > < / span >
< span class = "countercontents" > < / span >
< / div >
< / div >
< div id = "collections" class = "collections" >
2013-06-14 00:21:34 +03:00
< / div >
< div id = "collectionTemplate" class = "collectionTemplate" >
< span class = "collectionheading" > < / span >
< span class = "collectioncontents" > < / span >
< / div >
< / div >
< script >
2013-06-20 23:59:25 +03:00
if (typeof gamebook !== 'undefined') {
gamebook.prepare();
2013-06-14 00:21:34 +03:00
}
< / script >
< div class = "displayintrolink nodisplay"
onclick="gamebook.showIntroSections()">SHOW THE INTRO< / div >
2013-06-14 23:24:56 +03:00
< / div >
2013-06-14 00:21:34 +03:00
< / body >
< / html >