Lädt...
;
if (error) return
@@ -162,10 +164,10 @@ const Area = ({ exerciseID }) => {
gap: "var(--u-md)",
}}
>
- {visibleWords.map(({ name, type }, index) => (
+ {visibleWords.map(({ name, types }, index) => (
diff --git a/gradesa/src/components/ui/dragdrop/dustbin.js b/gradesa/src/components/ui/dragdrop/dustbin.js
index d586cfa..7fe2e0f 100644
--- a/gradesa/src/components/ui/dragdrop/dustbin.js
+++ b/gradesa/src/components/ui/dragdrop/dustbin.js
@@ -38,20 +38,19 @@ export const Dustbin = memo(function Dustbin({
{droppedItems.map((item, index) => {
let itemStyle = { color: `var(--${color})` };
if (isSubmitted) {
- itemStyle =
- item.type === correctType
- ? {
- backgroundColor: "#b3f0b3",
- color: "#1a5c1a",
- borderRadius: "4px",
- padding: "2px 6px",
- }
- : {
- backgroundColor: "#ffb3b3",
- color: "#7a0000",
- borderRadius: "4px",
- padding: "2px 6px",
- };
+ itemStyle = item.types.includes(correctType)
+ ? {
+ backgroundColor: "#b3f0b3",
+ color: "#1a5c1a",
+ borderRadius: "4px",
+ padding: "2px 6px",
+ }
+ : {
+ backgroundColor: "#ffb3b3",
+ color: "#7a0000",
+ borderRadius: "4px",
+ padding: "2px 6px",
+ };
}
return (
({
- type,
- item: { name, type },
+ // drag type only needs to match a dustbin's accept list; grading uses `types` instead
+ type: types[0],
+ item: { name, types },
canDrag: !isDropped,
collect: (monitor) => ({
opacity: monitor.isDragging() ? 0.4 : 1,
}),
}),
- [name, type, isDropped]
+ [name, types, isDropped]
);
return (