1.0Artjom Põldsaar Portfoliohttps://artjompoldsaar24.thkit.ee/wp/engadminhttps://artjompoldsaar24.thkit.ee/wp/eng/author/admin/rich600338<blockquote class="wp-embedded-content" data-secret="GGTBRToFTI"><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=GGTBRToFTI" width="600" height="338" title="“JS: Music form creation” — Artjom Põldsaar Portfolio" data-secret="GGTBRToFTI" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script type="text/javascript"> /* <![CDATA[ */ /*! This file is auto-generated */ !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); //# sourceURL=https://artjompoldsaar24.thkit.ee/wp/eng/wp-includes/js/wp-embed.min.js /* ]]> */ </script> JS Funktsioonid function muusikaTead() – funktsioon mis kasutatakse esimesel küsimusel, see kontrollib kõik checkbox väärtused, kas on märgitud või ei, ja siis kirjutab vastus function koolArvamus() – teise küsimuste funktsioon, lihtsalt kontrollib teksti mis kasutaja kirjutas ja kirjutab selle vastusele function tundidMuusika() – kolmanda küsimuste funktsioon, lihtsalt kontrollib mis number on valitud ja kirjutab vastus function kuuladRaadiot() – neljanda küsimuste funktsioon, kontrollib kõik kolme radio buttoni väärtused ja selle põhjus kirjutab vastust function radiojaamad() – viienda küsimuste funktsioon, lihtsalt kontrollib mis tekst kasutaja kirjutas ja kirjutab seda vastusele function rohkemKuulad() – kuuenda küsimuste funktsioon, konrollib 6 radio buttonid ja kirjutab vastusele mis nupp on märgitud function puhasta2() – võtab dokumendist element nimega ‘vorm’ ja siis teeb tsükkel mis võtab kõik child elemendid selle vormist, ja ka võtab kõik child elemendid nende elemendist, ja nii edasi kuni sellel pole child elemendid. Ja kõikedele elemendile puhastab nende sisu. function kokku() – kokkuvõte funktsioon, mis kasutatakse kui Saada nupp on klikitud. Võtab kõik vastus elemendid lehelt ja kirjutab nende sisu ühe tekstiga kokkuvõtele. Muusika Küsitlus Milliseid muusikuid/ansambleid sa tead? Rammstein The Beatles Machine Girl Nirvana Mida arvad muusika kuulamisest koolis? Mitu tundi päevas sa kuulad muusikat? Kas sa kuulad raadiot? Jah Mõnikord Ei Milliseid raadiojaamu oskad nimetada? Millist muusikat sa kõige rohkem kuulad? Rock Jazz Jungle Breakbeat DnB Atmospheric function muusikaTead() { let check1 = document.getElementById(“checkbox1”); let check2 = document.getElementById(“checkbox2”); let check3 = document.getElementById(“checkbox3”); let check4 = document.getElementById(“checkbox4”); let vastus = document.getElementById(“vastus1”); let ans = “Sinu valitud muusikud: “; if (check1.checked) { ans += check1.value + “, “; } if (check2.checked) { ans += check2.value + “, “; } if (check3.checked) { ans += check3.value + “, “; } if (check4.checked) { ans += check4.value + “, “; } vastus.innerText = ans; } function koolArvamus() { let textarea = document.getElementById(“teine”); let vastus = document.getElementById(“vastus2”); vastus.innerText = “Sinu arvamus: ” + textarea.value; } function tundidMuusika() { let range = document.getElementById(“kolmas”); let vastus = document.getElementById(“vastus3”); vastus.innerText = “Sa kuulad muusikat ” + range.value + ” tundi päevas.”; } function kuuladRaadiot() { let jah = document.getElementById(“checkbox5”); let monikord = document.getElementById(“checkbox6”); let ei = document.getElementById(“checkbox7”); let vastus = document.getElementById(“vastus4”); if (jah.checked) { vastus.innerText = “Sa kuulad raadiot.”; } if (monikord.checked) { vastus.innerText = “Sa mõnikord kuulad raadiot.”; } if (ei.checked) { vastus.innerText = “Sa ei kuula raadiot.”; } } function radiojaamad() { let text = document.getElementById(“viies”); let vastus = document.getElementById(“vastus5”); vastus.innerText = “Sinu nimetatud jaamad: ” + text.value; } function rohkemKuulad() { let radio1 = document.getElementById(“radio1”); let radio2 = document.getElementById(“radio2”); let radio3 = document.getElementById(“radio3”); let radio4 = document.getElementById(“radio4”); let radio5 = document.getElementById(“radio5”); let radio6 = document.getElementById(“radio6”); let vastus = document.getElementById(“vastus6”); if (radio1.checked) { vastus.innerText = “Sinu vastus: ” + radio1.value; } if (radio2.checked) { vastus.innerText = “Sinu vastus: ” + radio2.value; } if (radio3.checked) { vastus.innerText = “Sinu vastus: ” + radio3.value; } if (radio4.checked) { vastus.innerText = “Sinu vastus: ” + radio4.value; } if (radio5.checked) { vastus.innerText = “Sinu vastus: ” + radio5.value; } if (radio6.checked) { vastus.innerText = “Sinu vastus: ” + radio6.value; } } function puhasta2() { let form = document.getElementById(“vorm”); function clearElement(element) { if (element.type === “text” || element.type === “password” || element.type === “email” || element.tagName === “TEXTAREA”) { element.value = “”; } else if (element.type === “radio” || element.type === “checkbox”) { element.checked = false; } else if (element.tagName === “SELECT”) { element.selectedIndex = -1; } if (element.id.indexOf(“vastus”) !== -1) { element.innerHTML = “”; } for (let child of element.children) { clearElement(child); } } for (let element of form.elements) { clearElement(element); } let vastus1 = document.getElementById(“vastus1”); let vastus2 = document.getElementById(“vastus2”); let vastus3 = document.getElementById(“vastus3”); let vastus4 = document.getElementById(“vastus4”); let vastus5 = document.getElementById(“vastus5”); let vastus6 = document.getElementById(“vastus6”); vastus1.innerText = “”; vastus2.innerText = “”; vastus3.innerText = “”; vastus4.innerText = “”; vastus5.innerText = “”; vastus6.innerText = “”; } function kokku() { let kokku = document.getElementById(“kokku”); let vastus1 = document.getElementById(“vastus1”); let vastus2 = document.getElementById(“vastus2”); let vastus3 = document.getElementById(“vastus3”); let vastus4 = document.getElementById(“vastus4”); let vastus5 = document.getElementById(“vastus5”); let vastus6 = document.getElementById(“vastus6”); let ans = “Kokkuvõte: “; ans += vastus1.innerText + ““; ans += vastus2.innerText + ““; ans += vastus3.innerText + ““; ans += vastus4.innerText + ““; ans += vastus5.innerText + ““; ans += vastus6.innerText + ““; 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=”text”] { width: 100%; box-sizing: border-box; height: 40px; } input[type=”button”] { 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=”button”]: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; } }