If you know of some that you’ve used successfully with classes, by all means let me know.

A couple of years ago, I built a web programming exercise to use to teach students about database queries. Spreadsheets are a lot more accessible though, so I re-wrote it to generate a giant spreadsheet of data for my Precalculus students to dig into as part of a unit on counting principle, probability, and statistics. I call it the Citizen Database, and you can access it here.

I wanted a set of data that could prompt all sorts of questions that could only be answered easily with a spreadsheet counting command. The citizens in the database can be described as follows:

• Each citizen belongs to one of twelve districts, numbered 1 – 12.
• Citizens are male or female.
• Citizens have their ages recorded in the database. Citizens 18 and below are considered minors. Citizens older than 18 and younger than 70 are adults. All citizens aged 70 and above are called seniors.
• Citizens each prefer one of the two sports teams: the Crusaders or the Orbiters.
• If a citizen is above the age of 18, they can vote for Mayor. There are two families that always run for mayor: the Crenshaw family and the Trymenaark family.
• Each citizen lives in either a home, apartment, villa, or mansion.
• A citizen above the age of 18 also uses some type of vehicle for transportation. They may rent a car, own a car, have a limousine, or take a helicopter.

I wrote another document showing how to do queries on a spreadsheet of data using some commands here. My students asked for some more help on creating queries using the COUNTIFS command on Google Sheets, so I also created the video below.

The fun thing has been seeing students acknowledge the fact that answering these questions would be a really poor use of the human brain, particularly given how quickly the computer comes up with an answer. One student went so far as to call this side-trip into spreadsheet usage “really actually useful”, a comment which I decided only to appreciate.

Programming in Javascript, Python, Swift, whatever is great, but it takes a while to get to the point where you can do something that is actually impressive. Spreadsheets are an easy way in to computational thinking, and they are already installed on most student (and teacher) computers. We should be using them more frequently than we probably are in our practice.

If you are interested in how I generated the database, you can check out the code here at CodePen:

See the Pen CitizenDatabaseCreator by Evan Weinberg (@emwdx) on CodePen.

Thus, I decided to actually make this happen. I also decided I wanted to make it look much nicer than the Python version I’ve been using now for over four years.

You can see the code directly here at CodePen, or play with it below.

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”rmebEQ” default_tab=”js,result” user=”emwdx”]See the Pen GroupMaker by Evan Weinberg (@emwdx) on CodePen.[/codepen_embed]

The basic algorithm is this:

• Fill in a list of students with names, genders, skill levels, and an optional list of names with whom a given student should not be grouped. Line 2
• Generate a bunch of random groups of students with these properties. For each group, calculate a series of metrics that the fitness of a given group. Lines 45-156
• Calculate the score of a grouping, which consists of a full set of groups that contain all of the students of the class. Line 200
• Generate a bunch of groupings, sort them according to score. Take the top 10 groups, and make swaps of students between groups to make a long list of groups. (This is lines 214-224.) This is the mutation step of the genetic algorithm. Sort them again according to score.
• Repeat for a few generations, then take the top group.

It’s pretty fascinating to watch it work. I made the scoring step uniform for gender by tweaking the coefficients in Line 200. You could also make this score value gender balance, a range of abilities, or anything else.

This is screaming for a nicer UI, which I have in the works. For now, it’s out there in its fairly un-commented state. If you want to hack this to use with your own students, you’ll want to tweak the student list in Line 2, the numbers of groups of each size (groups of 1, groups of 2, groups of 3, and so on) in Line 242, and possibly the values I use in the score generation line in line 200.

In PreCalculus, I decided to do a short conic sections unit to fill the awkward two weeks between the end of the third quarter and the start of spring break. We’ve centered all of our conversations around the idea of a locus of points. I realized yesterday afternoon that the Algebra 2 activity I described here would be a great way to have some inquiry and experimentation on the day before break.

The online collaborative tools have improved considerably since 2012 when I first did this. I put much of the lesson into Google Docs and PearDeck which made sharing answers for the final reveal much easier. Here’s what the students had for values that either “escaped” or were “trapped” in the Complex Plane:

I compared this to the pixelated Mandelbrot set I hacked together in Processing from Daniel Shiffman’s code five years ago. Still works!

You can access the entire digital lesson with links as a Google Doc here.

I’m energized though that the students have bought into the system, and that my improved workflow from last semester is making the process manageable. My pile of reassessment papers grows faster than I’d like, but I’ve also improved the physical process of managing the paperwork.

