src/store.js

@@ -212,4 +212,55 @@ 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;
+}

src/ui.js

@@ -51,6 +51,20 @@ export const Select =()=>
     </div>`;
 }
 
+/** @type {BasicElement} */
+export const Grade =()=>
+{
+    const [State] = Store.Consumer();
+    const grade = Store.Grade(State.Live.Test);
+    return html`<div class="font-sans">
+        <div>Complete: ${grade.Done} of ${grade.Total}</div>
+        <div>Accuracy: ${grade.Score}%</div>
+        <div class="h-4 bg-gray-200 rounded-full overflow-hidden">
+            <div class=${`h-full w-[${grade.Done/grade.Total*100}%] bg-emerald-500 shadow-sss`}></div>
+        </div>
+    </div>`
+};
+
 /** @type {BasicElement} */
 export const Controls =()=>
 {
@@ -79,6 +93,7 @@ export const Controls =()=>
     }, [playGet]);
 
     return html`
+    <${Grade}/>
     <div class="flex">
         <div>Channel</div>
         <div>${State.Chan.Value}</div>

store.d.ts

@@ -49,4 +49,10 @@ declare namespace Store {
   type DrawChart = { Cross?:DrawPoint, UserL: DrawGroup, UserR: DrawGroup, TestL: DrawGroup, TestR: DrawGroup };
 
   type Binding = [state:State, dispatch:(inAction:Action)=>void]
+
+  type Grade = {
+    Total:number,
+    Done:number,
+    Score:number
+  };
 }