Skip to content

Commit

Permalink
instructor data views emphasizes best responses
Browse files Browse the repository at this point in the history
  • Loading branch information
@dqnykamp
dqnykamp committed Jun 6, 2024
1 parent 8f7108e commit c648c97
Show file tree
Hide file tree
Showing 14 changed files with 615 additions and 325 deletions.
14 changes: 7 additions & 7 deletions client/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
"@codemirror/highlight": "^0.19.6",
"@codemirror/lang-xml": "^0.19.2",
"@codemirror/language": "^0.19.7",
"@doenet/doenetml": "0.7.0-alpha5",
"@doenet/doenetml": "0.7.0-alpha7",
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@fontsource/jost": "^4.5.13",
Expand Down
8 changes: 5 additions & 3 deletions client/src/Tools/_framework/Paths/AssignmentAnswerResponseHistory.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,9 +95,11 @@ export function AssignmentAnswerResponseHistory() {
if (componentType === "math") {
const expr = me.fromAst(v);
return (
<MathJax hideUntilTypeset={"first"} inline dynamic key={i}>
{"\\( " + expr.toLatex() + " \\)"}
</MathJax>
<div>
<MathJax hideUntilTypeset={"first"} inline dynamic key={i}>
{"\\(" + expr.toLatex() + "\\)"}
</MathJax>
</div>
);
} else {
return (
Expand Down
122 changes: 75 additions & 47 deletions client/src/Tools/_framework/Paths/AssignmentAnswerResponses.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
Tbody,
Td,
Button,
Box,
} from "@chakra-ui/react";
import axios from "axios";
import { DoenetHeading as Heading } from "./Community";
Expand Down Expand Up @@ -43,8 +44,8 @@ export async function loader({ params, request }) {

// sort response data by user name
let responseData = data.submittedResponses.toSorted((a, b) => {
const name1 = a.user.name.toLowerCase();
const name2 = b.user.name.toLowerCase();
const name1 = a.userName.toLowerCase();
const name2 = b.userName.toLowerCase();
if (name1 > name2) {
return 1;
}
Expand Down Expand Up @@ -82,29 +83,16 @@ export function AssignmentAnswerResponses() {

const [responses, setResponses] = useState([]);
const [showNames, setShowNames] = useState(false);
const [useBest, setUseBest] = useState(true);

const bestOrLatest = useBest ? "Best" : "Latest";

useEffect(() => {
setResponses(
responseData.map((sr) => {
let parsedResp = JSON.parse(sr.response);

return parsedResp.response.map((v, i) => {
const componentType = parsedResp.componentTypes[i];
if (componentType === "math") {
const expr = me.fromAst(v);
return (
<MathJax hideUntilTypeset={"first"} inline dynamic key={i}>
{"\\( " + expr.toLatex() + " \\)"}
</MathJax>
);
} else {
return (
<div style={{ whiteSpace: "pre-line" }} key={i}>
{String(v)}
</div>
);
}
});
const latestResponse = parseAndFormatResponse(sr.latestResponse);
const bestResponse = parseAndFormatResponse(sr.bestResponse);
return { latestResponse, bestResponse };
}),
);
}, [responseData]);
Expand All @@ -126,50 +114,90 @@ export function AssignmentAnswerResponses() {
Some UI element for going back to assignment data
</Button>

<Heading subheading={`Last responses submitted for ${answerId}`} />
<div>
<Heading
subheading={`${bestOrLatest} responses submitted for ${answerId}`}
/>
<Box marginLeft={6}>
<label>
<input
type="checkbox"
checked={showNames}
onChange={() => setShowNames(!showNames)}
/>
/>{" "}
Show names
</label>{" "}
<label>
<input
type="checkbox"
checked={!useBest}
onChange={() => setUseBest(!useBest)}
/>{" "}
Show latest responses
</label>
</div>
</Box>
<TableContainer>
<Table>
<Thead>
<Tr>
{showNames ? <Th>Name</Th> : null}
<Th>Last Response</Th>
<Th>Percent correct</Th>
<Th>Name</Th>
<Th>{bestOrLatest} Response</Th>
<Th>{bestOrLatest} Percent correct</Th>
<Th>Number of responses</Th>
</Tr>
</Thead>
<Tbody>
{responses.map((resp, i) => (
<Tr key={i}>
{showNames ? <Td>{responseData[i].user.name}</Td> : null}
<Td>{resp}</Td>
<Td>
{Math.round(responseData[i].creditAchieved * 1000) / 10}%
</Td>
<Td>
<Link
style={{ display: "block", textDecoration: "underline" }}
to={`/assignmentAnswerResponseHistory/${assignmentId}/${docId}/${docVersionId}/${
responseData[i].userId
}?answerId=${encodeURIComponent(answerId)}`}
>
{responseData[i].responseCount}
</Link>
</Td>
</Tr>
))}
{responses.map((resp, i) => {
const response = useBest
? resp.bestResponse
: resp.latestResponse;
const data = responseData[i];
const creditAchieved = useBest
? data.bestCreditAchieved
: data.latestCreditAchieved;
return (
<Tr key={i}>
<Td>{showNames ? data.userName : `Student ${i + 1}`}</Td>
<Td>{response}</Td>
<Td>{Math.round(creditAchieved * 1000) / 10}%</Td>
<Td>
<Link
style={{ display: "block", textDecoration: "underline" }}
to={`/assignmentAnswerResponseHistory/${assignmentId}/${docId}/${docVersionId}/${
data.userId
}?answerId=${encodeURIComponent(answerId)}`}
>
{data.numResponses}
</Link>
</Td>
</Tr>
);
})}
</Tbody>
</Table>
</TableContainer>
</>
);
}
function parseAndFormatResponse(response) {
let parsedResp = JSON.parse(response);

return parsedResp.response.map((v, i) => {
const componentType = parsedResp.componentTypes[i];
if (componentType === "math") {
const expr = me.fromAst(v);
return (
<div>
<MathJax hideUntilTypeset={"first"} inline dynamic key={i}>
{"\\(" + expr.toLatex() + "\\)"}
</MathJax>
</div>
);
} else {
return (
<div style={{ whiteSpace: "pre-line" }} key={i}>
{String(v)}
</div>
);
}
});
}
Loading

0 comments on commit c648c97

Please sign in to comment.