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

10 files changed, 156 insertions, 11 deletions

diff --git a/app.py b/app.py
index b5f381c..f08b7d8 100644
--- a/app.py
+++ b/app.py
@@ -11,3 +11,4 @@ import routes
 import nick
 import quiz
 import question
+import get_questions
diff --git a/db_actions.py b/db_actions.py
index fca9ab0..b604870 100644
--- a/db_actions.py
+++ b/db_actions.py
@@ -76,3 +76,13 @@ def answer_new(user_id, question_id, answer):
             "created":int(time())
         } )
     db.session.commit()
+
+def get_questions(quiz_id):
+    sql = "SELECT q.id, q.question, q.neg_answer, q.pos_answer, a.answer \
+            FROM questionaires quiz \
+            JOIN questions q ON q.id = ANY(quiz.questionset) \
+            JOIN answers a ON a.user_id = quiz.creator_id \
+            WHERE a.question_id = q.id AND quiz.id = (:quiz_id);"
+    return db.session.execute( text(sql), { "quiz_id":quiz_id } ).fetchall()
+
+    
\ No newline at end of file
diff --git a/get_questions.py b/get_questions.py
new file mode 100644
index 0000000..496b99a
--- /dev/null
+++ b/get_questions.py
@@ -0,0 +1,18 @@
+from app import app
+from flask import render_template, session, request, redirect, jsonify
+import db_actions as D
+
+
+@app.route("/get_questions",methods=["GET"])
+def get_questions_by_id():
+    if "quiz_id" not in session.keys():
+        return "KUOLETTAVA: Sessiota / kyselmä id:tä ei ole"
+
+    results = D.get_questions(session['quiz_id'])
+    r={}
+    names=['i','q','n','p','a']
+    for i in range(len(results)):
+        r[i]={}
+        for j in range(len(results[i])):
+            r[i][names[j]]=results[i][j]
+    return (jsonify(r))
diff --git a/question.py b/question.py
index e7494bc..96673c2 100644
--- a/question.py
+++ b/question.py
@@ -4,9 +4,13 @@ import db_actions as D
 
 
 def validate_answer(ans):
+    if len(ans)<1:
+        return False
     return True
     
 def validate_question(question):
+    if len(question)<2:
+        return False
     return True
 
 @app.route("/new_question",methods=["POST"])
@@ -18,9 +22,9 @@ def new_question():
     if not validate_question(question):
         msg = "Kysymys on virheellinen"
     elif not validate_answer(neg_ans):
-        msg = "Vasen selite virheellinen"
+        msg = "Vasen selite on virheellinen"
     elif not validate_answer(pos_ans):
-        msg = "Oikea selite virheellinen"
+        msg = "Oikea selite on virheellinen"
     elif "id" not in session.keys():
         msg = "Tarvitaan nimimerkki"
     elif "quiz_id" not in session.keys():
@@ -34,5 +38,3 @@ def new_question():
         return redirect("/#create")
     session["alert"]="Kysymystä ei luotu: "+msg
     return redirect("/#create")
-
-
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`)
diff --git a/templates/create.html b/templates/create.html
index 0ba8164..fe2aa24 100644
--- a/templates/create.html
+++ b/templates/create.html
@@ -1,5 +1,9 @@
+<script src="create.js"></script>
 <div id="nickbox">{{ nick }}</div>
 <div id="alertbox">{{ alert }}</div>
 <h1>create</h1>
+
+<div id=questions></div>
+
 <a href="#question">Lisää kysymys</a>
 </form>
diff --git a/templates/question.html b/templates/question.html
index 90d3abc..6d0dca1 100644
--- a/templates/question.html
+++ b/templates/question.html
@@ -1,9 +1,17 @@
-<div id="alertbox">{{ alert }}</div>
+<div id="kysAlert">{{ alert }}</div>
 <form action="/new_question" method="POST">
-Kysymys:<input type="text" name="question" rows="1" cols="120"><br>
-<input type="text" name="neg_ans" rows="1" cols="40"> : valinnat : 
-<input type="text" name="pos_ans" rows="1" cols="40"><br>
-<input type="range" min="-1000" max="1000" value="0"
-        class="slider" name="answer" class="answerSlider"><br>
-<input type="submit" value="Lähetä">
+<div class="kysQuestion">
+<div class="kysCreateText">Kysymys:</div>
+<div class="kysCreateText"><input type="text" name="question"></div>
+<div class="kysCreateText">Valinnat:</div>
+<div class="kysScale">
+        <div class="kysNegative"><input type="text" name="neg_ans"></div>
+        <div class="kysScaleSpacer"></div>
+        <div class="kysPositive"><input type="text" name="pos_ans"></div>
+</div>
+
+<input type="range" min="0" max="999" value="500" 
+                class="kysAnswer" name="answer" >
+<input type="submit" value="Lisää kysymys">
+</div>
 </form>