JavaScript must be enabled to play.
Browser lacks capabilities required to play.
Upgrade or switch to another browser.
Loading…
<div id="parent"> <div id="passages"></div> <div id="menu" data-passage="menu"> <!--Side menu, editable in the sidemenu passage--> </div> </div> <script> // Close the dropdown menu if the user clicks outside of it function myFunction() { document.getElementById("myMenu").classList.toggle("show"); } window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropup-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } </script>
/* Do not remove the div, Needed to make the title pretty */<div class="title">DEMO af Den sorte skole</div>
<img src='img/sorteskole.webp' width='90%' height='auto'> Af Søren Naur Lindrup© <p><<if Save.autosave.ok() and Save.autosave.has()>><<link "Fortsæt historien">><<script>>Save.autosave.load()<</script>><</link>><</if>> <<link "Start forfra" "0 Om historien">><</link>> <<link "Hent en gemt historie">><<run UI.saves()>><</link>> </p> /*You can also add whatever you want*/
/*<<include "StoryDisplayTitle">>*/ /*<<include "navigation">>*/ <<include "sidemenu">>
<div id="menu"> <<liveblock>><div id="menu-items"> <p style="margin: 0;" title="Gå en side tilbage"><<link '<i class="fa-solid fa-arrow-left"></i>'>><<run Engine.backward()>><</link>></p> <p style="margin: 0;" title="Notesbog"><<link '<i class="fa-solid fa-book"></i>'>> <<popup "NOTESBOG" "NOTESBOG">> <</link>></p> <p style="margin: 0;" title="Bogmærker"><<link '<i class="fa-solid fa-bookmark"></i>'>><<script>>UI.saves();<</script>><</link>></p> <p style="margin: 0;" title="Indstillinger"><<link '<i class="fa-solid fa-gears"></i>'>><<script>>UI.settings();<</script>><</link>></p> <p style="margin: 0;" title="Start forfra"><<link '<i class="fa-solid fa-rotate-left"></i>'>><<script>>UI.restart();<</script>><</link>></p> </div><</liveblock>> </div> /*You can also add whatever you want, it can also be links to passages rather than dialog boxes*/
/*This page is currently hidden. Edit the Menu passage to make it appear!*/ <div> <<link '⮘'>><<run Engine.backward()>><</link>> | <<if State.length === State.size>>⮚<<else>><<link '⮚'>><<run Engine.forward()>><</link>><</if>> </div>
Tilføj indhold
Template created by manonamora ([[Tumblr|https://manonamora-if.tumblr.com/]]/[[Itch|https://manonamora.itch.io/]]) on Twine (v2.7.0)/Tweego with Sugarcube (v2.36.1) Macros: * [[Chapel: Dialog API|https://github.com/ChapelR/custom-macros-for-sugarcube-2/]] Assets: * [[GoogleFonts|https://fonts.google.com]] * [[OpenDyslexic|https://opendyslexic.org]] Other: * [[Twinery.org|https://twinery.org/]] * [[SugarCube 2 Documentation|https://www.motoslave.net/sugarcube/2/docs/]] * [[SugarCube 2 Guide|https://manonamora.itch.io/twine-sugarcube-guide]] * [[Twine Resources List|https://www.tumblr.com/manonamora-if/700577877042888704/interactive-fiction-twine-resource-megalist]] * [[Intfiction.org Forum|https://intfiction.org/c/authoring/twine]] * [[Reddit r/twinegames|https://www.reddit.com/r/twinegames/]] * [[Twine Discord|https://discordapp.com/invite/n5dJvPp]] * [[W3 School|https://www.w3schools.com/]] <h5>You can find my other templates [[here|https://manonamora.itch.io/twine-sugarcube-templates]].</h5>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tellus lorem, porta a eleifend id, iaculis ac risus. Nullam justo nibh, sodales in velit cursus, posuere feugiat mauris. Cras elementum, mauris eu consequat congue, odio velit maximus erat, sit amet euismod nunc metus ut massa. Fusce eu est non orci bibendum vehicula nec vel tortor. Sed non venenatis est, quis scelerisque ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus aliquam tempor libero, a congue neque dapibus vel. Ut venenatis ultricies tortor sed ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam tempor libero nibh, eu ornare ante consequat congue. Donec viverra urna id enim faucibus, eget accumsan est blandit. Maecenas vel nulla cursus, pulvinar eros gravida, vehicula massa. Vestibulum urna lectus, pretium at tristique at, accumsan a est. Nunc vel lacus nec nunc viverra condimentum. Donec ultricies dui eu aliquet luctus. In id egestas neque. Quisque eget metus sit amet orci porttitor iaculis quis consectetur neque. Duis eu ligula iaculis, tempus nunc id, eleifend neque. Mauris ac lorem ac mi condimentum consectetur a vitae arcu. Nulla in consequat lacus. Ut vitae diam sit amet leo elementum varius. [[Styling]]
<h1>Heading 1</h1>\ <h2>Heading 2</h2>\ <h3>Heading 3</h3>\ <h4>Heading 4</h4>\ <h5>Heading 5</h5>\ <h6>Heading 6</h6>\ <h7>Heading 7</h7>\ <hr> <center>''Lists:''</center> <ul> <li>Item 1</li> <li>Item 2</li> </ul> <hr> <center>''Basic Table:''</center> <table> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> </tr> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> </tr> </table> <hr> <center>''Links''</center> //Basic:// [[Basic Macros]] //As a list:// * [[Basic Macros]] //With Div:// <div class="choice">[[Basic Macros]]</div> REDUCERET SKEMA <table class="custom-table"> <tr> <td>Krystalgade/ Landemærket</td> <td>Skindergade</td> <td>Suhmsgade</td> </tr> <tr> <td>Købmagergade</td> <td>Nina Bangs Pl.</td> <td>Løvstræde</td> </tr> <td>Store Kannikestræde</td> <td>Pilestræde</td> <td>Peder Hvitfeldts Stræde</td> </table>
<h2>Textbox</h2>\ <<textbox "_test" 2>> <h2>Text Area</h2>\ <<textarea "_pieEssay" "">> <h2>Radio Buttons</h2>\ What's your favorite pie? <<radiobutton "_pie" "blueberry" autocheck>> Choice 1 <label><<radiobutton "_pie" "cherry" autocheck>> Choice 2 with a label </label> <<radiobutton "_pie" "coconut cream" autocheck>> Choice 3 <h2>Number Box</h2>\ <<numberbox "_wager" 100>> <h2>List Box</h2>\ <<listbox "_answer" autoselect>> <<option "Option 1">> <<option "Option 2">> <<option "Option 3">> <</listbox>> <h2>Cycle</h2>\ <<cycle "_answers" autoselect>> <<option "Option 1">> <<option "Option 2">> <<option "Option 3">> <</cycle>> <h2>Check Box</h2>\ <<checkbox "_pieBlueberry" false true autocheck>> Option 1 <label><<checkbox "_pieCherry" false true autocheck>> Option 2 with a label</label> <<checkbox "_pieCoconutCream" false true autocheck>> Option 3 <h2>Button</h2>\ <<button "I do not do anything">><</button>> [[End]]
<h1>END</h1> <center><<button "Restart?">><<script>>UI.restart();<</script>><</button>> | <<button "Back">><<run Engine.backward()>><</button>></center> /*You can add/change whatever you want*/
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tellus lorem, porta a eleifend id, iaculis ac risus. Nullam justo nibh, sodales in velit cursus, posuere feugiat mauris. Cras elementum, mauris eu consequat congue, odio velit maximus erat, sit amet euismod nunc metus ut massa. Fusce eu est non orci bibendum vehicula nec vel tortor. Sed non venenatis est, quis scelerisque ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus aliquam tempor libero, a congue neque dapibus vel. Ut venenatis ultricies tortor sed ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam tempor libero nibh, eu ornare ante consequat congue. Donec viverra urna id enim faucibus, eget accumsan est blandit. Maecenas vel nulla cursus, pulvinar eros gravida, vehicula massa. Vestibulum urna lectus, pretium at tristique at, accumsan a est. Nunc vel lacus nec nunc viverra condimentum. Donec ultricies dui eu aliquet luctus. In id egestas neque. Quisque eget metus sit amet orci porttitor iaculis quis consectetur neque. Duis eu ligula iaculis, tempus nunc id, eleifend neque. Mauris ac lorem ac mi condimentum consectetur a vitae arcu. Nulla in consequat lacus. Ut vitae diam sit amet leo elementum varius. [[Styling]]
<<cacheaudio "sortskoletema" "aud/sortskoletema.mp3">> <<cacheaudio "wiki" "aud/paperfold.mp3">> <<cacheaudio "hint" "aud/paperfold.mp3">> <<cacheaudio "torden" "aud/torden.mp3">> <<cacheaudio "velkommen" "aud/velkommen.mp3">> <<cacheaudio "førstekategori" "aud/førstekategori.mp3">> <<cacheaudio "vifårse" "aud/vifårse.mp3">> <<cacheaudio "haderfusere" "aud/haderfusere.mp3">> <<cacheaudio "kløgtig" "aud/kløgtig.mp3">> <<cacheaudio "givtrolden" "aud/givtrolden.mp3">> <<cacheaudio "endenkalder" "aud/endenkalder.mp3">> <<cacheaudio "endenkalder" "aud/lærtlektien.mp3">> <<cacheaudio "sommusik" "aud/sommusik.mp3">> <<cacheaudio "sikkeenskam" "aud/sikkeenskam.mp3">> <<cacheaudio "tillykke" "aud/tillykke.mp3">> <<set $isSoundPlaying to false>> <<set $hintCounter = 0>> <<set $hasInventory to false>> <<set $entryFull to false>> <<set $entryOne to false>> <<set $entryTwo to false>> <<set $entryThree to false>> <<set $entryFour to false>> <<set $entryFive to false>> <<set $entrySix to false>> <<set $entrySeven to false>> <<set $entryEight to false>>
Placeholder for link tilbage til startside - Det virker!
<!-- since the scrollbar is built into the passages container, this code resets it to the top each time a new passage is loaded --> <<script>> var passages = document.getElementById("passages"); passages.scrollTop = 0; <</script>> <!-- code to reset the page title in the top right; can be changed or removed altogether as necessary --> <<if tags().includes("title")>> <<elseif tags().includes("credits")>><h1>Credits</h1> <<elseif tags().includes("character")>> <h1>Character</h1> <<elseif tags().includes("codex")>> <h1>Codex</h1> <<else>> <</if>> <!-- code to make sure sound is always playing --> <<if $isSoundPlaying is false>> <<audio 'sortskoletema' volume 0.2 loop play>> <</if>>
<<link 'hovedstad.'>> <<audio "wiki" play>>\ <<dialog 'Danmarks hovedstad'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/kbh1.webp' width='100%' height='auto'></div><div>En hovedstad er en by. Et land kan kun have én hovedstad. Dem der bestemmer i landet arbejder i hovedstaden med for eksempel at lave love. Hovedstaden i et land er tit også landets største by, men ikke altid. </div></div> <</dialog>> <</link>>
/*~ ~ ~ ~ ~ ~ ~ TABLE OF CONTENTS ~ ~ ~ ~ ~ ~ ~ I- Import Fonts a- Google Fonts b- Local Fonts ||- Root Variables ||I- Base CSS a- Scrollbar b- Body c- Base d- Parts e- Scrollbar f- Font Change IV- HTML CSS a- Headers (h1, h2, etc...) b- <label> c- <hr> d- Tables e- Lists f- <a>/Links + Regular + Choice Div V- Macros a- Textbox, Textarea, Select b- Buttons VI- UI Dialog a- Base CSS b- Settins Dialog c- Saves Dialog V||- Menu V||I- Mobile IX- Title Page Notes: CTRL/Cmd+F the Title to jump Theme changes are located below each category affected (ex: .dm body{} will be below body{}) Don't like/care about the themes? you can delete any line with either .gn or .or below! (and the Theme Setting in the Javascript) */ /*************************** IMPORT FONTS ***************************/ /*Text Fonts: Google*/ @import url('https://fonts.googleapis.com/css2?family=Alice&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap'); /* Text Fonts: Local*/ @font-face { font-family: "Dyslexic"; src: url(fonts/OpenDyslexic-Regular.otf) format("opentype"); font-style: normal; font-weight: 400; } @font-face { font-family: "Dyslexic"; src: url(fonts/OpenDyslexic-Italic.otf) format("opentype"); font-style: italic; font-weight: 400; } @font-face { font-family: "Dyslexic"; src: url(fonts/OpenDyslexic-BoldItalic.otf) format("opentype"); font-style: italic; font-weight: 700; } @font-face { font-family: "Dyslexic"; src: url(fonts/OpenDyslexic-Bold.otf) format("opentype"); font-style: normal; font-weight: 700; } /*************************** ROOT VARIABLES ***************************/ /* Her defineres temafarver*/ :root { --mainbg: #181819; --white: #212121; --black: #F8f8f8; --shadow: hsla(0, 0%, 100%, 0.25); --grey: #d8d4d4; --linkblue: royalblue; --button: grey; --dk-mainbg: #181819; --dk-white: #212121; --dk-black: #F8f8f8; --dk-shadow: hsla(0, 0%, 100%, 0.25); --dk-grey: #d8d4d4; --dk-button: grey; --sp-mainbg: #0D0300; --sp-white: #260801; --sp-black: #BFA26B; --sp-shadow: hsla(0, 0%, 100%, 0.25); --sp-grey: #594225; --sp-button: grey; --cursive: 'Dancing Script', cursive; --sansserif: 'Montserrat', sans-serif; --opendyslexic: "Dyslexic", serif; --serif: 'monospace', serif; } /*************************** BASE CSS ***************************/ /* Scrollbar FFX - Chrome*/ * { scrollbar-width: thin; scrollbar-color: inherit inherit; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track {background: inherit;} ::-webkit-scrollbar-thumb {background: inherit;} ::-webkit-scrollbar-thumb:hover {background: inherit;} /*************************** Body ***************************/ body { background: var(--mainbg); font-size: 18px; } .dk body {background-color: var(--dk-mainbg);} .sp body {background-color: var(--sp-mainbg);} /*************************** Base ***************************/ #parent { display: flex; flex-direction: column; justify-content: space-between; background: var(--white); color: var(--black); box-shadow: 0 4px 8px var(--shadow); width: calc(100vw - 14em); height: 100vh; max-height: calc(100vh - 6em); max-width: 40em; line-height: 150%; margin: 1em auto; padding: 2em 4em; } .dk #parent { background: var(--dk-white); color: var(--dk-black); box-shadow: 0 4px 8px var(--dk-shadow); } .sp #parent { background: var(--sp-white); color: var(--sp-black); box-shadow: 0 4px 8px var(--sp-shadow); } /*************************** Parts ***************************/ #menu { border-top: 1px solid var(--black); display: flex; flex-direction: row; justify-content: space-between; padding: 0.5em 0 0; } .dk #menu {border-top: 1px solid var(--dk-black);} .sp #menu {border-top: 1px solid var(--sp-black);} .title { font-style: italic; font-family: 'Alice', serif; } #passages { overflow: auto; height: calc(100vh - 9em); padding: 0 1em 0 0; } /*************************** Front Changes ***************************/ .sansserif body {font-family: var(--sansserif);} .opendyslexic body {font-family: var(--opendyslexic);} .serif body {font-family: var(--serif);} /*************************** HTML CSS ***************************/ /*************************** Headers ***************************/ h1, h2, h3, h4, h5, h6 {font-family: 'Alice', serif;} h1 { text-align: center; font-size: 200%; text-transform: uppercase; } h2 { text-align: right; font-size: 150%; } h3 { font-size: 125%; font-weight: normal; text-decoration: underline overline dotted 1px; margin-left: 3em; } h4 { text-decoration: underline; font-weight: normal; margin-left: 2em; } h5 { font-size: 90%; text-transform: lowercase; margin-left: 1em; } h6 { text-transform: lowercase; text-shadow: 0px 0px 1px var(--grey); } .dk h6 {text-shadow: 0px 0px 1px var(--dk-grey);} .sp h6 {text-shadow: 0px 0px 1px var(--sp-grey);} /*************************** label ***************************/ label { font-weight: bold; } /*************************** hr ***************************/ hr {border-top:1px solid var(--black);} .dk hr {border-top: 5px single var(--dk-black);} .sp hr {border-top: 5px double var(--sp-black);} /*************************** Tables ***************************/ /*Note: if you remove .passage, it will affect the Table in the Save UI. you can also have specific css for tables by adding the relvant divclass before table (ex: .test table will apply to all <table class="test">)*/ .passage table { margin: auto; width: 75%; text-align: center; color: var(--black); } .dk .passage table {color: var(--dk-black);} .sp .passage table {color: var(--sp-black);} .passage table, .passage th, .passage td {border: 1px solid var(--black);} .dk .passage table, .dk .passage th, .dk .passage td {border: 1px solid var(--dk-black);} .sp .passage table, .sp .passage th, .sp .passage td {border: 1px solid var(--sp-black);} .passage th {font-size: 110%;} /*************************** Lists ***************************/ .passage ul { list-style: none; padding-left: 2em; margin: auto; text-align: left; } .passage ul li::before { content: "∼ "; font-weight: bold; } .passage ul li a::before {content: none;} /*************************** Links ***************************/ /*************************** Regular ***************************/ .passage a { color: var(--linkblue); font-weight: bold; } .dk .passage a {color: var(--dk-black);} .sp .passage a {color: var(--sp-black);} .choice a::before {content: "∼ ";} .choice a::after {content: " ∽";} .passage a:hover, .passage a:focus {color: var(--grey);} .dk .passage a:hover, .dk .passage a:focus {color: var(--dk-grey);} .sp .passage a:hover, .sp .passage a:focus {color: var(--sp-grey);} /*************************** Choice Div ***************************/ .choice { background-color: gray; border: 1px dotted rgba(13, 9, 31, 0.805); width: fit-content; padding: 1em; text-align: center; } .dk .choice { background-color: rgba(13, 9, 31, 0.805); border: 1px dotted rgb(246, 244, 248); } .sp .choice { background-color: #401902; border: 1px dotted rgb(246, 244, 248); } /*Sætter farven på choice div links. Tilpasses evt. temaer*/ .choice a { color: var(--black); font-weight: bold; } /*************************** MACROS ***************************/ /*************************** Textbox, Textarea, Select ***************************/ /*Note: input = textbox/numerbox, select = listbox*/ input, textarea, select { background-color: var(--mainbg); color: var(--black); border: 1px var(--black); border-style: dashed; } .dk input, .dk textarea, .dk select { background-color: var(--dk-mainbg); color: var(--dk-black); border: 1px var(--dk-black); } .sp input, .sp textarea, .sp select { background-color: var(--sp-mainbg); color: var(--sp-black); border: 1px var(--sp-black); } input:hover, input:focus, textarea:hover, textarea:focus, select:hover, select:focus { background: var(--button) !important; border: 1px solid var(--black) !important; } .dk input:hover, .dk input:focus, .dk textarea:hover, .dk textarea:focus, .dk select:hover, .dk select:focus { background: var(--dk-white) !important; border: 1px solid var(--dk-black) !important; } .sp input:hover, .sp input:focus, .sp textarea:hover, .sp textarea:focus, .sp select:hover, .sp select:focus { background: var(--sp-white) !important; border: 1px solid var(--sp-black) !important; } input[type="text"] {min-width: 9em;} textarea { min-width: 50%; resize: both; } /*************************** Buttons ***************************/ button { color: var(--black); background-color: var(--mainbg); border: 1px solid var(--black); font-weight: bold; box-shadow: 1px 1px 1px var(--black); } .dk button { color: var(--dk-black); background-color: var(--dk-mainbg); border: 1px solid var(--dk-black); box-shadow: 1px 1px 1px var(--dk-black); } .sp button { color: var(--sp-black); background-color: var(--sp-mainbg); border: 1px solid var(--sp-black); box-shadow: 1px 1px 1px var(--sp-black); } button:hover { background-color: var(--button); border-color: var(--grey); } .dk button:hover { background-color: var(--dk-white); border-color: var(--dk-grey); box-shadow: none; } .sp button:hover { background-color: var(--sp-white); border-color: var(--sp-grey); box-shadow: none; } /*************************** UI DIALOG ***************************/ /*************************** Base CSS ***************************/ #ui-dialog { min-width: 30em; margin-top: 10vh; } #ui-dialog-titlebar { display: flex; background-color: var(--mainbg); color: var(--black); } .dk #ui-dialog-titlebar { background-color: var(--dk-mainbg); color: var(--dk-black); } .sp #ui-dialog-titlebar { background-color: var(--sp-mainbg); color: var(--sp-black); } #ui-dialog-title { font-size: 200%; padding: 1% 0; margin: auto; } #ui-dialog-body { max-height: calc(100% - 2.1em - 10vh); background-color: var(--white); color: var(--black); } .dk #ui-dialog-body { background-color: var(--dk-white); color: var(--dk-black); } .sp #ui-dialog-body { background-color: var(--sp-white); color: var(--sp-black); } #ui-dialog-close { box-shadow: none; height: 100%; } #ui-dialog-close:hover {color: var(--white);} ul.buttons { display: flex; } /*************************** Settings Dialog ***************************/ #ui-dialog h2 {text-align: center;} #ui-dialog-body.settings div[id|="header-body"]:not(:first-child) {border-top: 3px double var(--black);} .dk #ui-dialog-body.settings div[id|="header-body"]:not(:first-child) {border-top: 3px double var(--dk-black);} .sp #ui-dialog-body.settings div[id|="header-body"]:not(:first-child) {border-top: 3px double var(--sp-black);} #ui-dialog-body.settings button[id|="setting-control"] { color: var(--black); background-color: var(--white); } .dk #ui-dialog-body.settings button[id|="setting-control"] { color: var(--dk-black); background-color: var(--dk-white); box-shadow: none; } .sp #ui-dialog-body.settings button[id|="setting-control"] { color: var(--sp-black); background-color: var(--sp-white); box-shadow: none; } #ui-dialog-body.settings button[id|="setting-control"]:hover { background-color: var(--button); border-color: var(--grey); } .dk #ui-dialog-body.settings button[id|="setting-control"]:hover { background-color: var(--dk-white); border-color: var(--dk-grey); box-shadow: 1px 1px 1px var(--dk-black); } .sp #ui-dialog-body.settings button[id|="setting-control"]:hover { background-color: var(--sp-white); border-color: var(--sp-grey); box-shadow: 1px 1px 1px var(--sp-black); } #ui-dialog-body.settings button[id|="setting-control"].enabled { background-color: var(--button); border-color: var(--grey); } .dk #ui-dialog-body.settings button[id|="setting-control"].enabled { background-color: var(--dk-white); border-color: var(--dk-grey); box-shadow: 1px 1px 1px var(--dk-black); } .sp #ui-dialog-body.settings button[id|="setting-control"].enabled { background-color: var(--sp-white); border-color: var(--sp-grey); box-shadow: 1px 1px 1px var(--sp-black); } #ui-dialog-body.settings button[id|="setting-control"].enabled:hover { background-color: var(--mainbg); border-color: var(--black); } .dk #ui-dialog-body.settings button[id|="setting-control"].enabled:hover { background-color: var(--dk-mainbg); border-color: var(--dk-black); box-shadow: none; } .sp #ui-dialog-body.settings button[id|="setting-control"].enabled:hover { background-color: var(--sp-mainbg); border-color: var(--sp-black); box-shadow: none; } /*************************** Saves Dialog ***************************/ #ui-dialog-body button:disabled { background-color: var(--white); border: 1px solid var(--grey); box-shadow: none; color: var(--grey); } .dk #ui-dialog-body button:disabled { background-color: var(--dk-white); border: 1px solid var(--dk-grey); color: var(--dk-grey); } .sp #ui-dialog-body button:disabled { background-color: var(--sp-white); border: 1px solid var(--sp-grey); color: var(--sp-grey); } /*************************** MENU CSS ***************************/ /*************************** Dropdown Button ***************************/ .dropbtn { color: var(--black); border: none; cursor: pointer; } .dk .dropbtn {color: var(--dk-black);} .sp .dropbtn {color: var(--sp-black);} /*************************** Dropdown Button Hover and Focus ***************************/ .dropbtn:hover, .dropbtn:focus { color: var(--grey); text-decoration: none; } .dk .dropbtn:hover, .dk .dropbtn:focus {color: var(--dk-grey);} .sp .dropbtn:hover, .sp .dropbtn:focus {color: var(--sp-grey);} /*************************** Dropdown Container ***************************/ .dropdown { position: relative; display: inline-block; } /*************************** Dropdown Content (Hidden by Default) ***************************/ .dropup-content { display: none; position: absolute; bottom: 2em; right: 0px; text-align: right; background-color: var(--white); z-index: 1; } .dk .dropup-content {background-color: var(--dk-white); } .sp .dropup-content {background-color: var(--sp-white); } /*************************** Menu links ***************************/ .dropup-content a { color: var(--black); padding: 0.3em 0 0.3em 1.5em; text-decoration: none; display: block; } .dk .dropup-content a {color: var(--dk-black);} .sp .dropup-content a {color: var(--sp-black);} .dropup-content a:not(:last-child) {border-bottom: 1px dotted var(--black);} .dk .dropup-content a:not(:last-child) {border-bottom: 1px dotted var(--dk-black);} .sp .dropup-content a:not(:last-child) {border-bottom: 1px dotted var(--sp-black);} /*************************** Change colour of dropdown links on hover ***************************/ .dropup-content a:hover {background-color: var(--button);} .dk .dropup-content a:hover { background-color: var(--dk-button); color: var(--dk-white); } .sp .dropup-content a:hover { background-color: var(--sp-button); color: var(--sp-white); } .show {display:block;} /*************************** MOBILE CSS ***************************/ @media screen and (max-width: 768px) { #parent { width: calc(100vw - 4em); margin: 1em auto; padding: 2em 1em; } #ui-dialog { min-width: 92vw; } } /*************************** TITLE PAGE ***************************/ [data-tags~="cover"] #parent { height: fit-content; position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; } [data-tags~="cover"] #menu {display: none} [data-tags~="cover"] #passages { height: auto; padding: 0; margin: auto; text-transform:uppercase; } [data-tags~="cover"] .passage { text-align: center;} [data-tags~="cover"] .passage h1 {font-size: 250%;0} /*************************** PASSAGE STYLING ***************************/ /* styling for passages with class "havn1" */ body.havn1 { background-image: url("img/havn1.webp"); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; } /* styling for passages with class "tilhavs1" */ body.tilhavs1 { background-image: url("img/tilhavs1.webp"); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; } /* styling for passages with class "tilhavs2" */ body.tilhavs2 { background-image: url("img/tilhavs2.webp"); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; } /* styling for passages with class "hatta" */ body.hatta { background-image: url("img/hatta1.webp"); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; } /* styling for passages with class "steinar" */ body.steinar { background-image: url("img/steinar1.webp"); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; } /* styling for passages with class "helsingor" */ body.helsingor { background-image: url("img/helsingor1.webp"); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; } /* styling for passages with class "fredrikshavn1" */ body.frederikshavn1 { background-image: url("img/frederikshavn1.webp"); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; } /* styling for passages with class "fredrikshavn2" */ body.frederikshavn2 { background-image: url("img/frederikshavn2.webp"); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; } /* styling for passages with class "djuna" */ body.djuna { background-image: url("img/dybhav1.webp"); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; } /* styling for passages with class "arhus" */ body.arhus { background-image: url("img/arhus1.webp"); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; } /* styling for passages with class "mattuk" */ body.mattuk { background-image: url("img/mattuk1.webp"); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; } /* styling for passages with class "middelfart" */ body.middelfart { background-image: url("img/middelfart1.webp"); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; } /* Test styling */ .wrapper{ padding: 10px 10%; } #card-area{ padding: 50px 0; }.box-area{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 40px; margin-top: 50px; } .box { border-radius: 10px; position: relative; overflow: hidden; box-shadow: 5px 5px 15px rgba(0,0,0,0.9); } .box img{ width: 100%; border-radius: 10px; display: block; transition: transform 0.7s; } .overlay { width: 100%; height: 0; background: linear-gradient(transparent,#1c1c1c 58%); border-radius: 10px; position: absolute; left: 0; bottom: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0 40px; text-align: center; font-size: 14px; transition: height 0.5s; } .overlay h3 { font-weight: 500; margin-bottom: 5px; margin-top: 70%; font-family: 'Bebas Neue', sans-serif; font-size: 30px; letter-spacing: 2px; } .overlay a { margin-top: 10px; color: #262626; text-decoration: none; font-size: 14px; background: #fff; border-radius: 50px; text-align: center; padding: 5px 15px; } .box:hover img{ transform: scale(1.05); } .box:hover .overlay{ height: 100%; }
ALM PASSWORD <div id="passwordArea"> What is the name of my neighborhood? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if $password.includes('xxxxxxx') || $password.includes('xxxxx')>> <<goto "xxxxxxx">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen What is the name of my neighborhood? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt What is the name of my neighborhood? <<textbox "$password" "">><</replace>> <</if>> <</button>> PASSWORD SKAL BLOT INDEHOLDE DENNE KOMBINATION AF BOGSTAVER/TAL <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 80>> <<if ["cut", "blue", "wire", "press", "enter", "change", "timer"].every(word => $password.includes(word))>> <<goto "71on the edge of my seat">> <<else>> <<replace "#passwordArea">>Tjek, at du ikke har lavet en stavefejl og prøv igen. What do you do? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt. What do you do? <<textbox "$password" "">><</replace>> <</if>> <</button>> VARIABEL KODE, DER BÅDE ACCEPTERER OG UDELUKKER <div id="passwordArea"> List the remaining three suspects <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if $password.includes('barbie') && $password.includes('lars') && $password.includes('max') && !$password.includes('angeline') && !$password.includes('gertrude') && !$password.includes('luffy') && !$password.includes('justice') && !$password.includes('casper') && !$password.includes('eric')>> <<goto "28the three">> <<else>> <<replace "#passwordArea">>Tjek, at du ikke har lavet en stavefejl og prøv igen. List the remaining three suspects alphabetically <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Din indtastning er for lang. List the remaining three suspects alphabetically <<textbox "$password" "">><</replace>> <</if>> <</button>> ACCEPTERER FORSKELLIGE SVAR OG HAR UDELUKKELSER <div id="passwordArea"> What is the name of my neighborhood? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if $password.includes('xxxxxxx') || $password.includes('xxxxx') && !$password.includes('angeline') && !$password.includes('angeline') && !$password.includes('angeline')>> <<goto "xxxxxxx">> <<else>> <<replace "#passwordArea">>Tjek, at du ikke har lavet en stavefejl og prøv igen. What is the name of my neighborhood? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt What is the name of my neighborhood? <<textbox "$password" "">><</replace>> <</if>> <</button>> PASSWORD MED TO SIMULTANE FELTER, DER SKAL UDFYLDES <div id="passwordArea"> What is the name of my neighborhood? <<textbox "$password1" "">><br><br> What is the name of my city? <<textbox "$password2" "">> </div> <<button "Bekræft Password">> <<set $password1 to $password1.toLowerCase()>> <<set $password2 to $password2.toLowerCase()>> <<if $password1.includes('correctpassword1') and $password2.includes('correctpassword2')>> <<goto "success">> <<else>> <<replace "#passwordArea">>Tjek, at du ikke har lavet en stavefejl og prøv igen. What is the name of my neighborhood? <<textbox "$password1" "">><br><br> What is the name of my city? <<textbox "$password2" "">><</replace>> <</if>> <</button>> PASSWORD FJERNER FELTET OG GIVER NYT CONTENT ELLER OVERGANGE <div id="passwordArea"> What's the password? <<textbox "$password" "">> </div> <div id="confirmButton"> <!-- Wrap the confirm button in a div for easy removal --> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.includes('våd hund') || $password.includes('våd hund i et nyvasket køkken')>> <<replace "#passwordArea">> Correct! The password is accepted. <!-- You can add your new content here, or link to a new passage --> <</replace>> <<replace "#confirmButton">><</replace>> <!-- This removes the confirm button --> <<replace "#hintButton">><</replace>> <!-- This removes the hint button --> <<else>> <<replace "#passwordArea">>Make sure you haven't misspelled the words. Then try again. What's the password? <<textbox "$password" "">><</replace>> <</if>> <</button>> </div> <div id="hintButton"> <!-- Wrap the hint button in a div for easy removal --> <<button "Giv mig en ledetråd">> <<set $hintCounter += 1>> <<replace "#hintUsage">>You have used $hintCounter hints so far.<</replace>> <<audio "hint" play>>\ <<dialog 'Lad os tænke'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/thinker.webp' width='200' height='auto'></div><div> 1. Have you read the page closely? 2. Do you know what you are looking for? 3. Could the internet help you? </div></div> <</dialog>> <</button>> </div> <div id="hintUsage">You have used $hintCounter hints so far.</div> ------------------------------------ PASSWORDKODE DER KRÆVER AT NOGLE TING ER MED MENS KUN NOGLE ANDRE SKAL VÆRE MED. GOD TIL FRIE SVAR - nogle ord SKAL være med, mens andre er enten ord <div id="passwordArea"> Hvad gør du? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 70>> <<if ($password.includes('brille') && $password.includes('dør')) && (($password.includes('tag') || $password.includes('put') || $password.includes('kig')) || ($password.includes('se') || $password.includes('iagttag')))>> <<goto "21">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen Hvad gør du? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt Hvad gør du? <<textbox "$password" "">><</replace>> <</if>> <</button>>
VIDEO CENTRERET EMBEDDED <style> .video-container { margin: auto; max-width: 810px; width: 100%; } .video-container iframe { display: block; margin: auto; } </style> <div class="video-container"> <iframe width="810" height="565" src="https://www.youtube.com/embed/8wU8k2kDaTo" frameborder="0" allowfullscreen></iframe> </div> <<script>> $(document).on(':passagedisplay', function() { $('iframe').each(function() { $(this).attr('src', $(this).attr('src')); }); }); <</script>>
Har slette denne del fra java Setting.addToggle("autoname", { label : "Autoname", desc : "If enabled the saves will be named after your character.", default : false, });
INDSÆT HYPERLINK: <a href="https://youtu.be/u0mp-EXSdf8?si=PcbGevgNzypuAtQP" target="_blank">Learn to use screen shots to keep track of possibilities.</a> <a href="https://www.dask-online.dk/opslag-all.asp?kategori=1" target="_blank">dask-online</a>
INDSÆT BILLEDE <img src="img/eric.webp" style="width:93%"> ELEMENTER VED SIDEN AF HINANDEN <div style="display:flex"> <img src="img/skema4.webp" style="width:45%"> <img src="img/skema5.webp" style="width:45%"> </div> FREMKALD BILLEDER <<linkreplace "Kig på mærkatet">>\ <img src="img/hexagon2.webp" style="width:100%;"> \ <</linkreplace>>
<<timed 5s>> Efter fem sekunder vises denne tekst <</timed>> <<type 60ms>>\ tekst skrevet med typewriter effekt \<</type>> <<timed 5s>> <<type 60ms>>\ Efter fem sekunder skrives denne tekst med typewriter effekt \<</type>> <</timed>> <s> tekst viser sig som streget igennem</s> //tekst i kursiv// <u>underlined text</u> FARVEDE ORD You know you have to cut a wire to delay the detonation of the bomb. The wires are <span style="color: red;">red</span>, <span style="color: blue;">blue</span> and <span style="color: yellow;">yellow</span>.
SÆT CONDITION <<set $hasBully to true>> <<if $hasBully is true>>"Please, just leave me alone. I'll tell you whatever you need" <<else>>You feel good that you didn't threaten the shopkeeper. You catch more flies with honey than vinegar. <</if>> <<set $hasCharm to true>> <<if $hasCharm is true>>"I'll tell you what. I shouldn't give out this sort of information but I'm a lawabiding citizen and to be honest. I didn't like the look of her" <<else>>You feel good about threatening the shopkeeper and hope, he's learned his lesson. <</if>>
<img src="img/zombiesaalborg.webp" style="width:93%"> <div id="passwordArea"> What is the name of my neighborhood? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if $password.includes('xxxxxxx') || $password.includes('xxxxx')>> <<goto "xxxxxxx">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen What is the name of my neighborhood? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt What is the name of my neighborhood? <<textbox "$password" "">><</replace>> <</if>> <</button>> <<button "Giv mig en ledetråd">> <<set $hintCounter += 1>> <<replace "#hintUsage">>Du har brugt $hintCounter ledetråde indtil videre.<</replace>> <<audio "hint" play>>\ <<dialog 'Lad os tænke'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/thinker.webp' width='200' height='auto'></div><div> Svaret findes mellem linjerne </div></div> <</dialog>> <</button>> <div id="hintUsage">Du har brugt $hintCounter ledetråde.</div>
Gud, jeg opdagede, han var en vampyr! <<set $entryOne to true>> (Husk at kigge i notesbogen i menuen, inden du går videre) [[notetest2]]
Nej det var han ikke alligevel! <<set $entryTwo to true>> (Husk at kigge i notesbogen i menuen, inden du går videre) [[notetest3]]
Jeg tror han er en varulv! <<set $entryThree to true>> (Husk at kigge i notesbogen i menuen, inden du går videre) [[notetest4]]
Det viste sig han ikke var en varulv! <<set $entryFour to true>> (Husk at kigge i notesbogen i menuen, inden du går videre) [[notetest5]]
Han er en labrador. Jeg har løst mysteriet! (Husk at kigge i notesbogen i menuen, inden du går videre) <<set $entryFive to true>>
PÅ PASSAGERNE Gud, jeg opdagede, han var en vampyr! <<set $entryOne to true>> Nej det var han ikke alligevel! <<set $entryTwo to true>> <<set $entryOne to false>> Jeg tror han er en varulv! <<set $entryThree to true>> <<set $entryTwo to false>> Nej det var han ikke alligevel! <<set $entryTwo to true>> <<set $entryOne to false>> PÅ NOTESBOGSSIDEN <h1>Denne notesbog ændres HELE indholdet. </h1> <<if $entryOne is true>> Mathias viser tegn på at være en vampyr. Han hader hvidløg!<</if>> <<if $entryTwo is true>> Selvom mine tidligere undersøgelser pegede på det, var han slet ikke en vampyr. Jeg må være mere grundig.<</if>> <<if $entryThree is true>>Min vampyr undersøgelse mundede ud i, at jeg nu tror han er en varulv.<</if>> <<if $entryFour is true>> Jeg fulgte op på min intention og skyggede ham igår aftes. Der var dog kun en hund, der hylede mod Månen.<</if>> <<if $entryFive is true>> Mathias var labradoren, der hylede mod månen. Han er en hund. Mysterie løst.<</if>> ORIGINAL KODE PÅ PASSAGEN <<button "Close Notebook">> <<back>> <</button>>
SIMPEL <<linkreplace "... what do you mean?" t8n>>\ "Well, what I'm sayin' is, you can go 'round all day thinkin' 'bout what's square and what's not, but at the end o' the day, some bloke's gonna try to put you over their knee and when that happens, you don't wanna end up with your britches 'round your ankles. Do ye know what I'm getting at, eh?" <</linkreplace>> YDERLIGERE LINK - go to? <<linkreplace "... what do you mean?" t8n>>\ "Well, what I'm sayin' is, you can go 'round all day thinkin' 'bout what's square and what's not, but at the end o' the day, some bloke's gonna try to put you over their knee and when that happens, you don't wanna end up with your britches 'round your ankles. Do ye know what I'm getting at, eh?" <<link "Fremad!" "drøm 2">><</link>> råber Centurionen. "Vi er på sejrens rand!"! \ <</linkreplace>> VIS BILLEDE OG SENERE FJERN BILLEDE <<linkreplace "Kig ind" t8n>> <<audio "zombiebrevsprække" play>> <<timed 9s t8n>> <span id="imageContainer"><img src="img/zomslot.webp" style="width:93%"></span> <</timed>> <<timed 12s t8n>> // Your existing content <</timed>> <<timed 24s t8n>> <<replace "#imageContainer">><</replace>> <</timed>> <</linkreplace>> VIS BILLEDE OG SENERE INDHOLD OG SENERE SKIFT BILLEDE <<linkreplace "Kig ind" t8n>> <<audio "zombiebrevsprække" play>> <<timed 9s t8n>> <span id="imageContainer"><img src="img/zomslot.webp" style="width:93%"></span> <</timed>> <<timed 12s t8n>> // Your existing content <</timed>> <<timed 24s t8n>> <<replace "#imageContainer">><img src="img/newImage.webp" style="width:93%"><</replace>> <</timed>> <</linkreplace>>
SKJUL ET VALG NÅR ET ANDET VALG VÆLGES OG PRÆSENTER ET NYT <!-- Container for choices --> <div id="choiceContainer"> <!-- Choice 1 --> <<link "Den er jeg med på!" "1 Hvad er dit navn?">><</link>> <!-- Choice 2 --> <<link "Næh!">> <<replace "#choiceContainer">> //Næh!// Hvad siger du? Næh? Skal du være fræk, din lille...!? Ahh, jeg forstår. Du tester mig! Du må være den onde tvilling! Kan du lige give mig til din søde tvilling, tak? <<link "Okay, jeg forstår" "1 Hvad er dit navn?">><</link>> <</replace>> <</link>> </div>> SÆT EN KEY OG GÅ VIDERE: <<link "Har du et fjernsyn?">> <<set $HasFjernsyn to true>> <<goto "15 Seks fod under">> <</link>> ALTERNATIV REPLACE DIALOG MED EN COUNTDOWNTIMER <div id="initial-options"> [[Jeg er klar|Passage1]] <<link "Jeg har brug for lidt mere tid">> <<run setupWaitTimer()>> <<replace "#initial-options">><</replace>> <<replace "#options">>Vent venligst 10 sekunder...<</replace>> <</link>> </div> <div id="options"></div> <<script>> window.setupWaitTimer = function() { // Countdown Timer let seconds = 10; // Function to update the display every second const countdownInterval = setInterval(function() { if (seconds > 0) { seconds--; $("#options").text('Vent venligst ' + seconds + ' sekunder...'); } else { clearInterval(countdownInterval); $("#options").wiki('<<replace "#options">><<link "Nu er jeg klar">><<goto "Passage1">><</link>><</replace>>'); } }, 1000); }; <</script>>
SÆT PLAYERNAME <div id="nameInputArea"> Hvad er så dit navn, unge ven? <<textbox "$playerName" "">> <<button "Det er mit navn">> <<if $playerName.trim().length > 0>> <<set $playerName to $playerName.trim()>> <<goto "2 August">> <!-- Replace 'NextPassage' with the actual passage name you want to go to next --> <<else>> <<replace "#nameInputArea">>Prøv igen, min ven. Jeg kunne ikke høre dig: <<textbox "$playerName" "">><</replace>> <</if>> <</button>> </div> VIS PLAYERNAME Hello, <<print $playerName>>! Welcome to the next part of the story.
KODE TIL CSS i STYLE SHEET FOR AT SKJULE DET INDSATTE, FØR HOVER .hover-info, .click-info { background-color: rgba(255, 255, 255, 0.5); /* semi-transparent */ display: none; /* hide by default */ } .hover-info:hover { display: block; /* show on hover */ cursor: pointer; /* change cursor to indicate interactivity */ } DENNE KODE SÆTTER PIXEL KORDINATOR PÅ ET BILLEDE BEMÆRK: DER ER BÅDE KODE TIL ET HOVERAREAL OG ET KLIKKEAREAL - GÅR UD FRA EN KAN SLETTES <!-- Wrapper for the image and its interactive areas --> <div id="image-map" style="position: relative;"> <img src="img/image.webp" alt="Puzzle Image"> <!-- Hover area --> <div class="hover-info" style="position: absolute; top: 50px; left: 100px; width: 100px; height: 100px;"> </div> <!-- Clickable area --> <div class="click-info" style="position: absolute; top: 150px; left: 200px; width: 100px; height: 100px;"> </div> </div>
KODE PÅ PASSAGER MED SEKSPUNKTER: <<link "Scan the lock">> <<dialog "Scanning magnet lock" class="interactive-image-dialog">> <div id="gameImage"> <div class="hint" style="top: 14%; left: 22%;" onclick="$('#hintText1').toggle();"></div> <div id="hintText1" class="hintText" style="top: 22%; left: 17%;">Cylinder one is retracted.</div> <div class="hint" style="top: 7%; left: 66%;" onclick="$('#hintText2').toggle();"></div> <div id="hintText2" class="hintText" style="top: 14%; left: 65.58%;">Cylinder two is extended.</div> <div class="hint" style="top: 39%; left: 82%;" onclick="$('#hintText3').toggle();"></div> <div id="hintText3" class="hintText" style="top: 48%; left: 71%;">Cylinder three is neutral.</div> <div class="hint" style="top: 78%; left: 73%;" onclick="$('#hintText4').toggle();"></div> <div id="hintText4" class="hintText" style="top: 88%; left: 59%;">Cylinder four is extended.</div> <div class="hint" style="top: 80%; left: 24%;" onclick="$('#hintText5').toggle();"></div> <div id="hintText5" class="hintText" style="top: 89%; left: 0%;">Cylinder five is retracted.</div> <div class="hint" style="top: 45%; left: 12%;" onclick="$('#hintText6').toggle();"></div> <div id="hintText6" class="hintText" style="top: 38%; left: 18%;">Cylinder six is neutral.</div> </div> <</dialog>> <</link>> JAVA: // Skal hjælpe med at få kliks til at virke i interaktive billeder $(document).ready(function() { $('#gameImage').on('click', '.hint', function() { var targetId = $(this).attr('data-target'); $('#' + targetId).toggle(); }); }); // Ny type dialog til interaktive billeder Macro.add('customDialog', { tags: null, handler: function () { var title = this.args[0]; // The title of the dialog var content = this.payload[0].contents; // The HTML content of the dialog var dialogWidth = this.args[1] || '80vw'; // Default width or as specified var dialogHTML = '<div id="custom-dialog" class="custom-dialog-style">' + '<h1>' + title + '</h1>' + '<div>' + content + '</div>' + '</div>'; $.wiki(dialogHTML); $('#custom-dialog').dialog({ width: dialogWidth, modal: true, close: function() { $(this).dialog('destroy').remove(); } }); } }); CSS: /* FØLGENDE SEKTION HANDLER OM CSS TIL INTERAKTIVE BILLEDER OG KORT */ /* Styles for the interactive image container within the dialog */ #gameImage { position: relative; width: 100%; /* Makes sure the image container fills the dialog */ height: 400px; /* Adjust height as needed */ background: url('img/magnetlock.webp') no-repeat center center; /* Adjust image URL as needed */ background-size: cover; } /* Styles for clickable hints */ .hint { position: absolute; width: 8%; /* Relative size of hint */ height: 8%; /* Relative size of hint */ cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; text-align: center; border-radius: 50%; /* Circular hints */ background-color: rgba(211, 211, 211, 0); /* Light grey, but fully transparent by default */ transition: background-color 0.3s ease; /* Smooth transition for background color */ } .hint:hover { background-color: rgba(211, 211, 211, 0.5); /* Light grey with 50% opacity on hover */ } /* Styles for the text displayed when a hint is clicked */ .hintText { display: none; /* Hidden by default */ position: absolute; color: white; background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */ padding: 10px; border-radius: 5px; width: 200px; /* Adjust width as needed */ text-align: left; } /* Specific styles for interactive image dialogues */ #ui-dialog.interactive-image-dialog { width: 90vw; /* Set width as a percentage of the viewport width */ max-width: 1200px; /* Maximum width */ height: auto; /* Adjust height automatically based on content */ } #ui-dialog.interactive-image-dialog #ui-dialog-body { max-height: 90vh; /* Maximum height as a percentage of the viewport height */ } /* Ensure these dialogues use specific background and text color */ #ui-dialog.interactive-image-dialog { background-color: var(--greyblack); /* Specific background for these dialogues */ color: var(--offwhite); /* Specific text color for these dialogues */ } /* Ny type dialogboks */ .custom-dialog-style { background-color: var(--greyblack); /* Custom background */ color: var(--offwhite); /* Custom text color */ width: auto; /* Ensures it resizes based on content */ max-width: 95%; /* Prevents it from becoming too wide */ padding: 20px; /* Adds some padding for aesthetics */ border-radius: 10px; /* Optional: adds rounded corners */ }
Følgende er selfcontained i en dialog. Kræver intet java eller css. Brug inspect i browser til at tilpasse koordinatværdier. ET KLIKPUNKT: <<link "soaking wet young man">> <<audio "wiki" play>> <<dialog "Who's this?">> <div style="color: white; display: flex; align-items: center;"> <div style="margin-right: 20px;"></div> <div style="position: relative; width: 100%;"> <img src="img/nametag.webp" alt="Workplace" usemap="#workmap" style="width: 100%; height: auto;"> <svg viewBox="0 0 500 400" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"> <!-- Rectangle (Phone) --> <rect x="56%" y="52%" width="8.6%" height="6.5%" style="fill: rgba(255, 255, 255, 0.2); cursor: pointer;" onclick="toggleText(event, 'phoneText');"></rect> <!-- Text (Jeremy) --> <text id="phoneText" x="56%" y="50%" fill="white" font-size="14" style="display: none;">Jeremy</text> </svg> </div> </div> <script> function toggleText(event, textId) { var textElement = document.getElementById(textId); if (textElement.style.display === "none" || textElement.style.display === "") { textElement.style.display = "block"; } else { textElement.style.display = "none"; } } </script> <</dialog>> <</link>> MED MANGE PUNKTER: <<link "Scan the lock">> <<dialog "Magnet lock scan">> <div style="color: white; display: flex; align-items: center;"> <div style="margin-right: 20px;"></div> <div style="position: relative; width: 100%;"> <img src="img/magnetlock.webp" alt="Magnet lock scan results" style="width: 100%; height: auto;"> <svg viewBox="0 0 500 400" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"> <!-- Hint 1 --> <circle cx="25%" cy="18%" r="4%" style="fill: rgba(255, 255, 255, 0.2); cursor: pointer;" onclick="toggleText(event, 'hintText1');"></circle> <text id="hintText1" x="24%" y="10%" fill="white" font-size="14" style="display: none; background: black; padding: 2px;">The cylinder is retracted.</text> <!-- Hint 2 --> <circle cx="68.58%" cy="10.95%" r="4%" style="fill: rgba(255, 255, 255, 0.2); cursor: pointer;" onclick="toggleText(event, 'hintText2');"></circle> <text id="hintText2" x="64.58%" y="17%" fill="white" font-size="14" style="display: none; background: black; padding: 2px;">The cylinder is extended.</text> <!-- Hint 3 --> <circle cx="86%" cy="42%" r="4%" style="fill: rgba(255, 255, 255, 0.2); cursor: pointer;" onclick="toggleText(event, 'hintText3');"></circle> <text id="hintText3" x="68%" y="32%" fill="white" font-size="14" style="display: none; background: black; padding: 2px;">The cylinder is neutral.</text> <!-- Hint 4 --> <circle cx="76%" cy="80%" r="4%" style="fill: rgba(255, 255, 255, 0.2); cursor: pointer;" onclick="toggleText(event, 'hintText4');"></circle> <text id="hintText4" x="65%" y="69%" fill="white" font-size="14" style="display: none; background: black; padding: 2px;">The cylinder is extended.</text> <!-- Hint 5 --> <circle cx="26%" cy="83%" r="4%" style="fill: rgba(255, 255, 255, 0.2); cursor: pointer;" onclick="toggleText(event, 'hintText5');"></circle> <text id="hintText5" x="24%" y="91%" fill="white" font-size="14" style="display: none; background: black; padding: 2px;">The cylinder is retracted.</text> <!-- Hint 6 --> <circle cx="14%" cy="47%" r="4%" style="fill: rgba(255, 255, 255, 0.2); cursor: pointer;" onclick="toggleText(event, 'hintText6');"></circle> <text id="hintText6" x="3%" y="39%" fill="white" font-size="14" style="display: none; background: black; padding: 2px;">The cylinder is neutral.</text> </svg> </div> </div> <script> function toggleText(event, textId) { var textElement = document.getElementById(textId); if (textElement.style.display === "none" || textElement.style.display === "") { textElement.style.display = "block"; } else { textElement.style.display = "none"; } } </script> <</dialog>> <</link>>
<div id="passwordArea"> What is the name of my neighborhood? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if $password.includes('xxxxxxx') || $password.includes('xxxxx') && !$password.includes('angeline') && !$password.includes('angeline') && !$password.includes('angeline')>> <<goto "xxxxxxx">> <<else>> <<replace "#passwordArea">>Tjek, at du ikke har lavet en stavefejl og prøv igen. What is the name of my neighborhood? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt What is the name of my neighborhood? <<textbox "$password" "">><</replace>> <</if>> <</button>>
<!-- code to make sure sound is always playing indsættes i passageheader. Husk at preloade og sætte playing til false i storyinit --> <<if $isSoundPlaying is false>> <<audio 'cot' volume 0.1 loop play>> <</if>> YDERLIGERE LYDKODE, DER FAKTISK VIRKER https://www.motoslave.net/sugarcube/2/docs/#macros-audio AFSPIL LYD <<audio "bgm_space" play>>
CLEANED CODE - tjek at den virker. Ellers brug nedenfor <div id="container"> <div id="image1" class="draggable"> <img src="img/godfather.webp" alt="Image 1" draggable="false"> </div> <div id="image2" class="draggable"> <img src="img/godfather2.webp" alt="Image 2" draggable="false"> </div> </div> <style> #container { display: flex; justify-content: space-between; align-items: center; width: 100%; } .draggable { position: relative; cursor: grab; } .draggable.dragging { opacity: 0.5; cursor: grabbing; } .draggable img { max-width: 100%; height: auto; } </style> <script> $(document).ready(function() { let currentDraggable = null; let offsetX = 0, offsetY = 0; let dragCounter = 0; // Handle mousedown event to initiate dragging $('.draggable').on('mousedown', function(e) { currentDraggable = $(this); offsetX = e.clientX - currentDraggable.offset().left; offsetY = e.clientY - currentDraggable.offset().top; currentDraggable.addClass('dragging'); currentDraggable.css('z-index', dragCounter); dragCounter++; }); // Handle mousemove event to move the image $(document).on('mousemove', function(e) { if (currentDraggable) { const left = e.clientX - offsetX; const top = e.clientY - offsetY; currentDraggable.offset({ top: top, left: left }); } }); // Handle mouseup event to stop dragging $(document).on('mouseup', function() { if (currentDraggable) { currentDraggable.removeClass('dragging'); currentDraggable = null; } }); }); </script> ORIGINAL CONTAINER MED 2 BILLEDER <div id="container"> <div id="image1" class="draggable"> <img src="img/godfather.webp" alt="Image 1" draggable="false"> </div> <div id="image2" class="draggable"> <img src="img/godfather2.webp" alt="Image 2" draggable="false"> </div> </div> <style> #container { display: flex; justify-content: space-between; align-items: center; width: 100%; } .draggable { position: relative; cursor: grab; } .draggable.dragging { opacity: 0.5; cursor: grabbing; } .draggable img { max-width: 100%; height: auto; } </style> <script> $(document).ready(function() { let currentDraggable = null; let offsetX = 0, offsetY = 0; let dragCounter = 0; $('.draggable').on('mousedown', function(e) { currentDraggable = $(this); offsetX = e.clientX - currentDraggable.offset().left; offsetY = e.clientY - currentDraggable.offset().top; currentDraggable.addClass('dragging'); currentDraggable.css('z-index', dragCounter); dragCounter = dragCounter + 1; //currentDraggable.parent().append(currentDraggable); // Pop a div to the front }); $(document).on('mousemove', function(e) { if (currentDraggable) { const left = e.clientX - offsetX; const top = e.clientY - offsetY; currentDraggable.offset({ top: top, left: left }); } }); $(document).on('mouseup', function() { if (currentDraggable) { currentDraggable.removeClass('dragging'); currentDraggable = null; } }); }); </script>
<div id="container"> <div id="image1" class="draggable"> <img src="img/godfather.webp" alt="Image 1" draggable="false"> </div> <div id="image2" class="draggable"> <img src="img/godfather2.webp" alt="Image 2" draggable="false"> </div> </div> <style> #container { display: flex; justify-content: space-between; align-items: center; width: 100%; } .draggable { position: relative; cursor: grab; } .draggable.dragging { opacity: 0.5; cursor: grabbing; } .draggable img { max-width: 100%; height: auto; } </style> <script> $(document).ready(function() { let currentDraggable = null; let offsetX = 0, offsetY = 0; let dragCounter = 0; $('.draggable').on('mousedown', function(e) { currentDraggable = $(this); offsetX = e.clientX - currentDraggable.offset().left; offsetY = e.clientY - currentDraggable.offset().top; currentDraggable.addClass('dragging'); currentDraggable.css('z-index', dragCounter); dragCounter = dragCounter + 1; //currentDraggable.parent().append(currentDraggable); // Pop a div to the front }); $(document).on('mousemove', function(e) { if (currentDraggable) { const left = e.clientX - offsetX; const top = e.clientY - offsetY; currentDraggable.offset({ top: top, left: left }); } }); $(document).on('mouseup', function() { if (currentDraggable) { currentDraggable.removeClass('dragging'); currentDraggable = null; } }); }); </script>
Det følgende er en demo af Den Sorte Skole - et klassisk escape room, hvor du netop skal forsøge at bryde ud af et rum. Det minder lidt om en type adventuregames, der kaldes Textadventures, hvor man styrer en karakter og interagerer med omgivelserne via tekstkommandoer. Det betyder, at du nogle gange skal regne ud, hvad det rigtige er at gøre med de genstande og ledetråde, du finder. Hvis du bliver spurgt: "Hvad gør du?" så læs teksten grundigt og tænk over, hvad du har til rådighed, og hvad der kan få dig videre. Historien kan godt være lidt uhyggelig, og jeg anbefaler, at du skruer lidt op for lyden, hvis du vil have det hele med. Så... <img src="img/erduklar.webp" style="width:93%"> Er du klar? <div id="initial-options"> [[Jeg er klar|1]] <<link "Jeg har brug for lidt mere tid">> <<run setupWaitTimer()>> <<replace "#initial-options">><</replace>> <<replace "#options">>Vent venligst 10 sekunder...<</replace>> <</link>> </div> <div id="options"></div> <<script>> window.setupWaitTimer = function() { // Countdown Timer let seconds = 10; // Function to update the display every second const countdownInterval = setInterval(function() { if (seconds > 0) { seconds--; $("#options").text('Vent venligst ' + seconds + ' sekunder...'); } else { clearInterval(countdownInterval); $("#options").wiki('<<replace "#options">><<link "Nu er jeg klar">><<goto "1">><</link>><</replace>>'); } }, 1000); }; <</script>>
Du vågner på gulvet i et mørkt rum. Et øjeblik tvivler du på, om du virkelig er vågen. Hvad foregår der? Du husker ikke at have lagt dig til at sove. Dine tanker afbrydes brat, og du farer sammen, da en fremmed mandestemme bryder stilheden. //"Velkommen til Den Sorte Skole.”// Stemmen kommer fra en højtaler et sted i mørket. <<timed 15s>> <<linkreplace "Hvem er du? Hvad foregår der?" t8n>>//”Hvem er du? Hvad foregår der?” råber du.// Stemmen fortsætter ufortrødent: //”Den første kategori er mundtlighed, og du ønsker ikke at dumpe.”// Højtaleren skratter og slukker. <<audio "førstekategori" play>> [[Mundtlighed?->3]] <</linkreplace>> <</timed>> <<timed 7s>> <<audio "velkommen" play>> <</timed>>
Den sorte skole? Tilhører stemmen en lærer? Du kalder forgæves på stemmen, men der kommer intet svar. Stadig groggy efter søvnen famler du dig frem i mørket og konstaterer snart, at du befinder dig i et rum med fire vægge og en dør. Døren har et stålhåndtag, som ikke kan drejes. Du prøver at skubbe og trække, men døren giver sig ikke. Du er låst inde. Midt i rummet finder du et bord med to ting. Den første er en kuppelformet metalgenstand med et aflangt håndtag. Den virker bekendt, som noget fra et køkken. Kuplen er af bøjeligt materiale med fine masker. Den anden genstand er en cylinder med en kort snor i den ene ende. Overfladen er glat og blød nok til, at du kan ridse i den med en fingernegl. Der må være en mening med de to genstande. Hvad var det stemmen sagde? Det var noget med mundtlighed? <div id="passwordArea"> Hvad vil du gøre? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if $password.includes('sig') && $password.includes('lys')>> <<goto "4">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen Hvad vil du gøre? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt Hvad vil du gøre? <<textbox "$password" "">><</replace>> <</if>> <</button>> <<button "Giv mig en ledetråd">> <<set $hintCounter += 1>> <<replace "#hintUsage">>Du har brugt $hintCounter ledetråde indtil videre.<</replace>> <<audio "hint" play>>\ <<dialog 'Lad os tænke'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/thinker.webp' width='200' height='auto'></div><div> Du har fundet nogle ledetråde. Hvis du kombinerer ordene og husker på, at kategorien handler om mundtlighed, finder du måske en instruktion, der kan hjælpe dig. Prøv at sige ordene højt for dig selv. Du leder efter to korte ord. </div></div> <</dialog>> <</button>> <div id="hintUsage">Du har brugt $hintCounter ledetråde.</div>
Himlen brast, og regnen væltede ned over den sorte skole. Tordenbrag fik teglstenene til at klapre på taget, og indenfor overvågede lærerne eleverne på grynede skærme. <img src="img/personalerummet.webp" style="width:93%"> [[Vågn op->2]] <<audio "torden" play>>
En si og et stearinlys. En si. Et lys. Si. Lys. <<linkreplace "Sig Lys!" t8n>>//"Lys!"// siger du ud i mørket, og få sekunder senere lyder stemmen igen fra højtaleren. ”Måske er du ikke fortabt. Vi får se, vi får se,” siger stemmen, før den igen slukker. En tynd lysstribe bryder frem ved lugen i døren, og et kort øjeblik ser du noget bevæge sig på den anden side. Lyset forsvinder, metallågen klaprer, og noget dumper ned på gulvet med en svag raslen. Du famler dig hen til døren og mærker lugen med fingerspidserne. Den er låst, og døren rokker sig stadig ikke. Nedenfor lugen finder du en æske af en art. Den rasler, da du samler den op, og vejer næsten ingenting. To af siderne føles ru. <div id="passwordArea"> Hvad har du fundet? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if $password.includes('tændstik') || $password.includes('tændstikæske')>> <<goto "5">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen Hvad har du fundet? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt Hvad har du fundet? <<textbox "$password" "">><</replace>> <</if>> <</button>> <<button "Giv mig en ledetråd">> <<set $hintCounter += 1>> <<replace "#hintUsage">>Du har brugt $hintCounter ledetråde indtil videre.<</replace>> <<audio "hint" play>>\ <<dialog 'Lad os tænke'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/thinker.webp' width='200' height='auto'></div><div> Svaret findes mellem linjerne. Hvad kunne passe på beskrivelsen? </div></div> <</dialog>> <</button>> <div id="hintUsage">Du har brugt $hintCounter ledetråde.</div> <<audio "vifårse" play>> <</linkreplace>>
”Se i støvet?” Du trækker hånden hen over væggen, og pudset smuldrer under dine fingre. Dit blik følger støvet, der samler sig i små bunker langs fodlisten. <img src="img/liste.webp" style="width:93%"> Støvet skinner som indlagt med stjerner, når du bevæger lyset over det. Du samler lidt op og gnider det mellem fingrene. Det porøse puds smuldrer, men efterlader små, grå stykker metal. Du fører lyset tættere på og ser dem reflektere flammen. Er det, hvad stemmen vil, at du skal finde? Metal? //Find en måde at udvinde metallet.// <div id="passwordArea"> Hvad gør du? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if ($password.includes('si') && $password.includes('støv')) || $password.includes('brug si')>> <<goto "9">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen Hvad gør du? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt Hvad gør du? <<textbox "$password" "">><</replace>> <</if>> <</button>> <<button "Giv mig en ledetråd">> <<set $hintCounter += 1>> <<replace "#hintUsage">>Du har brugt $hintCounter ledetråde indtil videre.<</replace>> <<audio "hint" play>>\ <<dialog 'Lad os tænke'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/thinker.webp' width='200' height='auto'></div><div> Vidste du, at du har en notesbog i menuen nederst på skærmen? </div></div> <</dialog>> <</button>> <div id="hintUsage">Du har brugt $hintCounter ledetråde.</div>
Trods svedne fingerspidser nåede du at tænde stearinlyset, før tændstikken gik ud. Flammen er svag og oplyser kun en lille del af rummet, men det er en velsignelse at kunne se. ”Kløgtig,” lyder stemmen fra højtaleren. ”Måske har du, hvad der skal til. Måske. Vi får se, om du forstår at… følge mine instruktioner.” Noget ved stemmens måde at sige det på fanger din opmærksomhed. Et praj om, hvor du finder næste spor? <div id="passwordArea"> Hvad skal du lede efter? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if $password.includes('højtaleren') || $password.includes('højtaler')>> <<goto "7">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen Hvad skal du lede efter? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt Hvad skal du lede efter? <<textbox "$password" "">><</replace>> <</if>> <</button>> <<button "Giv mig en ledetråd">> <<set $hintCounter += 1>> <<replace "#hintUsage">>Du har brugt $hintCounter ledetråde indtil videre.<</replace>> <<audio "hint" play>>\ <<dialog 'Lad os tænke'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/thinker.webp' width='200' height='auto'></div><div> Kunne den mystiske stemmes ord have en dobbelt betydning? Når ord har en dobbelt betydning er det somme tider fordelt på en bogstavelig og en overført betydning. </div></div> <</dialog>> <</button>> <div id="hintUsage">Du har brugt $hintCounter ledetråde.</div> <<timed 5s>> <<audio "kløgtig" play>> <</timed>>
Du mærker med lettelse, at der ikke sker noget i munden. ”Kobolt!” råber du. ”Metallet er kobolt!” Endelig skratter højtaleren, og du holder vejret af frygt for at misse det næste spor. <img src="img/speaker.webp" style="width:93%"> //”Giv trolden sin malm og Gør det før lyset falmer For enden kalder Når mørket falder”// ”HVAD!?” råber du, men du er igen overladt til dig selv. En trold!? Dødstrusler!? <div id="passwordArea"> Hvilken trold? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if $password.includes('kobolt') || $password.includes('kobold')>> <<goto "13">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen Hvilken trold? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt Hvilken trold? <<textbox "$password" "">><</replace>> <</if>> <</button>> <<button "Giv mig en ledetråd">> <<set $hintCounter += 1>> <<replace "#hintUsage">>Du har brugt $hintCounter ledetråde indtil videre.<</replace>> <<audio "hint" play>>\ <<dialog 'Lad os tænke'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/thinker.webp' width='200' height='auto'></div><div> Ifølge tysk overtro spillede denne bjergtrold somme tider minearbejdere et puds ved at udskifte den jernmalm, de søgte, med et snydemetal, der lignede. Hvad hed denne trold? </div></div> <</dialog>> <</button>> <div id="hintUsage">Du har brugt $hintCounter ledetråde.</div> <<set $entryOne to false>> <<set $entryTwo to true>> <<timed 5s>> <<audio "givtrolden" play>> <</timed>>
Kobolt eller nikkel. Du er nede på to mulige metaller, og selvom du er stolt over din ræsonneringsevne, gruer du for næste skridt. Et blik på lyset afslører, at halvdelen allerede er brændt ned. Snart vil rummet igen ligge hen i mørke. <img src="img/lysetbraender.webp" style="width:93%"> Tanken giver dig et sug i maven, men driver dig videre. Du lukker øjnene, beder en lydløs bøn og lægger metalflagerne på tungen. Du holder dem der et øjeblik, før du spytter dem ud og frygtsomt afventer en brændende fornemmelse. Normalt tager en reaktion op til tolv timer, men slimhinderne i munden er følsomme. Du håber at slippe med en mild kløe, men dette forsøg er vanvittigt. Du risikerer, at hævelsen lukker dit svælg og kvæler dig. Der er halvtredsprocent chance. <div id="passwordArea"> Hvilken immunforsvarsreaktion er basis for testen? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if $password.includes('nikkel') && $password.includes('allergi')>> <<goto "12">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen Hvilken immunforsvarsreaktion er basis for testen? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt Hvilken immunforsvarsreaktion er basis for testen? <<textbox "$password" "">><</replace>> <</if>> <</button>> <<button "Giv mig en ledetråd">> <<set $hintCounter += 1>> <<replace "#hintUsage">>Du har brugt $hintCounter ledetråde indtil videre.<</replace>> <<audio "hint" play>>\ <<dialog 'Lad os tænke'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/thinker.webp' width='200' height='auto'></div><div> Immunforsvaret kan hos nogle mennesker overreagere på kontakt med visse stoffer, herunder visse metaller. Man bør ALDRIG putte noget i munden, som ens immunforsvar reagerer kraftigt på, da en af de mest almindelige overreaktioner involverer hævelser, hvilket i værste fald kan blokere luftvejene. </div></div> <</dialog>> <</button>> <div id="hintUsage">Du har brugt $hintCounter ledetråde.</div>
Du bevæger dig i stemmens retning med lyset holdt frem foran dig. Flammen blafrer faretruende ved hvert skridt, og trods dit bankende hjerte er du tvunget til at gå i snegletempo. Tag det med ro. Træk vejret. Bevar kontrollen. Rummet er heldigvis ikke stort, og du finder snart højtaleren i loftet. Under højtaleren opdager du et diagram på væggen. <img src="img/wallriddle.webp" style="width:93%"> <div id="passwordArea"> Hvad gør du? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if $password.includes('se i støvet') || $password.includes('ser i støvet') || $password.includes('seistøvet')>> <<goto "DEMO SLUT">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen Hvad gør du? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt Hvad gør du? <<textbox "$password" "">><</replace>> <</if>> <</button>> <<button "Giv mig en ledetråd">> <<set $hintCounter += 1>> <<replace "#hintUsage">>Du har brugt $hintCounter ledetråde indtil videre.<</replace>> <<audio "hint" play>>\ <<dialog 'Lad os tænke'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/thinker.webp' width='200' height='auto'></div><div> Det ligner en rebus. Er det muligt at danne et nyt ord eller en sætning ud fra symbolerne? Og hvad betyder tallene nedenunder? Kunne de give information om de ord, der skal bruges? </div></div> <</dialog>> <</button>> <div id="hintUsage">Du har brugt $hintCounter ledetråde.</div>
Trods mørket lykkes det dig at åbne æsken og finde en tændstik frem uden at tabe resten på gulvet. Du sætter svovlet mod æskens ru side og stryger tændstikken, men den tænder ikke. Du mærker efter og opdager, at svovlhovedet er væk. Du finder endnu en tændstik og mærker på den. Svovlet smuldrer, da du klemmer på den. Den er allerede udbrændt. Du prøver endnu en, men også den er brugt. <<linkreplace "Undersøg resten" t8n>>\Du undersøger tændstik efter tændstik, men alle smuldrer mellem dine fingre. "Hader du ikke også fusere?" spørger stemmen fra højtaleren. "Er det ikke bedre at skille sig af med dem, der ikke kan præstere?" Stemmen ler, og højtaleren slukker. "Hvad mener du? Hvad har I gang i?" råber du, men stemmen forbliver tavs. Du undersøger resten af tændstikkerne og opdager, at kun én stadig har svovl på. Du stryger den, og lyset kommer som en øjeblikkelig velsignelse. Du ser dig omkring i rummet. <img src="img/door.webp" style="width:93%"> Flammen er svag men nok til, at du ser døren foran dig. Tændstikken brænder hurtigt ned. Du må skynde dig! Om få sekunder går flammen ud, og rummet vil igen henligge i mørke. <div id="passwordArea"> Hvad gør du? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if $password.includes('tænd') && $password.includes('stearin')>> <<goto "6">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen Hvad gør du? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt Hvad gør du? <<textbox "$password" "">><</replace>> <</if>> <</button>> <<button "Giv mig en ledetråd">> <<set $hintCounter += 1>> <<replace "#hintUsage">>Du har brugt $hintCounter ledetråde indtil videre.<</replace>> <<audio "hint" play>>\ <<dialog 'Lad os tænke'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/thinker.webp' width='200' height='auto'></div><div> Hvad har du til rådighed i rummet? Hvis du ikke kan huske det, kan du måske finde et overblik et sted. Hvad mon der er på menuen? </div></div> <</dialog>> <</button>> <div id="hintUsage">Du har brugt $hintCounter ledetråde.</div> <<set $entryFull to true>> <<set $entryOne to true>> <<audio "haderfusere" play>> <</linkreplace>>
Du stiller lyset på bordet og drysser nogle af de mindste metalflager over flammen, men der sker ikke noget. Du prøver så at holde en lang tynd metalspåne direkte i flammen, men der sker stadig intet. Skuffende. Hvis metallet var letantændeligt, ville det være et godt spor. Det er åbenbart ikke brandbart. Metallet er stadig støvet. Det er svært at sige, hvor skinnende det ville være i ren form, men du kan se, at det er gråt og reflekterer lyset. Du har bemærket, at døren er rusten, og at rummet føles klamt og indelukket. Små metalstykker ruster hurtigt, fordi de har større overfladeareal, men da du roder i bunken med en finger, finder du ingen spor af rust. Du vejer metallet i hånden. Det er svært at sige uden sammenligning, men det føles tungt. <img src="img/wallriddle2.webp" style="width:93%"> <div id="passwordArea"> Hvilke metaller kan det være? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if $password.includes('kobolt') && $password.includes('nikkel') && !$password.includes('aluminium') && !$password.includes('jern') && !$password.includes('magnesium') && !$password.includes('stål') && !$password.includes('titanium') && !$password.includes('mangan')>> <<goto "11">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen Hvilke metaller kan det være? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt Hvilke metaller kan det være? <<textbox "$password" "">><</replace>> <</if>> <</button>> <<button "Giv mig en ledetråd">> <<set $hintCounter += 1>> <<replace "#hintUsage">>Du har brugt $hintCounter ledetråde indtil videre.<</replace>> <<audio "hint" play>>\ <<dialog 'Lad os tænke'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/thinker.webp' width='200' height='auto'></div><div> <a href=" https://youtu.be/cAP_6MEu3XQ?si=plqGbGQAOewZT-DX" target="_blank">Lær at bruge udelukkelsesmetoden</a> </div></div> <</dialog>> <</button>> <div id="hintUsage">Du har brugt $hintCounter ledetråde.</div>
Nysgerrigt drysser du mere metal på bordet. De mindste korn skifter retning i luften og ruller, når de lander. Der må være noget magnetisk i bordpladen. Du skraber metallet sammen over området. Overbevist om, at du er på rette spor, drysser du resten af metallet ud, og snart danner der sig et tydeligt billede. <img src="img/kobold2.webp" style="width:93%"> Det må være trolden – kobolden. Du følger dens udstrakte finger med øjnene. Den peger på et stykke af væggen, som ved første øjekast ser ud som resten af de skumle kældervægge. Du mærker under bordet i håb om at finde en magnet eller andet brugbart, men finder intet. Bordet er boltet fast til gulvet og umuligt at flytte eller ødelægge. Magneten må blive, hvor den er. <div id="passwordArea"> Hvad vil du gøre? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 70>> <<if $password.includes('undersøg') || $password.includes('se nærmere') || $password.includes('studer') || $password.includes('studér') || $password.includes('se på') || $password.includes('kig på') || $password.includes('kig nærmere') && $password.includes('væg') >> <<goto "15">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen Hvad vil du gøre? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt Hvad vil du gøre? <<textbox "$password" "">><</replace>> <</if>> <</button>> <<button "Giv mig en ledetråd">> <<set $hintCounter += 1>> <<replace "#hintUsage">>Du har brugt $hintCounter ledetråde indtil videre.<</replace>> <<audio "hint" play>>\ <<dialog 'Lad os tænke'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/thinker.webp' width='200' height='auto'></div><div> Har du en ledetråd, du kan følge? </div></div> <</dialog>> <</button>> <div id="hintUsage">Du har brugt $hintCounter ledetråde.</div>
”Kobold er trolden!” råber du ud i rummet og venter spændt på et svar, der aldrig kommer. Der må være mere til gåden. Hvad var det, stemmen sagde? //”Giv trolden sin malm og Gør det før lyset falmer For enden kalder Når mørket falder”// Du kigger med gru på lyset. Der er halvdelen tilbage. Hvad sker der, når lyset brænder ud? Mens du ser nærmere på lyset, opdager du, at metalkornene, du dryssede over flammen, har samlet sig i en halvmåne omkring lyset. Mærkeligt. Du dryssede ellers direkte ned i flammen. Har der været træk, som kunne have flyttet kornene? Nej. Lyset brænder stabilt uden at flakke. Der er ikke træk i lokalet. <div id="passwordArea"> Hvordan har metallet arrangeret sig i et mønster? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if $password.includes('magnet') || $password.includes('magnetisme')>> <<goto "14">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen Hvordan har metallet arrangeret sig i et mønster? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt Hvordan har metallet arrangeret sig i et mønster? <<textbox "$password" "">><</replace>> <</if>> <</button>> <<button "Giv mig en ledetråd">> <<set $hintCounter += 1>> <<replace "#hintUsage">>Du har brugt $hintCounter ledetråde indtil videre.<</replace>> <<audio "hint" play>>\ <<dialog 'Lad os tænke'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/thinker.webp' width='200' height='auto'></div><div> Hvad kan have flyttet metallet, hvis det ikke er en trækvind? </div></div> <</dialog>> <</button>> <div id="hintUsage">Du har brugt $hintCounter ledetråde.</div>
Du hælder støv gennem sien, indtil du til sidst har samlet dig en hel håndfuld metal. <img src="img/hand.webp" style="width:93%"> "Hvad nu?" råber du mod mikrofonen, men ingen svarer. Frustreret gennemsøger du rummet igen, men intet nyt springer i øjnene. Du ser bekymret på stearinlyset. En tredjedel er allerede brændt ned. Du må finde en udvej, mens du stadig kan se! Du har en håndfuld metalflager, men aner ikke, hvad de skal bruges til. Hvad ønsker stemmen nu? At du identificerer metallet? Umuligt at vide, men det er et sted at starte. Først må du indsnævre mulighederne. Tænk! Hvad ved du om metaller, som du kan teste uden specialudstyr? Du ved, at nogle metaller er brandbare, mens andre kan ruste eller har karakteristiske egenskaber som farve, vægt, hårdhed eller overflade. Der er én test, som haster mere end de andre. <div id="passwordArea"> Hvad gør du? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if $password.includes('brand') || $password.includes('brænd') || $password.includes('lys') || $password.includes('tænd') || $password.includes('ild')>> <<goto "10">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen Hvad gør du? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt Hvad gør du? <<textbox "$password" "">><</replace>> <</if>> <</button>> <<button "Giv mig en ledetråd">> <<set $hintCounter += 1>> <<replace "#hintUsage">>Du har brugt $hintCounter ledetråde indtil videre.<</replace>> <<audio "hint" play>>\ <<dialog 'Lad os tænke'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/thinker.webp' width='200' height='auto'></div><div> Nogle ressourcer er mere begrænsede end andre. Har du læst siden grundigt? </div></div> <</dialog>> <</button>> <div id="hintUsage">Du har brugt $hintCounter ledetråde.</div>
<<if $entryFull is false>>Du er vågnet i et mørkt rum dybt forvirret. Hvad foregår der?<</if>> <<if $entryOne is true>>Der er en højtaler et sted i rummet, et bord i midten med en si og et stearinlys på, og den eneste vej ud virker til at være en dør med en låst metalluge.<</if>> <<if $entryTwo is true>>Der er en højtaler et sted i rummet, et bord i midten med en si og et stearinlys på, og den eneste vej ud virker til at være en dør med en låst metalluge. Den mystiske stemme i højtaleren har sagt: //”Giv trolden sin malm og Gør det før lyset falmer For enden kalder Når mørket falder”// <</if>> <<if $entryThree is true>>Der er en højtaler et sted i rummet, et bord i midten med en si og et stearinlys på, og den eneste vej ud virker til at være en dør med en låst metalluge. Den mystiske stemme i højtaleren har sagt: //”Giv trolden sin malm og Gør det før lyset falmer For enden kalder Når mørket falder”// <</if>>
Den første flage lader sig ikke rokke, men den anden falder væk ved et let træk og afslører en æske gemt i et hulrum. <img src="img/whatsinthebox.webp" style="width:93%"> Du griber fat om æsken og trækker til, men den sidder godt fast. Du lægger flere kræfter i, og mærker hvordan æsken giver efter med en skrabende lyd. Da æsken endelig slipper, blæser en kold vind pludselig ind fra hullet og slukker dit stearinlys. F***! <div id="passwordArea"> Hvad sker der, når mørket falder? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if $password.includes('ende') && $password.includes('kalder')>> <<goto "17">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen Hvad sker der, når mørket falder?<<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt Hvad sker der, når mørket falder? <<textbox "$password" "">><</replace>> <</if>> <</button>> <<button "Giv mig en ledetråd">> <<set $hintCounter += 1>> <<replace "#hintUsage">>Du har brugt $hintCounter ledetråde indtil videre.<</replace>> <<audio "hint" play>>\ <<dialog 'Lad os tænke'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/thinker.webp' width='200' height='auto'></div><div> Hvad var det, stemmen i højtaleren havde sagt? </div></div> <</dialog>> <</button>> <div id="hintUsage">Du har brugt $hintCounter ledetråde.</div> <<set $entryTwo to false>> <<set $entryThree to true>>
Da du drejer det sidste hjul på plads, klikker æsken, og låget springer op. Du famler dig frem i æsken og mærker noget, der føles som et stykke papir, en ubrugt tændstik og… briller? Du havde håbet på en nøgle eller noget, der kunne repræsentere en direkte vej ud. I stedet må du nøjes med en foreløbig løsning på ét af dine problemer. <div id="passwordArea"> Hvad gør du? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if ($password.includes('tænd') && $password.includes('lys')) || ($password.includes('stryg') && $password.includes('tændstik')) || ($password.includes('tænd') && $password.includes('tændstik'))>> <<goto "20">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen Hvad gør du? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt Hvad gør du? <<textbox "$password" "">><</replace>> <</if>> <</button>> <<button "Giv mig en ledetråd">> <<set $hintCounter += 1>> <<replace "#hintUsage">>Du har brugt $hintCounter ledetråde indtil videre.<</replace>> <<audio "hint" play>>\ <<dialog 'Lad os tænke'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/thinker.webp' width='200' height='auto'></div><div> Det er svært at //se//, hvad løsningen er. </div></div> <</dialog>> <</button>> <div id="hintUsage">Du har brugt $hintCounter ledetråde.</div>
//<<print $playerName>>!// råber så højt du kan, og lyden giver genlyd op gennem skakten. Du råber igen og igen, indtil du til sidst opgiver. Du kan ikke bare håbe på hjælp udefra. Du må finde en vej ud! Du vender æsken i hænderne. Den må indeholde et spor. Du mærker en tynd slids langs toppen, hvor den sandsynligvis kan åbnes. Men æsken er låst. Hvis bare du kunne se! Hvad kan æsken indeholde, som ville kunne hjælpe dig? Det er svært at forestille sig. Flere sadistiske gåder for den mystiske stemmes fornøjelse? Æsken er solid men let, og når du ryster den, kan du høre, at der er flere ting indeni. Lydene er svære at identificere, men det er ikke tunge ting. Du kører håndfladerne hen over æsken og finder fire små hjul på siden, som sidder tæt samlet. De stikker delvist ud af kassen og kan drejes hver for sig. Hvert hjul har små indgraveringer, der føles som… tal? Til højre for hjulene mærker du endnu et sæt indgraveringer. Det føles som ”cm<sup>3</sup>”. Du mærker efter igen og finder flere indgraveringer rundt om på siderne af æsken. På den lange side er der to fordybninger langs kanten, der føles som tallet 30. På den brede led finder du tallet 20, og tallet 10 på den korteste led. <div id="passwordArea"> Drej hjulene til: <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if $password.includes('6000') && !$password.includes('60000')>> <<goto "19">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen Drej hjulene til: <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt Drej hjulene til: <<textbox "$password" "">><</replace>> <</if>> <</button>> <<button "Giv mig en ledetråd">> <<set $hintCounter += 1>> <<replace "#hintUsage">>Du har brugt $hintCounter ledetråde indtil videre.<</replace>> <<audio "hint" play>>\ <<dialog 'Lad os tænke'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/thinker.webp' width='200' height='auto'></div><div> En kubikcentimeter, altså 1 cm<sup>3</sup>, er rumfanget af en terning, der måler 1 cm på hver led. </div></div> <</dialog>> <</button>> <div id="hintUsage">Du har brugt $hintCounter ledetråde.</div>
En gnækkende stemme bryder stilheden. //"Enden kalder... Har du lavet dine lektier?"// Da højtaleren slukker, er du igen alene i mørket. Hvad end der venter, er det næppe godt. Du må skynde dig. Du stikker armen ind i hullet og mærker en skakt bag væggen. Kold luft strømmer ind fra hullet. Skakten må føre udenfor. Måske vil nogen høre dig, hvis du råber? <div id="nameInputArea"> Hvad råber du? <<textbox "$playerName" "">> <<button "Råb">> <<if $playerName.trim().length > 0>> <<set $playerName to $playerName.trim()>> <<goto "18">> <<else>> <<replace "#nameInputArea">>Det var ikke højt nok. Prøv igen: <<textbox "$playerName" "">><</replace>> <</if>> <</button>> </div> <<timed 1s>> <<audio "endenkalder" play>> <</timed>>
Du vender ryggen mod hullet med trækket, mens du stryger tændstikken. Den tænder gudskelov, og du må knibe øjnene sammen mod det pludselige skarpe lys. Du anstrenger dig for at holde hånden i ro og skærme flammen, mens du fører tændstikken hen til vægen på den lille lysstump. Nu hvor lyset igen er tændt, kan du se nærmere de andre genstande fra æsken. Til din overraskelse ser du, at brillerne har mørke glas. Solbriller? Hvem end der står bag denne indespærring, har en syg form for humor. Du lægger solbrillerne tilbage i æsken og folder papiret ud i stedet. <img src="img/boxpuzzle.webp" style="width:93%"> <div id="passwordArea"> Hvad gør du? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 80>> <<if $password.includes('brille') && $password.includes('dør') && ($password.includes('tag') || $password.includes('put') || $password.includes('kig') || $password.includes('se') || $password.includes('iagttag'))>> <<goto "21">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen Hvad gør du? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt Hvad gør du? <<textbox "$password" "">><</replace>> <</if>> <</button>> <<button "Giv mig en ledetråd">> <<set $hintCounter += 1>> <<replace "#hintUsage">>Du har brugt $hintCounter ledetråde indtil videre.<</replace>> <<audio "hint" play>>\ <<dialog 'Lad os tænke'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/thinker.webp' width='200' height='auto'></div><div> Kan du finde en ledetråd til det næste skridt i diagrammet? Sørg for at være beskrivende i, hvad du gør. </div></div> <</dialog>> <</button>> <div id="hintUsage">Du har brugt $hintCounter ledetråde.</div>
Væggene er gamle og støvede. Pudset er revnet og krakeleret flere steder, og enkelte steder mangler så store flager, at du kan skimte murstenene nedenunder. Forsigtigt fører du stearinlyset hen mod væggen. Flammen blafrer faretruende, og du kæmper for at holde hænderne i ro. Der er ikke meget stearin tilbage, og du genkalder dig stemmens gådefulde ord: //’enden kalder, når mørket falder’.// Du gyser og vender din opmærksomhed mod væggen. <img src="img/anothercrackinthewall.webp" style="width:93%"> Du lader fingerspidserne glide langs væggens overflade. De fleste revner er for smalle til dine fingre, men to steder mødes større revner, så du lige præcis kan få fat i spidsen af pudsflagerne. <div id="passwordArea"> Hvor sætter du fingrene ind? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if $password.includes('7d') && $password.includes('5d') && !$password.includes('1') && !$password.includes('2') && !$password.includes('3') && !$password.includes('4') && !$password.includes('6') && !$password.includes('8') && !$password.includes('9')>> <<goto "16">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen Hvor sætter du fingrene ind? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt Hvor sætter du fingrene ind? <<textbox "$password" "">><</replace>> <</if>> <</button>> <<button "Giv mig en ledetråd">> <<set $hintCounter += 1>> <<replace "#hintUsage">>Du har brugt $hintCounter ledetråde indtil videre.<</replace>> <<audio "hint" play>>\ <<dialog 'Lad os tænke'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/thinker.webp' width='200' height='auto'></div><div> Revnerne ved 5f viste sig at være for smalle. </div></div> <</dialog>> <</button>> <div id="hintUsage">Du har brugt $hintCounter ledetråde.</div>
Du tager brillerne på, og straks er lyset væk. Kulden løber ned ad ryggen på dig. Selv et kort øjeblik uden lys er angstprovokerende, men idet du løfter hånden for at tage brillerne af, fanger noget dit blik i udkanten af dit synsfelt. Noget, der skinner med et blåligt lys. <img src="img/glowdoor.webp" style="width:93%"> Det er døren, som lyser op i mørket. Du kigger hen over kanten på brillerne, hvor der intet er at se. Uden solbrillerne er alt uden for flammens korte radius indhyllet i mørke, men med brillerne på lyser døren op som en insektlampe. Store bogstaver pryder dørkarmen og lågen. Ved nærmere undersøgelse ser du nu, at et større udsnit af døren er fyldt med selvlysende skrift. <div id="passwordArea"> Hvad gør du? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if ($password.includes('undersøg') || $password.includes('læs') || $password.includes('se på') || $password.includes('kig')) && ($password.includes('dør') || $password.includes('skrift') || $password.includes('tekst'))>> <<goto "22">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen Hvad gør du? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt Hvad gør du? <<textbox "$password" "">><</replace>> <</if>> <</button>> <<button "Giv mig en ledetråd">> <<set $hintCounter += 1>> <<replace "#hintUsage">>Du har brugt $hintCounter ledetråde indtil videre.<</replace>> <<audio "hint" play>>\ <<dialog 'Lad os tænke'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/thinker.webp' width='200' height='auto'></div><div> Du har fundet en masse selvlysende skrift. Hvad er det næste logiske skridt? </div></div> <</dialog>> <</button>> <div id="hintUsage">Du har brugt $hintCounter ledetråde.</div>
”Ah, som musik i mine ører!” griner stemmen, før højtaleren igen slukker. I samme nu hører du et mekanisk klik som en lås, der slår fra, og en skrabende lyd af metal mod metal. Du tager solbrillerne af og ser lugens svage omrids. En plade er gledet til side, og der er nu en åbning i døren. <img src="img/hatch.webp" style="width:93%"> Du mærker ind i åbningen og finder en metalplade et par centimeter inde i døren. Der er ikke hul igennem, men midt i pladen er der et lille rundt hul, mindre end en fingerspids, med en aflang lodret slids. <div id="passwordArea"> Hvad er det? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if $password.includes('nøglehul') || $password.includes('nøgle hul')>> <<goto "25">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen Hvad er det? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt Hvad er det? <<textbox "$password" "">><</replace>> <</if>> <</button>> <<button "Giv mig en ledetråd">> <<set $hintCounter += 1>> <<replace "#hintUsage">>Du har brugt $hintCounter ledetråde indtil videre.<</replace>> <<audio "hint" play>>\ <<dialog 'Lad os tænke'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/thinker.webp' width='200' height='auto'></div><div> Hvad lyder beskrivelsen som? </div></div> <</dialog>> <</button>> <div id="hintUsage">Du har brugt $hintCounter ledetråde.</div> <<audio "sommusik" play>>
"//Barnets klagesang styrker lærerens hjerte//?" mumler du og når ikke at tænke videre over det, før højtaleren igen skratter, og en stemme afbryder: <img src="img/speaker.webp" style="width:93%"> ”Har du lært din lektie?” spørger stemmen. <div id="passwordArea"> Sig frem: <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if $password.includes('buhu') || $password.includes('neej') || $password.includes('skrig') || $password.includes('græd') || $password.includes('gråd') || $password.includes('beklag') || $password.includes('jammer') || $password.includes('jamr') || $password.includes('støn') || $password.includes('hyl') || $password.includes('tud') || $password.includes('undskyld') || $password.includes('fortryd') || $password.includes('hjælp!') || $password.includes('hulk') || $password.includes('vræ') || $password.includes('lektie') || $password.includes('hader') || $password.includes('waa') || $password.includes('aaah')>> <<goto "24">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen Sig frem: <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt Sig frem: <<textbox "$password" "">><</replace>> <</if>> <</button>> <<button "Giv mig en ledetråd">> <<set $hintCounter += 1>> <<replace "#hintUsage">>Du har brugt $hintCounter ledetråde indtil videre.<</replace>> <<audio "hint" play>>\ <<dialog 'Lad os tænke'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/thinker.webp' width='200' height='auto'></div><div> Har du ikke allerede regnet ud, hvad stemmen ønsker? </div></div> <</dialog>> <</button>> <div id="hintUsage">Du har brugt $hintCounter ledetråde.</div> <<timed 2s>> <<audio "lærtlektien" play>> <</timed>>
<img src="img/doorwords.webp" style="width:93%"> Ordene giver ingen mening. Kun en galning kan have skrevet dem. Det må være et dybt forstyrret menneskes værk. Du træder et skridt tilbage og betragter igen de kryptiske instruktioner //Ord med substans viser dig vejen// Frustreret kigger du igen i æsken og undersøger papiret for flere spor, men uden held. Din eneste vej frem er at finde hoved og hale i dørens ordsuppe. <div id="passwordArea"> Hvad er den skjulte besked? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if $password.includes('barnets klagesang styrker lærerens hjerte') || $password.includes('barnets klage sang styrker lærerens hjerte') || $password.includes('barnets klagesang styrker lærers hjerte') || $password.includes('barnets klagesang styrker læreres hjerte') || $password.includes('barnets klagesang styrker lærerers hjerte') || $password.includes('barnets klagesang styrker læreres hjerte')>> <<goto "23">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen Hvad er den skjulte besked? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt Hvad er den skjulte besked? <<textbox "$password" "">><</replace>> <</if>> <</button>> <<button "Giv mig en ledetråd">> <<set $hintCounter += 1>> <<replace "#hintUsage">>Du har brugt $hintCounter ledetråde indtil videre.<</replace>> <<audio "hint" play>>\ <<dialog 'Lad os tænke'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/thinker.webp' width='200' height='auto'></div><div> Kender du en type ord eller en ordklasse, der har mere substans end andre ord? Og tænker du over, at ord kan betyde forskellige ting i forskellige sammenhænge? </div></div> <</dialog>> <</button>> <div id="hintUsage">Du har brugt $hintCounter ledetråde.</div>
Mens du undersøger dørens mystiske låge, hører du en svag lyd fra bordet bag dig. Undrende vender du dig hurtigt om og ser med gru, at lyset kæmper for at overleve i den sidste rest af smeltet stearin. Der ligger en nøgle på bordet ved siden af lyset. <img src="img/keytolight.webp" style="width:93%"> Du ser dig omkring. Hvor kom den fra? Du skimter svagt loftet over bordet, men der er intet at se. Et kort øjeblik frygter du, at der er andre i rummet, men det ville du vel have opdaget. Ville du ikke? Ville du ikke? <div id="passwordArea"> Hvor er nøglen kommet fra? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if $password.includes('i') && $password.includes('lyset')>> <<goto "26">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen Hvor er nøglen kommet fra? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt Hvor er nøglen kommet fra? <<textbox "$password" "">><</replace>> <</if>> <</button>> <<button "Giv mig en ledetråd">> <<set $hintCounter += 1>> <<replace "#hintUsage">>Du har brugt $hintCounter ledetråde indtil videre.<</replace>> <<audio "hint" play>>\ <<dialog 'Lad os tænke'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/thinker.webp' width='200' height='auto'></div><div> Kender du de klassiske gåder om en, der bliver myrdet, hvor politiet ikke kan finde mordvåbnet, men finder en vandpøl ved siden af? </div></div> <</dialog>> <</button>> <div id="hintUsage">Du har brugt $hintCounter ledetråde.</div>
Historien nærmer sig afslutningen, og du må vælge. [[Jeg går mod lyset->26 Mod lyset]] [[Jeg går den mørke vej->26 Mørkets vej]]
Du bliver liggende et øjeblik på ryggen og tænker kun på at få luft – og på smerten, der brænder i skulderen. Det viser de aldrig i film. Du håber, knoglen ikke er brækket. Da du har sundet dig lidt, rejser du dig igen og griber fat i døren. Denne gang trækker du i døren, og den åbner let med en knirkende lyd. På den anden side venter en lang gang med døre, identiske med din egen. Dine skridt giver genlyd ned ad gangen. Skridt efter skridt efter skridt. [[Fortsæt ad den mørke vej->Håb endnu]]
Nøglen er stadig varm, og du samler den forsigtigt op. Den må have været skjult i bunden af lyset, hvor den gradvist blev smeltet fri, mens du var optaget af døren og solbrillerne. Flammen flakker og kan gå ud hvert øjeblik, så du skynder dig tilbage til døren og sætter nøglen i med rystende hænder. Da drejer den, hører du en lås slå fra. Du skubber forsigtigt til bagpladen, som svinger op uden at sige en lyd. På den anden side af døren er der mørkt, men du skimter en lang gang med svagt lys for enden. I det totale mørke virker selv dette som en velsignelse. På begge sider af gangen er der døre, ligesom din. Du rejser dig og prøver døren, men den rokker sig ikke. Hvis du vil ud, må du kravle gennem lugen. Du ser hullet an. Det bliver tæt og svært at få skuldrene igennem. Tanken om at sidde fast i døren får dit hjerte til at galopere, men din frihedstrang overvinder frygten. Det er den eneste vej. Du holder vejret, mens du kravler ind i lugen. Den rustne metalkant skraber din hage, og du må dreje hovedet for at få det igennem. Overkanten klemmer på det øverste af din ryg, mens den nederste skraber dig på brystet. Du hører en knirken over dig og vrider dig rundt for at se. <img src="img/chop.webp" style="width:93%"> Der er et glimt af metal og en susende lyd. Du rammer gulvet og ruller rundt – et kort øjeblik fri – før mørket igen lukker sig om dig. [[Gå mod lyset->27 Ved vejens ende]]
Nøglen er stadig varm, og du samler den forsigtigt op. Den må have været skjult i bunden af lyset, hvor den gradvist blev smeltet fri, mens du var optaget af døren og solbrillerne. Du kaster et blik på det døende lys. Flammen flakker og kan gå ud hvert øjeblik, så du skynder dig til nøglehullet og sætter nøglen i med rystende hænder. Den passer perfekt. Da du drejer den, hører du en lås slå fra inde i døren. Håbefuldt og forsigtigt skubber du på døren, men den rører sig ikke. Du rynker brynene og lægger mere kraft i, men intet sker. Panikken stiger. Du kaster al din kraft mod døren, mens lyset i rummet svinder, og din puls hamrer i ørerne. Du tager tilløb og forbereder dig på at vædre døren med din skulder. Du sætter af med kursen sat mod døren og friheden. Det er nu eller aldrig! Lyset går ud undervejs, men du fortsætter. Du kniber tænderne sammen og lukker øjnene. Du rammer døren. Hårdt. Luften slås ud af dine lunger, og du falder til jorden med en skulder, der skriger af smerte. Døren står stadig. <div id="passwordArea"> Hvad gør du? <<textbox "$password" "">> </div> <<button "Bekræft Password">> <<set $password to $password.toLowerCase()>> <<if $password.length <= 60>> <<if $password.includes('hiv') || $password.includes('træk')>> <<goto "27 Vejen fortsætter">> <<else>> <<replace "#passwordArea">>Tjek stavningen og prøv igen Hvad gør du? <<textbox "$password" "">><</replace>> <</if>> <<else>> <<replace "#passwordArea">>Dit svar er for langt Hvad gør du? <<textbox "$password" "">><</replace>> <</if>> <</button>> <<button "Giv mig en ledetråd">> <<set $hintCounter += 1>> <<replace "#hintUsage">>Du har brugt $hintCounter ledetråde indtil videre.<</replace>> <<audio "hint" play>>\ <<dialog 'Lad os tænke'>>\ <div style='color:white; display:flex; align-items:center;'><div style='margin-right:20px;'><img src='img/thinker.webp' width='200' height='auto'></div><div> Er der noget, du mangler at prøve? </div></div> <</dialog>> <</button>> <div id="hintUsage">Du har brugt $hintCounter ledetråde.</div>
"Sikke en skam" <img src="img/dark.webp" style="width:93%"> "Der sad ellers sådan et godt hoved på dine skuldre!" //Ahahahahaha!// <a href="https://www.escapeskole.dk" target="_blank">Vend tilbage til escapeskole.dk</a> <<audio "sikkeenskam" play>>
"Tillykke, unge ven. Du klarede prøven! Så tag du nu hjem og hvil dit ømme hoved. <img src="img/light.webp" style="width:93%"> Vi ses jo i morgen." <a href="https://www.escapeskole.dk" target="_blank">Vend tilbage til escapeskole.dk</a> <<audio "tillykke" play>>
Dette var slutningen på den gratis demo af Den Sorte Skole. Der er selvfølgelig meget mere at komme efter både i denne og i de andre historier på escapeskole.dk. Hvis du er interesseret, kan du læse mere om at købe adgang <a href="https://escapeskole.dk/kob-adgang-til-escapeskole-dk" target="_blank">her</a>. <<linkreplace "Eeeeeej, come on, lad mig prøve lidt mere!" t8n>>\ //Ej, come on, lad mig prøve lidt mere!// <<timed 3s>> <<type 60ms>>\ ... Så lad gå da... Lad os nuppe et stykke med //Eric Monitor//. Er du klar? <a href="https://escapeskole.dk/scenarier/demo/demo2.html">Jeg er klar</a> \<</type>> <</timed>> <</linkreplace>>