promotion test

mail@pastecode.io avatar
unknown
plain_text
2 years ago
34 kB
2
Indexable
Never
import { useContext, useRef, useState } from "react";
import { Link } from "react-router-dom";
import { competenceFundingOptions } from "../../helpers/constants";
import { DiagnosticContext, useOutsideClick, useSessionStorage } from "../../helpers/functions";
import ChildDetails from "../ChildDetails";
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 wrapperRef = useRef(null);
    useOutsideClick(wrapperRef);
 
    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)
        }
    }

    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`}>
                    <ChildDetails />
                   <TestProcedure 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">{state?.readingK1Results}<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>
                                            {competenceFundingOptions.map((el, index) => {
                                                return (
                                                    <button key={index} onClick={() => {
                                                        dispatch({ type: 'readingK1', payload: el })
                                                        setCheckedReading(true)
                                                    }} className="diagnostic-options">{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">{state?.readingK2Results}<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>
                                            {competenceFundingOptions.map((el, index) => {
                                                return (
                                                    <button key={index} onClick={() => {
                                                        setCheckedReading(true)
                                                        dispatch({ type: 'readingK2', payload: el })
                                                    }} className="diagnostic-options">{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">{state?.readingK3Results}<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>
                                            {competenceFundingOptions.map((el, index) => {
                                                return (
                                                    <button key={index} onClick={() => {
                                                        dispatch({ type: 'readingK3', payload: el })
                                                        setCheckedReading(true)
                                                    }} className="diagnostic-options">{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">{state?.readingK4Results}<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>
                                            {competenceFundingOptions.map((el, index) => {
                                                return (
                                                    <button key={index} onClick={() => {
                                                        dispatch({ type: 'readingK4', payload: el })
                                                        setCheckedReading(true)
                                                    }} className="diagnostic-options">{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">{state?.writingK1Results}<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>
                                                {competenceFundingOptions.map((el, index) => {
                                                    return (
                                                        <button key={index} onClick={() => {
                                                            setCheckedWriting(true)
                                                            dispatch({ type: 'writingK1', payload: el })
                                                        }} className="diagnostic-options">{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">{state?.writingK2Results}<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>
                                                {competenceFundingOptions.map((el, index) => {
                                                    return (
                                                        <button key={index} onClick={() => {
                                                            dispatch({ type: 'writingK2', payload: el })
                                                            setCheckedWriting(true)
                                                        }} className="diagnostic-options">{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">{state?.writingK3Results}<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>
                                                {competenceFundingOptions.map((el, index) => {
                                                    return (
                                                        <button key={index} onClick={() => {
                                                            dispatch({ type: 'writingK3', payload: el })
                                                            setCheckedWriting(true)
                                                        }} className="diagnostic-options">{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">{state?.writingK4Results}<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>
                                                {competenceFundingOptions.map((el, index) => {
                                                    return (
                                                        <button key={index} onClick={() => {
                                                            dispatch({ type: 'writingK4', payload: el })
                                                            setCheckedWriting(true)
                                                        }} className="diagnostic-options">{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">{state?.countingK1Results}<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>
                                                {competenceFundingOptions.map((el, index) => {
                                                    return (
                                                        <button key={index} onClick={() => {
                                                            dispatch({ type: 'countingK1', payload: el })
                                                            setCheckedCounting(true)
                                                        }} className="diagnostic-options">{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">{state?.countingK2Results}<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>
                                                {competenceFundingOptions.map((el, index) => {
                                                    return (
                                                        <button key={index} onClick={() => {
                                                            setCheckedCounting(true)
                                                            dispatch({ type: 'countingK2', payload: el })
                                                        }} className="diagnostic-options">{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">{state?.countingK3Results}<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>
                                                {competenceFundingOptions.map((el, index) => {
                                                    return (
                                                        <button key={index} onClick={() => {
                                                            dispatch({ type: 'countingK3', payload: el })
                                                            setCheckedCounting(true)
                                                        }} className="diagnostic-options">{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">{state?.countingK4Results}<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>
                                                {competenceFundingOptions.map((el, index) => {
                                                    return (
                                                        <button key={index} onClick={() => {
                                                            dispatch({ type: 'countingK4', payload: el })
                                                            setCheckedCounting(true)
                                                        }} className="diagnostic-options">{el}</button>
                                                    )
                                                })}
                                            </li>
                                        </ul>
                                    </div>}
                            </div>
                        </div> </>}
                </div>
                <button className="text-white bg-mainBlue w-60 text-xl mb-10 h-14 mt-16">
                    <Link to={selfAssessment ? '/funding-recomendations' : "/test-results"}>Weiter</Link>
                </button>
            </div>
        </>
    )
}

export default PromotionTest