2a:null 2b:["$","title",null,{"children":"Random Group Generator | Zhi Ling | Observable"}] 30:T67b,# Random Group Generator A useful user input tool for when users want to randomly generate groups from an array of elements. See [demo](https://twitter.com/ling66795/status/1779023762790465593). ## What it does? It is a custom user input that allow user to form a grouped array. It has an editable text area to view and edit data, a set of components to change the number of groups, a button to regenerate groups by current setting, and a output area to display the grouped tables. Users can provide their own data to group or it will display a empty input area for users to start. Array data in text area is seperated by newline. It will instantly reassign a new series of groups whenever users call it, change the input data, change the number of groups, or click on regenerate button. ## How to import it on observable? ~~~js import {randomGroup} from "@zhiling/synchronized-random-group-generator" ~~~ ## Options it accepts: ~~~js { data: [], // Input data that user want to use to generate groups. // It must be an array. // If user leaves this empty, data area would also leave empty. numGroup: 1, // The number of groups that user want to group. // It must be a integer. // If user leaves this empty, the number of group would start with data.length/2 or 1 dataHeight: 200, // The height of data area outputHeight: 400, // The height of output area outputWidth: 400, // The width of output area dataDisplay: true, // Boolean flag check if user want to display data text area outputDisplay: true, // Boolean flag check if user want to display result groups } ~~~ ## Example:31:T109f,function randomGroup( { data=[], numGroup = data.length > 2 ? parseInt(data.length / 2) : 1, dataHeight = 200, outputHeight = 500, outputWidth = 400, dataDisplay = true, outputDisplay = true, } = {} ) { // Check user input if (numGroup > data.length) { numGroup = data.length; } else if (numGroup < 1) { numGroup = 1; } // Check if data is not an array if (!Array.isArray(data)) { throw new Error("Data must be an array."); return; } let groupResult = []; const onDataChange = (event) => { data = event.target.value .split("\n") .map((item) => item.trim()) .filter((item) => item !== ""); numGroup = data.length > 2 ? parseInt(data.length / 2) : 1; setNumGroup(); generate(); }; const onNumGroupChange = (event) => { numGroup = parseInt(event.target.value); if (numGroup > data.length) { numGroup = data.length; } else if (numGroup < 1) { numGroup = 1; } setNumGroup(); generate(); }; const onSliderChange = (event) => { numGroup = parseInt(event.target.value); setNumGroup(); generate(); }; const setNumGroup = function () { numGroupInput.querySelector("#numGroupInput").value = numGroup; sliderInput.querySelector("#numGroupSlider").max = data.length; sliderInput.querySelector("#numGroupSlider").value = numGroup; }; const getGroup = function (__data) { let result = []; // Protect the data by clone a new one const _data = __data.slice(0); if (_data.length === 0) { return result; } const shuffledData = _data.sort(() => Math.random() - 0.5); for (let i = 0; i < numGroup; i++) { result.push([]); } let currentIndex = 0; // Create a slots for remaining elements const remain = Array.from({ length: numGroup }, (_, index) => index); shuffledData.forEach((item, i) => { result[currentIndex].push(item); if ( i + 1 >= parseInt(_data.length / numGroup) * numGroup && _data.length % numGroup != 0 ) { const randomIndex = Math.floor(Math.random() * remain.length); currentIndex = remain[randomIndex]; remain.splice(randomIndex, 1); } else { currentIndex = (currentIndex + 1) % numGroup; } }); return result; }; const generate = function () { groupResult = getGroup(data); renderGroupTable(); target.value = groupResult; target.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; const renderGroupTable = function () { groupTable.innerHTML = ""; groupResult.forEach((group, index) => { const table = document.createElement("table"); const header = table.createTHead(); const row = header.insertRow(); const cell = row.insertCell(); cell.textContent = `Group ${index + 1}`; group.forEach((member) => { const row = table.insertRow(); const cell = row.insertCell(); cell.textContent = member; }); groupTable.appendChild(table); }); }; const dataArea = htl.html` `; const numGroupInput = htl.html` `; const sliderInput = htl.html` `; const regenerateButton = htl.html` `; const groupTable = htl.html`

`; const target = htl.html`

${dataDisplay ? dataArea : ''}

Number of Groups: ${numGroupInput} ${sliderInput} ${regenerateButton}

${outputDisplay ? groupTable : ''}

`; target.value = groupResult; generate(); return target; }32:[] 2e:{"id":"c7d5f1d103ddff19","slug":"synchronized-random-group-generator","title":"Random Group Generator","thumbnail":"6aefdc0d54ce91c7538113a0daf61864d292946dcca6e4915aa8aefa11b4e31b","access_level":"public","create_time":"$D2024-04-13T00:07:50.017Z","update_time":"$D2024-04-20T00:44:23.739Z","view_time":null,"first_public_time":"$D2024-04-13T00:07:50.017Z","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":303,"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":1,"collection":null,"type":"notebook","body":{"title":"Random Group Generator","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":131,"value":"viewof newGroup = randomGroup({data:exampleData, numGroup:2, dataHeight:200, outputHeight:400, outputWidth:600});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"exampleData = [\"A\", \"B\", \"C\", \"D\", \"E\", \"F\", \"G\", \"H\", \"I\", \"J\", \"K\", \"L\", \"M\", \"N\"];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":137,"value":"newGroup","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":244,"value":"## Code:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":10,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"