MEGA Commit. Rework of routing. Visuals. Answer analysis and much more.

12 files changed, 378 insertions, 141 deletions

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 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>

+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->

+<svg width="800px" height="800px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

+    

+    <title>cel-rings-love</title>

+    <desc>Created with Sketch.</desc>

+    <defs>

+

+</defs>

+    <g id="General" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

+        <g id="SLICES-64px" transform="translate(-630.000000, 0.000000)">

+

+</g>

+        <g id="ICONS" transform="translate(-625.000000, 5.000000)">

+            <g id="cel-rings-love" transform="translate(630.000000, 2.000000)">

+                <path d="M34.4229,9.3516 C36.5259,7.2126 36.5259,3.7446 34.4229,1.6046 C32.3199,-0.5354 28.9109,-0.5344 26.8079,1.6046 L25.9999,2.3476 L25.1929,1.6046 C23.0899,-0.5344 19.6799,-0.5344 17.5769,1.6046 C15.4739,3.7446 15.4749,7.2126 17.5769,9.3516 L25.9999,17.9996 L34.4229,9.3516 Z" id="Fill-747" fill="#F16963">

+

+</path>

+                <path d="M34.4229,9.3516 C36.5259,7.2126 36.5259,3.7446 34.4229,1.6046 C32.3199,-0.5354 28.9109,-0.5344 26.8079,1.6046 L25.9999,2.3476 L25.1929,1.6046 C23.0899,-0.5344 19.6799,-0.5344 17.5769,1.6046 C15.4739,3.7446 15.4749,7.2126 17.5769,9.3516 L25.9999,17.9996 L34.4229,9.3516 Z" id="Stroke-748" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M28.8071,26.4072 C30.8121,29.0802 32.0001,32.4012 32.0001,36.0002 C32.0001,44.8372 24.8361,52.0002 16.0001,52.0002 C7.1631,52.0002 0.0001,44.8372 0.0001,36.0002 C0.0001,27.1632 7.1631,20.0002 16.0001,20.0002 C18.2091,20.0002 20.3131,20.4472 22.2281,21.2582" id="Stroke-749" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M23.1929,45.5928 C21.1879,42.9198 19.9999,39.5988 19.9999,35.9998 C19.9999,27.1628 27.1639,19.9998 35.9999,19.9998 C44.8369,19.9998 51.9999,27.1628 51.9999,35.9998 C51.9999,44.8368 44.8369,51.9998 35.9999,51.9998 C33.5979,51.9998 31.3199,51.4708 29.2759,50.5228" id="Stroke-750" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+            </g>

+        </g>

+    </g>

+</svg>
\ 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 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>

+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->

+<svg width="800px" height="800px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

+    

+    <title>cld-server</title>

+    <desc>Created with Sketch.</desc>

+    <defs>

+

+</defs>

+    <g id="General" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

+        <g id="SLICES-64px" transform="translate(-810.000000, -200.000000)">

+

+</g>

+        <g id="ICONS" transform="translate(-805.000000, -195.000000)">

+            <g id="cld-server" transform="translate(810.000000, 204.000000)">

+                <path d="M48,12 C51.313,12 54,9.313 54,6 C54,2.687 51.313,0 48,0 L6,0 C2.687,0 0,2.687 0,6 C0,9.313 2.687,12 6,12 L48,12 Z" id="Fill-424" fill="#969CE3">

+

+</path>

+                <path d="M10,6 C10,7.104 9.104,8 8,8 C6.896,8 6,7.104 6,6 C6,4.896 6.896,4 8,4 C9.104,4 10,4.896 10,6" id="Fill-425" fill="#7BBDEC">

+

+</path>

+                <path d="M48,30 C51.313,30 54,27.313 54,24 C54,20.687 51.313,18 48,18 L6,18 C2.687,18 0,20.687 0,24 C0,27.313 2.687,30 6,30 L48,30 Z" id="Fill-426" fill="#969CE3">

+

+</path>

+                <path d="M10,24 C10,25.104 9.104,26 8,26 C6.896,26 6,25.104 6,24 C6,22.896 6.896,22 8,22 C9.104,22 10,22.896 10,24" id="Fill-427" fill="#7BBDEC">

+

+</path>

+                <path d="M48,48 C51.313,48 54,45.313 54,42 C54,38.687 51.313,36 48,36 L6,36 C2.687,36 0,38.687 0,42 C0,45.313 2.687,48 6,48 L48,48 Z" id="Fill-428" fill="#969CE3">

+

+</path>

