promotion test
unknown
plain_text
3 years ago
34 kB
5
Indexable
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 PromotionTestEditor is loading...