make grade part of state

js/app.js

@@ -23,10 +23,11 @@ React.render(html`
             <${UI.Controls}/>
             <${UI.Chart}>
                 <${UI.Audiogram}/>
+                <div class="absolute bottom-0 right-0"><${UI.Display}/></div>
             <//>
         </div>
-
+        
-        <${UI.Display}/>
+        
 
     </div>
     <//>

js/store.js

@@ -28,6 +28,55 @@ export const ColumnLookup =(inFrequency)=>
 /** @type {(inDecimal:number)=>string} */
 const Perc =(inDecimal)=> `${inDecimal*100}%`;
 
+/** @type {(inTest:Store.Test)=>Store.Grade} */
+export const Grade =(inTest)=>
+{
+    /** @type {Store.Grade} */
+    const output = { Total:0, Marks:0, Score:0 };
+
+    /** @type {(inGoal:number, inResult:number)=>number} */
+    const Mapper =(inGoal, inResult)=>
+    {
+        const err = Math.abs(inGoal-inResult);
+        if(err == 0){ return 1; }
+        else if(err > 0 && err <= 5){ return 0.9; }
+        else if(err > 5 && err <= 10){ return 0.7; }
+        else if(err > 10 && err <= 15){ return 0.2; }
+        else{ return 0; }
+    }
+
+
+    for(let i=0; i<inTest.Plot.length; i++)
+    {
+        const {TestL, TestR, UserL, UserR} = inTest.Plot[i];
+        if(TestL)
+        {
+            output.Total ++;
+            if(UserL)
+            {
+                output.Marks++;
+                output.Score += Mapper(TestL.Stim, UserL.Stim);
+            }
+        }
+        if(TestR)
+        {
+            output.Total ++;
+            if(UserR)
+            {
+                output.Marks++;
+                output.Score += Mapper(TestR.Stim, UserR.Stim);
+            }
+        }
+    }
+    if(output.Marks > 0)
+    {
+        output.Score = Math.floor((output.Score/output.Marks) * 10000)/100;
+    }
+
+    return output;
+
+}
+
 /** Creates a new Store.Context object that contain the current selections 
  * @type {(inState:Store.State, inTest?:Store.Test)=>Store.Context} */
 const Reselect =(inState, inTest)=>
@@ -122,6 +171,7 @@ export function Reducer(inState, inAction)
                 TestL: Redraw(test, 0, clone.Stim, false),
                 TestR: Redraw(test, 1, clone.Stim, false)
             };
+            test.Done = Grade(test);
         }
     }
     else if (Name == "Mark")
@@ -132,6 +182,7 @@ export function Reducer(inState, inAction)
             clone.Live.Mark = Data !== null ? {Stim:clone.Stim.Value, Resp:Data} : undefined;
             clone.Live.Freq[key] = clone.Live.Mark;
             clone.Draw[key] = Redraw(clone.Live.Test, clone.Chan.Value, clone.Stim, true);
+            clone.Live.Test.Done = Grade(clone.Live.Test);
             SaveTests(clone);
         }
     }
@@ -148,6 +199,25 @@ export function Reducer(inState, inAction)
             clone.Live = Reselect(clone);
         }
     }
+    else if (Name == "Errs")
+    {
+        clone.Errs = Data;
+    }
+    else if (Name == "Kill")
+    {
+        if(clone.Live.Test)
+        {
+            clone.Live.Test.Plot.forEach(freq=>
+            {
+                freq.UserL = undefined;
+                freq.UserR = undefined;
+            });
+            clone.Draw["UserL"] = Redraw(clone.Live.Test, clone.Chan.Value, clone.Stim, true);
+            clone.Draw["UserR"] = Redraw(clone.Live.Test, clone.Chan.Value, clone.Stim, true);
+            clone.Live.Test.Done = Grade(clone.Live.Test);
+            SaveTests(clone);
+        }
+    }
     else if (Name == "ShowCursor")
     {
         clone.Show.Cursor = Data;
@@ -228,13 +298,11 @@ if(TestSaved)
 const SaveTests =(inState)=> localStorage.setItem("app-tests", JSON.stringify(inState.Test));
 
 /**@type {(inState:Store.State)=>void} */
-const SaveSettings =(inState)=> localStorage.setItem("app-settings", JSON.stringify({
+const SaveSettings =(inState)=>
-    Chan:inState.Chan,
+{
-    Freq:inState.Freq,
+    const clone = {...inState, Test:null, Draw:null, };
-    Stim:inState.Stim,
+    localStorage.setItem("app-settings", JSON.stringify(clone));
-    Show:inState.Show,
+}
-    TestIndex:inState.TestIndex,
-}));
 
 
 /** @type {Store.Test[]} */
@@ -245,6 +313,7 @@ export const Initial = Reducer(
     Chan: { Min:0,   Max:1,   Value:0,  Step:1 },
     Freq: { Min:2,   Max:8,   Value:3,  Step:1 },
     Stim: { Min:-10, Max:120, Value:30, Step:5 },
+    Errs: 0,
     Live:
     {
         Test: undefined,
@@ -279,55 +348,4 @@ export const Provider =(props)=>
 };
 
 /** @type {()=>Store.Binding} */
-export const Consumer =()=> React.useContext(Context);
+export const Consumer =()=> React.useContext(Context);
-
-/** @type {(inTest:Store.Test|undefined)=>Store.Grade} */
-export const Grade =(inTest)=>
-{
-    /** @type {Store.Grade} */
-    const output = { Total:0, Done:0, Score:0 };
-
-    /** @type {(inGoal:number, inResult:number)=>number} */
-    const Mapper =(inGoal, inResult)=>
-    {
-        const err = Math.abs(inGoal-inResult);
-        if(err == 0){ return 1; }
-        else if(err > 0 && err <= 5){ return 0.9; }
-        else if(err > 5 && err <= 10){ return 0.7; }
-        else if(err > 10 && err <= 15){ return 0.2; }
-        else{ return 0; }
-    }
-
-    if(inTest)
-    {
-        for(let i=0; i<inTest.Plot.length; i++)
-        {
-            const {TestL, TestR, UserL, UserR} = inTest.Plot[i];
-            if(TestL)
-            {
-                output.Total ++;
-                if(UserL)
-                {
-                    output.Done++;
-                    output.Score += Mapper(TestL.Stim, UserL.Stim);
-                }
-            }
-            if(TestR)
-            {
-                output.Total ++;
-                if(UserR)
-                {
-                    output.Done++;
-                    output.Score += Mapper(TestR.Stim, UserR.Stim);
-                }
-            }
-        }
-    }
-
-    if(output.Done > 0)
-    {
-        output.Score = Math.floor((output.Score/output.Done) * 10000)/100;
-    }
-
-    return output;
-}

js/ui.js

@@ -3,7 +3,7 @@ import { html } from "htm";
 import * as Store from "./store.js";
 import * as Tone from "./tone.js";
 
-/** @typedef {({children}:{children?:preact.ComponentChildren})=>preact.VNode} BasicElement */
+/** @typedef {({children, classes}:{children?:preact.ComponentChildren, classes?:string})=>preact.VNode} BasicElement */
 
 /** @type {({children, icon, light, disabled, inactive, onClick, classes}:{children:preact.VNode, icon?:preact.VNode, light:boolean, disabled:boolean, inactive:boolean, onClick:()=>void, classes?:string})=>preact.VNode} */
 export function Button({children, icon, light, disabled, inactive, onClick, classes})
@@ -39,7 +39,7 @@ export function Button({children, icon, light, disabled, inactive, onClick, clas
 export const Header =()=>
 {
     const [State, Dispatch] = Store.Consumer();
-    const grade = Store.Grade(State.Live.Test);
+    const grade = State.Live.Test?.Done;
 
     /** @type {(e:Event)=>void} */
     const handleChange =(e)=> Dispatch({Name:"Test", Data:parseInt(/** @type {HTMLSelectElement}*/(e.target).value)});
@@ -58,20 +58,22 @@ export const Header =()=>
                 </select>
             </div>
             <div class="box-buttons w-full mt-2">
-                <${Button} inactive=${State.Chan.Value == 0} light=${State.Chan.Value == 0} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Chan", Data:-1})}>None<//>
+                <p>Patient Error:</p>
-                <${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Slight<//>
+                <${Button} inactive=${State.Errs == 0.0} light=${State.Errs == 0.0} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Errs", Data:0.0})}>None<//>
-                <${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Moderate<//>
+                <${Button} inactive=${State.Errs == 0.1} light=${State.Errs == 0.1} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Errs", Data:0.1})}>Slight<//>
-                <${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Severe<//>
+                <${Button} inactive=${State.Errs == 0.3} light=${State.Errs == 0.3} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Errs", Data:0.3})}>Moderate<//>
+                <${Button} inactive=${State.Errs == 0.6} light=${State.Errs == 0.6} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Errs", Data:0.6})}>Severe<//>
             </div>
         </div>
 
         <div class="p-4">
             <div class="box-buttons flex-col w-[200px] h-full justify-center">
-                <div>Complete: ${grade.Done} of ${grade.Total}</div>
+                <div>Complete: ${grade.Marks} of ${grade.Total}</div>
                 <div class="w-full h-4 bg-zinc-400 rounded-full overflow-hidden">
-                    <div class="h-full w-[${grade.Done/grade.Total*100}%] bg-earmark"></div>
+                    <div class="h-full w-[${grade.Marks/grade.Total*100}%] bg-earmark"></div>
                 </div>
                 <div class="text-sm">Accuracy: ${grade.Score}%</div>
+                <${Button} disabled=${grade.Marks == 0} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Kill", Data:0})}>Start Over<//>
             </div>
         </div>
     </div>`;
@@ -323,7 +325,7 @@ export function Chart({children})
         );
     }
     return html`
-    <div class="relative w-full pb-[calc(55%+60px)] font(sans medium) text(xs) self-start">
+    <div class="relative w-full pb-[calc(55%+70px)] font(sans medium) text(xs) self-start">
         <div class="absolute right-0 bottom-0 w-[calc(100%-60px)] h-[calc(100%-70px)] border(1 zinc-300)">
             <span class="block        absolute top-[-65px] left-0  w-full      text(sm center)     font-black">Frequency in Hz</span>
             <span class="inline-block absolute top-[50%]   left-[-50px] ">

ts/store.d.ts

@@ -12,7 +12,11 @@ declare namespace Store {
     UserR?: TestFrequencySample;
   };
 
-  type Test = { Name: string; Plot: Array<TestFrequency> };
+  type Test = {
+    Name: string;
+    Done?: Grade;
+    Plot: Array<TestFrequency>
+  };
 
   type Context = {
     Test?: Test;
@@ -24,6 +28,7 @@ declare namespace Store {
     Chan: Range;
     Freq: Range;
     Stim: Range;
+    Errs: number;
     Live: Context;
     Draw: DrawChart;
     Show: {Cursor:boolean, Answer:boolean}
@@ -36,9 +41,11 @@ declare namespace Store {
   type ActionChan = { Name: "Chan"; Data: number };
   type ActionFreq = { Name: "Freq"; Data: number };
   type ActionStim = { Name: "Stim"; Data: number };
+  type ActionErrs = { Name: "Errs"; Data: number };
+  type ActionKill = { Name: "Kill"; Data: number };
   type ActionShowCursor = {Name: "ShowCursor", Data:boolean};
   type ActionShowAnswer = {Name: "ShowAnswer", Data:boolean};
-  type Action = ActionMark | ActionTest | ActionChan | ActionFreq | ActionStim | ActionShowCursor | ActionShowAnswer;
+  type Action = ActionMark | ActionTest | ActionChan | ActionFreq | ActionStim | ActionErrs | ActionKill | ActionShowCursor | ActionShowAnswer;
   type Reducer = (inState: State, inAction: Action) => State;
   type ContextUpdater = (inState: State) => boolean;
 
@@ -55,7 +62,7 @@ declare namespace Store {
 
   type Grade = {
     Total:number,
-    Done:number,
+    Marks:number,
     Score:number
   };
 }