While I’m battling performance issues on the site now that there’s a lot of data moving around on there, the thing I’m more interested is improving participating. Who are the students that aren’t reassessing? How do I get them involved? Why aren’t they doing so?

There are lots of issues at play here. I’m loving how I’ve been experimenting a lot lately with new ways of assessing, structuring classes, rethinking the grade book, and just plain trying new activities out on students. I’ll do a better job of sharing out in the weeks to come.

SBG and Leveling Up, Part 1
SBG and Leveling Up, Part 2: Machine Learning

…or you can read this quick review of where I’ve been going with this:

• When a student asks to be reassessed on a learning standard, the most important inputs that contribute to the student’s new achievement level are the student’s previously assessed level, the difficulty of a given reassessment question, and the nature of any errors made during the reassessment.
• Machine learning offers a convenient way to find patterns that I might not otherwise notice in these grading patterns.

Rather than design a flow chart that arbitrarily figures out the new grade given these inputs, my idea was to simply take different combinations of these inputs, and use my experience to determine what new grade I would assign. Any patterns that exist there (if there are any) would be determined by the machine learning algorithm.

I trained the neural network methodically. These were the general parameters:

• I only did ten or twenty grades at any given time to avoid the effects of fatigue.
• I graded in the morning, in the afternoon, before lunch, and after lunch, and also some at night.
• I spread this out over a few days to minimize the effects of any one particular day on the training.
• When I noticed there weren’t many grades at the upper end of the scale, I changed the program to generate instances of just those grades.
• The permutation-fanatics among you might be interested in the fact that there are 5*3*2*2*2 = 120 possibilities for numerical combinations. I ended up grading just over 200. Why not just grade every single possibility? Simple – I don’t pretend to think I’m really consistent when I’m doing this. That’s part of the problem. I want the algorithm to figure out what, on average, I tend to do in a number of different situations.

After training for a while, I was ready to have the network make some predictions. I made a little visualizer to help me see the results:

You can also see this in action by going to the CodePen, clicking on the ‘Load Trained Data’ button, and playing around with it yourself. There’s no limit to the values in the form, so some crazy results can occur.

The thing that makes me happiest about the result is that there’s nothing surprising about the results.

• Conceptual errors are the most important ones that limit students from making progress from one level to the next. This makes sense. Once a student has made a conceptual error, I generally don’t let students increase their proficiency level
• Students with low scores that ask for the highest difficulty problems probably shouldn’t.
• Students that have an 8 can get to a 9 by doing a middle difficulty level problem, but can’t get to a 10 in one reassessment without doing the highest difficulty level problem. On the other hand, a student that is a 9 that makes a conceptual error on a middle difficulty problem are brought back to a 7.

When I shared this with students, the thing they seemed most interested to use this to do is decide what sort of problem they want for a given reassessment. Some students with a 6 have come in asking for the simplest level question so they can be guaranteed a rise to a 7 if they answer correctly. A lot of level 8 students want to become a 10 in one go, but often make a conceptual error along the way and are limited to a 9. I clearly have the freedom to classify these different types of errors as I see fit when a student comes to meet with me. When I ask students what they think about having this tool available to them, the response is usually that it’s a good way to be fair. I’m pretty happy about that.

I’ll continue playing with this. It was an interesting way to analyze my thinking around something that I consider to still be pretty fuzzy, even this long after getting involved with SBG in my classes.

The PearDeck output spreadsheet for this deck looks like this:

Column 3 of the spreadsheet contains columns with the student’s email addresses, so that made it easy to get the address corresponding with a given note to the future, which is column 4. By selecting ‘Script Editor’ from the tools menu, you can create a script that has the ability to process this data.

You can delete the code that is there, and then paste in the code below to create the email script.

You’ll need to save the script, and from the run menu, select ‘sendEmails’. You’ll need to give permission for this script to read the spreadsheet for this to proceed. The emails will all be sent from your Google email.

Code:

function sendEmails() {

}


PearDeck allowed me to see the individual classes and share these with the students one at a time. I wanted to create a composite of all of the classes together in Desmos to share upon our return to classes, which happens tomorrow. You can find the result of this effort below. This is the combined data for draggable slides from five different sessions of the same deck.

The process of creating this image was a bit of work to figure out, but in the end wasn’t too hard to pull off. Here’s how I did it.

