Stap 1: Knop die het verhaal toont
-
Verberg je verhaal door het deze CSS-class te geven.
.verborgen { display: none; }
-
Maak met de
<a>-tag
een knop om je verhaal te tonen.<a href="#" id="toonVerhaal">Start</a>
-
Gebruik deze JavaScript code om HTML-elementen te tonen en verbergen.
document.addEventListener("DOMContentLoaded", function () { // voer code uit als je op de knop klikt document .getElementById("toonVerhaal") .addEventListener("click", function () { // test of de knop werkt console.log("Toon verhaal"); // verwijder en voeg de .verborgen class toe document.getElementById("formulier").classList.add("verborgen"); document.getElementById("verhaal").classList.remove("verborgen"); }); });
Stap 2: Een tekstveld uitlezen
-
Start met een HTML-form toe te voegen met daarin een tekstveld.
<form id="formulier" class="frame"> <div> <label class="formTitle">Your name:</label><br /> <input type="text" id="naamTextfield" placeholder="Enter your name" /> </div> </form>
-
Haal met JavaScript de waarde uit het tekstveld en sla het op in een variabelen.
// haal de naam uit het tekstveld let naam = document.getElementById("naamTextfield").value; console.log(naam); // testen of het gelukt is
-
Voeg de naam toe aan het verhaal met de technieken uit de vorige hoofdstukken. Geef de naam CSS-styling zodat deze duidelijk zichtbaar is.
Stap 3: Radio buttons uitlezen
-
Voeg radio buttons toe aan je HTML-formulier.
<label class="formTitle">Enemy name:</label><br /> <input type="radio" name="enemy" value="Value 1" checked /> <label>Radio button 1</label><br /> <input type="radio" name="enemy" value="Value 2" /> <label>Radio button 2</label><br />
-
Haal met JavaScript de waarde uit het tekstveld en sla het op in een variabelen.
// welke radio button optie is er gekozen? let enemyName = document.querySelector('input[name="enemy"]:checked').value; console.log("enemyName:", enemyName);
-
Voeg de gekozen optie toe aan je verhaal. Geef de gekozen optie CSS-styling zodat deze duidelijk zichtbaar is.
Stap 4: Checkbox buttons uitlezen
-
Voeg checkbox buttons toe aan je HTML-formulier.kboxes
<label class="formTitle">Weapons:</label><br /> <input type="checkbox" id="weapon1" value="Value 1" checked /> <label>Checkbox 1</label><br /> <input type="checkbox" id="weapon2" value="Value 2" /> <label>Checkbox 2</label><br />
Je kan op 2 manieren kijken checken checkboxen geselecteerd zijn:
-
De manuele manier:
let checkbox1Checked = document.getElementById("weapon1").checked; let checkbox1Value = document.getElementById("weapon1").value;
-
De automatische manier:
let checkboxes = document.querySelectorAll('input[type="checkbox"]'); // zet alle checkboxes in een array let selectedValues = ""; checkboxes.forEach(function (checkbox) { // loop door alle checkboxes if (checkbox.checked) { // checked? selectedValues += checkbox.value + ", "; // vorige string comma nieuwe } }); selectedValues = selectedValues.slice(0, -2); // verwijder de laatste 2 letters van de string ', ' console.log("Selected values: " + selectedValues);
-
-
Voeg de gekozen opties toe aan je verhaal. Geef de gekozen opties CSS-styling zodat deze duidelijk zichtbaar is.
🏆 Uitbreiding: Choose your own adventure
Creëer een interactief verhaal met meerdere paden, waarbij de lezer zijn eigen beslissingen kan nemen door middel van knoppen die verschillende keuzemogelijkheden presenteren.