PromotionTest
unknown
plain_text
2 years ago
43 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] = useState(false)
const [testProcedure, setTestProcedure] = 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 [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);
useOutsideClick(wrapperRef);
const navigate = useNavigate();
const handleOnChange = (e) => {
if (e.target.checked) {
dispatch({ type: 'screenResultsEstimated', payload: true })
setSelfAssessment(true)
setTestProcedure(false)
} else {
dispatch({ type: 'screenResultsEstimated', payload: false })
setSelfAssessment(false)
setTestProcedure(true)
}
}
const onSubmit = () => {
if (state.education === undefined) {
setEducationError(true)
}
if (state.readingResults === undefined && !disableReading) {
setReadingError(true)
}
if (state.writingResults === undefined && !disableWriting) {
setWritingError(true)
}
if (state.countingResults === undefined && !disableCounting) {
setCountingError(true)
}
if (state.readingResults !== undefined && state?.readingSecondTestResults === undefined) {
setSecondTestReadingError(true)
}
if (state.writingResults !== undefined && state?.writingSecondTestResults === undefined) {
setSecondTestWritingError(true)
}
if (state.countingResults !== undefined && state?.countingSecondTestResults === undefined) {
setSecondTestCountingError(true)
}
if (state.readingResults !== undefined || state.writingResults !== undefined || state.countingResults !== undefined) {
setCountingError(false)
setWritingError(false)
setReadingError(false)
}
if (state.education !== undefined && (state.readingResults !== undefined || state.writingResults !== undefined
|| state.countingResults !== undefined) &&
((state.readingResults !== undefined && state?.readingSecondTestResults !== undefined)
|| (state.writingResults !== undefined && state?.writingSecondTestResults !== undefined)
|| (state.countingResults !== undefined && state?.countingSecondTestResults !== undefined))) {
navigate(selfAssessment ? '/funding-recomendations' : "/test-results");
}
}
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 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">
<h5 className="text-lg mt-5">Bildungsbereich</h5>
<button onClick={() => dispatch({ type: 'educationOptions' })} id="dropdownDefault" data-dropdown-toggle="dropdown"
className='btn-options' type="button"><div className="truncate">
{state?.education && getEducation(state?.education)}</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 === 'educationOptions' &&
<div id="dropdown" ref={wrapperRef} className="dropdown-container">
<ul className="dropdown" aria-labelledby="dropdownDefault">
{Object.values(education).map((value, index) => {
return (
<button key={index}
onClick={() =>
dispatch({
type: "education",
payload: value,
})
}
className="diagnostic-options">
{getEducation(value)}
</button>
);
})}
</ul>
</div>
}
{educationError && <p className="text-red-500 text-sm">Feld erforderlich</p>}
</div>
</div>
<TestProcedure 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} />
{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>}
</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>}
</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>}
</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>}
</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>}
</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>}
</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>}
</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>}
</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>}
</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>}
</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>}
</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>}
</div>
</div> </>}
</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...