TestProcedure
unknown
plain_text
2 years ago
23 kB
2
Indexable
import { useContext, useRef, useState } from "react"
import { DiagnosticContext, useOutsideClick, useSessionStorage } from "../../helpers/functions"
import { categories } from "../../services/londi-constants";
import { getSuggestedTests } from "../../services/londi-suggestions"
import SecondTestOptions from "./SecondTestOptions";
const TestProcedure = ({ testProcedure }) => {
const { state, dispatch } = useContext(DiagnosticContext);
const [checkedReading, setCheckedReading] = useSessionStorage('checkboxesReading', false)
const [disableReading, setDisableReading] = useSessionStorage('checkboxesDisableReading', false)
const [checkedWriting, setCheckedWriting] = useSessionStorage('checkboxesWriting', false)
const [disableWriting, setDisableWriting] = useSessionStorage('checkboxesDisableWriting', false)
const [checkedCounting, setCheckedCounting] = useSessionStorage('checkboxesCounting', false)
const [disableCounting, setDisableCounting] = useSessionStorage('checkboxesDisableCounting', false)
const [selectReadingGroup, setSelectReadingGroup] = useSessionStorage('readingGroup', null)
const [selectWritingGroup, setSelectWritingGroup] = useSessionStorage('writingGroup', null)
const [selectCountingGroup, setSelectCountingGroup] = useSessionStorage('countingGroup', null)
const [selectReadingCompetenceLevel, setSelectReadingCompetenceLevel] = useState(null)
const [selectWritingCompetenceLevel, setSelectWritingCompetenceLevel] = useState(null)
const [selectCountingCompetenceLevel, setSelectCountingCompetenceLevel] = useState(null)
const wrapperRef = useRef(null);
useOutsideClick(wrapperRef);
const newState = {
...state, screeningResultCounting: { category: 3, result: 1 },
screeningResultReading: { category: 1, result: 1 },
screeningResultWriting: { category: 2, result: 1 }
}
const suggestedOutput = getSuggestedTests(newState, false, false)
return (
testProcedure &&
<div className="flex flex-col">
<p className="text-lg font-semibold">Testverfahren</p>
<div className="flex items-end">
<div className={` options-container`}>
<h5 className="options-name"><input checked={checkedReading} onChange={(e) => {
if (!e.target.checked) {
setDisableReading(true)
setCheckedReading(false)
dispatch({ type: "clearReading" });
} else {
setCheckedReading(true)
setDisableReading(false)
}
}} id="green-checkbox" type="checkbox" className="diagnostics-results" />Lesen</h5>
{disableReading ? <button id="dropdownDefault" data-dropdown-toggle="dropdown" className={`btn-options ${disableReading && 'bg-gray-100'} `} type="button">
<div className="truncate"></div><svg className={`${disableReading && 'text-gray-300'} ml-2 w-4 h-4 mr-2 text-black`} aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
</button> : <button onClick={() => dispatch({ type: 'readingOptions' })} id="dropdownDefault" data-dropdown-toggle="dropdown" className={`btn-options `} type="button">
<div className="truncate">{state?.readingResults}</div><svg className="ml-2 w-4 h-4 mr-2 text-black" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
</button>}
{state?.options === 'readingOptions' &&
<div id="dropdown" ref={wrapperRef} className={`dropdown-container`}>
<ul className="dropdown overflow-y-auto h-72" aria-labelledby="dropdownDefault">
<li>
{suggestedOutput.map(({ category, testsA, testsB, testsC, testsD, testsE }) => {
return category === categories.Reading &&
<>
{testsA.map((res) => {
return <button key={res.id} onClick={() => {
dispatch({ type: 'readingTest', payload: res.shortName })
dispatch({ type: 'readingTestId', payload: res.id })
setCheckedReading(true)
setSelectReadingGroup(1)
}} className="diagnostic-options">{res.shortName}</button>
})}
{testsB.map((res) => {
return <button key={res.id} onClick={() => {
dispatch({ type: 'readingTest', payload: res.shortName })
dispatch({ type: 'readingTestId', payload: res.id })
setSelectReadingGroup(2)
setSelectReadingCompetenceLevel(res.competenceLevels)
setCheckedReading(true)
}} className="diagnostic-options">{res.shortName}</button>
})}
{testsC.map((res) => {
return <button key={res.id} onClick={() => {
dispatch({ type: 'readingTest', payload: res.shortName })
dispatch({ type: 'readingTestId', payload: res.id })
setCheckedReading(true)
setSelectReadingGroup(3)
}} className="diagnostic-options">{res.shortName}</button>
})}
{testsD.map((res) => {
return <button key={res.id} onClick={() => {
dispatch({ type: 'readingTest', payload: res.shortName })
dispatch({ type: 'readingTestId', payload: res.id })
setCheckedReading(true)
setSelectReadingGroup(4)
setSelectReadingCompetenceLevel(res.competenceLevels)
}} className="diagnostic-options">{res.shortName}</button>
})}
{testsE.map((res) => {
return <button key={res.id} onClick={() => {
dispatch({ type: 'readingTest', payload: res.shortName })
dispatch({ type: 'readingTestId', payload: res.id })
setCheckedReading(true)
setSelectReadingGroup(5)
}} className="diagnostic-options">{res.shortName}</button>
})}
</>
})}
</li>
</ul>
</div>}
</div>
<div className="flex flex-col">
<div className={`${selectReadingGroup === 2 || selectCountingGroup === 2 || selectWritingGroup === 2 ? 'h-24 ml-5 w-64 block' : 'hidden'}`}>
<p>Bitte wählen Sie zur optimalen Abdeckung der Kompetenzstufen ein weiteres
Testverfahren aus, um fortzufahren:</p>
</div>
{selectReadingGroup === 2 ?
<SecondTestOptions selectCompetenceLevel={selectReadingCompetenceLevel}
setChecked={setCheckedReading} secondTestOptions={'readingSecondTestOptions'}
secondTestType={'readingSecondTest'} secondTestId={'readingSecondTestId'}
showCategory={categories.Reading} showState={state?.readingSecondTestResults} /> : null
}
</div>
</div>
<div className="flex items-end">
<div className={` options-container`}>
<h5 className="options-name"><input checked={checkedWriting} onChange={(e) => {
if (!e.target.checked) {
setDisableWriting(true)
setCheckedWriting(false)
dispatch({ type: "clearWriting" });
} else {
setCheckedWriting(true)
setDisableWriting(false)
}
}} id="green-checkbox" type="checkbox" className="diagnostics-results" />Schreiben</h5>
{disableWriting ? <button id="dropdownDefault" data-dropdown-toggle="dropdown" className={`btn-options ${disableWriting && 'bg-gray-100'} `} type="button">
<div className="truncate"></div><svg className={`${disableWriting && 'text-gray-300'} ml-2 w-4 h-4 mr-2 text-black`} aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
</button> : <button onClick={() => dispatch({ type: 'writingOptions' })} id="dropdownDefault" data-dropdown-toggle="dropdown"
className=' btn-options' type="button">
<div className="truncate">{state?.writingResults}</div>
<svg className="ml-2 w-4 h-4 mr-2 text-black" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
</button>}
{state?.options === 'writingOptions' &&
<div id="dropdown" ref={wrapperRef} className="dropdown-container">
<ul className="dropdown overflow-y-auto h-72" aria-labelledby="dropdownDefault">
<li>
{suggestedOutput.map(({ category, testsA, testsB, testsC, testsD, testsE }) => {
return category === categories.Writing &&
<>
{testsA.map((res) => {
return <button key={res.id} onClick={() => {
dispatch({ type: 'writingTest', payload: res.shortName })
dispatch({ type: 'writingTestId', payload: res.id })
setCheckedWriting(true)
setSelectWritingGroup(1)
}} className="diagnostic-options">{res.shortName}</button>
})}
{testsB.map((res) => {
return <button key={res.id} onClick={() => {
dispatch({ type: 'writingTest', payload: res.shortName })
dispatch({ type: 'writingTestId', payload: res.id })
setCheckedWriting(true)
setSelectWritingGroup(2)
setSelectWritingCompetenceLevel(res.competenceLevels)
}} className="diagnostic-options">{res.shortName}</button>
})}
{testsC.map((res) => {
return <button key={res.id} onClick={() => {
dispatch({ type: 'writingTest', payload: res.shortName })
dispatch({ type: 'writingTestId', payload: res.id })
setCheckedWriting(true)
setSelectWritingGroup(3)
}} className="diagnostic-options">{res.shortName}</button>
})}
{testsD.map((res) => {
return <button key={res.id} onClick={() => {
dispatch({ type: 'writingTest', payload: res.shortName })
dispatch({ type: 'writingTestId', payload: res.id })
setCheckedWriting(true)
setSelectWritingGroup(4)
setSelectWritingCompetenceLevel(res.competenceLevels)
}} className="diagnostic-options">{res.shortName}</button>
})}
{testsE.map((res) => {
return <button key={res.id} onClick={() => {
dispatch({ type: 'writingTest', payload: res.shortName })
dispatch({ type: 'writingTestId', payload: res.id })
setCheckedWriting(true)
setSelectWritingGroup(5)
}} className="diagnostic-options">{res.shortName}</button>
})}
</>
})}
</li>
</ul>
</div>}
</div>
{selectWritingGroup === 2 ?
<SecondTestOptions selectCompetenceLevel={selectWritingCompetenceLevel}
setChecked={setCheckedWriting} secondTestOptions={'writingSecondTestOptions'}
secondTestType={'writingSecondTest'} secondTestId={'writingSecondTestId'}
showCategory={categories.Writing} showState={state?.writingSecondTestResults} /> : null}
</div>
<div className="flex items-end">
<div className={`options-container`}>
<h5 className="options-name"><input checked={checkedCounting} onChange={(e) => {
if (!e.target.checked) {
setDisableCounting(true)
setCheckedCounting(false)
dispatch({ type: "clearCounting" });
} else {
setCheckedCounting(true)
setDisableCounting(false)
}
}} id="green-checkbox" type="checkbox" className="diagnostics-results" />Rechnen</h5>
{disableCounting ? <button id="dropdownDefault" data-dropdown-toggle="dropdown" className={`btn-options ${disableCounting && 'bg-gray-100'} `} type="button">
<div className="truncate"></div><svg className={`${disableCounting && 'text-gray-300'} ml-2 w-4 h-4 mr-2 text-black`} aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
</button> : <button onClick={() => dispatch({ type: 'countingOptions' })} id="dropdownDefault" data-dropdown-toggle="dropdown"
className='btn-options' type="button"><div className="truncate">{state?.countingResults}</div><svg className="ml-2 w-4 h-4 mr-2 text-black" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
</button>}
{state?.options === 'countingOptions' &&
<div id="dropdown" ref={wrapperRef} className="dropdown-container">
<ul className="dropdown overflow-y-auto h-72" aria-labelledby="dropdownDefault">
<li>
{suggestedOutput.map(({ category, testsA, testsB, testsC, testsD, testsE }) => {
return category === categories.Math &&
<>
{testsA.map((res) => {
return <button key={res.id} onClick={() => {
dispatch({ type: 'countingTest', payload: res.shortName })
dispatch({ type: 'countingTestId', payload: res.id })
setCheckedCounting(true)
setSelectCountingGroup(1)
}} className="diagnostic-options">{res.shortName}</button>
})}
{testsB.map((res) => {
return <button key={res.id} onClick={() => {
dispatch({ type: 'countingTest', payload: res.shortName })
dispatch({ type: 'countingTestId', payload: res.id })
setCheckedCounting(true)
setSelectCountingGroup(2)
setSelectCountingCompetenceLevel(res.competenceLevels)
}} className="diagnostic-options">{res.shortName}</button>
})}
{testsC.map((res) => {
return <button key={res.id} onClick={() => {
dispatch({ type: 'countingTest', payload: res.shortName })
dispatch({ type: 'countingTestId', payload: res.id })
setCheckedCounting(true)
setSelectCountingGroup(3)
}} className="diagnostic-options">{res.shortName}</button>
})}
{testsD.map((res) => {
return <button key={res.id} onClick={() => {
dispatch({ type: 'countingTest', payload: res.shortName })
dispatch({ type: 'countingTestId', payload: res.id })
setCheckedCounting(true)
setSelectCountingGroup(4)
setSelectCountingCompetenceLevel(res.competenceLevels)
}} className="diagnostic-options">{res.shortName}</button>
})}
{testsE.map((res) => {
return <button key={res.id} onClick={() => {
dispatch({ type: 'countingTestId', payload: res.id })
dispatch({ type: 'countingTest', payload: res.shortName })
setCheckedCounting(true)
setSelectCountingGroup(5)
}} className="diagnostic-options">{res.shortName}</button>
})}
</>
})}
</li>
</ul>
</div>}
</div>
{selectCountingGroup === 2 ?
<SecondTestOptions selectCompetenceLevel={selectCountingCompetenceLevel}
setChecked={setCheckedCounting} secondTestOptions={'countingSecondTestOptions'}
secondTestType={'countingSecondTest'} secondTestId={'countingSecondTestId'}
showCategory={categories.Math} showState={state?.countingSecondTestResults} /> : null
}
</div>
</div>
)
}
export default TestProcedureEditor is loading...