Questions now shows up. DB -> JSON -> JS -> DOM

4 files changed, 102 insertions, 0 deletions

diff --git a/static/create.js b/static/create.js
new file mode 100644
index 0000000..6c25659
--- /dev/null
+++ b/static/create.js
@@ -0,0 +1,63 @@
+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.appendChild( document.createTextNode( question.a ) )
+    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_questions' )
+        .then( response => response.json() )
+        .then( json => questions = json )
+        .catch( error => {
+        alert("dkd")
+        } )
+    
+    createQuestions()
+}
+
+loadQuestions()
diff --git a/static/index.html b/static/index.html
index d726587..6c7917b 100644
--- a/static/index.html
+++ b/static/index.html
@@ -7,6 +7,7 @@
     <meta author="Viljami Ilola">
     <link rel="stylesheet" href="menu.css">
     <link rel="stylesheet" href="pages.css">
+    <link rel="stylesheet" href="kyselma.css">
     <link rel="icon" type="image/svg+xml" href="kyselma.svg">
     <script src="menu.js"></script>
 </head>
diff --git a/static/kyselma.css b/static/kyselma.css
new file mode 100644
index 0000000..a7a60db
--- /dev/null
+++ b/static/kyselma.css
@@ -0,0 +1,28 @@
+
+.kysQuestion {
+    display: flex;
+    flex-direction: column;
+    max-width: 25em;    
+}
+.kysText { 
+    align-self: center;
+}
+.kysScale {
+    display: flex;
+}
+.kysScaleSpacer {
+    flex-grow: 1;    
+}
+.kysNegative input {
+    width: 100%;
+}
+.kysPositive input {
+    width: 100%;
+}
+.kysCreateText input {
+    width: 100%;
+    resize: horizontal;
+}
+.kysCreateText { 
+    width: 100%;
+}
diff --git a/static/menu.js b/static/menu.js
index ee8f977..5256ef2 100644
--- a/static/menu.js
+++ b/static/menu.js
@@ -145,6 +145,16 @@ hashToPage = async () => {
         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 => {
+        const newScript = document.createElement("script");
+        Array.from(oldScript.attributes).forEach(attr =>
+                newScript.setAttribute(attr.name, attr.value));
+        newScript.appendChild(document.createTextNode(oldScript.innerHTML));
+        oldScript.parentNode.replaceChild(newScript, oldScript);
+    });
+
     document.getElementById(`${currentPage}_menuEntry`)
         .className = 'menuItem'
     document.getElementById(`${p}_menuEntry`)