1.Konspekt

1. Javascript

valiMuusikud()
Kontrollib, kas muusikute valikutest on midagi valitud. Kui ei, siis küsib “Palun vali vähemalt üks muusik!”. Kui on valitud, kuvab nimekirja valitud muusikutest.

function valiMuusikud() {

    --
    --saame andmed HTML-ist
    --
    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 + ", ";


    --
    --näitab ekraanil:
    --
    if (valik = "") {
        v1.innerText = "Palun vali vähemalt üks muusik!";
    } else {
        v1.innerText = "Valisid: " + valik;
    }
}
Code language: JavaScript (javascript)

valiArvamus()
Kontrollib, kas arvamus on kirjutatud. Kui pole midagi kirjutatud, küsib “Palun kirjuta oma arvamus!”. Kui on kirjutatud, kuvab selle.

function valiArvamus() {
    let v2 = document.getElementById("vastus2"); 
    --
    --Vastuse kuvamise koht
    --
    let arvamus = document.getElementById("arvamus").value; 
   --
   -- Arvamuse sisestus
   --
   -- Kui arvamus on tühi, siis palutakse kirjutada       arvamus

    if (arvamus.trim() = "") {
        v2.innerText = "Palun kirjuta oma arvamus!";
    } 
    else 
    {
     -- Kui arvamus on sisestatud, siis kuvatakse arvamus
        
        v2.innerText = "Sinu arvamus: " + arvamus;
    }
}Code language: JavaScript (javascript)

valiKuulamisaeg()
Kontrollib, mitu tundi inimene päevas muusikat kuulab ja kuvab vastuse.

function valiKuulamisaeg() {
    let v3 = document.getElementById("vastus3");

    --Vastuse kuvamise koht

    let tunnid = document.getElementById("tunnid").value; 

    --Tunnid, kui palju kuulatakse

    -- Kui tunnid on tühi, siis palutakse täita väli

    if (tunnid = "") {
        v3.innerText = "Palun sisesta tunnid!";
    } else {

      -- siis kuvatakse kuulamise aeg

        v3.innerText = "Kuulad muusikat " + tunnid + " tundi päevas";
    }
}Code language: JavaScript (javascript)

valiRaadio()
Kontrollib, kas raadio kuulamine on valitud (jah või ei). Kui midagi pole valitud, küsib “Palun vali raadio kuulamine!”.

function valiRaadio() {
    let v4 = document.getElementById("vastus4"); 

    --Vastuse kuvamise koht

    let jah = document.getElementById("jah");
    let ei = document.getElementById("ei");

    -- Kui "Jah" on valitud, siis kuvatakse vastus "Kuulan raadiot: Jah"
    if (jah.checked) {
        v4.innerText = "Kuulan raadiot: Jah";
    } else if (ei.checked) {

     -- Sama aga on "Ei"
        v4.innerText = "Kuulan raadiot: Ei";
    } else {

     --Kui midagi pole valitud, siis palutakse valida üks variant
        v4.innerText = "Palun vali raadio kuulamine!";
    }
}Code language: JavaScript (javascript)

valiJaamad()
Kontrollib, kas raadiojaamade nimed on sisestatud. Kui ei, küsib “Palun nimeta mõni raadiojaam!”. Kui on, siis kuvab need.

function valiJaamad() {

    let v5 = document.getElementById("vastus5"); // 
    let jaamad = document.getElementById("jaamad").value; 


    -- Kui jaamad on tühjad, siis palutakse nimeta raadiojaam

    if (jaamad = "") {
        v5.innerText = "Palun nimeta mõni raadiojaam!";
    } else {


    -- Kui jaamad on sisestatud, siis kuvatakse need
        v5.innerText = "Raadiojaamad: " + jaamad;
    }
}Code language: JavaScript (javascript)

valiStiil()
Kontrollib, kas muusika stiil on valitud. Kui ei, küsib “Palun vali muusika stiil!”. Kui on, siis kuvab valitud stiili.

function valiStiil() {
    let v6 = document.getElementById("vastus6"); 
    let stiil = document.getElementById("stiil").value;

-- Kui stiil ei ole valitud, siis palutakse valida stiil

    if (stiil = "") {
        v6.innerText = "Palun vali muusika stiil!";
    } else {


     -- Kui stiil on valitud, siis kuvatakse valitud stiil

        v6.innerText = "Valisid stiili: " + stiil;
    }
}Code language: JavaScript (javascript)

kokkuvott()
Kogub kõik vastused ja kuvab need ühe kokkuvõttena.

