What did I learn? Why did I make this thing? How would I do it differently? What limitations does it have? How does it relate to other things I've done and would like to do?
So why did I make this?
A long time ago I had a python script that I wrote that I used to take roll in my classes at Johnson & Wales. In those days I would do a quiz every single class period, so as students were taking the quiz, I would take roll with this thing in a command-line interface that used tab completion to finish student names as I began to type them in. It was really sweet, and really helped me learn names quickly (I had 40 students in a section back then).
Then I would run a grouping script on the names that were present, and display on the projector who should work with who, so they would move as soon as the quiz was done and I would do my lecture and 3-act math stuff. It worked pretty well, though I never did much with the output -- I had to cut and paste the names into a spreadsheet to display it. I lost track of the script, and didn't have time to update it, so stopped using it around the time we moved to Seattle.
Since then I've used spreadsheet templates with random a few times, but didn't like the way it would regenerate the groups every time you touched the page, and it seemed clunky to cut and paste to save the groupings.
Then this year I've been using classdojo (not using the Skinner-esque stuff, just the random grouping tool), which has worked pretty well since I change groups every single day -- that protects against dysfunctional groups since they don't last long, and the display looked nice. But I didn't like that I couldn't alter a group once made without changing everything (like if someone was absent), or rearrange if I recognized a bad combination. It just wasn't flexible at all.
So I had a little time the last few days and thought I would make one. The goal was to be able to generate groups of any size randomly, with a dropdown list of class lists to choose from, manually move names from group to group of necessary, and have a way to mark folks absent at the same time without having to regenerate. And then because kids keep complaining about being with the same people over and over, bonus points if it was possible to save the grouping so I could analyze pairings, and even more bonus if I could reload previously saved groupings -- like if I wanted to keep the same groups for several days.
I tried looking at React tutorials, and didn't find anything that was close enough or made enough sense to me to even know where to start. Then I found muuri.js, which offered the flexible dragging I was ooking for, and a demo that was close enough, made enough sense, and had enough of the elements I was looking for that I could imagine iterating from that file into what I was looking for.
What limitations does it have?
I don't know how to think about bulletproofing it, so I'll just have to remember to always Clear the board before loading a new class or making a new randomization, so it doesn't double the number of students in the class.
There's also flexibility issues. I hard-coded the number of groups, so it can handle a maximum of 11 groups and 1 absent box. So if you want groups of 2 and have a class bigger than 22 students that's an issue. The code is also messy and has some repetition, and a couple of event listener callbacks that are really long, so should be broken up into pieces.
But I do think it's close enough to be able to use it and figure out which issues actually matter later.
What did I learn?
- Fussing with CSS. I begin to understand multiple levels of styling. And a few of the styling options (like borders -- I messed with borders for a really long time before I figured out how to highlight the group grids and make them appear separated from each other).
- Speaking of repl.it, that's a great way to work. Very quick editing and checking, so I understood how what I changed affected the app. And running with the developer tools open so I could inspect elements -- and figure out how the grid system worked.
- Attached event listeners to six different buttons and made it work!
I feel really proud. It's simple and hacky, but it works, and I learned a lot.
How does this relate to other projects?
I really want to understand how to use the desmos api to make math tools that can be embedded with my writing.
And I really want to work on annotation tools like polar and hypothes.is so they can be included in my writing too.
I also want to do the unit conversion app, with flippable tiles representing conversion factors -- muuri.js seems like a great tool to include in that.