1. Music questionnaire

Music questionnaire designed to survey users on music-related topics

How does the code work? HTML part

<table> - The entire questionnaire is shown in the table.
<tr> - used to create a table row
<td> - specifies the table cell containing the data
</td>
</tr>
</table>

Fieldset ja Checkbox

The tag
is used to group form elements into logically related blocks. This allows the form to be divided into more understandable and logical parts, which simplifies its use for users.

In addition,
is used together with the tag, which allows you to add a title to each block.

<input type =”checkbox”> – defines a checkbox.

The selection box is displayed as a square, which is marked (selected) when activated.

Selection boxes allow the user to select one or more options from a limited number of choices.

 <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”>

Elements of type create single-line text fields.

<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”>

Type strict elements allow the user to specify a numeric value that must be at least as large as a given value and not greater than another given value.

<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”>

Radio elements of type are generally used in radio groups – sets of radio buttons that describe a related set of choices.

<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=””>

The content between the open and closed tags is what browsers display in the drop-down menu. However, the value of the value attribute is what is sent to the server when the form is submitted.

<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

“musicSelection” is used for questions together with “checkbox”; the function saves all user selections and outputs them as a separate message.

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()

Clear(), this function is designed to clear the entire questionnaire; all user selections and messages displayed to the user will be deleted after the function is executed.

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()

A function designed to output the user’s response.

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()

A function that takes values from a slider and displays them to the user

function sliderLiigub(){
    let v2=document.getElementById("vastus2");
    let slider=document.getElementById("slider");

    v2.innerText="Sa kuulad muusikat ["+slider.value+"] tundi päevas";
}

function valiVastus()

A function with a selection variation, mainly after selecting yes or no, provides an answer according to the user’s selection, but if the user has not selected any of the options offered, the function displays a message asking them to select their answer.

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()

Function that outputs the value entered by the user

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()

A function that saves all user responses in a single line and displays them after the function is triggered.

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

Milliseid muusikuid/ansambleid sa tead? Imagine Dragons The Beatles Nirvana Big Time Rush
Mida arvad muusika kuulamisest koolis?
Mitu tundi päevas sa kuulad muusikat? 0 24
Kas sa kuulad raadiot? Jah! Ei!
Milliseid raadiojaamu oskad nimetada?
Millist muusikat sa kõige rohkem kuulad? ……. Blinding Lights (The Weeknd) Shape of You (Ed Sheeran) Starboy (The Weeknd, Daft Punk) Someone You Loved (Lewis Capaldi) As It Was (Harry Styles) Sweater Weather (The Neighbourhood)
Sinu kõik vastused

Timur Bashirov Portfolio

JS: Creating a music questionnaire