Earmark/audiogram-beta
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Earmark:6c6220e5db54f2ff6333f2ea3d6d4a2d91d6364b
Branches Tags
Earmark:master
Earmark:squarespace-tweaks
Earmark:feature/layout-updates
Earmark:feature/typescript-definitions
..
compare: Earmark:576df329463238d5b61242ac7f969b3b48d504b0
Branches Tags
Earmark:squarespace-tweaks
Earmark:master
Earmark:feature/layout-updates
Earmark:feature/typescript-definitions

2 Commits
6c6220e5db ... 576df32946

Author SHA1 Message Date
Seth Trowbridge
576df32946 make grade part of state 2023-06-07 19:31:10 -04:00
Seth Trowbridge
3af4718cdb start error ui 2023-06-07 19:30:56 -04:00
4 changed files with 101 additions and 73 deletions
Show Stats Expand all files Collapse all files

3
js/app.js
View File

@ -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>
<//>

134
js/store.js
View File

@ -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({
Chan:inState.Chan,
Freq:inState.Freq,
Stim:inState.Stim,
Show:inState.Show,
TestIndex:inState.TestIndex,
}));
const SaveSettings =(inState)=>
{
const clone = {...inState, Test:null, Draw:null, };
localStorage.setItem("app-settings", JSON.stringify(clone));
}
/** @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,
@ -280,54 +349,3 @@ export const Provider =(props)=>
/** @type {()=>Store.Binding} */
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;
}

20
js/ui.js
View File

@ -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<//>
<${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.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Moderate<//>
<${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Severe<//>
<p>Patient Error:</p>
<${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.Errs == 0.1} light=${State.Errs == 0.1} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Errs", Data:0.1})}>Slight<//>
<${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] ">

13
ts/store.d.ts vendored
View File

@ -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
};
}