2a:null 2b:["$","title",null,{"children":"Group Assignment Gradebook | Zhi Ling | Observable"}] 30:T410,function taskInput(data){ const _data = JSON.parse(JSON.stringify(data)); let taskNameInput = html``; let taskScoreInput = html``; let addButton = html``; addButton.onclick = () => { let taskName = taskNameInput.value; let taskScore = parseInt(taskScoreInput.value); if (taskName && !isNaN(taskScore)) { const task = {taskName: taskName, taskTotalScore: taskScore, taskScore: null}; _data.forEach(d => { const newTasks = d.tasks; d.groupTotalScore += taskScore; newTasks.push(task); }); target.value = _data; target.dispatchEvent(new CustomEvent("input", { bubbles: true })); } else { throw new Error("Please enter valid task name and score scale."); } }; const target = htl.html`Add a task: ${taskNameInput} ${taskScoreInput} ${addButton}`; target.value = _data; return target; }31:Taf4,function generateGradebook(data) { if (!data || data.length === 0) { return htl.html`

Data is empty or null!

`; } const _data = JSON.parse(JSON.stringify(data)); const gradeSlider = (max, value, task, index) => { const slider = Inputs.range([0, max], { step: 1, value: value, width: 50 }); slider.oninput = () => { task.taskScore = parseInt(slider.value); updateScore(index); }; return slider; }; const gradeButton = (task, index) => { const slider = gradeSlider(task.taskTotalScore, 0, task, index); slider.style.display = "none"; const button = htl.html``; button.onclick = () => { slider.style.display = "inline-block"; button.style.display = "none"; task.taskScore = 0; updateScore(index); }; return htl.html`${button}${slider}`; }; const updateScore = (index) => { const total = document.querySelector(`.total-score.group${index}`); const score = sumScore(_data[index].tasks); const totalScore = sumTotalScore(_data[index].tasks); total.innerText = `Group ${index+1} total score: ${score}/${totalScore}` _data[index].groupScore = score; _data[index].groupTotalScore = totalScore; result.value = _data; result.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; const tableRows = (tasks, index) => { if (!tasks || tasks.length === 0) { return ""; } return tasks.map((task) => { return html` ${task.taskName} ${ task.taskScore ? gradeSlider(task.taskTotalScore, task.taskScore, task, index) : gradeButton(task, index) } ${task.taskTotalScore} `; }); }; const sumScore = (tasks) => { let sum = 0; tasks.forEach((task) => { sum += task.taskScore; }); return sum; }; const sumTotalScore = (tasks) => { let sum = 0; tasks.forEach((task) => { sum += task.taskTotalScore; }); return sum; }; const groupView = (tasks, index) => { return htl.html` ${tableRows(tasks, index)}

Task Name	Score	Total Score

Group ${index+1} total score: ${sumScore(tasks)}/${sumTotalScore(tasks)}

`; }; const groupTabs = _data.map((group, index) => { return details(`Group${index + 1}`, groupView(group.tasks, index)); }); const result = tabbed(htl.html`${groupTabs}`, { selected: 0 }); result.value = _data; return result; }32:T936,function generateIndividuleScore(data) { if (!data || data.length === 0) { return htl.html`

Data is empty or null!

`; } const _data = JSON.parse(JSON.stringify(data)); const slider = (group, index, m) => { const s = Inputs.range([0, 100], { step: 1, value: 50, width: 200 }); s.oninput = () => { m.contribution = s.value; computeIndividuleScore(group, index); updateIndividuleScore(group, index); }; return s; }; const tableRows = (group, index) => { if (!group || group.length === 0) { return ""; } return group.members.map((m, i) => { return html` ${m.name} ${slider(group, index, m)} ${m.score} ${_data[index].groupScore} ${_data[index].groupTotalScore} `; }); }; const computeIndividuleScore = (group, index) => { const groupScore = _data[index].groupScore; const contributionSet = []; group.members.map((m, i) => { contributionSet.push(m.contribution); }); const socrePercentage = computeGroupContribution(contributionSet); console.log(socrePercentage); group.members.forEach((m, i) => { let score = socrePercentage[i] * group.members.length * group.groupScore; if (score > groupScore) { score = groupScore; } m.score = score; }); }; const updateIndividuleScore = (group, index) => { group.members.forEach((m, i) => { const el = document.querySelector(`.score.group${index}.member${i}`); el.innerText = group.members[i].score.toFixed(2); }); }; const groupView = (group, index) => { return htl.html` ${tableRows(group, index)}

Name	Contribution	Individule Score	Group Score	Total Score

`; }; const groupTabs = _data.map((group, index) => { computeIndividuleScore(group, index); return details(`Group${index + 1}`, groupView(group, index)); }); const result = tabbed(htl.html`${groupTabs}`, { selected: 0 }); result.value = _data; return result; }33:[] 2e:{"id":"4c589596d7fcb7ba","slug":"group-assignment-gradebook","title":"Group Assignment Gradebook","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-04-19T23:10:52.397Z","update_time":"$D2024-06-03T08:31:24.278Z","view_time":null,"first_public_time":"$D2024-04-20T01:34:26.433Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"36626f71d97ed5b4","login":"zhiling","name":"Zhi Ling","avatar_url":"https://avatars-next.observableusercontent.com/85563cf191997e7c503d9fb7dd79e6f33c2c61c49ebe7e4a8ceac83be6c0d149","tier":"starter_2024"},"version":640,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b6da899757697290","login":"zhi-ling2","name":"Zhi Ling","avatar_url":"https://avatars-next.observableusercontent.com/c92f9dd502d77da96e825a9d1a8b278103aca9f1f037b5340716c56cf054d702","tier":null}],"members":[{"type":"team","id":"36626f71d97ed5b4","login":"zhiling","name":"Zhi Ling","avatar_url":"https://avatars-next.observableusercontent.com/85563cf191997e7c503d9fb7dd79e6f33c2c61c49ebe7e4a8ceac83be6c0d149","tier":"starter_2024","role":"editor"},{"type":"individual","id":"b6da899757697290","login":"zhi-ling2","name":"Zhi Ling","avatar_url":"https://avatars-next.observableusercontent.com/c92f9dd502d77da96e825a9d1a8b278103aca9f1f037b5340716c56cf054d702","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Group Assignment Gradebook","cells":[{"id":0,"value":"# Group Assignment Gradebook","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":557,"value":"A group assignment teaching tool that can be used to generate random groups, grade the group assignment task by task, and generate individule grade by setting assignment individule contribution. See [demo](https://twitter.com/ling66795/status/1782283139060203736).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":563,"value":"## Usage (step by step)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":473,"value":"## Import data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":475,"value":"ungroupedData = [\"A\", \"B\", \"C\", \"D\", \"E\", \"F\", \"G\", \"H\"];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":592,"value":"groupedData = groupData;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"## Gradebook","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":345,"value":"### Step 0: Generate random groups","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":343,"value":"viewof groupData = randomGroup({data: ungroupedData, dataDisplay:true, outputDisplay : true, dataHeight: 50, outputHeight:300});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":331,"value":"### Step 1: Add all tasks and total scores before grading","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":304,"value":"viewof addTask = taskInput(assignmentData);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":333,"value":"### Step 2: Group assignment grading for each task","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":316,"value":"viewof gradeTable = generateGradebook(addTask);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":352,"value":"### Step 3: Group contribution and individule grading","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":548,"value":"viewof individuleScore = generateIndividuleScore(gradeTable);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":596,"value":"### Step 4: Export gradebook result as csv file","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":619,"value":"DOM.download(target, \"grade.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"## Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":172,"value":"function convertData(data){\n const result = [];\n data.forEach(d => {\n const o = {groupScore: null, groupTotalScore:null, tasks:[], members:d.map(_d => {return {name:_d, contribution:50, score: null}})};\n result.push(o);\n });\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"assignmentData = convertData(groupData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":150,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":633,"value":"obj = htl.html`

Data is empty or null!

`;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":639,"value":"obj","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":371,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":606,"value":"csvResult = convert2CSV(individuleScore);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":623,"value":"target = new Blob([d3.csvFormat(csvResult)], {type: \"text/csv\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":601,"value":"function convert2CSV(data){\n const result = [];\n data.forEach(d => {\n const obj = {name: \"\", induvidule: 0, group:0, total:0};\n d.members.forEach(m => {\n const obj = {name: m.name, induvidule: m.score, group: d.groupScore, total: d.groupTotalScore};\n result.push(obj);\n });\n });\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"import {details, tabbed} from '@mootari/tabs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":326,"value":"import {randomGroup} from \"@zhiling/synchronized-random-group-generator\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":627,"value":"import {computeGroupContribution} from \"@zhiling/group-work-contribution-percentizor\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":565,"value":"require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"