{"version":"1.0","provider_name":"Artjom P\u00f5ldsaar Portfolio","provider_url":"https:\/\/artjompoldsaar24.thkit.ee\/wp\/eng","author_name":"admin","author_url":"https:\/\/artjompoldsaar24.thkit.ee\/wp\/eng\/author\/admin\/","title":"JS: Music form creation - Artjom P\u00f5ldsaar Portfolio","type":"rich","width":600,"height":338,"html":"<blockquote class=\"wp-embedded-content\" data-secret=\"0dUOQfUKjO\"><a href=\"https:\/\/artjompoldsaar24.thkit.ee\/wp\/eng\/js-muusika-ankeedi-loomine\/\">JS: Music form creation<\/a><\/blockquote><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/artjompoldsaar24.thkit.ee\/wp\/eng\/js-muusika-ankeedi-loomine\/embed\/#?secret=0dUOQfUKjO\" width=\"600\" height=\"338\" title=\"&#8220;JS: Music form creation&#8221; &#8212; Artjom P\u00f5ldsaar Portfolio\" data-secret=\"0dUOQfUKjO\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" class=\"wp-embedded-content\"><\/iframe><script type=\"text\/javascript\">\n\/* <![CDATA[ *\/\n\/*! This file is auto-generated *\/\n!function(d,l){\"use strict\";l.querySelector&&d.addEventListener&&\"undefined\"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!\/[^a-zA-Z0-9]\/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret=\"'+t.secret+'\"]'),o=l.querySelectorAll('blockquote[data-secret=\"'+t.secret+'\"]'),c=new RegExp(\"^https?:$\",\"i\"),i=0;i<o.length;i++)o[i].style.display=\"none\";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute(\"style\"),\"height\"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):\"link\"===t.message&&(r=new URL(s.getAttribute(\"src\")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener(\"message\",d.wp.receiveEmbedMessage,!1),l.addEventListener(\"DOMContentLoaded\",function(){for(var e,t,s=l.querySelectorAll(\"iframe.wp-embedded-content\"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute(\"data-secret\"))||(t=Math.random().toString(36).substring(2,12),e.src+=\"#?secret=\"+t,e.setAttribute(\"data-secret\",t)),e.contentWindow.postMessage({message:\"ready\",secret:t},\"*\")},!1)))}(window,document);\n\/\/# sourceURL=https:\/\/artjompoldsaar24.thkit.ee\/wp\/eng\/wp-includes\/js\/wp-embed.min.js\n\/* ]]> *\/\n<\/script>\n","description":"JS Funktsioonid function muusikaTead() &#8211; funktsioon mis kasutatakse esimesel k\u00fcsimusel, see kontrollib k\u00f5ik checkbox v\u00e4\u00e4rtused, kas on m\u00e4rgitud v\u00f5i ei, ja siis kirjutab vastus function koolArvamus() &#8211; teise k\u00fcsimuste funktsioon, lihtsalt kontrollib teksti mis kasutaja kirjutas ja kirjutab selle vastusele function tundidMuusika() &#8211; kolmanda k\u00fcsimuste funktsioon, lihtsalt kontrollib mis number on valitud ja kirjutab vastus function kuuladRaadiot() &#8211; neljanda k\u00fcsimuste funktsioon, kontrollib k\u00f5ik kolme radio buttoni v\u00e4\u00e4rtused ja selle p\u00f5hjus kirjutab vastust function radiojaamad() &#8211; viienda k\u00fcsimuste funktsioon, lihtsalt kontrollib mis tekst kasutaja kirjutas ja kirjutab seda vastusele function rohkemKuulad() &#8211; kuuenda k\u00fcsimuste funktsioon, konrollib 6 radio buttonid ja kirjutab vastusele mis nupp on m\u00e4rgitud function puhasta2() &#8211; v\u00f5tab dokumendist element nimega &#8216;vorm&#8217; ja siis teeb ts\u00fckkel mis v\u00f5tab k\u00f5ik child elemendid selle vormist, ja ka v\u00f5tab k\u00f5ik child elemendid nende elemendist, ja nii edasi kuni sellel pole child elemendid. Ja k\u00f5ikedele elemendile puhastab nende sisu. function kokku() &#8211; kokkuv\u00f5te funktsioon, mis kasutatakse kui Saada nupp on klikitud. V\u00f5tab k\u00f5ik vastus elemendid lehelt ja kirjutab nende sisu \u00fche tekstiga kokkuv\u00f5tele. Muusika K\u00fcsitlus Milliseid muusikuid\/ansambleid sa tead? Rammstein The Beatles Machine Girl Nirvana Mida arvad muusika kuulamisest koolis? Mitu tundi p\u00e4evas sa kuulad muusikat? Kas sa kuulad raadiot? Jah M\u00f5nikord Ei Milliseid raadiojaamu oskad nimetada? Millist muusikat sa k\u00f5ige rohkem kuulad? Rock Jazz Jungle Breakbeat DnB Atmospheric function muusikaTead() { let check1 = document.getElementById(&#8220;checkbox1&#8221;); let check2 = document.getElementById(&#8220;checkbox2&#8221;); let check3 = document.getElementById(&#8220;checkbox3&#8221;); let check4 = document.getElementById(&#8220;checkbox4&#8221;); let vastus = document.getElementById(&#8220;vastus1&#8221;); let ans = &#8220;Sinu valitud muusikud: &#8220;; if (check1.checked) { ans += check1.value + &#8220;, &#8220;; } if (check2.checked) { ans += check2.value + &#8220;, &#8220;; } if (check3.checked) { ans += check3.value + &#8220;, &#8220;; } if (check4.checked) { ans += check4.value + &#8220;, &#8220;; } vastus.innerText = ans; } function koolArvamus() { let textarea = document.getElementById(&#8220;teine&#8221;); let vastus = document.getElementById(&#8220;vastus2&#8221;); vastus.innerText = &#8220;Sinu arvamus: &#8221; + textarea.value; } function tundidMuusika() { let range = document.getElementById(&#8220;kolmas&#8221;); let vastus = document.getElementById(&#8220;vastus3&#8221;); vastus.innerText = &#8220;Sa kuulad muusikat &#8221; + range.value + &#8221; tundi p\u00e4evas.&#8221;; } function kuuladRaadiot() { let jah = document.getElementById(&#8220;checkbox5&#8221;); let monikord = document.getElementById(&#8220;checkbox6&#8221;); let ei = document.getElementById(&#8220;checkbox7&#8221;); let vastus = document.getElementById(&#8220;vastus4&#8221;); if (jah.checked) { vastus.innerText = &#8220;Sa kuulad raadiot.&#8221;; } if (monikord.checked) { vastus.innerText = &#8220;Sa m\u00f5nikord kuulad raadiot.&#8221;; } if (ei.checked) { vastus.innerText = &#8220;Sa ei kuula raadiot.&#8221;; } } function radiojaamad() { let text = document.getElementById(&#8220;viies&#8221;); let vastus = document.getElementById(&#8220;vastus5&#8221;); vastus.innerText = &#8220;Sinu nimetatud jaamad: &#8221; + text.value; } function rohkemKuulad() { let radio1 = document.getElementById(&#8220;radio1&#8221;); let radio2 = document.getElementById(&#8220;radio2&#8221;); let radio3 = document.getElementById(&#8220;radio3&#8221;); let radio4 = document.getElementById(&#8220;radio4&#8221;); let radio5 = document.getElementById(&#8220;radio5&#8221;); let radio6 = document.getElementById(&#8220;radio6&#8221;); let vastus = document.getElementById(&#8220;vastus6&#8221;); if (radio1.checked) { vastus.innerText = &#8220;Sinu vastus: &#8221; + radio1.value; } if (radio2.checked) { vastus.innerText = &#8220;Sinu vastus: &#8221; + radio2.value; } if (radio3.checked) { vastus.innerText = &#8220;Sinu vastus: &#8221; + radio3.value; } if (radio4.checked) { vastus.innerText = &#8220;Sinu vastus: &#8221; + radio4.value; } if (radio5.checked) { vastus.innerText = &#8220;Sinu vastus: &#8221; + radio5.value; } if (radio6.checked) { vastus.innerText = &#8220;Sinu vastus: &#8221; + radio6.value; } } function puhasta2() { let form = document.getElementById(&#8220;vorm&#8221;); function clearElement(element) { if (element.type === &#8220;text&#8221; || element.type === &#8220;password&#8221; || element.type === &#8220;email&#8221; || element.tagName === &#8220;TEXTAREA&#8221;) { element.value = &#8220;&#8221;; } else if (element.type === &#8220;radio&#8221; || element.type === &#8220;checkbox&#8221;) { element.checked = false; } else if (element.tagName === &#8220;SELECT&#8221;) { element.selectedIndex = -1; } if (element.id.indexOf(&#8220;vastus&#8221;) !== -1) { element.innerHTML = &#8220;&#8221;; } for (let child of element.children) { clearElement(child); } } for (let element of form.elements) { clearElement(element); } let vastus1 = document.getElementById(&#8220;vastus1&#8221;); let vastus2 = document.getElementById(&#8220;vastus2&#8221;); let vastus3 = document.getElementById(&#8220;vastus3&#8221;); let vastus4 = document.getElementById(&#8220;vastus4&#8221;); let vastus5 = document.getElementById(&#8220;vastus5&#8221;); let vastus6 = document.getElementById(&#8220;vastus6&#8221;); vastus1.innerText = &#8220;&#8221;; vastus2.innerText = &#8220;&#8221;; vastus3.innerText = &#8220;&#8221;; vastus4.innerText = &#8220;&#8221;; vastus5.innerText = &#8220;&#8221;; vastus6.innerText = &#8220;&#8221;; } function kokku() { let kokku = document.getElementById(&#8220;kokku&#8221;); let vastus1 = document.getElementById(&#8220;vastus1&#8221;); let vastus2 = document.getElementById(&#8220;vastus2&#8221;); let vastus3 = document.getElementById(&#8220;vastus3&#8221;); let vastus4 = document.getElementById(&#8220;vastus4&#8221;); let vastus5 = document.getElementById(&#8220;vastus5&#8221;); let vastus6 = document.getElementById(&#8220;vastus6&#8221;); let ans = &#8220;Kokkuv\u00f5te: &#8220;; ans += vastus1.innerText + &#8220;&#8220;; ans += vastus2.innerText + &#8220;&#8220;; ans += vastus3.innerText + &#8220;&#8220;; ans += vastus4.innerText + &#8220;&#8220;; ans += vastus5.innerText + &#8220;&#8220;; ans += vastus6.innerText + &#8220;&#8220;; kokku.innerHTML = ans; } body { display: flex; justify-content: center; align-items: center; margin: 0; flex-direction: column; } form { max-width: 800px; width: 100%; } table, td, tr { border: 1px solid black; border-collapse: collapse; padding: 15px; } td { width: 300px; max-width: 100%; padding: 10px; text-align: center; } .question { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; text-align: center; width: 100%; transition: color 0.3s ease; font-size: 18px; } .question:hover { color: dodgerblue; } .checkboxes { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; } .checkbox-item { display: inline-flex; align-items: center; \/* Align the checkbox and label properly *\/ transition: color 0.3s ease; } .checkbox-item:hover { color: goldenrod; } .checkbox-item input { margin-right: 5px; \/* Space between checkbox and label *\/ } textarea { width: 100%; height: 100%; box-sizing: border-box; } input[type=&#8221;text&#8221;] { width: 100%; box-sizing: border-box; height: 40px; } input[type=&#8221;button&#8221;] { padding: 10px; border: none; border-radius: 10px; margin: 10px; background-color: dodgerblue; color: white; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; } input[type=&#8221;button&#8221;]:hover { background-color: lightskyblue; } h2 { transition: color 0.5s ease; } h2:hover { animation: rainbow 2s linear infinite; } @keyframes rainbow { 0% { color: red; } 14% { color: orange; } 28% { color: yellow; } 42% { color: green; } 57% { color: blue; } 71% { color: indigo; } 85% { color: violet; } 100% { color: red; } }"}