Väike konspekt
HTML:
- Kasutatakse <form> elementi koos table, kus igas reas on küsimus + vastus.
- checkbox – mitme valiku valimiseks («Milliseid muusikuid tead?»)
- textarea – teksti sisestamiseks («Mida arvad muusika kuulamisest koolis?»)
- range – liugur tundide arvu määramiseks
- radio – ühe valiku tegemiseks («Kas kuulad raadiot?» ja «Lemmikmuusika?»)
- text – tavaline tekstiväli raadiojaamade nimetamiseks
Stiilid:
- kogu vormi tausta, värvid ja fondid.
- <table> paigutuse, ribastuse ja piirjooned.
- nuppude välimuse efekti.
- sisendväljade kuju ja suuruse.
- #kokkuvote sektsioon — peidetakse kuni andmed saadetakse.
Javascript:
- muusikaF() – loeb valitud muusikastiilid ja kuvab need.
- arvamusF() – kuvab reaalajas sisestatud arvamuse.
- muusikaRangeF() – kuvab liuguri väärtuse.
- raadiokulF() – näitab, kas raadio kuulamist märgiti «Jah» või «Ei».
- raadiojaamF() – näitab sisestatud raadiojaamad.
- muusikakulF() – määrab, millist muusikat kuulatakse kõige rohkem.
- saada() – koondab kõik andmed kokkuvõtteks ja kuvab need ekraanil.
- puhasta() – lähtestab vormi (reset()) ning eemaldab kõik vahepealsed vastused
Kuidas töötab?
- Kasutaja vastab küsimustele > JS uuendab “vastus” välju reaalajas.
- Vajutades Saada > skript kogub kõik väärtused ja täidab KOKKUVÕTE tabeli.
- Vajutades Puhasta > vorm lähtestub ja kokkuvõte peidetakse taas.
Valmis töö
MUUSIKA KÜSITLUSVORM
| Küsimus / valikud |
Vastus |
| Milliseid muusikuid/ansambleid sa tead? |
|
| Mida arvad muusika kuulamisest koolis? |
|
| Mitu tundi päevas sa kuulad muusikat? |
0
10
|
| Kas sa kuulad raadiot? |
|
| Milliseid raadiojaamu oskad nimetada? |
|
| Millist muusikat sa kõige rohkem kuulad? |
|
|
|
KOKKUVÕTE
Muusikud: —
Arvamus koolimuusikast:
—
Kuulamise aeg päevas: —
Kuulad raadiot: —
Raadiojaamad: —
Lemmikmuusika: —
function muusikaF() {
let v1 = document.getElementById(«v1»)
let v2 = document.getElementById(«v2»)
let v3 = document.getElementById(«v3»)
let v4 = document.getElementById(«v4»)
let v5 = document.getElementById(«v5»)
let vastus = document.getElementById(«vastus»)
let valik = «»
if (v1.checked) {
valik += v1.value + «, »
}
if (v2.checked) {
valik += v2.value + «, »
}
if (v3.checked) {
valik += v3.value + «, »
}
if (v4.checked) {
valik += v4.value + «, »
}
if (v5.checked) {
valik += v5.value + » »
}
vastus.innerText = «Sinu valitud muusikud: » + valik
};
function arvamusF() {
let text = document.getElementById(«arvamus»).value;
document.getElementById(«arvamusVastus»).innerText = «Sinu arvamus: » + text;
}
function muusikaRangeF() {
let range = document.getElementById(«muusikaRange»).value;
document.getElementById(«rangeVastus»).innerText = «Sa kuulad umbes » + range + » tundi päevas.»;
}
function raadiokulF() {
let jah = document.getElementById(«jah»)
let ei = document.getElementById(«ei»)
let vastus = «»
if (jah.checked)
vastus = «Jah»;
else if (ei.checked)
vastus = «Ei»
document.getElementById(«raadioVastus»).innerText = «Kas sa kuulad raadiot: » + vastus;
}
function raadiojaamF() {
let jaam = document.getElementById(«raadiojaam»).value
document.getElementById(«raadiojaamVastus»).innerText = «Sinu nimetatud jaamad: » + jaam;
}
function muusikakulF() {
let pop = document.getElementById(«v1p»);
let retro = document.getElementById(«v2p»);
let hh = document.getElementById(«v3p»);
let rock = document.getElementById(«v4p»);
let rapp = document.getElementById(«v5p»);
let valik = «»;
if (pop.checked)
valik = pop.value;
else if (retro.checked)
valik = retro.value;
else if (hh.checked)
valik = hh.value;
else if (rock.checked)
valik = rock.value;
else if (rapp.checked)
valik = rapp.value;
document.getElementById(«muusikakulVastus»).innerText = «Sinu vastus: » + valik;
}
function saada() {
let muusika = document.getElementById(«vastus»).innerText;
let arvamus = document.getElementById(«arvamus»).value;
let tunnid = document.getElementById(«muusikaRange»).value;
let radioJah = document.getElementById(«jah»);
let radioEi = document.getElementById(«ei»);
let raadio = «»;
if (radioJah.checked)
raadio = «Jah»;
else if (radioEi.checked)
raadio = «Ei»;
let jaamad = document.getElementById(«raadiojaam»).value;
let pop = document.getElementById(«v1p»);
let retro = document.getElementById(«v2p»);
let hh = document.getElementById(«v3p»);
let rock = document.getElementById(«v4p»);
let rapp = document.getElementById(«v5p»);
let lemmik = «»;
if (pop.checked)
lemmik = «Pop»;
else if (retro.checked)
lemmik = «Retro»;
else if (hh.checked)
lemmik = «Hip-Hop»;
else if (rock.checked)
lemmik = «Rock»;
else if (rapp.checked)
lemmik = «Räpp»;
document.getElementById(«kokku-muusika»).innerText = muusika || «â€”»; // || — или
document.getElementById(«kokku-arvamus»).innerText = arvamus || «â€”»;
document.getElementById(«kokku-tunnid»).innerText = tunnid + » tundi» || «â€”»;
document.getElementById(«kokku-raadio»).innerText = raadio || «â€”»;
document.getElementById(«kokku-jaamad»).innerText = jaamad || «â€”»;
document.getElementById(«kokku-lemmik»).innerText = lemmik || «â€”»;
document.getElementById(«kokkuvote»).style.display = «block»;
}
function puhasta() {
document.getElementById(«regvorm»).reset();
document.getElementById(«vastus»).innerText = «»;
document.getElementById(«arvamusVastus»).innerText = «»;
document.getElementById(«rangeVastus»).innerText = «»;
document.getElementById(«raadioVastus»).innerText = «»;
document.getElementById(«raadiojaamVastus»).innerText = «»;
document.getElementById(«muusikakulVastus»).innerText = «»;
document.getElementById(«kokkuvote»).style.display = «none»;
}
#muusika-ankeet {
font-family: Verdana, Geneva, Tahoma, sans-serif;
background: #eef3ff;
color: #1e2d5a;
font-size: 16px;
line-height: 1.6;
padding: 20px;
}
#muusika-ankeet h1,
#muusika-ankeet h2 {
text-align: center;
color: #2b3a67;
margin-top: 0;
}
#muusika-ankeet h1 {
margin: 30px 0;
}
#muusika-ankeet .box {
max-width: 850px;
margin: 30px auto;
background: #fff;
padding: 25px 40px;
border: 3px solid #495bcc;
border-radius: 10px;
}
#muusika-ankeet form {
margin-top: 0;
}
#muusika-ankeet table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
#muusika-ankeet th {
background: #dce1ff;
color: #1e2d5a;
padding: 10px;
border: 2px solid #495bcc;
text-align: left;
}
#muusika-ankeet td {
border: 1px solid #999;
padding: 10px 8px;
word-break: break-word;
}
#muusika-ankeet td[colspan=»2″] {
text-align: center;
}
#muusika-ankeet tr:nth-child(even) {
background: #f7f8ff;
}
#muusika-ankeet input[type],
#muusika-ankeet textarea {
background: #f9f9f9;
border: 1px solid #666;
border-radius: 4px;
padding: 6px;
box-sizing: border-box;
}
#muusika-ankeet input[type=»text»],
#muusika-ankeet textarea {
width: 96%;
}
#muusika-ankeet button {
background: #495bcc;
color: #fff;
border: none;
padding: 12px 25px;
margin: 10px;
font-size: 16px;
border-radius: 6px;
cursor: pointer;
}
#muusika-ankeet button:hover {
background: #2f3fab;
}
#muusika-ankeet input[type=»range»] {
width: 70%;
}
This post is also available in et.
