Bicolored Beans and Dolch Refrigerator Poetry

I’m amusing myself with Javascript and I’m managing to make things.

Last Friday I helped unpack some math manipulatives for our new elementary school. They had many, many things to count. Bicolored beans were one of the items I found particularly odd.¹ In any case, given last weeks small foray into JavaScript I knew I could randomize images easily enough. I figured with some wandering I could make items drag-able based on something I saw once upon a time. I didn’t really have much passion for bicolor beans but I thought the things I learned with this simple example would be more broadly applicable and this would be a nice proof of concept.

Initial wandering was based on a search for “HTML 5 drag drop list” or something like that. If I recall correctly, I found something that I was able to make work in about ten minutes but it wouldn’t work on touch devices. Given this was really a lower elementary tool (assuming anyone in County was going to use it at all) I needed to rethink things.

I narrowed it down to something like “JavaScript drag drop.” That led me to back to my habitual Stackoverflow stomping grounds. I found something there associated with the Dojo JavaScript library. That lead to more searches for “Dojo library drag drop examples.” I was able to find an example that worked but it was awkward for the ten movable items I needed. Still it worked and I had a product.

I kept looking around (mainly because I was fascinated with all the things Dojo could do.) and eventually found this small Dojo example set. The one on the left labeled “movable” encouraged me to re-write the whole thing. It was much cleaner and easier for me to grasp most of the pieces. You can just view source on the page and you should be able to see the whole file. I didn’t link out to the JavaScript or even the CSS in case any other fellow wanderers wanted to see all the pieces in one place.

My five year old opted to use the beans for patterning after I’d asked him to do sorting/addition. That was an interesting thing to see and he provided me with lots of hands on testing using the iPad to make sure it worked well with touch devices.

Anyway, I had this in my head when I happened to be talking to an English teacher today. It wasn’t much of a jump from moveable beans to refrigerator poetry. The example is based on pre-primer Dolch words which I think has a variety of other useful opportunities in early elementary (sort by X, known/unknown, etc.). I cut/pasted into a Google Spreadsheet and wrote a few formulas to generate all the variables. I just had to cut/paste those into the framework for the sheet. When I get a better hang of things, I think I can just use something like this to pull variables straight from a Google Spreadsheet. Other plans include making tool tips with definitions for more advanced vocabulary. Maybe doing some stuff to associate images with words, making the refrigerator expand properly to fit multiple screen sizes, selectable backgrounds for Venn diagrams, things like that.

This whole process has reminded me a lot of learning how to write HTML in the early 2000s. I’d copy whole pages and break/fix them piece by piece, hitting refresh each time to see what did what. That’s basically what I’m doing now. Lots of trial and error and I’m certainly very light on a real understanding of JavaScript. Nevertheless, I’m learning things and I’m making things. This aspect of the Internet and technology never fails to inspire me.