TestResults
unknown
plain_text
2 years ago
25 kB
3
Indexable
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";
import { categories } from "../../services/londi-constants";
const TestResults = () => {
const { state, dispatch } = useContext(DiagnosticContext);
const wrapperRef = useRef(null);
useOutsideClick(wrapperRef);
const resultsReading = getTestFields(state.readingTestId).map((el, i) => {
return { ...el, result: state?.resultsReading?.[i] }
})
const secondResultsReading = getTestFields(state.readingSecondTestId).map((el, i) => {
return { ...el, result: state?.resultsSecondReading?.[i] }
})
const resultsWriting = getTestFields(state.writingTestId).map((el, i) => {
return { ...el, result: state?.resultsWriting?.[i] }
})
const secondResultsWriting = getTestFields(state.writingSecondTestId).map((el, i) => {
return { ...el, result: state?.resultsSecondWriting?.[i] }
})
const resultsCounting = getTestFields(state.countingTestId).map((el, i) => {
return { ...el, result: state?.resultsCounting?.[i] }
})
const secondResultsCounting = getTestFields(state.countingSecondTestId).map((el, i) => {
return { ...el, result: state?.resultsSecondCounting?.[i] }
})
const fundingMatchingRecomendations = {
education: state.education,
screeningResults: [
{
category: categories.Reading,
testId: state.readingTestId,
results: resultsReading,
},
{
category: categories.Reading,
testId: state.readingSecondTestId,
results: secondResultsReading,
},
{
category: categories.Writing,
testId: state.writingTestId,
results: resultsWriting,
},
{
category: categories.Writing,
testId: state.writingSecondTestId,
results: secondResultsWriting,
},
{
category: categories.Math,
testId: state.countingTestId,
results: resultsCounting,
},
{
category: categories.Math,
testId: state.countingSecondTestId,
results: secondResultsCounting,
},
]
}
//here is all the data that needed for funding recomendations
// console.log(getFundingMatching(fundingMatchingRecomendations))
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 TestResultsEditor is loading...