Spaces:
Sleeping
Sleeping
File size: 2,373 Bytes
44e5f85 f839bd4 44e5f85 f839bd4 44e5f85 f839bd4 44e5f85 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
import React from "react";
// One graded row: a PASS/FAIL toggle (kind="verdict") or a numeric count input
// (kind="count"), plus a rationale textarea. Used by EventCard, VideoLevelAxes,
// and the Training page's qualification quiz - the single place PASS/FAIL and
// count UI is implemented.
//
// Rationale is always optional (never blocks saving/continuing) - it's
// strongly encouraged on real videos, especially for FAIL, but not required.
export default function AxisItemRow({
axisKey,
title,
summary,
kind,
value,
rationale,
onChangeValue,
onChangeRationale,
isPractice = false,
grading
}) {
const showGrade = grading && grading.checked;
return (
<div className="axis-item-row">
<div className="axis-item-row-header">
<span className="axis">{axisKey}</span>
<span className="axis-item-title">{title}</span>
{showGrade && (
<span className={`grade-mark ${grading.correct ? "ok" : "bad"}`}>
{grading.correct ? "✓ correct" : "✗ incorrect"}
</span>
)}
</div>
{summary && <p className="axis-item-summary muted">{summary}</p>}
{kind === "count" ? (
<label className="count-field">
Observed count
<input
type="number"
min={0}
value={value}
onChange={(e) => onChangeValue(e.target.value)}
/>
</label>
) : (
<div className="verdict-toggle">
{["PASS", "FAIL"].map((option) => (
<button
key={option}
type="button"
className={`verdict-btn ${option === "PASS" ? "pass-option" : "fail-option"} ${
value === option ? "selected" : ""
}`}
onClick={() => onChangeValue(option)}
>
{option}
</button>
))}
</div>
)}
<textarea
className="rationale-input"
placeholder={
isPractice ? "Rationale (optional for practice)" : "Rationale (optional, but encouraged — especially for FAIL)"
}
value={rationale}
onChange={(e) => onChangeRationale(e.target.value)}
/>
{showGrade && !grading.correct && grading.explanation && (
<div className="explanation-box">{grading.explanation}</div>
)}
</div>
);
}
|