Skip to content

Commit

Permalink
Merge pull request #39 from tokomath/fix/grading_page
Browse files Browse the repository at this point in the history 
fix/grading page
  • Loading branch information
@oyajun
oyajun authored Aug 21, 2024
2 parents d3a6410 + 1376432 commit 740132a
Show file tree
Hide file tree
Showing 2 changed files with 120 additions and 12 deletions.
107 changes: 96 additions & 11 deletions src/app/teacher/grading/[testid]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,13 @@ interface AnswerCellProps {
questionIndex: number;
answer: String;
answerCellHandle: (point: number, userIndex: number, questionIndex: number) => void;

cursorImage: String;
}

interface UngradedCountCellProps {
user_index: number;
ungraded_count: number;
}

interface SectionTabProps {
Expand Down Expand Up @@ -143,36 +150,84 @@ function SectionTabs({ sections, sectionValue, sectionHandleChange }: SectionTab
}
//#endregion

function AnswerCell({ answer, point, userIndex, questionIndex, answerCellHandle }: AnswerCellProps) {
const cell_handle = () => {
function AnswerCell({ answer, point, userIndex, questionIndex, answerCellHandle,cursorImage}: AnswerCellProps) {
if(!answer)
{
return null
}

const click_handle = () => {
const new_point = (point === 0 ? 1 : 0);
answerCellHandle(new_point, userIndex, questionIndex);
}

const keydown_handle = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
switch(event.key)
{
case "Enter":
case " ":
click_handle();
}
}

return (<>
<TableCell onClick={cell_handle} className={styles.answer_cell}>
<div className={(point > 0) ? styles.correct_cell : styles.wrong_cell}></div>
<TableCell onClick={click_handle} onKeyDown={keydown_handle} tabIndex={0} className={styles.answer_cell} style={{ cursor: `url(${cursorImage}), auto` }}>
<div className={((point == -1) ? styles.ungraded_cell : (point > 0) ? styles.correct_cell : styles.wrong_cell)} ></div>
<div className={styles.matharea}><InlineMath math={String(answer)} /></div>
</TableCell>
</>)
}

function UngradedCountCell({user_index, ungraded_count }: UngradedCountCellProps) {
let style = (ungraded_count === 0) ? styles.ungraded_false : styles.ungraded_true;
return (
<TableCell key={"ungraded-" + user_index} sx={{ textAlign: "center" }} className={styles.point_cell+" "+((ungraded_count === 0) ? styles.ungraded_false : styles.ungraded_true)}>
{ungraded_count}
</TableCell>
);
}


function generateCursor() : String{
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.height = 64;
canvas.width = 64;
if(ctx != null)
{
ctx.clearRect(0,0, canvas.width,canvas.height);

//@mui/icons-material/ModeEditOutline のpathデータ
const path = new Path2D("M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z");
ctx.strokeStyle = "#1976d2";
ctx.lineWidth = 2;
ctx.stroke(path);

const ImageUrl = canvas.toDataURL("image/png");
canvas.remove();
return ImageUrl;
}
return "";
}

export default function GradingPage({ params }: { params: { testid: number } }) {
const [testData, setTestData] = useState<TestData | null>(null);
const [submissionData, setSubmissionData] = useState<Submission[]>([]);
const submissionData_buf: Array<Submission> = [];
const { data: session, status } = useSession();
const [classID, setClassID] = useState(0);
const [sectionValue, setSectionValue] = useState(0);
const [points, setPoints] = useState<Record<number, Record<number, number>>>({});

const [cursorImage,setCursorImage] = useState("");
const [totalpoint_label, set_totalpoint_label] = useState("");
const [ungraded_label,set_ungraded_label] = useState("");

//#region イベントハンドラ
const sectionHandleChange = (event: React.SyntheticEvent, newValue: number) => {
setSectionValue(newValue);
};

const answerCellHandle = (newPoint: number, userIndex: number, questionIndex: number) => {
const answerCellClickHandle = (newPoint: number, userIndex: number, questionIndex: number) => {
setPoints(prevPoints => ({
...prevPoints,
[userIndex]: {
Expand Down Expand Up @@ -248,17 +303,31 @@ export default function GradingPage({ params }: { params: { testid: number } })

if (userPoints) {
Object.values(userPoints).forEach(point => {
totalPoints += point;
totalPoints += (point != -1) ? point : 0;
});
}

return totalPoints;
};

const countUngraded = (userIndex: number) : number => {
let ungraded = 0;
const userPoints = points[userIndex];

if(userPoints)
{
Object.values(userPoints).forEach(point => {
ungraded += (point === -1) ? 1 : 0;
});
}

return ungraded;
}
useEffect(() => {
if (session) {
//console.log("Session");
//console.log(session);
const submissionData_buf: Array<Submission> = [];
const fetchTest = async () => {
const test_res = await getTestById(Number(params.testid), String(session.user.name));
if (test_res) {
Expand Down Expand Up @@ -289,6 +358,9 @@ export default function GradingPage({ params }: { params: { testid: number } })
})
setSubmissionData(submissionData_buf);
set_totalpoint_label("Total Point");
set_ungraded_label("Ungraded");

setCursorImage(String(generateCursor()));
}
});
}
Expand Down Expand Up @@ -344,9 +416,15 @@ export default function GradingPage({ params }: { params: { testid: number } })
<TableRow>
<TableCell sx={{ textAlign: "center" }} className={styles.username_cell}></TableCell>
{/* 合計ポイント表示用のヘッダセル */}
<TableCell sx={{ textAlign: "center" }} className={styles.totalpoint_cell}>
<TableCell sx={{ textAlign: "center" }} className={styles.point_cell}>
{totalpoint_label}
</TableCell>

{/*未採点問題数表示用のヘッダセル*/}
<TableCell sx={{ textAlign: "center" }} className={styles.point_cell}>
{ungraded_label}
</TableCell>

{ //表のヘッダ Questionの問題と解を表示する

testData?.sections.at(sectionValue)?.questions.map((question: Question, index) =>
Expand All @@ -366,10 +444,15 @@ export default function GradingPage({ params }: { params: { testid: number } })
<TableRow key={"ROW" + user_index}>
{/*ユーザー名を表示するセル*/}
<TableCell key={"username" + user_index} className={styles.name_cell}>{user.name}</TableCell>

{/* 合計ポイントを表示するセル */}
<TableCell key={"totalPoints" + user_index} sx={{ textAlign: "center" }}>
<TableCell key={"totalPoints-" + user_index} sx={{ textAlign: "center" }} className={styles.point_cell}>
{calculateUserTotalPoints(user_index)}
</TableCell>

{/*未採点問題数を表示するセル*/}
<UngradedCountCell user_index={user_index} ungraded_count={countUngraded(user_index)}/>

{
(function () {
let start = 0;
Expand All @@ -387,10 +470,12 @@ export default function GradingPage({ params }: { params: { testid: number } })
cells.push(
<AnswerCell answer={answer.text}
point={currentPoint}
answerCellHandle={answerCellHandle}
answerCellHandle={answerCellClickHandle}
key={user.id + "-" + answer.questionId}
userIndex={user_index}
questionIndex={question_index}>
questionIndex={question_index}
cursorImage={cursorImage}
>
</AnswerCell>
)
}
Expand Down
25 changes: 24 additions & 1 deletion src/app/teacher/grading/[testid]/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
user-select: none;
}

.totalpoint_cell
.point_cell
{
user-select: none;
width:2em;
Expand All @@ -22,6 +22,29 @@
min-width: 100px;
}

.ungraded_cell
{

position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

}

.ungraded_true
{
color:#ff4141 !important;
font-weight: bold;
}

.ungraded_false
{
color: green !important;
font-weight: bold;
}


.correct_cell
{
position:absolute;
Expand Down

0 comments on commit 740132a

Please sign in to comment.