+                <path d="M10,42 C10,43.104 9.104,44 8,44 C6.896,44 6,43.104 6,42 C6,40.896 6.896,40 8,40 C9.104,40 10,40.896 10,42" id="Fill-429" fill="#7BBDEC">

+

+</path>

+                <path d="M48,12 C51.313,12 54,9.313 54,6 C54,2.687 51.313,0 48,0 L6,0 C2.687,0 0,2.687 0,6 C0,9.313 2.687,12 6,12 L48,12 Z" id="Stroke-430" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M10,6 C10,7.104 9.104,8 8,8 C6.896,8 6,7.104 6,6 C6,4.896 6.896,4 8,4 C9.104,4 10,4.896 10,6 Z" id="Stroke-431" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M48,6 L36,6" id="Stroke-432" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M48,30 C51.313,30 54,27.313 54,24 C54,20.687 51.313,18 48,18 L6,18 C2.687,18 0,20.687 0,24 C0,27.313 2.687,30 6,30 L48,30 Z" id="Stroke-433" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M10,24 C10,25.104 9.104,26 8,26 C6.896,26 6,25.104 6,24 C6,22.896 6.896,22 8,22 C9.104,22 10,22.896 10,24 Z" id="Stroke-434" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M48,24 L36,24" id="Stroke-435" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M48,48 C51.313,48 54,45.313 54,42 C54,38.687 51.313,36 48,36 L6,36 C2.687,36 0,38.687 0,42 C0,45.313 2.687,48 6,48 L48,48 Z" id="Stroke-436" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M10,42 C10,43.104 9.104,44 8,44 C6.896,44 6,43.104 6,42 C6,40.896 6.896,40 8,40 C9.104,40 10,40.896 10,42 Z" id="Stroke-437" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M48,42 L36,42" id="Stroke-438" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+            </g>

+        </g>

+    </g>

+</svg>
\ 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 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>

+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->

+<svg width="800px" height="800px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

+    

+    <title>cle-spraycan</title>

+    <desc>Created with Sketch.</desc>

+    <defs>

+

+</defs>

+    <g id="General" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

+        <g id="SLICES-64px" transform="translate(-720.000000, -100.000000)">

+

+</g>

+        <g id="ICONS" transform="translate(-715.000000, -95.000000)">

+            <g id="cle-spraycan" transform="translate(728.000000, 100.000000)">

+                <path d="M3,54 L25,54 C26.657,54 28,52.657 28,51 L28,20 L0,20 L0,51 C0,52.657 1.343,54 3,54" id="Fill-295" fill="#F16963">

+

+</path>

+                <polygon id="Fill-296" fill="#E9EFFA" points="18 12 10 12 0 20 28 20">

+

+</polygon>

+                <polygon id="Fill-297" fill="#E9EFFA" points="10 12 18 12 18 4 10 4">

+

+</polygon>

+                <polygon id="Fill-298" fill="#F1F0E2" points="16 46 28 46 28 26 16 26">

+

+</polygon>

+                <polyline id="Stroke-299" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="0 20 10 12 18 12 28 20">

+

+</polyline>

+                <polyline id="Stroke-300" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="10 12 10 4 18 4 18 12">

+

+</polyline>

+                <polyline id="Stroke-301" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="28 46 16 46 16 26 28 26">

+

+</polyline>

+                <path d="M3,54 L25,54 C26.657,54 28,52.657 28,51 L28,20 L0,20 L0,51 C0,52.657 1.343,54 3,54 Z" id="Stroke-302" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M22,8 L24.5,8" id="Stroke-303" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M28.5527,8 L33.4737,8" id="Stroke-304" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2.895,4.053">

+

+</path>

+                <path d="M35.5,8 L38,8" id="Stroke-305" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M22,5 L24.354,4.159" id="Stroke-306" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M27.7773,2.9365 L31.9333,1.4525" id="Stroke-307" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2.596,3.635">

+

+</path>

+                <path d="M33.6455,0.8408 L35.9995,-0.0002" id="Stroke-308" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M22,11 L24.354,11.841" id="Stroke-309" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M27.7773,13.0635 L31.9333,14.5475" id="Stroke-310" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2.596,3.635">

+

+</path>

+                <path d="M33.6455,15.1592 L35.9995,16.0002" id="Stroke-311" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+            </g>

+        </g>

+    </g>

+</svg>
\ 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 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>

+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->

+<svg width="800px" height="800px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

+    

+    <title>con-ruler-pencil</title>

+    <desc>Created with Sketch.</desc>

+    <defs>

+

+</defs>

+    <g id="General" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

+        <g id="SLICES-64px" transform="translate(-540.000000, -300.000000)">

+

+</g>

+        <g id="ICONS" transform="translate(-535.000000, -295.000000)">

