PromotionTest

mail@pastecode.io avatar
unknown
plain_text
2 years ago
48 kB
0
Indexable
Never
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