display results

backend/src/main/java/Application.java

@@ -44,6 +44,17 @@ public class Application {
                                         new Answer("Explain to other equally impatient people in the room that the doctor is always running late ", vExtrovertTrait, 0.3f),
                                         new Answer("Complain in a loud voice, while tapping your foot impatiently", vExtrovertTrait, 0.7f)
                                 )
+                        ),
+                        //------------------------------------
+                        // Third question
+                        //------------------------------------
+                        new Question(
+                                "Blah blah blah ? Blah.",
+                                Arrays.asList(
+                                        new Answer("Yes.", vIntrovertTrait, 0.2f),
+                                        new Answer("Sure", vExtrovertTrait, 0.3f),
+                                        new Answer("Meh", vExtrovertTrait, 0.7f)
+                                )
                         )
                 )
         );

frontend/src/App.css

@@ -0,0 +1,99 @@
+h1{
+  color: #111111;
+}
+
+.app{
+  margin: 0 auto;
+  max-width: 50em;
+  font-family: "Helvetica", "Arial", sans-serif;
+  line-height: 1.5;
+  padding: 4em 1em;
+  color: #333333;
+  --interactible-color: #007C00;
+  --jauge-color: #AAAACC;
+}
+
+.display_flex{
+  display: flex;
+}
+
+.flex_vertical{
+  flex-direction: column;
+}
+
+.flex_horizontal{
+  flex-direction: row;
+}
+
+.flex_wrap{
+  flex-wrap: wrap;
+}
+
+.bordered{
+  border-style: solid;
+  border-radius: 2em;
+  border-width: 1px;
+  padding: 0.5em 1em;
+}
+
+.raised{
+  z-index: 2;
+  background-color: #eaecea;
+  border-style:ridge;
+  margin: 0.5em;
+  padding: 0.5em;
+  transition: all 0.2s ease-in-out 0.1;
+}
+
+.spaced{
+  margin: 0.5em;
+  padding: 0.5em;
+}
+
+.raised:hover{
+  border-style: solid;
+}
+
+.hoverable{
+  cursor: pointer;
+}
+
+.interactible{
+  color: var(--interactible-color);
+  border-style: solid;
+  border-radius: 2em;
+  border-width: 1px;
+  cursor: pointer;
+  margin: 1em;
+  padding: 1em;
+  display: flex;
+  justify-content: center;
+  
+}
+
+.space_between{
+  justify-content: space-between;
+  justify-items: space-between;
+}
+
+.center{
+  justify-content: center;
+  justify-items: center;
+}
+
+.fill_width{
+  width:100%
+}
+
+.position_static{
+  position: static;
+}
+
+.position_absolute{
+  position: absolute;
+}
+
+.gradient{
+  transition: all 0.5s ease-in-out 1s;
+  background: linear-gradient(90deg, var(--jauge-color) 0%, var(--jauge-color) var(--data-weight), #FFFFFF var(--data-grad-offset), #FFFFFF 100%); 
+}

frontend/src/App.js

@@ -29,20 +29,24 @@ function App() {
   }
 
   return (
-    <div>
+    <div className="app display_flex flex_vertical">
       <h1>
         Are you an introvert or an extrovert ?
       </h1>
-      <div>
+      { !questionnaireStarted &&
+      <h2>
         Take this <i>✨ totally legit personality test ✨</i> and find out !
-      </div>
+      </h2>
+      }
       {
         null === sessionIdReceived &&
+        <div>
         <div> {null === errorOccured ? "Contacting server..." : "A server error occured 😨 : "+errorOccured} </div>
+        </div>
       }
       {
         !questionnaireStarted && null!=sessionIdReceived &&
-        <div
+        <div className="interactible"
         onClick={() => onStartQuestionnaire(true)}>
           Start
         </div>

frontend/src/component/question.js

@@ -13,7 +13,7 @@ function Question(props){
     current_question.answers.forEach(answer => {
         let dom_id = "answer"+answer.id
         question_answers.push(
-            <div key={dom_id}>
+            <div className="spaced hoverable" key={dom_id}>
                 <input name="answer" id={dom_id} type="radio" value={answer.id} defaultChecked={answer.id === selectedAnswer}/>
                 <label htmlFor={dom_id}>{answer.description}</label>
             </div>
@@ -21,12 +21,13 @@ function Question(props){
     });
     
     return (
-    <div>
-        <div> {current_question.name} </div>
-        <div onChange={(value) => onSelectAnswer(value.target.value)}>
+    <div className="bordered">
+        <h3> {current_question.name} </h3>
+        <div className="display_flex flex_vertical" onChange={(value) => onSelectAnswer(value.target.value)}>
         {question_answers}
         </div>
         <div
+            className="interactible"
             onClick={() => {
                 //-------------------------------
                 // POST question answer

frontend/src/component/questionnaire.js

@@ -39,13 +39,13 @@ function Questionnaire(props){
                 moveToQuestion={onMoveToIndex}
                 questionnaireCompleted={onQuestionnaireCompleted}/>
         }
-        <div>
+        <div className="display_flex flex_horizontal">
         {
-            currentIndex > 0 ? <div onClick={() => onMoveToIndex(currentIndex-1)}>Previous Question</div> : ''  
+            currentIndex > 0 ? <div className="interactible" onClick={() => onMoveToIndex(currentIndex-1)}>Previous Question</div> : ''  
         }
         {
             null != questionnaireDataFetched && currentIndex < questionnaireDataFetched.questions.length - 1 && 'answer' in questionnaireDataFetched.questions[currentIndex] && 
-            <div onClick={() => onMoveToIndex(currentIndex+1)}>Next Question</div>
+            <div className="interactible" onClick={() => onMoveToIndex(currentIndex+1)}>Next Question</div>
         }
         </div>
         </React.Fragment>

frontend/src/component/questionnaire_result.js

@@ -1,23 +1,61 @@
 import React from 'react';
+import { createPortal } from 'react-dom';
 import url from '../server';
 
 function QuestionnaireResult(props){
     const [resultsFetched, onResultsFetched] = React.useState(null);
     console.log(resultsFetched);
+    let dominant_weight = 0;
+    let dominant = null;
+    let scale_ends = ["Introvert","Extrovert"];
+    let display_dominant = 0;
 
     if(null === resultsFetched)
     {
         fetch(url+"/session/"+props.sessionId) 
         .then(response => response.json())
         .then(result => {
-            onResultsFetched(result);
+            onResultsFetched(result.results);
         })
         .catch( e => console.error(e));
     }
+    else
+    {
+        let total = 0;
+        let max = 0;
+        
+        resultsFetched.traits.forEach(trait => {
+            total += trait.weight;
+            if(max < trait.weight)
+            {
+                max = trait.weight;
+                dominant = trait;
+            }
+            dominant_weight = dominant.weight/total;
+        })
+        display_dominant = dominant.name === "Introvert" ? dominant_weight : 1-dominant_weight
+    }
     return(
+        <React.Fragment>
+        <div className="gradient bordered" 
+        style={{
+            "--data-weight": display_dominant*100+"%",
+            "--data-grad-offset": display_dominant*100+1+"%",
+            }}>
+            <div className="display_flex flex_horizontal space_between position_static fill_width">
+            <div>Introvert</div>
+            <div>Extrovert</div>
+            </div>
+            <div className="display_flex position_static fill_width center">
+            {resultsFetched ? (dominant_weight*100).toFixed(1)+"% "+dominant.name : "Results loading"}
+            </div>
+        </div>
+        {null != dominant &&
         <div>
-            Results
+            🎉{dominant.description}
         </div>
+        }
+        </React.Fragment>
     )
 }