The export function of a completed PearDeck session, among other things, gives the coordinates of each student’s dragged dot in a Draggable slide. I could not use these coordinates as is, as graphing them on top of the map image in Desmos did not actually yield the correct locations. I guessed that these coordinates represented a percentage of the width of the image used for the Draggable background since the images people upload are likely all of different sizes. I did a brief search in the documentation, and couldn’t find official confirmation, but I’m fairly sure this is the case. An additional complication for using these is that the origin is at the upper left hand corner, which is typical for programming pixel art, but not correct for use with a Cartesian system as in Desmos.

This means that an exported data point located at 40, 70 is at 40% of the width of the image, and 70% of the height of the image, measured from the top left corner.

Luckily, Desmos makes it pretty easy to apply a transformation to the data to make it graph correctly. I took all of the data from the PearDeck export, pasted it into a spreadsheet class by class, and then pasted the aggregate data into a Desmos table. Desmos appears to have a 50 point limitation for pasting data this way, which is why the Desmos link below has two separate tables.

Click here to see the graph and data on Desmos

If there’s an easier way to do this, I’d love to hear your suggestions in the comments.

Dan proposed the idea for this activity a while ago with his typically high level of excitement about activities that provoke interesting and productive classroom conversation. This time, however, it wasn’t about mathematics. I was looking for a bigger scale project to help me develop my ReactJS skills, so I took it on. Dan was patient enough to let me hack away at the project in this context. Though I could have certainly done it more quickly using jQuery or another framework, I wanted to try building this project in a particular way.

Specifically:

• I wanted to be able to play the game myself when I was done. Hard coding everything into a series of HTML pages would have likely resulted in my seeing each plate and the answer over the many times I reloaded during development. By abstracting the behavior of the game to be automated for each group of license plates, I saw most of the plates for the first time during testing.
• I wanted to experiment with a drag and drop library for React as an exercise for use in future experiments.
• I also wanted to have a slightly different UI behavior for the desktop and mobile versions. This functionality came from Bootstrap. This led to a bit of wonkiness on small phone displays, but larger tablets work great using touch, and the desktop version works well using drag and drop.
• I also wanted to experiment with modularity of both files and React component JSX files. I used Webpack. I don’t understand Webpack.

As in my past collaborations with Dan, I learned to do a number of things I didn’t think I could do. For example, I told Dan ‘no’ on the fading effect at one point, and then subsequently figured out how to make it happen through lots of searches, StackOverflow, and careful reading of the React documentation.

If you want to play with the code, the Github repository is at https://github.com/emwdx/states-n-plates/. You don’t need the big node_modules directory for this to work locally, but it is required if you want to change the bundle.js file.

I have more thoughts on the learning process I went through, but that will be shared soon. Have fun and share with your friends.

What the system currently lacks is an easy way to get that data out. For whatever reason, the only export format is PDF. This makes it difficult to get things into a spreadsheet.

After some hacking around in the console, I was able to put together a script that scrapes a class scoresheet page for the student names and assignment names and stores the result in a variable called exportData. This code is included below, and is also here in a gist. Paste the entire code into the console and run it. Then type in exportData and the scraped data will appear.

You can then copy and paste the resulting string (leaving out the quotes) into Excel, OpenOffice, or Google Sheets and the data will appear there, ready to be spreadsheet-ified.

The only place where this doesn’t work perfectly is when there are more students than will fit on the page. As far as I could tell after poking around, the grade data is re-rendered to fit the page as scrolling occurs. I didn’t work that hard to see if the data is stored somewhere else on the page, so someone with a bit more insight might be able to improve upon my work.

Here is the full code:

var nameElements = $('.student-name').toArray();
var assignmentElements = $('var').toArray();
var names = [];
var assignments = [];
var assignmentNumber;

for(var i = 0;i<2*assignmentNumber-1;i+=2){ assignmentString += assignments[i] + '\t ' } var gradeString = ''; names.forEach(function(name){ var currentString = ''; currentString += name[0]+ "\t " name[1].forEach(function(grade){ currentString += grade + "\t " }) gradeString += currentString + "\n " }) var exportData = assignmentString+"\n"+gradeString;

I decided this week that creating these quizzes using HTML seemed like a perfect application of my developing React skills. Here’s the result:

The order of the functions randomly generates on each page load, which makes it easy to generate new versions. I’ve been able to export these as PDF files and then send them right to the printer.

You can access the code here on CodePen:
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”gLOoxe” default_tab=”result” user=”emwdx” preview=”true” data-preview=”true”]See the Pen FunctionLibraryQuiz by Evan Weinberg (@emwdx) on CodePen.[/codepen_embed]

Feel free to use this or modify to fit your needs.