1. Muusikaküsimustik
Muusikaküsimustik, mis on koostatud kasutaja küsitlemiseks muusikaga seotud küsimustes
Kuidas kood töötab? HTML-osa
<table> - Kogu küsimustik on tabelis
<tr> - kasutatakse tabeli rea loomiseks
<td> - määrab tabeli lahtri, mis sisaldab andmeid
</td>
</tr>
</table>
Fieldset ja Checkbox
Sildit <fieldset>
kasutatakse vormielementide rühmitamiseks loogiliselt seotud plokkideks. See võimaldab vormi jagada arusaadavamateks ja loogilisemateks osadeks, mis lihtsustab selle kasutamist kasutajate jaoks.
Lisaks kasutatakse <fieldset>
koos sildiga <legend>, mis võimaldab lisada pealkirja igale plokile.
<input type =”checkbox”> – määratleb valikukasti.
Valikukast on kujutatud ruuduna, mis aktiveerimisel on märgitud (valitud).
Valikukastidega saab kasutaja valida ühe või mitu valikut piiratud arvust valikuvõimalustest.
<fieldset>
<legend>Milliseid muusikuid/ansambleid sa tead?</legend>
<input type="checkbox" name="valik" id="imdr" value="Big Time Rush" onchange="musicValik()">
<label for="imdr">Imagine Dragons</label><br>
<input type="checkbox" name="valik" id="beatles" value="The Beatles!" onchange="musicValik()">
<label for="beatles">The Beatles</label><br>
<input type="checkbox" name="valik" id="nirvana" value="Nirvana!" onchange="musicValik()">
<label for="nirvana">Nirvana</label><br>
<input type="checkbox" name="valik" id="btr" value="Big Time Rush!" onchange="musicValik()">
<label for="btr">Big Time Rush</label><br>
</fieldset>
<div id="vastus"></div><input type=”text”>
Tüüpi <input> elemendid loovad üherealised tekstiväljad.
<label for="lemmik">Mida arvad muusika kuulamisest koolis?</label><br>
<input type="text" id="lemmik" placeholder="Sinu arvamus" oninput="lemmikLugemine()">
<div id="vastus1"></div><input type =”range”>
Tüüpi range <input> elemendid võimaldavad kasutajal määrata numbrilise väärtuse, mis peab olema vähemalt antud väärtus ja mitte üle teise antud väärtuse.
<label for="slider">Mitu tundi päevas sa kuulad muusikat?</label><br>
0 <input type="range" id="slider" min="0" max="24" onchange="sliderLiigub()"> 24
</td>
<td>
<div id="vastus2"></div><input type=”radio”>
<input> tüüpi raadioelemendid kasutatakse üldjuhul raadiorühmades – raadionuppude kogumites, mis kirjeldavad seotud valikute kogumit.
<h4>Kas sa kuulad raadiot?</h4>
<input type="radio" name="jah" id="jah" value="Jah!" onchange="valiVastus()">
<label for="jah">Jah!</label>
<input type="radio" name="ei" id="ei" value="Ei!" onchange="valiVastus()">
<label for="ei">Ei!</label>
<div id="vastus3"></div><option value=””>
Avatud <option> ja suletud </option> sildite vahel olev sisu on see, mida brauserid kuvavad rippmenüüs. Kuid väärtuse atribuudi väärtus on see, mis saadetakse serverile, kui vorm esitatakse.
<label for="muusik">Millist muusikat sa kõige rohkem kuulad?</label><br>
<select name="muusik" id="muusik" onchange="valiMuusik()">
<option value="...">.......</option>
<option value="Blinding Light!">Blinding Lights (The Weeknd)</option>
<option value="Shape of You!">Shape of You (Ed Sheeran)</option>
<option value="Star Boy!">Starboy (The Weeknd, Daft Punk)</option>
<option value="Someone You Loved!">Someone You Loved (Lewis Capaldi)</option>
<option value="As It Was!">As It Was (Harry Styles)</option>
<option value="Sweater Weather!">Sweater Weather (The Neighbourhood)</option>
</select>Js funktsioonid
„musicValik“, kasutatakse küsimuse jaoks koos „checkbox“iga, funktsioon salvestab kõik kasutaja valikud ja väljastab need eraldi sõnumina.
function musicValik(){
let v=document.getElementById("vastus");
let beatles=document.getElementById("beatles");
let btr=document.getElementById("btr");
let nirvana=document.getElementById("nirvana");
let imdr=document.getElementById("imdr");
let valik="";
if(beatles.checked){
valik+=beatles.value+", ";
}
if(imdr.checked){
valik+=imdr.value+", ";
}
if(nirvana.checked){
valik+=nirvana.value+", ";
}
if(btr.checked){
valik+=btr.value+", ";
}
v.innerHTML="Sinu valitud muusikud: "+valik;
}
Funktsioon Puhasta()
Puhasta(), see funktsioon on loodud kogu küsimustiku puhastamiseks, kõik kasutaja valikud ja talle kuvatud sõnumid kustutatakse pärast funktsiooni käivitamist.
function Puhasta(){
let beatles=document.getElementById("beatles");
let btr=document.getElementById("btr");
let nirvana=document.getElementById("nirvana");
let imdr=document.getElementById("imdr");
let valik=document.getElementById("vastus");
let lem=document.getElementById("lemmik");
let vastus1=document.getElementById("vastus1");
let slider=document.getElementById("slider");
let vastus2=document.getElementById("vastus2");
let jah=document.getElementById("jah");
let ei=document.getElementById("ei");
let vastus3=document.getElementById("vastus3");
let raadiojam=document.getElementById("raadiojam");
let vastus4=document.getElementById("vastus4");
let muusik=document.getElementById("muusik");
let vastus5=document.getElementById("vastus5");
let vastus6=document.getElementById("vastus6");
let pilt=document.getElementById("pilt");
pilt.src="";
vastus6.innerHTML="";
vastus5.innerHTML="";
muusik.value="...";
vastus4.innerHTML="";
raadiojam.value="";
vastus3.innerHTML="";
ei.checked=false;
jah.checked=false;
vastus2.innerHTML="";
slider.value="";
vastus1.innerHTML="";
lem.value="";
valik.innerText="";
beatles.checked=false;
btr.checked=false;
nirvana.checked=false;
imdr.checked=false;
}function lemmikLugemine()
Funktsioon, mis on mõeldud kasutaja vastuse väljastamiseks.
function lemmikLugemine(){
//let
let lemmik=document.getElementById("lemmik");
let v1=document.getElementById("vastus1");
//innerText või innerHTML genereerib lehel vastav tekst
v1.innerText="Teie arvamus on: "+lemmik.value;
}function sliderLiigub()
Funktsioon, mis võtab väärtused liugurilt ja kuvab need kasutajale
function sliderLiigub(){
let v2=document.getElementById("vastus2");
let slider=document.getElementById("slider");
v2.innerText="Sa kuulad muusikat ["+slider.value+"] tundi päevas";
}function valiVastus()
Funktsioon valikuvariatsiooniga, peamiselt pärast jah- või ei-vastuse valimist, annab vastuse vastavalt kasutaja valikule, kuid kui kasutaja ei valinud ühtegi pakutud varianti, kuvab funktsioon teate, milles palutakse tal oma vastus valida.
function valiVastus(){
let v3=document.getElementById("vastus3");
let jah=document.getElementById("jah");
let ei=document.getElementById("ei");
if(jah.checked){
v3.innerHTML="Raadio kuulamine: "+jah.value;
}
else if(ei.checked){
v3.innerHTML="Raadio kuulamine: "+ei.value;
}
else{
v3.innerHTML="palun vali oma vastus!";
}
}function valiMuusik()
Funktsioon, mis väljastab kasutaja sisestatud väärtuse
function valiMuusik(){
let v5=document.getElementById("vastus5");
let muusik=document.getElementById("muusik");
// selectedIndex!==0 - mitte null
if(muusik.selectedIndex!==0){
v5.innerHTML="Sa valisid "+muusik.value;
} else{
v5.innerHTML="Tee ripploendi lahti ja vali";
}
}function saada()
funktsioon, mis salvestab kõik kasutaja vastused ühte reale ja mis kuvatakse pärast funktsiooni käivitumist
function saada() {
let v = document.getElementById("vastus");
let v1 = document.getElementById("vastus1");
let v2 = document.getElementById("vastus2");
let v3 = document.getElementById("vastus3");
let v4 = document.getElementById("vastus4");
let v5 = document.getElementById("vastus5");
let v6 = document.getElementById("vastus6");
let pilt=document.getElementById("pilt");
v6.innerText =v.innerText+"\n"+ v1.innerText + "\n" + v2.innerText + "\n" + v3.innerText + "\n" + v4.innerText + "\n" + v5.innerText;
pilt.src="img/Happy.png";
}Muusika Küsimustik
|
|
|
|
0 24 |
|
Kas sa kuulad raadiot? |
|
|
|
|
|
|
|