64 lines
2.0 KiB
React
64 lines
2.0 KiB
React
|
import { useEffect, useRef, useState } from "react";
|
||
|
|
import styles from "../../styles/room/input.module.scss";
|
||
|
|
import { parseClassName } from "../../utils/utils.js";
|
||
|
|
|
||
|
|
export default function CorrectionInput({ inputData, idInput, idExo, idCalcul, correctionMenu, setCorrectionMenu }) {
|
||
|
|
const [result, setResult] = useState({
|
||
|
|
correction: inputData.correction,
|
||
|
|
isCorrect: inputData.isCorrect,
|
||
|
|
});
|
||
|
|
return (
|
||
|
|
<div style={{ position: "relative", minHeight: "30px" }}>
|
||
|
|
{correctionMenu && (
|
||
|
|
<div className={styles["correction-menu"]}>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={result.correction}
|
||
|
|
onChange={(e) => {
|
||
|
|
setResult({
|
||
|
|
correction: e.target.value,
|
||
|
|
isCorrect: inputData.value == e.target.value,
|
||
|
|
});
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<button
|
||
|
|
style={{ background: result.isCorrect ? "red" : "grey" }}
|
||
|
|
onClick={() => {
|
||
|
|
setResult({ ...result, isCorrect: true });
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
V
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
style={{ background: !result.isCorrect ? "red" : "grey" }}
|
||
|
|
onClick={() => {
|
||
|
|
setResult({ ...result, isCorrect: false });
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
F
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<div
|
||
|
|
/* ref={ref} */
|
||
|
|
className={parseClassName([
|
||
|
|
styles["input"],
|
||
|
|
result.isCorrect ? styles["valid"] : styles["invalid"],
|
||
|
|
,
|
||
|
|
result.isCorrect == null ? styles["withoutCorrection"] : undefined,
|
||
|
|
])}
|
||
|
|
data-idexo={idExo}
|
||
|
|
data-idinput={idInput}
|
||
|
|
data-idcalcul={idCalcul}
|
||
|
|
data-iscorrect={result.isCorrect}
|
||
|
|
data-correction = {result.correction}
|
||
|
|
id="correctionInput"
|
||
|
|
style={{ cursor: "pointer" }}
|
||
|
|
onClick={setCorrectionMenu}
|
||
|
|
>
|
||
|
|
{inputData.value} {result.isCorrect == false && result.correction != "" && `-> ${result.correction}`}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|