function kokkuvott() {
    let v1 = document.getElementById("vastus1").innerText; -- Muusikute valik
    let v2 = document.getElementById("vastus2").innerText; -- Arvamus
    let v3 = document.getElementById("vastus3").innerText; -- Kuulamise aeg
    let v4 = document.getElementById("vastus4").innerText; -- Raadio kuulamine
    let v5 = document.getElementById("vastus5").innerText; -- Raadiojaamad
    let v6 = document.getElementById("vastus6").innerText; -- Muusika stiil

    let vastused = document.getElementById("vastused"); 
-- Koht, kus kõik vastused kuvatakse

-- Kuvab kõik vastused üheks lõplikuks kokkuvõtteks

    vastused.innerHTML =
        v1 + "<br>" +
        v2 + "<br>" +
        v3 + "<br>" +
        v4 + "<br>" +
        v5 + "<br>" +
        v6 + "<br><hr>";
}Code language: JavaScript (javascript)

puhasta() Funktsioon, mis kuvab kõiki valitud vastuseid kokku

function puhasta() {

    --Kõik vastused 
    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 muusik1 = document.getElementById("muusik1"); 
    let muusik2 = document.getElementById("muusik2"); 
    let muusik3 = document.getElementById("muusik3"); 
    let arvamus = document.getElementById("arvamus"); 
    let tunnid = document.getElementById("tunnid");
    let jah = document.getElementById("jah"); 
    let ei = document.getElementById("ei"); 
    let jaamad = document.getElementById("jaamad");
    let stiil = document.getElementById("stiil");

    let vastused = document.getElementById("vastused"); 

    --Puhastab kõik vastused
    v1.innerText = "";
    v2.innerText = "";
    v3.innerText = "";
    v4.innerText = "";
    v5.innerText = "";
    v6.innerText = "";

    -- Läheb kõik checkboxid ja valikud tagasi algseisundisse
    muusik1.checked = false;
    muusik2.checked = false;
    muusik3.checked = false;
    arvamus.value = "";
    tunnid.value = "";
    jah.checked = false;
    ei.checked = false;
    jaamad.value = "";
    stiil.selectedIndex = 0;
    vastused.innerText = "";
}Code language: JavaScript (javascript)

2.HTML

Vorm on jagatud väljadeks tabelis (<table>), iga küsimus on eraldi tr sees.

Esimeses osas on mitu checkbox tüüpi valikut muusikute kohta, igaüks kutsub välja funktsiooni valiMuusikud().

<!-- 1. Muusikud/ansambid valiku küsimus -->
            <tr>
                <td>
                    Milliseid muusikuid/ansambleid sa tead?<br>
                    <!-- Checkbox valikud muusikute kohta -->
                    <input type="checkbox" id="muusik1" name="muusik" value="AC/DC" onchange="valiMuusikud()">
                    <label for="muusik1">AC/DC</label><br>
                    <input type="checkbox" id="muusik2" name="muusik" value="Metallica" onchange="valiMuusikud()">
                    <label for="muusik2">Metallica</label><br>
                    <input type="checkbox" id="muusik3" name="muusik" value="5MIINUST" onchange="valiMuusikud()">
                    <label for="muusik3">5MIINUST</label><br>
                    <input type="checkbox" id="muusik4" name="muusik" value="Smilers" onchange="valiMuusikud()">
                    <label for="muusik4">Smilers</label>
                </td>
                <!-- Div, kuhu kuvatakse valiku vastus -->
                <td><div id="vastus1"></div></td>
            </tr>

Code language: HTML, XML (xml)

Tekstiala (textarea) arvamuse jaoks, mille sisendi muutmisel käivitub valiArvamus().


            <!-- 2. Arvamus küsimus -->
            <tr>
                <td>
                    <label for="arvamus">Mida arvad muusika kuulamisest koolis?</label><br>
                    <!-- Tekstiala arvamuse sisestamiseks -->
                    <textarea id="arvamus" rows="4" cols="30" oninput="valiArvamus()"></textarea>
                </td>
                <!-- Div, kuhu kuvatakse vastus -->
                <td><div id="vastus2"></div></td>
            </tr>
Code language: HTML, XML (xml)

Numbriväli kuulamisaja jaoks, mille väärtuse muutmisel käivitub valiKuulamisaeg().


            <!-- 3. Kuulamisaeg küsimus -->
            <tr>
                <td>
                    <label for="tunnid">Mitu tundi päevas sa kuulad muusikat?</label><br>
                    <!-- Numbriväli, kus saab sisestada kuulamisaega -->
                    <input type="number" id="tunnid" min="0" max="24" onchange="valiKuulamisaeg()">
                </td>
                <!-- Div, kuhu kuvatakse vastus -->
                <td><div id="vastus3"></div></td>
            </tr>
Code language: HTML, XML (xml)

