TestResults.jsx

mail@pastecode.io avatar
unknown
plain_text
2 years ago
23 kB
2
Indexable
Never
import { useContext, useRef } from "react"
import { DiagnosticContext, useOutsideClick } from "../../helpers/functions";
import Tabs from "../Tabs"
import { getTestFields } from "../../services/londi-suggestions";
import { value } from "../../helpers/constants";

const TestResults = () => {
    const { state, dispatch } = useContext(DiagnosticContext);
    const wrapperRef = useRef(null);
    useOutsideClick(wrapperRef);
   
    return (
        <>
            <Tabs />
            <div className="flex font-montserrat items-center flex-col justify-center m-auto w-full">
                <h1 className="text-mainBlue text-3xl font-semibold mt-10 md:text-5xl mb-3">Testergebnisse</h1>
                <div className="flex flex-col w-11/12">
                    <p className="text-lg lg:text-xl">Bitte geben Sie die Ergebnisse der Tests ein.</p>
                    <div className="flex mt-7">
                        <div className="flex flex-col w-full">
                            {state.readingResults && <p className="text-2xl font-semibold">Lesen</p>}
                            <div className="flex flex-wrap sm:flex-nowrap">
                                <div className="flex flex-col ml-1 w-full">
                                    <p className="text-2xl mt-4 font-semibold">{state.readingResults}</p>
                                    <div className={` ${getTestFields(state.readingTestId).length > 5 ? 'flex-wrap' : 'flex-col'} flex flex-row  justify-between `}>
                                        {getTestFields(state.readingTestId).map((el, index) => {
                                            return (
                                                <div key={index} className="flex flex-col ">
                                                    <div className="mt-4" key={index}>
                                                        <p>Komeptenzstufe {el.competenceLevel}</p>
                                                        <p className="w-60">{el.title}</p>
                                                        <div className="flex">
                                                            <button onClick={() => dispatch({ type: 'resultsReadingOptions', payload: { id: index } })} id="dropdownDefault" data-dropdown-toggle="dropdown"
                                                                className='btn-options w-24 h-8' type="button"><div className="truncate">{state?.resultsReading?.[index]}</div> <svg className="ml-2 w-4 h-4 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 === 'resultsReadingOptions' && state?.selectedReadingValue === index &&
                                                                <div id="dropdown" ref={wrapperRef} className="dropdown-container right-auto">
                                                                    <ul className="dropdown overflow-y-auto h-96" aria-labelledby="dropdownDefault">
                                                                        {value.map((el, i) => {
                                                                            return (
                                                                                <li key={i}>
                                                                                    <button onClick={() => dispatch({ type: 'resultsReading', payload: { keyReading: index, valueReading: el } })} className="diagnostic-options">{el}</button>
                                                                                </li>
                                                                            )
                                                                        })}
                                                                    </ul>
                                                                </div>
                                                            }
                                                            <p className="ml-2 text-lg flex items-center">Prozentrang</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            )
                                        })}
                                    </div>
                                </div>
                                <div className="flex flex-col ml-1 w-full">
                                    <p className="text-2xl mt-4 font-semibold">{state.readingSecondTestResults}</p>
                                    <div className={`${getTestFields(state.readingSecondTestId).length > 5 ? 'flex-wrap' : 'flex-col'} flex flex-row  justify-between`}>
                                        {getTestFields(state.readingSecondTestId).map((el, index) => {
                                            return (
                                                <div key={index} className="flex flex-col ">
                                                    <div className="mt-4" key={index}>
                                                        <p>Komeptenzstufe {el.competenceLevel}</p>
                                                        <p className="w-60">{el.title}</p>
                                                        <div className="flex">
                                                            <button onClick={() => dispatch({ type: 'resultsSecondReadingOptions', payload: { id: index } })} id="dropdownDefault" data-dropdown-toggle="dropdown"
                                                                className='btn-options w-24 h-8' type="button"><div className="truncate">{state?.resultsSecondReading?.[index]}</div> <svg className="ml-2 w-4 h-4  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 === 'resultsSecondReadingOptions' && state?.selectedSecondReadingValue === index &&
                                                                <div id="dropdown" ref={wrapperRef} className="dropdown-container right-auto">
                                                                    <ul className="dropdown overflow-y-auto h-96" aria-labelledby="dropdownDefault">
                                                                        {value.map((el, i) => {
                                                                            return (
                                                                                <li key={i}>
                                                                                    <button onClick={() => dispatch({ type: 'resultsSecondReading', payload: { keySecondReading: index, valueSecondReading: el } })} className="diagnostic-options">{el}</button>
                                                                                </li>
                                                                            )
                                                                        })}
                                                                    </ul>
                                                                </div>
                                                            }
                                                            <p className="ml-2 text-lg flex items-center">Prozentrang</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            )
                                        })}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="flex mt-7">
                        <div className="flex flex-col w-full">
                            {state.writingResults && <p className="text-2xl font-semibold">Schreiben</p>}
                            <div className="flex flex-wrap sm:flex-nowrap">
                                <div className="flex flex-col ml-1 w-full">
                                    <p className="text-2xl mt-4 font-semibold">{state.writingResults}</p>
                                    <div className={`${getTestFields(state.writingTestId).length > 5 ? 'flex-wrap' : 'flex-col'} flex flex-row justify-between`}>
                                        {getTestFields(state.writingTestId).map((el, index) => {
                                            return (
                                                <div key={index} className="flex flex-col ">
                                                    <div className="mt-4" key={index}>
                                                        <p>Komeptenzstufe {el.competenceLevel}</p>
                                                        <p className="w-60">{el.title}</p>
                                                        <div className="flex">
                                                            <button onClick={() => dispatch({ type: 'resultsWritingOptions', payload: { id: index } })} id="dropdownDefault" data-dropdown-toggle="dropdown"
                                                                className='btn-options w-24 h-8' type="button"><div className="truncate">{state?.resultsWriting?.[index]}</div> <svg className="ml-2 w-4 h-4  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 === 'resultsWritingOptions' && state?.selectedWritingValue === index &&
                                                                <div id="dropdown" ref={wrapperRef} className="dropdown-container right-auto">
                                                                    <ul className="dropdown overflow-y-auto h-96" aria-labelledby="dropdownDefault">
                                                                        {value.map((el, i) => {
                                                                            return (
                                                                                <li key={i}>
                                                                                    <button onClick={() => dispatch({ type: 'resultsWriting', payload: { keyWriting: index, valueWriting: el } })} className="diagnostic-options">{el}</button>
                                                                                </li>
                                                                            )
                                                                        })}
                                                                    </ul>
                                                                </div>
                                                            }
                                                            <p className="ml-2 text-lg flex items-center">Prozentrang</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            )
                                        })}
                                    </div>
                                </div>
                                <div className="flex flex-col ml-1 w-full">
                                    <p className="text-2xl mt-4 font-semibold">{state.writingSecondTestResults}</p>
                                    <div className={`${getTestFields(state.writingTestId).length > 5 ? 'flex-wrap' : 'flex-col'} flex flex-row  justify-between`}>
                                        {getTestFields(state.writingSecondTestId).map((el, index) => {
                                            return (
                                                <div key={index} className="flex flex-col ">
                                                    <div className="mt-4" key={index}>
                                                        <p>Komeptenzstufe {el.competenceLevel}</p>
                                                        <p className="w-60">{el.title}</p>
                                                        <div className="flex">
                                                            <button onClick={() => dispatch({ type: 'resultsSecondWritingOptions', payload: { id: index } })} id="dropdownDefault" data-dropdown-toggle="dropdown"
                                                                className='btn-options w-24 h-8' type="button"><div className="truncate">{state?.resultsSecondWriting?.[index]}</div> <svg className="ml-2 w-4 h-4  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 === 'resultsSecondWritingOptions' && state?.selectedSecondWritingValue === index &&
                                                                <div id="dropdown" ref={wrapperRef} className="dropdown-container right-auto">
                                                                    <ul className="dropdown overflow-y-auto h-96" aria-labelledby="dropdownDefault">
                                                                        {value.map((el, i) => {
                                                                            return (
                                                                                <li key={i}>
                                                                                    <button onClick={() => dispatch({ type: 'resultsSecondWriting', payload: { keySecondWriting: index, valueSecondWriting: el } })} className="diagnostic-options">{el}</button>
                                                                                </li>
                                                                            )
                                                                        })}
                                                                    </ul>
                                                                </div>
                                                            }
                                                            <p className="ml-2 text-lg flex items-center">Prozentrang</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            )
                                        })}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="flex mt-7">
                        <div className="flex flex-col w-full">
                            {state.countingResults && <p className="text-2xl font-semibold">Rechnen</p>}
                            <div className="flex flex-wrap sm:flex-nowrap">
                                <div className="flex flex-col ml-1 w-full">
                                    <p className="text-2xl mt-4 font-semibold">{state.countingResults}</p>
                                    <div className={`${getTestFields(state.countingTestId).length > 5 ? 'flex-wrap' : 'flex-col'} flex flex-row justify-between`}>
                                        {getTestFields(state.countingTestId).map((el, index) => {
                                            return (
                                                <div key={index} className="flex flex-col ">
                                                    <div className="mt-4" key={index}>
                                                        <p>Komeptenzstufe {el.competenceLevel}</p>
                                                        <p className="w-60">{el.title}</p>
                                                        <div className="flex">
                                                            <button onClick={() => dispatch({ type: 'resultsCountingOptions', payload: { id: index } })} id="dropdownDefault" data-dropdown-toggle="dropdown"
                                                                className='btn-options w-24 h-8' type="button"><div className="truncate">{state?.resultsCounting?.[index]}</div> <svg className="ml-2 w-4 h-4  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 === 'resultsCountingOptions' && state?.selectedCountingValue === index &&
                                                                <div id="dropdown" ref={wrapperRef} className="dropdown-container right-auto">
                                                                    <ul className="dropdown overflow-y-auto h-96" aria-labelledby="dropdownDefault">
                                                                        {value.map((el, i) => {
                                                                            return (
                                                                                <li key={i}>
                                                                                    <button onClick={() => dispatch({ type: 'resultsCounting', payload: { keyCounting: index, valueCounting: el } })} className="diagnostic-options">{el}</button>
                                                                                </li>
                                                                            )
                                                                        })}
                                                                    </ul>
                                                                </div>
                                                            }
                                                            <p className="ml-2 text-lg flex items-center">Prozentrang</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            )
                                        })}
                                    </div>
                                </div>
                                <div className="flex flex-col ml-1 w-full">
                                    <p className="text-2xl mt-4 font-semibold">{state.countingSecondTestResults}</p>
                                    <div className={`${getTestFields(state.countingSecondTestId).length > 5 ? 'flex-wrap' : 'flex-col'} flex flex-row justify-between`}>
                                        {getTestFields(state.countingSecondTestId).map((el, index) => {
                                            return (
                                                <div key={index} className="flex flex-col ">
                                                    <div className="mt-4" key={index}>
                                                        <p>Komeptenzstufe {el.competenceLevel}</p>
                                                        <p className="w-60">{el.title}</p>
                                                        <div className="flex">
                                                            <button onClick={() => dispatch({ type: 'resultsSecondCountingOptions', payload: { id: index } })} id="dropdownDefault" data-dropdown-toggle="dropdown"
                                                                className='btn-options w-24 h-8' type="button"><div className="truncate">{state?.resultsSecondCounting?.[index]}</div> <svg className="ml-2 w-4 h-4  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 === 'resultsSecondCountingOptions' && state?.selectedSecondCountingValue === index &&
                                                                <div id="dropdown" ref={wrapperRef} className="dropdown-container right-auto">
                                                                    <ul className="dropdown overflow-y-auto h-96" aria-labelledby="dropdownDefault">
                                                                        {value.map((el, i) => {
                                                                            return (
                                                                                <li key={i}>
                                                                                    <button onClick={() => dispatch({ type: 'resultsSecondCounting', payload: { keySecondCounting: index, valueSecondCounting: el } })} className="diagnostic-options">{el}</button>
                                                                                </li>
                                                                            )
                                                                        })}
                                                                    </ul>
                                                                </div>}
                                                            <p className="ml-2 text-lg flex items-center">Prozentrang</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            )
                                        })}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <a href="/funding-recomendations"><button className="text-white bg-mainBlue text-lg w-32 h-10 sm:w-60 sm:text-xl sm:h-14 my-10">Weiter</button></a>
            </div>
        </>
    )
}

export default TestResults