Storyboard Dokumentation (public)
Hallo!
Wir arbeiten hart an der Dokumentation für das Storyboard. Ein wenig dauert es aber noch.
Wenn du in der Zwischenzeit Hilfe brauchst, schreib uns doch einfach! hallo@adventurekingz.de
Grüße von den AdventureKingz!
Funktionen
Funktionen
Wegpunkte (Geolocation)
Wir sind dran!
Funktionen
QR-Codes
Funktionen
NFC-Tags
Funktionen
Inventar (virtuel)
Funktionen
Hinweise
Funktionen
Medien (Grafik, Video, Audio)
UI-Elemente
UI-Elemente
Buttons
Buttons sind wesentliche Bestandteile interaktiver Benutzeroberflächen, die es Nutzern ermöglichen, spezifische Aktionen durch einfaches Klicken oder Antippen auszulösen.
Button werden standardmäßig immer unterhalb des Textes und weiteren UI-Elementen innerhalb der Sektion angezeigt. Es gibt kein Limit für die Anzahl von Button.
<div class="customButtonPosition"></div>
Beispiele und Hacks
Beispiele und Hacks
Passwort-Abfrage innerhalb einer Szene
Wenn du eine eigene Passwort- oder Wertabfrage implementieren möchtest, dann erstelle zunächst eine neue, leere Szene.
- Füge die Funktion "Javascript" hinzu:
window.passwort = function () {
let content = '<input type="text" id="passwort" name="name" required size="10" placeholder="Passwort?">'
$.confirm({
title: 'Bitte gib ein gültiges Passwort ein:',
content: content,
buttons: {
'Flug suchen': {
text: 'Passwort prüfen',
btnClass: 'btn-blue',
action: function () {
var passwort = this.$content.find('#passwort').val();
if(!passwort){
$.alert('Bitte gib ein Passwort ein!');
return false;
}
if(passwort == "123456") {
// do something!
$.alert('Richtig!');
window.story.go('ZIELSZENE'); // Hier den Titel deiner Ziel-Szene eingeben
} else {
$.alert('Das Passwort ' + name + ' ist leider falsch!');
}
}
},
'Abbrechen': function () {
//close
},
},
onContentReady: function () {
// bind to events
var jc = this;
this.$content.find('form').on('submit', function (e) {
e.preventDefault();
});
}
});
};
2. Editiere in deiner Szene den HTML Code und füge folgenden Coder an einer beliebigen Stelle ein:
<button name="test" onClick="window.passwort();">Passwort</button>
Beispiele und Hacks
Typewriter Effekt
Demo
Wenn der Text in einer Szene wie von einer Schreibmaschine getippt werden soll, dann kann dieser Effekt mit einem Javascript Code in einer globalen Sektion erreicht werden:
Globale Sektion -> Funktion Javascript
window.showSpeechBubble = function (text) {
var output = document.getElementById("output");
// Sprechblase erstellen
var bubble = document.createElement("div");
bubble.classList.add("speech-bubble");
output.appendChild(bubble);
// Text Typing Effekt
let index = 0;
bubble.style.opacity = 1; // Blendet die Sprechblase ein
function typeWriter() {
// HTML-Interpretation sicherstellen
bubble.innerHTML = text.substring(0, index);
if (index < text.length) {
index++;
setTimeout(typeWriter, 50); // Geschwindigkeit des Tippens
}
}
typeWriter();
}
Globale Sektion -> Stylesheet
*optional, damit sieht der Text ähnlich wie eine Sprechblase aus.
.speech-bubble {
position: absolute;
top:100px;
left: 5%;
max-width: 90%;
padding: 10px;
background-color: white;
border-radius: 10px;
border: 2px solid black;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
font-family: mom;
font-size: 14px;
color: black;
line-height: 1.4;
opacity: 0; /* Startet unsichtbar */
transition: opacity 0.5s; /* Sanftes Einblenden */
}
.speech-bubble::after {
position: absolute;
left: 5%;
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: white;
border-bottom: 0;
border-left: 0;
margin-left: -5px;
}
Szene -> Funktion Javascript
setTimeout(function() {
window.showSpeechBubble('HIER DER TEXT, DER GETIPPT WERDEN SOLL');
},2000);