+            <g id="con-ruler-pencil" transform="translate(548.000000, 298.000000)">

+                <polygon id="Fill-501" fill="#EEC261" points="0 58 14 58 14 0 0 0">

+

+</polygon>

+                <path d="M33,0 L27,0 C25.344,0 24,1.344 24,3 L24,8 L36,8 L36,3 C36,1.344 34.656,0 33,0" id="Fill-502" fill="#F16963">

+

+</path>

+                <polygon id="Fill-503" fill="#99A5B7" points="32.0371 52 27.9631 52 30.0001 58">

+

+</polygon>

+                <polygon id="Fill-504" fill="#F3E777" points="24.375 41.3662 28 38.0002 32 42.0002 36 38.0002 36 8.0002 24 8.0002 24 40.3262 24.355 41.3732">

+

+</polygon>

+                <polygon id="Fill-505" fill="#F1F0E2" points="36 38 32 42 28 38 24.375 41.366 24.355 41.373 27.963 52 32.037 52 36 40.326">

+

+</polygon>

+                <path d="M27.9629,52 L24.3559,41.372" id="Stroke-506" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <polyline id="Stroke-507" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="36 37.9995 36 40.3265 32.037 52.0005">

+

+</polyline>

+                <polyline id="Stroke-508" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="24.375 41.3662 28 38.0002 32 42.0002 36 38.0002">

+

+</polyline>

+                <path d="M27.9629,52 L32.0369,52" id="Stroke-509" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M28,34 L28,12" id="Stroke-510" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <polyline id="Stroke-511" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="32.0371 52.0005 30.0001 58.0005 27.9631 52.0005">

+

+</polyline>

+                <polyline id="Stroke-512" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="24.3555 41.3721 24.0005 40.3261 24.0005 8.0001">

+

+</polyline>

+                <path d="M36,8 L36,38" id="Stroke-513" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <polygon id="Stroke-514" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="0 58 14 58 14 0 0 0">

+

+</polygon>

+                <path d="M6,32 L14,32" id="Stroke-515" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M10,26 L14,26" id="Stroke-516" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M6,20 L14,20" id="Stroke-517" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M6,8 L14,8" id="Stroke-518" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M10,14 L14,14" id="Stroke-519" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M8,50 L14,50" id="Stroke-520" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M6,44 L14,44" id="Stroke-521" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M10,38 L14,38" id="Stroke-522" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M24,8 L36,8" id="Stroke-523" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <path d="M24,8 L24,3 C24,1.344 25.344,0 27,0 L33,0 C34.656,0 36,1.344 36,3 L36,8" id="Stroke-524" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+            </g>

+        </g>

+    </g>

+</svg>
\ 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 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>

+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->

+<svg width="800px" height="800px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

+    

+    <title>gen-heart-rate</title>

+    <desc>Created with Sketch.</desc>

+    <defs>

+

+</defs>

+    <g id="General" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

+        <g id="SLICES-64px" transform="translate(-180.000000, 0.000000)">

+

+</g>

+        <g id="ICONS" transform="translate(-175.000000, 5.000000)">

+            <g id="gen-heart-rate" transform="translate(180.000000, 6.000000)">

+                <path d="M26.0001,5.9995 L28.1011,4.1005 C33.5671,-1.3665 42.4331,-1.3665 47.8991,4.1005 C53.3671,9.5685 53.3661,18.4325 47.8991,23.8985 L26.0001,45.9995 L4.1011,23.8985 C-1.3659,18.4325 -1.3669,9.5685 4.1011,4.1005 C9.5671,-1.3665 18.4331,-1.3665 23.8991,4.1005 L26.0001,5.9995 Z" id="Fill-249" fill="#F16963">

+

+</path>

+                <path d="M26.0001,5.9995 L28.1011,4.1005 C33.5671,-1.3665 42.4331,-1.3665 47.8991,4.1005 C53.3671,9.5685 53.3661,18.4325 47.8991,23.8985 L26.0001,45.9995 L4.1011,23.8985 C-1.3659,18.4325 -1.3669,9.5685 4.1011,4.1005 C9.5671,-1.3665 18.4331,-1.3665 23.8991,4.1005 L26.0001,5.9995 Z" id="Stroke-250" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

+

+</path>

+                <polyline id="Stroke-251" stroke="#414547" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="16.0001 23.9995 23.0001 23.9995 26.0001 11.9995 31.0001 33.9995 35.0001 19.9995 37.0001 23.9995 52.0001 23.9995">

+

+</polyline>

+            </g>

+        </g>

+    </g>

+</svg>
\ 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"
         }
     }
 }