Raadio kuulamise kohta on kaks radio nuppu, mis kutsuvad valiRaadio().


            <!-- 4. Kas kuulad raadiot küsimus -->
            <tr>
                <td>
                    Kas sa kuulad raadiot?<br>
                    <!-- Raadio nuppude valikud: Jah ja Ei -->
                    <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>
                <!-- Div, kuhu kuvatakse vastus -->
                <td><div id="vastus4"></div></td>
            </tr>
Code language: HTML, XML (xml)

Tekstisisendi väli raadiojaamade nimetamiseks, millel on oninput sündmus ja funktsioon valiJaamad().


            <!-- 5. Raadiojaamad küsimus -->
            <tr>
                <td>
                    <label for="jaamad">Milliseid raadiojaamu oskad nimetada?</label><br>
                    <!-- Tekstiväli raadiojaamade nimetamiseks -->
                    <input type="text" id="jaamad" placeholder="Sky Plus, Elmar..." oninput="valiJaamad()">
                </td>
                <!-- Div, kuhu kuvatakse vastus -->
                <td><div id="vastus5"></div></td>
            </tr>Code language: HTML, XML (xml)

Rippmenüü muusika stiili valimiseks, kus muutmisel kutsutakse valiStiil().


            <!-- 6. Muusika stiilide valiku küsimus -->
            <tr>
                <td>
                    <label for="stiil">Millist muusikat sa kõige rohkem kuulad?</label><br>
                    <!-- Rippmenüü stiili valimiseks -->
                    <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="Jazz">Jazz</option>
                        <option value="Klassikaline">Klassikaline</option>
                        <option value="Elektrooniline">Elektrooniline</option>
                    </select>
                </td>
                <!-- Div, kuhu kuvatakse vastus -->
                <td><div id="vastus6"></div></td>
            </tr>
Code language: HTML, XML (xml)

–Nuppud


            <!-- Nuppude rida: saata ja puhastada vorm -->
            <tr>
                <td colspan="2">
                    <!-- Nupp vormi saatmiseks -->
                    <input type="button" value="Saada" onclick="kokkuvott()">
                    <!-- Nupp vormi tühjendamiseks -->
                    <input type="button" value="Puhasta" onclick="puhasta()">
                </td>
            </tr>Code language: HTML, XML (xml)

Lõpus on eraldi plokk vastuste kuvamiseks (vastused ja kokkuvote).

<!-- Div, kuhu kuvatakse kogu kokkuvõtte -->
    <div id="kokkuvote"></div>
</fieldset>

<fieldset>
    <legend><h1>Vastused</h1></legend>
    <form>
        <!-- Div, kuhu kuvatakse kõik vastused -->
        <div id="vastused"></div>
    </form>
</fieldset>
Code language: HTML, XML (xml)

2. html/css/js kõik koodi

Muusika küsitlus

Milliseid muusikuid/ansambleid sa tead? AC/DC Metallica 5MIINUST Smilers
Mida arvad muusika kuulamisest koolis?
Mitu tundi päevas sa kuulad muusikat?
Kas sa kuulad raadiot? Jah Ei
Milliseid raadiojaamu oskad nimetada?
Millist muusikat sa kõige rohkem kuulad? Vali stiil Pop Rock Hip-Hop Jazz Klassikaline Elektrooniline

Vastused

“; } function puhasta() { 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 muusik1 = document.getElementById(“muusik1”); let muusik2 = document.getElementById(“muusik2”); let muusik3 = document.getElementById(“muusik3”); let arvamus = document.getElementById(“arvamus”); let tunnid = document.getElementById(“tunnid”); let jah = document.getElementById(“jah”); let ei = document.getElementById(“ei”); let jaamad = document.getElementById(“jaamad”); let stiil = document.getElementById(“stiil”); let vastused = document.getElementById(“vastused”); v1.innerText = “”; v2.innerText = “”; v3.innerText = “”; v4.innerText = “”; v5.innerText = “”; v6.innerText = “”; muusik1.checked = false; muusik2.checked = false; muusik3.checked = false; muusik4.checked = false; arvamus.value = “”; tunnid.value = “”; jah.checked = false; ei.checked = false; jaamad.value = “”; stiil.selectedIndex = 0; vastused.innerText = “”; } body { font-family: Arial, sans-serif; background-color: lightsteelblue; margin: 20px; } fieldset { background: white; padding: 20px; border-radius: 8px; border: 2px solid grey; } #table1 td:nth-child(2) { width: 40%; min-width: 250px; } table { width: 100%; } td { padding: 10px; vertical-align: top; } input[type=”text”], input[type=”number”], select, textarea { width: 100%; padding: 5px; border-radius: 4px; border: 1px solid #aaa; } input[type=”button”] { margin-right: 10px; padding: 8px 16px; background-color: #778899; color: white; border: none; }

Anastasiia Radasheva Portfolio ENG

JS: creating a music questionnaire

Muusika küsitlus

Vastused