Working with links, buttons, ...

executing an action before passage change

If you want to run some code before switching to another passage you should use a normal link instead of a passage-link and call the code in onclick before running window.story.show. This can also be handy if you want to randomly select the next passage to go to.
Note that sometimes you have to wrap the code into a functiondeclaration,call it and surround this call in additional parenthesis ('(function(){...}()') ).
<a0 onclick='(function(){window.story.state.Kor.upMouth+=1;window.story.show("downgrade_Done");}())'>Choose this icon</a>

Expanding a text/image when clicking a link

This function returns a html-text with a link that, when clicked, toggles visibility of a div-section containing descriptive text.
This is done by toggling the hidden-attribute of the div.
window.gm.printItem= function( id,descr){
var elmt ="<a0 id='${id}' onclick='(function($event){document.querySelector(\"div#${id}\").toggleAttribute(\"hidden\");})(this);'>${id}</a>";
elmt +="</br><div hidden id='${id}'>${descr}</div>";
return(elmt);
};

Show some text/img when clicking on an element

Think of a shop: there are alot of products on the page symbolized by icons. When the player clicks on it a text should appear because it would take to much space to show all text at once. Create html:
Notice that the paragraphs in info div are all set to hidden and that their id matches the images <div id="choice">
<p>click on image to show related text and border</p>
<table><tbody>
<tr>
<td><img id="1" src="https://twinery.org/homepage/img/logo.svg" width="256" height="256" onclick='window.gm.onSelect(this,"div#choice table tbody tr td *","div#info");'></td>
<td><img id="2" src="https://twinery.org/homepage/img/logo.svg" width="256" height="256" onclick='window.gm.onSelect(this,"div#choice table tbody tr td *","div#info");'></td>
</tr>
<tr>
<td><img id="3" src="https://twinery.org/homepage/img/logo.svg" width="256" height="256" onclick='window.gm.onSelect(this,"div#choice table tbody tr td *","div#info");'></td>
</tr>
</tbody></table>
</div>
<div id="info">
<p id="1" hidden>Text 1</p><p id="2" hidden>[[Start]]</p><p id="3" hidden>Text 3</p>
</div>

In css:
This will be shown to mark the image as selected
.selected { border-style: double; border-width: thick; /* border-spacing: 20px; */ border-color: coral; }

in js:
this will assign the selected-style and toggle hidden-attribute
window.gm.onSelect = function(elmnt,ex_choice,ex_info) {
var all = $(ex_choice);
for(var i=0;i<all.length;i++) {
if(all[i].id === elmnt.id) {
all[i].classList.add("selected");
}
else all[i].classList.remove("selected");
}
all = $(ex_info)[0].children;
for(var i=0;i<all.length;i++) {
if(all[i].id === elmnt.id) {
all[i].hidden=false;
}
else all[i].hidden=true;
}
};

radio-button (static)

<fieldset> <legend>creditcard</legend>
<input type="radio" id="mc" name="payment" value="Mastercard" disabled>
<label for="mc"> Mastercard</label>
<input type="radio" id="vi" name="payment" value="Visa" checked>
<label for="vi"> Visa</label>
</fieldset>

• input-name groups the choice together in a group
• use disabled/checked to disable/preselect a choice
• the labels have a for-attribut that bind them to the inputs with this id; so the user doesnt need to hit the small radio-button, he can also click the label
• optionally you can embed the input-nodes into <fieldset></fieldset> to surround them with a frame-box
• optionally you can use legend-node to set a group-label

dropdown-box (static)

See HTML-code below how to create a dropdown-box by using a select-element with a number if options. See how the options textlabel or id-value is read in the onchange-Handler. You can also preselct an option with selected (this will not trigger the onchange-event):
<label>static dropdown:
<select id="person" onchange='selectperson(this)'>
<option value="23">Albers, Alfred</option>
<option value="24" selected>Braun, Berta</option>
<option value="25">Zeta, Bort</option>
</select>
</label>
<div id='output'></div>
<script>
function selectperson(elmnt) {
var menu = document.getElementById(elmnt.id);
document.querySelector('div#output').innerHTML = menu.value +""+menu.options[menu.selectedIndex].label+" "+menu.options[menu.selectedIndex].value;' } </script>`

dropdown-box (dynamic)

Instead of using hardcoded html-nodes for possible option-values and the pre-selected value, we can use a function to fetch thode values and add them via DOM-operations.

• on DOMContentLoaded-Event (just by caling a function in the script-node of the page) connect the dropbox with a datasource-function via SelectionController-Instance
• the datasource-function has to return a list of possible values for the dropbox and has to be implemented specifically
• the SelectionController will take care to fetch the data from the datasource and rebuild the option-elements

linked dropdown

The previous example can be extended if you have multiple dropdown boxes that relate to each other, f.e. a selector for characters and another for jobs to assign to them, where each character only can be assigned certain jobs.

• the child-dropdown (jobs) have to know if the parent-dropdown (characters) has changed; This can be done by let the childs register themself to the changed-event of the parent in the SelectionController
• the triggered event should cause the Controller to rebuild the list by fetching the datasource again and changing their options.

input color / number

• opens a color-picker <input id="background" type="color" value="#ffffff">

• input for numbers <input id="mass" type="number" min="30" max="225" step="0.5" value="75">

• slider-input for numbers; the sample also shows how to add a output that states the value <form oninput="x.value=/*parseInt*/(groesse.value)">
<input class="vertikal" name="groesse" id="groesse" type="range" step="0.5" min="0" value="80" max="250" orient="vertical">
<output name="x" for="groesse">80</output>
</form>

• onchange-event can be used to get input-notification once after mouse is released

• oninput-event will fire while the mouse is held down and slider moved !