PromotionTest
unknown
plain_text
2 years ago
48 kB
3
Indexable
import { useContext, useRef, useState } from "react"; import { useNavigate } from "react-router-dom"; import { DiagnosticContext, useOutsideClick, useSessionStorage } from "../../helpers/functions"; import { competenceLevels, education, getCompetenceLevels, getEducation } from "../../services/londi-constants"; import Tabs from "../Tabs" import TestProcedure from "./TestProcedure"; const PromotionTest = () => { const { state, dispatch } = useContext(DiagnosticContext); const [selfAssessment, setSelfAssessment] = useSessionStorage('selfAssessment', false) const [checkMark, setCheckMark] = useSessionStorage('checkmark', false) const [testProcedure, setTestProcedure] = useState(true) const [classes, setClasses] = useState(true) 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 [educationError, setEducationError] = useState(false) const [readingError, setReadingError] = useState(false) const [writingError, setWritingError] = useState(false) const [countingError, setCountingError] = useState(false) const [secondTestReadingError, setSecondTestReadingError] = useState(false) const [secondTestWritingError, setSecondTestWritingError] = useState(false) const [secondTestCountingError, setSecondTestCountingError] = useState(false) const [thirdTestReadingError, setThirdTestReadingError] = useState(false) const [thirdTestWritingError, setThirdTestWritingError] = useState(false) const [thirdTestCountingError, setThirdTestCountingError] = useState(false) const [fourthTestReadingError, setFourthTestReadingError] = useState(false) const [fourthTestWritingError, setFourthTestWritingError] = useState(false) const [fourthTestCountingError, setFourthTestCountingError] = useState(false) const [selectReadingGroup, setSelectReadingGroup] = useSessionStorage('readingGroup', null) const [selectWritingGroup, setSelectWritingGroup] = useSessionStorage('writingGroup', null) const [selectCountingGroup, setSelectCountingGroup] = useSessionStorage('countingGroup', null) const { NotSpecified: _, ...specifiedCompetenceLevels } = competenceLevels; const wrapperRef = useRef(null); const readingRef = useRef() const writingRef = useRef() const educationRef = useRef() useOutsideClick(wrapperRef); const navigate = useNavigate(); const handleOnChange = (e) => { if (e.target.checked) { dispatch({ type: 'screenResultsEstimated', payload: true }) setSelfAssessment(true) setCheckMark(true) setTestProcedure(false) } else { dispatch({ type: 'screenResultsEstimated', payload: false }) setSelfAssessment(false) setCheckMark(false) setTestProcedure(true) } } const onSubmit = () => { console.log(state.readingResults !== undefined) if (!educationRef?.current?.value) { setEducationError(true) } else { dispatch({ type: "education", payload: Number(educationRef?.current?.value), }) } if (!selfAssessment && !readingRef?.current?.value) { setReadingError(true) } else { dispatch({ type: 'readingTest', payload: readingRef.current?.value === state?.readingResults ? state?.readingResults : JSON.parse(readingRef.current?.value).name }) dispatch({ type: 'readingTestId', payload: readingRef.current?.value === state?.readingResults ? state?.readingTestId : Number(JSON.parse(readingRef.current?.value).id) }) } if (!selfAssessment && !writingRef?.current?.value) { setWritingError(true) } else { dispatch({ type: 'writingTest', payload: writingRef.current?.value === state?.writingResults ? state?.writingResults : JSON.parse(writingRef.current?.value).name }) dispatch({ type: 'writingTestId', payload: writingRef.current?.value === state?.writingResults ? state?.writingTestId : Number(JSON.parse(writingRef.current?.value).id) }) } if (state.countingResults === undefined && !selfAssessment) { setCountingError(true) } if (selectReadingGroup === 2 && state?.readingSecondTestResults === undefined) { setSecondTestReadingError(true) } if (selectWritingGroup === 2 && state?.writingSecondTestResults === undefined) { setSecondTestWritingError(true) } if (selectCountingGroup === 2 && state?.countingSecondTestResults === undefined) { setSecondTestCountingError(true) } if ((educationRef?.current?.value.length !== 0 && ((readingRef?.current?.value.length !== 0 && state.readingResults !== undefined) || (writingRef?.current?.value.length !== 0 && state.writingResults !== undefined) || state.countingResults !== undefined)) ) { let redirect = true //if the second group is chosen the user must select second test if (selectReadingGroup === 2 && !state?.readingSecondTestResults) { redirect = false } if (selectWritingGroup === 2 && !state?.writingSecondTestResults) { redirect = false } if (selectCountingGroup === 2 && !state?.countingSecondTestResults) { redirect = false } console.log(redirect, 'redirect') if (redirect) navigate('/test-results'); } if (selfAssessment) { if (state.education === undefined) { setEducationError(true) } if (state.readingK1Results === undefined) { setReadingError(true) } if (state.readingK2Results === undefined) { setSecondTestReadingError(true) } if (state.readingK3Results === undefined) { setThirdTestReadingError(true) } if (state.readingK4Results === undefined) { setFourthTestReadingError(true) } if (state.writingK1Results === undefined) { setWritingError(true) } if (state.writingK2Results === undefined) { setSecondTestWritingError(true) } if (state.writingK3Results === undefined) { setThirdTestWritingError(true) } if (state.writingK4Results === undefined) { setFourthTestWritingError(true) } if (state.countingK1Results === undefined) { setCountingError(true) } if (state.countingK2Results === undefined) { setSecondTestCountingError(true) } if (state.countingK3Results === undefined) { setThirdTestCountingError(true) } if (state.countingK4Results === undefined) { setFourthTestCountingError(true) } if (state.education !== undefined) { let redirect = true if (checkedReading && (state?.readingK1Results === undefined || state?.readingK2Results === undefined || state?.readingK3Results === undefined || state?.readingK4Results === undefined)) { redirect = false } if (checkedWriting && (state.writingK1Results === undefined || state.writingK2Results === undefined || state.writingK3Results === undefined || state.writingK4Results === undefined)) { redirect = false } if (checkedCounting && (state.countingK1Results === undefined || state.countingK2Results === undefined || state.countingK3Results === undefined || state.countingK4Results === undefined)) { redirect = false } if (redirect) navigate('/funding-recomendations') } } } return ( <> <Tabs /> <div className="flex font-montserrat items-center flex-col justify-center w-full md:w-4/5 m-auto"> <h1 className="mainTitle mt-10">Testauswahl</h1> <div className="flex flex-col w-11/12"> <p className="text-lg lg:text-xl">Bitte wählen Sie aus, welche Testverfahren Sie verwendet haben.</p> <div className="flex items-center mt-6"> <input checked={checkMark} onChange={(e) => handleOnChange(e)} id="green-checkbox" type="checkbox" className="w-8 h-8 text-green-400 bg-gray-100 rounded border-gray-300 focus:ring-transparent" /> <label htmlFor="green-checkbox" className="ml-2 text-base"> Ich habe keine Tests gemacht, aber ich bin eine Fachkraft, die in der Lage ist, die Fertigkeiten des Kindes im Lesen, Schreiben und/oder Rechnen selber einzuschätzen. </label> </div> </div> <div className={`${testProcedure ? 'justify-around' : 'justify-between'} flex px-5 flex-wrap w-full mt-6`}> <div className="flex flex-col"> <p className="text-lg font-semibold">Angaben zum Kind</p> <div className="options-container"> <label for="education-select">Bildungsbereich</label> <select ref={educationRef} name="education" className="btn-options" id="education-select"> <option className={`diagnostic-options `} hidden defaultValue=''></option> {Object.values(education).map((value, index) => { return ( <option className="diagnostic-options" value={value} selected={state?.education === value}>{getEducation(value)}</option> ); })} </select> {educationError && <p className="text-red-500 text-sm">Feld erforderlich</p>} </div> </div> {selfAssessment ? <> <div className="flex flex-col"> <p className="text-lg font-semibold">Selbsteinschätzung</p> <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> <div className={`${disableReading && 'opacity-25'} options-container`}> <h5 className="text-lg mt-5">K1</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: 'readingK1Options' })} id="dropdownDefault" data-dropdown-toggle="dropdown" className={`${state?.readingK1Results ? 'justify-between' : 'justify-end'} btn-options`} type="button">{getCompetenceLevels(state?.readingK1Results?.result)}<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 === 'readingK1Options' && <div id="dropdown" ref={wrapperRef} className="dropdown-container"> <ul className="dropdown" aria-labelledby="dropdownDefault"> <li> {Object.values(specifiedCompetenceLevels).map((el, index) => { return ( <button key={index} onClick={() => { dispatch({ type: 'readingK1', payload: el }) setCheckedReading(true) }} className="diagnostic-options"> {getCompetenceLevels(el)} </button> ); })} </li> </ul> </div>} {readingError && <p className="text-red-500 ml-5 text-sm">Feld erforderlich</p>} </div> <div className={`${disableReading && 'opacity-25'} options-container`}> <h5 className="text-lg mt-5">K2</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: 'readingK2Options' })} id="dropdownDefault" data-dropdown-toggle="dropdown" className={`${state?.readingK2Results ? 'justify-between' : 'justify-end'} btn-options`} type="button">{getCompetenceLevels(state?.readingK2Results?.result)}<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 === 'readingK2Options' && <div id="dropdown" ref={wrapperRef} className="dropdown-container"> <ul className="dropdown" aria-labelledby="dropdownDefault"> <li> {Object.values(competenceLevels).map((el, index) => { return ( <button key={index} onClick={() => { dispatch({ type: 'readingK2', payload: el }) setCheckedReading(true) }} className="diagnostic-options"> {getCompetenceLevels(el)} </button> ); })} </li> </ul> </div>} {secondTestReadingError && <p className="text-red-500 ml-5 text-sm">Feld erforderlich</p>} </div> <div className={`${disableReading && 'opacity-25'} options-container`}> <h5 className="text-lg mt-5">K3</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: 'readingK3Options' })} id="dropdownDefault" data-dropdown-toggle="dropdown" className={`${state?.readingK3Results ? 'justify-between' : 'justify-end'} btn-options`} type="button">{getCompetenceLevels(state?.readingK3Results?.result)}<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 === 'readingK3Options' && <div id="dropdown" ref={wrapperRef} className="dropdown-container"> <ul className="dropdown" aria-labelledby="dropdownDefault"> <li> {Object.values(specifiedCompetenceLevels).map((el, index) => { return ( <button key={index} onClick={() => { dispatch({ type: 'readingK3', payload: el }) setCheckedReading(true) }} className="diagnostic-options"> {getCompetenceLevels(el)} </button> ); })} </li> </ul> </div>} {thirdTestReadingError && <p className="text-red-500 ml-5 text-sm">Feld erforderlich</p>} </div> <div className={`${disableReading && 'opacity-25'} options-container`}> <h5 className="text-lg mt-5">K4</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: 'readingK4Options' })} id="dropdownDefault" data-dropdown-toggle="dropdown" className={`${state?.readingK4Results ? 'justify-between' : 'justify-end'} btn-options`} type="button">{getCompetenceLevels(state?.readingK4Results?.result)}<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 === 'readingK4Options' && <div id="dropdown" ref={wrapperRef} className="dropdown-container"> <ul className="dropdown" aria-labelledby="dropdownDefault"> <li> {Object.values(competenceLevels).map((el, index) => { return ( <button key={index} onClick={() => { dispatch({ type: 'readingK4', payload: el }) setCheckedReading(true) }} className="diagnostic-options"> {getCompetenceLevels(el)} </button> ); })} </li> </ul> </div>} {fourthTestReadingError && <p className="text-red-500 ml-5 text-sm">Feld erforderlich</p>} </div> </div> <div className="flex flex-col justify-end"> <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> <div className={`${disableWriting && 'opacity-25'} options-container`}> <h5 className="text-lg mt-5">K1</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: 'writingK1Options' })} id="dropdownDefault" data-dropdown-toggle="dropdown" className={`${state?.writingK1Results ? 'justify-between' : 'justify-end'} btn-options`} type="button">{getCompetenceLevels(state?.writingK1Results?.result)}<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 === 'writingK1Options' && <div id="dropdown" ref={wrapperRef} className="dropdown-container"> <ul className="dropdown" aria-labelledby="dropdownDefault"> <li> {Object.values(specifiedCompetenceLevels).map((el, index) => { return ( <button key={index} onClick={() => { dispatch({ type: 'writingK1', payload: el }) setCheckedWriting(true) }} className="diagnostic-options"> {getCompetenceLevels(el)} </button> ); })} </li> </ul> </div>} {writingError && <p className="text-red-500 ml-5 text-sm">Feld erforderlich</p>} </div> <div className={`${disableWriting && 'opacity-25'} options-container`}> <h5 className="text-lg mt-5">K2</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: 'writingK2Options' })} id="dropdownDefault" data-dropdown-toggle="dropdown" className={`${state?.writingK2Results ? 'justify-between' : 'justify-end'} btn-options`} type="button">{getCompetenceLevels(state?.writingK2Results?.result)}<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 === 'writingK2Options' && <div id="dropdown" ref={wrapperRef} className="dropdown-container"> <ul className="dropdown" aria-labelledby="dropdownDefault"> <li> {Object.values(competenceLevels).map((el, index) => { return ( <button key={index} onClick={() => { dispatch({ type: 'writingK2', payload: el }) setCheckedWriting(true) }} className="diagnostic-options"> {getCompetenceLevels(el)} </button> ); })} </li> </ul> </div>} {secondTestWritingError && <p className="text-red-500 ml-5 text-sm">Feld erforderlich</p>} </div> <div className={`${disableWriting && 'opacity-25'} options-container`}> <h5 className="text-lg mt-5">K3</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: 'writingK3Options' })} id="dropdownDefault" data-dropdown-toggle="dropdown" className={`${state?.writingK3Results ? 'justify-between' : 'justify-end'} btn-options`} type="button">{getCompetenceLevels(state?.writingK3Results?.result)}<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 === 'writingK3Options' && <div id="dropdown" ref={wrapperRef} className="dropdown-container"> <ul className="dropdown" aria-labelledby="dropdownDefault"> <li> {Object.values(specifiedCompetenceLevels).map((el, index) => { return ( <button key={index} onClick={() => { dispatch({ type: 'writingK3', payload: el }) setCheckedWriting(true) }} className="diagnostic-options"> {getCompetenceLevels(el)} </button> ); })} </li> </ul> </div>} {thirdTestWritingError && <p className="text-red-500 ml-5 text-sm">Feld erforderlich</p>} </div> <div className={`${disableWriting && 'opacity-25'} options-container`}> <h5 className="text-lg mt-5">K4</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: 'writingK4Options' })} id="dropdownDefault" data-dropdown-toggle="dropdown" className={`${state?.writingK4Results ? 'justify-between' : 'justify-end'} btn-options`} type="button">{getCompetenceLevels(state?.writingK4Results?.result)}<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 === 'writingK4Options' && <div id="dropdown" ref={wrapperRef} className="dropdown-container"> <ul className="dropdown" aria-labelledby="dropdownDefault"> <li> {Object.values(competenceLevels).map((el, index) => { return ( <button key={index} onClick={() => { dispatch({ type: 'writingK4', payload: el }) setCheckedReading(true) }} className="diagnostic-options"> {getCompetenceLevels(el)} </button> ); })} </li> </ul> </div>} {fourthTestWritingError && <p className="text-red-500 ml-5 text-sm">Feld erforderlich</p>} </div> </div> <div className="flex flex-col justify-end"> <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> <div className={`${disableCounting && 'opacity-25'} options-container`}> <h5 className="text-lg mt-5">K1</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: 'countingK1Options' })} id="dropdownDefault" data-dropdown-toggle="dropdown" className={`${state?.countingK1Results ? 'justify-between' : 'justify-end'} btn-options`} type="button">{getCompetenceLevels(state?.countingK1Results?.result)}<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 === 'countingK1Options' && <div id="dropdown" ref={wrapperRef} className="dropdown-container"> <ul className="dropdown" aria-labelledby="dropdownDefault"> <li> {Object.values(specifiedCompetenceLevels).map((el, index) => { return ( <button key={index} onClick={() => { dispatch({ type: 'countingK1', payload: el }) setCheckedCounting(true) }} className="diagnostic-options"> {getCompetenceLevels(el)} </button> ); })} </li> </ul> </div>} {countingError && <p className="text-red-500 ml-5 text-sm">Feld erforderlich</p>} </div> <div className={`${disableCounting && 'opacity-25'} options-container`}> <h5 className="text-lg mt-5">K2</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: 'countingK2Options' })} id="dropdownDefault" data-dropdown-toggle="dropdown" className={`${state?.countingK2Results ? 'justify-between' : 'justify-end'} btn-options`} type="button">{getCompetenceLevels(state?.countingK2Results?.result)}<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 === 'countingK2Options' && <div id="dropdown" ref={wrapperRef} className="dropdown-container"> <ul className="dropdown" aria-labelledby="dropdownDefault"> <li> {Object.values(competenceLevels).map((el, index) => { return ( <button key={index} onClick={() => { dispatch({ type: 'countingK2', payload: el }) setCheckedCounting(true) }} className="diagnostic-options"> {getCompetenceLevels(el)} </button> ); })} </li> </ul> </div>} {secondTestCountingError && <p className="text-red-500 ml-5 text-sm">Feld erforderlich</p>} </div> <div className={`${disableCounting && 'opacity-25'} options-container`}> <h5 className="text-lg mt-5">K3</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: 'countingK3Options' })} id="dropdownDefault" data-dropdown-toggle="dropdown" className={`${state?.countingK3Results ? 'justify-between' : 'justify-end'} btn-options`} type="button">{getCompetenceLevels(state?.countingK3Results?.result)}<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 === 'countingK3Options' && <div id="dropdown" ref={wrapperRef} className="dropdown-container"> <ul className="dropdown" aria-labelledby="dropdownDefault"> <li> {Object.values(specifiedCompetenceLevels).map((el, index) => { return ( <button key={index} onClick={() => { dispatch({ type: 'countingK3', payload: el }) setCheckedCounting(true) }} className="diagnostic-options"> {getCompetenceLevels(el)} </button> ); })} </li> </ul> </div>} {thirdTestCountingError && <p className="text-red-500 ml-5 text-sm">Feld erforderlich</p>} </div> <div className={`${disableCounting && 'opacity-25'} options-container`}> <h5 className="text-lg mt-5">K4</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: 'countingK4Options' })} id="dropdownDefault" data-dropdown-toggle="dropdown" className={`${state?.countingK4Results ? 'justify-between' : 'justify-end'} btn-options`} type="button">{getCompetenceLevels(state?.countingK4Results?.result)}<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 === 'countingK4Options' && <div id="dropdown" ref={wrapperRef} className="dropdown-container"> <ul className="dropdown" aria-labelledby="dropdownDefault"> <li> {Object.values(competenceLevels).map((el, index) => { return ( <button key={index} onClick={() => { dispatch({ type: 'countingK4', payload: el }) setCheckedCounting(true) }} className="diagnostic-options"> {getCompetenceLevels(el)} </button> ); })} </li> </ul> </div>} {fourthTestCountingError && <p className="text-red-500 ml-5 text-sm">Feld erforderlich</p>} </div> </div> </> : <TestProcedure writingRef={writingRef} readingRef={readingRef} selectCountingGroup={selectCountingGroup} setSelectCountingGroup={setSelectCountingGroup} selectReadingGroup={selectReadingGroup} setSelectReadingGroup={setSelectReadingGroup} selectWritingGroup={selectWritingGroup} setSelectWritingGroup={setSelectWritingGroup} secondTestReadingError={secondTestReadingError} secondTestWritingError={secondTestWritingError} secondTestCountingError={secondTestCountingError} readingError={readingError} writingError={writingError} countingError={countingError} testProcedure={testProcedure} />} </div> <button onClick={onSubmit} className="text-white bg-mainBlue w-60 text-xl mb-10 h-14 mt-16"> Weiter </button> </div> </> ) } export default PromotionTest
Editor is loading...