test procedure
unknown
plain_text
3 years ago
20 kB
3
Indexable
import { useEffect } from "react"; 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" 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 [disable, setDisable] = useState(true) 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) useEffect(() => { if (state.schoolGrade !== undefined && state.age !== undefined && state.testTime !== undefined && state.germanSecondaryLanguage !== undefined) { setDisable(false) } }, [state.age, state.germanSecondaryLanguage, state.schoolGrade, state.testTime]) return ( testProcedure && <div className="flex flex-col"> <p className="text-lg font-semibold">Testverfahren</p> {<div className={`${disableReading && 'opacity-25'} ${disable && 'opacity-25'} 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' type="button"> <div className="truncate"></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> : <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" aria-labelledby="dropdownDefault"> <li> {suggestedOutput.map(({ category, testsA, testsB, testsC, testsD, testsE }) => { return category === categories.Reading && <> {testsA.length > 0 && testsA.map((res) => { return <button key={res.id} onClick={() => { dispatch({ type: 'readingTest', payload: res.shortName }) setCheckedReading(true) }} className="diagnostic-options">{res.shortName}</button> })} {testsB.length > 0 && <> <p className="text-center">--GROUP 2--</p> {testsB.map((res) => { return <button key={res.id} onClick={() => { dispatch({ type: 'readingTest', payload: res.shortName }) setCheckedReading(true) }} className="diagnostic-options">{res.shortName}</button> })} </>} {testsC.length > 0 && <> <p className="text-center">--GROUP 3--</p> {testsC.map((res) => { return <button key={res.id} onClick={() => { dispatch({ type: 'readingTest', payload: res.shortName }) setCheckedReading(true) }} className="diagnostic-options">{res.shortName}</button> })} </>} {testsD.length > 0 && <> <p className="text-center">--GROUP 4--</p> {testsD.map((res) => { return <button key={res.id} onClick={() => { dispatch({ type: 'readingTest', payload: res.shortName }) setCheckedReading(true) }} className="diagnostic-options">{res.shortName}</button> })} </>} {testsE.length > 0 && <> <p className="text-center">--GROUP 5--</p> {testsE.map((res) => { return <button key={res.id} onClick={() => { dispatch({ type: 'readingTest', payload: res.shortName }) setCheckedReading(true) }} className="diagnostic-options">{res.shortName}</button> })} </>} </> })} </li> </ul> </div>} </div>} <div className={`${disableWriting && 'opacity-25'} ${disable && 'opacity-25'} 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' type="button"> <div className="truncate"></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> : <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" aria-labelledby="dropdownDefault"> <li> {suggestedOutput.map(({ category, testsA, testsB, testsC, testsD, testsE }) => { return category === categories.Writing && <> {testsA.length > 0 && testsA.map((res) => { return <button key={res.id} onClick={() => { dispatch({ type: 'writingTest', payload: res.shortName }) setCheckedWriting(true) }} className="diagnostic-options">{res.shortName}</button> })} {testsB.length > 0 && <> <p className="text-center">--GROUP 2--</p> {testsB.map((res) => { return <button key={res.id} onClick={() => { dispatch({ type: 'writingTest', payload: res.shortName }) setCheckedWriting(true) }} className="diagnostic-options">{res.shortName}</button> })} </>} {testsC.length > 0 && <> <p className="text-center">--GROUP 3--</p> {testsC.map((res) => { return <button key={res.id} onClick={() => { dispatch({ type: 'writingTest', payload: res.shortName }) setCheckedWriting(true) }} className="diagnostic-options">{res.shortName}</button> })} </>} {testsD.length > 0 && <> <p className="text-center">--GROUP 4--</p> {testsD.map((res) => { return <button key={res.id} onClick={() => { dispatch({ type: 'writingTest', payload: res.shortName }) setCheckedWriting(true) }} className="diagnostic-options">{res.shortName}</button> })} </>} {testsE.length > 0 && <> <p className="text-center">--GROUP 5--</p> {testsE.map((res) => { return <button key={res.id} onClick={() => { dispatch({ type: 'writingTest', payload: res.shortName }) setCheckedWriting(true) }} className="diagnostic-options">{res.shortName}</button> })} </>} </> })} </li> </ul> </div>} </div> <div className={`${disableCounting && 'opacity-25'} ${disable && 'opacity-25'} 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' type="button"> <div className="truncate"></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> : <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" aria-labelledby="dropdownDefault"> <li> {suggestedOutput.map(({ category, testsA, testsB, testsC, testsD, testsE }) => { return category === categories.Math && <> {testsA.length > 0 && testsA.map((res) => { return <button key={res.id} onClick={() => { dispatch({ type: 'countingTest', payload: res.shortName }) setCheckedCounting(true) }} className="diagnostic-options">{res.shortName}</button> })} {testsB.length > 0 && <> <p className="text-center">--GROUP 2--</p> {testsB.map((res) => { return <button key={res.id} onClick={() => { dispatch({ type: 'countingTest', payload: res.shortName }) setCheckedCounting(true) }} className="diagnostic-options">{res.shortName}</button> })} </>} {testsC.length > 0 && <> <p className="text-center">--GROUP 3--</p> {testsC.map((res) => { return <button key={res.id} onClick={() => { dispatch({ type: 'countingTest', payload: res.shortName }) setCheckedCounting(true) }} className="diagnostic-options">{res.shortName}</button> })} </>} {testsD.length > 0 && <> <p className="text-center">--GROUP 4--</p> {testsD.map((res) => { return <button key={res.id} onClick={() => { dispatch({ type: 'countingTest', payload: res.shortName }) setCheckedCounting(true) }} className="diagnostic-options">{res.shortName}</button> })} </>} {testsE.length > 0 && <> <p className="text-center">--GROUP 5--</p> {testsE.map((res) => { return <button key={res.id} onClick={() => { dispatch({ type: 'countingTest', payload: res.shortName }) setCheckedCounting(true) }} className="diagnostic-options">{res.shortName}</button> })} </>} </> })} </li> </ul> </div>} </div> </div> ) } export default TestProcedure
Editor is loading...