Muusika küsitluse kohta konspekt
HTML:
<fieldset>
<h1>Muusika küsitlus</h1>
<form id="muusikaVorm">
<table id="table1">
Selgitus:
<fieldset>: Kasutatakse vormi sisu rühmitamiseks, et visuaalselt eristada vormi osi.
<form>: Algab vorm, mille ID on muusikaVorm. Selle kaudu saavad kasutajad täita küsimustiku.
<table>: Kasutatakse kujunduse jaoks, et paigutada küsimused ja vastused üksteise kõrvale ridadeks.
<tr>
<td>
Milliseid muusikuid/ansambleid sa tead?<br>
<input type="checkbox" id="muusik1" name="muusik" value="Yanix" onchange="valiMuusikud()">
<label for="muusik1">Yanix</label><br>
<input type="checkbox" id="muusik2" name="muusik" value="Mayot" onchange="valiMuusikud()">
<label for="muusik2">Mayot</label><br>
<input type="checkbox" id="muusik3" name="muusik" value="OG Buda" onchange="valiMuusikud()">
<label for="muusik3">OG Buda</label><br>
<input type="checkbox" id="muusik4" name="muusik" value="The Weeknd" onchange="valiMuusikud()">
<label for="muusik4">The Weeknd</label>
</td>
<td><div id="vastus1"></div></td>
</tr>
Selgitus:
<tr> — Üks rida tabelis.
Esimene <td> sisaldab küsimust ja neli checkbox-võimalust muusikute valimiseks.
Iga checkboxi muutmisel (onchange) kutsutakse välja funktsioon valiMuusikud(), mis kuvab valitud muusikud.
Teine <td> on tühi kast (div id="vastus1"), kuhu kuvatakse valitud vastused.
<tr>
<td>
<label for="arvamus">Mida arvad muusika kuulamisest koolis?</label><br>
<textarea id="arvamus" rows="4" cols="30" oninput="valiArvamus()"></textarea>
</td>
<td><div id="vastus2"></div></td>
</tr>
Selgitus:
Järgmine tabelirea küsimus: vaba tekstiväli, kuhu kasutaja saab kirjutada oma arvamuse.
textarea element, mille sisendi muutmisel käivitub funktsioon valiArvamus().
<tr>
<td>
<label for="tunnid">Mitu tundi päevas sa kuulad muusikat?</label><br>
<input type="number" id="tunnid" min="0" max="24" onchange="valiKuulamisaeg()">
</td>
<td><div id="vastus3"></div></td>
</tr>
Selgitus:
<label for="tunnid"> — tekst, mis näitab küsimust “Mitu tundi päevas sa kuulad muusikat?”.
Label on seotud sisendvälja id="tunnid"-ga, nii et klikkides tekstil, saad selle sisendi aktiivseks muuta.
<input type="number" ...> — kasutaja saab sisestada numbri (mitu tundi).
min="0" ja max="24" piiravad numbrit, et ei saaks panna näiteks 30 tundi.
onchange="valiKuulamisaeg()" — kui kasutaja muudab väärtust, käivitub JavaScripti funktsioon valiKuulamisaeg(), mis töötleb või kuvab sisendi põhjal midagi.
<tr>
<td>
Kas sa kuulad raadiot?<br>
<input type="radio" id="jah" name="raadio" value="Jah" onchange="valiRaadio()">
<label for="jah">Jah</label>
<input type="radio" id="ei" name="raadio" value="Ei" onchange="valiRaadio()">
<label for="ei">Ei</label>
</td>
<td><div id="vastus4"></div></td>
</tr>
Selgitus:
Esimene nupp on id="jah", nimi raadio, väärtus "Jah".
Selle taga on ka silt <label for="jah">Jah</label>, mis on kasutajale nähtav ja klikkides sellele, valitakse vastav nupp.
Teine nupp on id="ei", nimi raadio, väärtus "Ei", ja sellele vastav silt <label for="ei">Ei</label>.
name="raadio" tähendab, et mõlemad nupud on seotud, kasutaja saab valida ainult ühe (Jah või Ei).
<tr>
<td>
<label for="stiil">Millist muusikat sa kõige rohkem kuulad?</label><br>
<select id="stiil" onchange="valiStiil()">
<option value="">Vali stiil</option>
<option value="Pop">Pop</option>
<option value="Rock">Rock</option>
<option value="Hip-Hop">Hip-Hop</option>
<option value="Elektrooniline">Elektrooniline</option>
</select>
</td>
<td><div id="vastus6"></div></td>
</tr>
Selgitus:
<select id="stiil" onchange="valiStiil()"> — loob rippmenüü (valikukasti), kus kasutaja saab valida
<option> elemendid — pakuvad valikuid (Pop, Rock, Hip-Hop, Elektrooniline).
JS:
Muusikud funktsioon:
function valiMuusikud() {
let v1 = document.getElementById("vastus1");
let muusik1 = document.getElementById("muusik1");
let muusik2 = document.getElementById("muusik2");
let muusik3 = document.getElementById("muusik3");
let muusik4 = document.getElementById("muusik4");
let valik = "";
if (muusik1.checked) valik += muusik1.value + ", ";
if (muusik2.checked) valik += muusik2.value + ", ";
if (muusik3.checked) valik += muusik3.value + ", ";
if (muusik4.checked) valik += muusik4.value + ", ";
if (valik === "") {
v1.innerText = "Palun vali vahemalt uks muusik!";
} else {
v1.innerText = "Valisid: " + valik;
}
}
Selgitus:
Kontrollib, millised muusikud checkboxid on valitud.
Kui vähemalt üks muusik on valitud, kuvab valitud muusikute nimed.
Kui pole ühtegi muusikut valitud, kuvab veateate: “Palun vali vähemalt üks muusik!”
Arvamus funktsioon:
function valiArvamus() {
let v2 = document.getElementById("vastus2");
let arvamus = document.getElementById("arvamus").value;
if (arvamus.trim() === "") {
v2.innerText = "Palun kirjuta oma arvamus!";
} else {
v2.innerText = "Sinu arvamus: " + arvamus;
}
}
Selgitus:
Kontrollib, kas kasutaja on sisestanud arvamuse.
Kui arvamusväli on tühi, siis kuvab teate: “Palun kirjuta oma arvamus!”
Kui arvamus on sisestatud, kuvab selle.
Kuulamise funktsioon:
function valiKuulamisaeg() {
let v3 = document.getElementById("vastus3");
let tunnid = document.getElementById("tunnid").value;
if (tunnid === "") {
v3.innerText = "Palun sisesta tunnid!";
} else {
v3.innerText = "Kuulad muusikat " + tunnid + " tundi paevas";
}
}
Selgitus:
Kontrollib, kas kasutaja on sisestanud tunni arvu.
Kui tunnid on sisestatud, kuvab need: “Kuulad muusikat N tundi päevas.”
Kui pole midagi sisestatud, kuvab veateate: “Palun sisesta tunnid!”
Raadio funktsioon:
function valiRaadio() {
let v4 = document.getElementById("vastus4");
let jah = document.getElementById("jah");
let ei = document.getElementById("ei");
if (jah.checked) {
v4.innerText = "Kuulan raadiot: Jah";
} else if (ei.checked) {
v4.innerText = "Kuulan raadiot: Ei";
} else {
v4.innerText = "Palun vali raadio kuulamine!";
}
}
Selgitus:
Kontrollib, kas kasutaja on valinud, kas ta kuulab raadiot.
Kui “Jah” on valitud, kuvab teate: “Kuulan raadiot: Jah.”
Kui “Ei” on valitud, kuvab teate: “Kuulan raadiot: Ei.”
Kui kumbki ei ole valitud, palub valida ühe variandi.
Vali raadiojaam funktsioon:
function valiJaamad() {
let v5 = document.getElementById("vastus5");
let jaamad = document.getElementById("jaamad").value;
if (jaamad === "") {
v5.innerText = "Palun nimeta moni raadiojaam!";
} else {
v5.innerText = "Raadiojaamad: " + jaamad;
}
}
Selgitus:
Kontrollib, kas kasutaja on sisestanud raadiojaama nime.
Kui jaama nimi on sisestatud, kuvab selle.
Kui jaama nimi puudub, kuvab veateate: “Palun nimeta mõni raadiojaam!”
Muusika stiili funktsioon:
function valiStiil() {
let v6 = document.getElementById("vastus6");
let stiil = document.getElementById("stiil").value;
if (stiil === "") {
v6.innerText = "Palun vali muusika stiil!";
} else {
v6.innerText = "Valisid stiili: " + stiil;
}
}
Selgitus:
Kontrollib, kas kasutaja on valinud muusika stiili dropdown.
Kui stiil on valitud, kuvab stiili nime.
Kui ei ole valitud, kuvab veateate: “Palun vali muusika stiil!”
Kokkuvõtte funktsioon:
function kokkuvott() {
let v1 = document.getElementById("vastus1").innerText;
let v2 = document.getElementById("vastus2").innerText;
let v3 = document.getElementById("vastus3").innerText;
let v4 = document.getElementById("vastus4").innerText;
let v5 = document.getElementById("vastus5").innerText;
let v6 = document.getElementById("vastus6").innerText;
let vastused = document.getElementById("vastused");
vastused.innerHTML =
v1 + "<br>" +
v2 + "<br>" +
v3 + "<br>" +
v4 + "<br>" +
v5 + "<br>" +
v6 + "<br><hr>";
}
Selgitus:
Kogub kõikide vastuste teksti ja kuvab need ühes piirkonnas.
Kuvatakse iga küsimuse vastus koos HTML-koodiga, mis eraldab need ridadelt <br> ja lisab eraldusjoone <hr>.