From d2de3ae10b6f5314bd4b8243218212d2004f35b0 Mon Sep 17 00:00:00 2001 From: Jani Peter Karhunen Date: Sat, 25 Nov 2023 03:32:29 +0200 Subject: MEGA Commit. Rework of routing. Visuals. Answer analysis and much more. --- static/alert-timeout.js | 5 ++ static/answer.js | 68 -------------------- static/create.js | 62 ------------------ static/icons/cel-rings-love-svgrepo-com.svg | 31 +++++++++ static/icons/cld-server-svgrepo-com.svg | 64 +++++++++++++++++++ static/icons/cle-spraycan-svgrepo-com.svg | 70 +++++++++++++++++++++ static/icons/con-ruler-pencil-svgrepo-com.svg | 91 +++++++++++++++++++++++++++ static/icons/gen-heart-rate-svgrepo-com.svg | 28 +++++++++ static/kyselma.css | 66 ++++++++++++++++++- static/menu.css | 2 +- static/menu.js | 6 +- static/pages.json | 26 ++++++-- 12 files changed, 378 insertions(+), 141 deletions(-) create mode 100644 static/alert-timeout.js delete mode 100644 static/answer.js delete mode 100644 static/create.js create mode 100644 static/icons/cel-rings-love-svgrepo-com.svg create mode 100644 static/icons/cld-server-svgrepo-com.svg create mode 100644 static/icons/cle-spraycan-svgrepo-com.svg create mode 100644 static/icons/con-ruler-pencil-svgrepo-com.svg create mode 100644 static/icons/gen-heart-rate-svgrepo-com.svg (limited to 'static') diff --git a/static/alert-timeout.js b/static/alert-timeout.js new file mode 100644 index 0000000..01bd260 --- /dev/null +++ b/static/alert-timeout.js @@ -0,0 +1,5 @@ +Array.from(document.getElementsByClassName('kysAlert')).forEach( (a) => { + a.addEventListener('click', (event) => { + event.target.remove(); + }) + }) diff --git a/static/answer.js b/static/answer.js deleted file mode 100644 index 61882a8..0000000 --- a/static/answer.js +++ /dev/null @@ -1,68 +0,0 @@ -var questions = {} - -createQuestionDiv = ( question ) => { - const questionDiv = document.createElement('div') - questionDiv.className = 'kysQuestion' - - const qDiv = document.createElement('div') - qDiv.appendChild( document.createTextNode( question.q ) ) - qDiv.className = 'kysText' - questionDiv.appendChild( qDiv ) - - const npDiv = document.createElement('div') - npDiv.className = 'kysScale' - - const nDiv = document.createElement('div') - nDiv.appendChild( document.createTextNode( question.n ) ) - nDiv.className = 'kysNegative' - npDiv.appendChild( nDiv ) - - const sDiv = document.createElement('div') - sDiv.className = 'kysScaleSpacer' - npDiv.appendChild( sDiv ) - - const pDiv = document.createElement('div') - pDiv.appendChild( document.createTextNode( question.p ) ) - pDiv.className = 'kysPositive' - npDiv.appendChild( pDiv ) - - questionDiv.appendChild( npDiv ) - - const aInput = document.createElement('input') - aInput.className = 'kysAnswer' - aInput.type = 'range' - aInput.min = 0 - aInput.max = 999 - aInput.value = 500 - aInput.name = question.i - questionDiv.appendChild( aInput ) - - return questionDiv -} - -createQuestions = () => { - const kysForm = document.getElementById('questionForm') - const questionsDiv = document.createElement('div') - Object.keys(questions).forEach(k => { - questionsDiv.appendChild( createQuestionDiv( questions[k] ) ) - }) - kysForm.appendChild( questionsDiv ) - const submitInput = document.createElement('input') - submitInput.type='submit' - submitInput.value='Vastaa kyselyyn' - submitInput.className = 'kysSubmitAnswers' - kysForm.appendChild( submitInput ) -} - -loadQuestions = async() => { - await fetch( 'get/quiz_creator' ) - .then( response => response.json() ) - .then( json => questions = json ) - .catch( error => { - alert("dkd") - } ) - - createQuestions() -} - -loadQuestions() diff --git a/static/create.js b/static/create.js deleted file mode 100644 index d34a2da..0000000 --- a/static/create.js +++ /dev/null @@ -1,62 +0,0 @@ -var questions = {} - -createQuestionDiv = ( question ) => { - const questionDiv = document.createElement('div') - questionDiv.className = 'kysQuestion' - - const qDiv = document.createElement('div') - qDiv.appendChild( document.createTextNode( question.q ) ) - qDiv.className = 'kysText' - questionDiv.appendChild( qDiv ) - - const npDiv = document.createElement('div') - npDiv.className = 'kysScale' - - const nDiv = document.createElement('div') - nDiv.appendChild( document.createTextNode( question.n ) ) - nDiv.className = 'kysNegative' - npDiv.appendChild( nDiv ) - - const sDiv = document.createElement('div') - sDiv.className = 'kysScaleSpacer' - npDiv.appendChild( sDiv ) - - const pDiv = document.createElement('div') - pDiv.appendChild( document.createTextNode( question.p ) ) - pDiv.className = 'kysPositive' - npDiv.appendChild( pDiv ) - - questionDiv.appendChild( npDiv ) - - const aDiv = document.createElement('input') - aDiv.className = 'kysAnswer' - aDiv.type = 'range' - aDiv.min = 0 - aDiv.max = 999 - aDiv.disabled = true - aDiv.value = question.a - questionDiv.appendChild( aDiv ) - - return questionDiv -} - -createQuestions = () => { - const questionsDiv = document.getElementById('questions') - questionsDiv.className = 'kysQuestions' - Object.keys(questions).forEach(k => { - questionsDiv.appendChild( createQuestionDiv( questions[k] ) ) - }) -} - -loadQuestions = async() => { - await fetch( 'get/quiz_creator' ) - .then( response => response.json() ) - .then( json => questions = json ) - .catch( error => { - alert("dkd") - } ) - - createQuestions() -} - -loadQuestions() diff --git a/static/icons/cel-rings-love-svgrepo-com.svg b/static/icons/cel-rings-love-svgrepo-com.svg new file mode 100644 index 0000000..2e49668 --- /dev/null +++ b/static/icons/cel-rings-love-svgrepo-com.svg @@ -0,0 +1,31 @@ + + + + + cel-rings-love + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/icons/cld-server-svgrepo-com.svg b/static/icons/cld-server-svgrepo-com.svg new file mode 100644 index 0000000..b484198 --- /dev/null +++ b/static/icons/cld-server-svgrepo-com.svg @@ -0,0 +1,64 @@ + + + + + cld-server + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/icons/cle-spraycan-svgrepo-com.svg b/static/icons/cle-spraycan-svgrepo-com.svg new file mode 100644 index 0000000..86e3c64 --- /dev/null +++ b/static/icons/cle-spraycan-svgrepo-com.svg @@ -0,0 +1,70 @@ + + + + + cle-spraycan + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/icons/con-ruler-pencil-svgrepo-com.svg b/static/icons/con-ruler-pencil-svgrepo-com.svg new file mode 100644 index 0000000..2d3d484 --- /dev/null +++ b/static/icons/con-ruler-pencil-svgrepo-com.svg @@ -0,0 +1,91 @@ + + + + + con-ruler-pencil + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/icons/gen-heart-rate-svgrepo-com.svg b/static/icons/gen-heart-rate-svgrepo-com.svg new file mode 100644 index 0000000..8880970 --- /dev/null +++ b/static/icons/gen-heart-rate-svgrepo-com.svg @@ -0,0 +1,28 @@ + + + + + gen-heart-rate + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/kyselma.css b/static/kyselma.css index a7a60db..14c7653 100644 --- a/static/kyselma.css +++ b/static/kyselma.css @@ -2,13 +2,17 @@ .kysQuestion { display: flex; flex-direction: column; - max-width: 25em; + max-width: 25em; + padding: 0.5em; + border: 0.15em #fed solid; } .kysText { align-self: center; } .kysScale { display: flex; + width: 100%; + resize: horizontal; } .kysScaleSpacer { flex-grow: 1; @@ -26,3 +30,63 @@ .kysCreateText { width: 100%; } + +.kysNick::before { + content: "Olet:"; + padding-right: 0.4em; +} + +.kysNick { + border: 0.1em solid; + padding: 0.4em; + position: fixed; + top: 100vh; + left: 100vw; + transform: translate(-100%, -100%); + display: block; + background-color: #DAF; +} + +.kysAlert { + border: 0.4em solid; + padding: 0.8em; + display: block; + background-color: #F55; + border-top-color: #F97; + border-left-color: #F96; + border-right-color: #F13; + border-bottom-color: #F14; + position: fixed; + top: 50vh; + left: 50vw; + transform: translate(-50%, -50%); +} + +.kysTotal { + align-self: center; + font-size: xxx-large; +} + +.kysSelectU1 { + background: #faa; +} + +.kysSelectU2 { + background: #aaf; +} + +.kysUser1::-webkit-slider-runnable-track, .kysUser1::-moz-range-track { + background: #faa; +} + +.kysUser2::-webkit-slider-runnable-track, .kysUser2::-moz-range-track { + background: #aaf; +} + +.kysUser1::-webkit-slider-thumb, .kysUser1::-moz-range-thumb { + background: #c00; +} + +.kysUser2::-webkit-slider-thumb, .kysUser2::-moz-range-thumb { + background: #00c; +} diff --git a/static/menu.css b/static/menu.css index 04127ae..4cf7c5f 100644 --- a/static/menu.css +++ b/static/menu.css @@ -93,7 +93,7 @@ .menuHidden, .menuSpacer, .menuTitle { display: flex !important } .menuSpacer { flex-grow: 2; } .menuText { - padding-left: calc(var(--menuHeight)/2); + padding-left: calc(var(--menuHeight)/8); padding-right: calc(var(--menuHeight)/2); } } diff --git a/static/menu.js b/static/menu.js index 5256ef2..8d0baee 100644 --- a/static/menu.js +++ b/static/menu.js @@ -132,7 +132,7 @@ hashToPage = async () => { else document.getElementById(`${currentPage}_page`).className = 'page' pageElement.className = 'page pageActive' - if ( !pageElement.loaded ) await fetch( pages[p].URL ) + if ( pages[p].dynamic || !pageElement.loaded ) await fetch( pages[p].URL ) .then( response => { if (!response.ok) return `ERROR loading "${pages[p].URL}"!` return response.text() @@ -141,10 +141,10 @@ hashToPage = async () => { pageElement.innerHTML = text; pageElement.loaded = true; } ) - if ( pageElement.innerHTML.startsWith("redirect = ") ) { +/* if ( pageElement.innerHTML.startsWith("redirect = ") ) { pageElement.loaded = false; window.location.assign( pageElement.innerHTML.slice( 11 ) ); - } + }*/ // https://plnkr.co/edit/MMegiu by Allen Kim Array.from(pageElement.querySelectorAll("script")).forEach(oldScript => { diff --git a/static/pages.json b/static/pages.json index 618bc7a..37e59e4 100644 --- a/static/pages.json +++ b/static/pages.json @@ -3,7 +3,7 @@ "pages": { "info": { "URL": "pages/info.html", - "menuIcon": "kyselma.svg", + "menuIcon": "icons/gen-heart-rate-svgrepo-com.svg", "menuName": "Kyselmä" }, "spacer-1": { @@ -11,27 +11,36 @@ "create": { "pageTitle": "Luo kysely", "URL": "pages/create.html", - "menuName": "Luo" + "menuIcon": "icons/con-ruler-pencil-svgrepo-com.svg", + "menuName": "Luo", + "dynamic": "yes" }, "answer": { "pageTitle": "Vastaa kyselyyn", "URL": "pages/answer.html", - "menuName": "Vastaa" + "menuIcon": "icons/cld-server-svgrepo-com.svg", + "menuName": "Vastaa", + "dynamic": "yes" }, "analyse": { "pageTitle": "Tutki vastauksia", "URL": "pages/analyse.html", - "menuName": "Tutki" + "menuIcon": "icons/cel-rings-love-svgrepo-com.svg", + "menuName": "Tutki", + "dynamic": "yes" }, "moderate": { "pageTitle": "Moderoi sivustoa", "URL": "pages/moderate.html", + "menuIcon": "icons/cle-spraycan-svgrepo-com.svg", + "hidden": "yes", "menuName": "Moderoi" }, "nick": { "pageTitle": "Anna nimimerkki", "URL": "pages/nick.html", - "hidden": "yes" + "hidden": "yes", + "dynamic": "yes" }, "question": { "pageTitle": "Lisää kysymys", @@ -39,9 +48,14 @@ "hidden": "yes" }, "quiz": { - "pageTitle": "Rakenna kysely", + "pageTitle": "Luodaanko uusi kyselmä?", "URL": "pages/quiz.html", "hidden": "yes" + }, + "new_answer": { + "pageTitle": "Anna kyselyn koodi", + "URL": "pages/new_answer.html", + "hidden": "yes" } } } -- cgit v1.2.3