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 PromotionTestEditor is loading...