Holiday Travel and Exporting PearDeck Data to Desmos

One of the unique phenomena of international schools is the reality that, during a vacation, the school population disperses to locations across the world. I had students do an end of semester reflection through PearDeck, and one of the slides asked students to drag a dot to where they were going to spend the vacation.

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.

Building Up or Breaking Down: Creating States-n-Plates

In piecing together States-n-Plates, I wanted to learn more about React, a web application library created by Facebook. In the process, I found myself finding parallels in how I go about learning anything.

Before I describe the details, I'll give a (hopefully brief) description of what React does.

An HTML page normally consists of HTML tags that tell the browser what to display, with other rules that also describe how the HTML should look. A page created through React reframes that page as a series of components that each serve a different function. The image components need to have the ability to be dragged onto the targets. The targets need to be able to accept a dragged image, and need to be able to indicate whether the image dragged onto the target corresponds with the correct plate. The scoreboard needs to know how many states have been correctly matched at any given time. The components also have the ability to respond when a user clicks, types, or drags other components into them.

In a well designed React application, each component uses information from the component that contains it in order to behave (or, um, react) as the application is used. Building the pathways for how this information flows from one component into another is deliberately designed so that each component can act independently from another.

When I first started working on creating States and Plates, I started with a fully formed webpage that looked much like the final product above. I followed the React documents that then suggested breaking the page down into components, one by one. I did this without really understanding in detail what I was doing, but was able to get the components to each have the appearance of the original web page, which felt like real progress. Eventually, my progress was halted when I reached the limits of what I understood. I needed help.

It was at this point when I picked up a book on React and started working through the basics. I began to understand better what the guiding philosophies of React were - the design decisions, the behaviors that one component had in response to another, and how to think through an application the React way. This was where it was helpful to read the perspectives of some people much more experienced then me - I understood the vocabulary they used and could make the connections I needed to make progress.

With some of the basics figured out, I rethought the application from scratch. Rather than starting with the webpage as a whole, I started creating components and making sure each one worked as expected before moving on.

By the end, I felt comfortable thinking about my application both from a bird's eye view and on an individual component level. I needed to have the experience of breaking the idea down into individual pieces and seeing how they interacted with each other to produce the whole. I needed to take time seeing what rules guided the function of one component in order to understand the whole. If I had started by reading the documentation as my step one, I would not have had the context that the big picture view of the application yielded for when I actually did so in my learning. Both views were important, and neither view was sufficient on its own to lead to full understanding or transfer.

We need to give our students opportunities to have both views of the content we teach. Insisting that student mastery of the basics is a necessary gatekeeper to higher levels of thought misses opportunities to understand the context of that basic knowledge. Student exploration of concepts through Desmos or Geogebra or problem solving is a great way to engage with the standards of mathematical practice, but without discussion, review of underlying concepts, or (gasp!) direct instruction where needed, opportunities for growth might be limited.

Let's make sure, as a team, that we are attacking this problem from both ends.

Releasing Today: States-n-Plates

I'm excited to share States-n-Plates , a project I built with Dan Meyer.

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.

Zack Miller and his PBL/PBL Merger

I've been skeptical about Project Based Learning (PBL) for a while, despite many people trying to sell me on it as being a step up from more traditional instruction. I like the concept, but I have too many reservations with veto-power to keep me from jumping in completely. These are my main issues:

  • While PBL provides a rich environment for learning, it doesn't work as an effective means for assessment.
  • The idea presumes that every mathematical topic has a problem that forms a solid context for a project. In the recent past, I've made a commitment to my students to not force a context on them if it doesn't actually fit, and to tell them outright when I've artificially created one. There are many rich applications for many topics, but this is not generally the case.
  • I have never seen a project based rubric that I really like, even (and especially) ones that I've created myself. Something ends up being incentivized unintentionally, or students focus on the wrong elements despite my best efforts to prevent this. This is my fault though, not PBL.

All of that said, I'm really enjoying Zach Miller's ongoing series on combining Project Based Learning with elements of Problem Based Learning, which I also like, but also with reservations.

His posts are pushing my thinking a bit, and I'm liking how it's getting me to adjust some plans for this semester. Check out his blog when you can.

More of What Matters

Just over a year ago, my first daughter was born. Like most newborns, she couldn't hold her head up. Yesterday I watched her pick up her pacifier from a table and plop it in her mouth.

It made me realize that I've witnessed the entire progression of skill development that made that happen. She developed an awareness of the muscles needed to grip, lift, and rotate. She learned to use visual feedback to move her stubby fingers to the right location in her field of view, close them, and then move the pacifier to her mouth, which she could not see. This learning was all hers - nobody had to tell her what to do, or why she needed to go through the steps. My daughter's skills will continue to develop as she grows and encounters the great variety of people and places in this beautiful world we all inhabit together. I've made more of an effort this school year to be present for these moments, and it has been among the best decisions of my life.

There have been times in my teaching career when I've thought about how nice it would be to be able to start completely from scratch with students. With no misconceptions, bad habits, or fear of failing like the time before, maybe I could help them be more successful. I quickly stop myself. First of all, my own instruction is not perfect, and in all likelihood, the students would still discover shortcuts that might work in my class, but be detrimental to their success in the next. Second, and more importantly, our students are not computers to be programmed. The experiences they bring to our classrooms is what makes this job what it is. As rewarding as it might be for us as teachers to see students make all of the progress we want for them, teaching is not about us.

Our students have all walked their brains through a unique path that passes through our classrooms, and that path certainly doesn't end within them. The knowledge and skills that our students take from our classrooms are also not under our control. Our students' lives will hopefully be a long series of meaningful moments of discovery and excitement, and the reality is that those moments that will last are likely not the ones that transpire in our classrooms. That said, the time we all have together is precious and always decreasing.

As we start a new year today, let us remind ourselves to work to make the important things matter. This takes work because of the noise of distractions that surrounds us. Build opportunities to grow instead of dig in to old habits. Make a deliberate effort to express gratitude to the people that you are with. Recognize the value in being at this place, at this time. We will not always be successful, but accepting this is part of becoming more successful on the next attempt.

Be well, everyone.

Scaling Reassessments, Yet Again (Part 3)

I've been quietly complaining recently to myself about how the reassessment sign-up and quiz distribution tool I created (for myself) isn't meeting my needs. Desmos, Peardeck, and the other online tools I use have a pretty impressive responsiveness when it comes to requests for features or queries about bugs, and that's at least partly because they have teams of expert programmers ready to go at any given moment. When you are an ed-tech company of one, there's nobody else to blame.

This is the last week when reassessment is permitted, so the size of the groups I've had for reassessments has been pretty large. Knowing this, I worked hard this past Sunday to update the site's inner workings to be organized for efficiency.

Now I know what my day looks like in terms of which reassessments students have signed up for, what their current grade is, and when they plan to see me during the day:

screen-shot-2016-12-06-at-12-53-11-pm

With one or two reassessments at a time, I got along just fine with a small HTML select box with names that were roughly sorted. Clicking those one at a time and then assigning a given question does not scale well at all. I can now see all of the students that have signed up for a reassessment, and then easily assign a given question to groups of them at a time:

screen-shot-2016-12-06-at-1-54-28-pm

The past two days have broken the reassessment records that I wrote about at the end of the first quarter - today, for example, there are over sixty five students taking quizzes. In the scrambling of getting everyone their quizzes in the past, I've made concessions by giving simpler questions that may not honestly assess students at either end of my 5 - 10 learning standard scale.

With the user experience more smooth now, I have been able to focus this week on making sure that the questions I assign truly assess what students know. I could not do this without the computer helping me out. It feels great to know things are working at this higher scale, and I'm looking forward to having this in place when we get going again in January.

Acting Upon One's Beliefs

Suppose you know in your heart that what you believe is right, and others disagree.

If you are in control, do you charge on ahead and act upon your beliefs?

Do you frame this as merely a communication problem, or is it something bigger?

What is your responsibility to...

  • ...those who agree with you?
  • ...those who disagree with you?
  • ...those who are impacted most by what happens next?

How do your answers to these questions change if you are not the one in control?

How do your answers to these questions change if you are in the minority?

These questions have bounced around in my head since last week, and not just in relation to the U.S. election. It bothers me a lot that I can't answer my own questions with any certainty right now.

Computational Thinking and Spreadsheets, Teacher Edition (#TeachersCoding)

I ran a workshop last week giving some teachers ideas on how to use computational thinking to improve their workflow. I've written in the past about how spreadsheets can serve as a way to get students thinking like programmers, without the intimidation of a text-based development environment. I don't find teachers any different in this regard.

I spent the beginning of this workshop sharing a bit about my views on why teachers should develop their computational thinking skills. I then set them off to work through answering the following questions about each task in the video below:

  • What is the spreadsheet being programmed to do?
  • What commands are being used?
  • How would I use this in my own practice?

I'm reasonably sure that a majority of teachers have a spreadsheet somewhere that contains student data like the one in the video. My hope is that teachers that watch the video and see what I've done with this spreadsheet will have one of a few possible responses:

  • Wow, I do that by hand right now. Now I know there's an easier way that will save me time.
  • That isn't useful to me, but it does give me an idea of how to do some other task that involves iteration, sorting, or another task best suited for a computer.
  • I do that already. Is that computational thinking?

If I elicit any of these responses, and then get someone to then build a tool that is useful to him or her, I think I've done my job. Learning to code for its own sake isn't necessarily worth a teacher's valuable time. Outsourcing tasks that computers do best to a computer can free a teacher to have more time for those tasks that require the expertise, experience, and a personal touch that only a person can provide. If learning a bit of computational thinking can do that, doing so might be worth the time.

Please comment on the video or below to let me know what you think.

Getting Grade Data from PowerSchool Pro (#TeachersCoding)

Given that I use standards based grading with most of my classes, the grades I assign to students change quickly. I'm modifying those scores multiple times a day in some cases in my school's instance of PowerSchool Pro.

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.

screen-shot-2016-11-09-at-8-26-58-am

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;

assignmentElements.forEach(function(name,index){

assignments.push(name.innerHTML)

})

names = names.slice(0,0.5*(names.length))

var rows = $( "tr[id*='std']" ).toArray()
rows.forEach(function(row){
var currentName = $(row).find('.student-name')[0].innerHTML;
var gradeElements = $(row).find('var');
gradeElements = gradeElements.slice(1,gradeElements.length).toArray();
grades = [];

gradeElements.forEach(function(grade){
var currGrade = (parseFloat(grade.innerHTML)!=NaN)?parseFloat(grade.innerHTML):'';

grades.push(currGrade)
})
if(grades.length>0){
names.push([currentName,grades])

}

})

assignmentNumber = names[0][1].length;

assignmentString = 'Name \t';

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;

Collaborative Review with Google Docs

This is another post celebrating my presence in a part of the world that has unfettered access to Google and its online tools. I hope this continues.

For two out of my previous three units, I've started the final day of class before an exam with a document in Google Docs that is organised into two parts.

At the top is a list the standards and their descriptions for the unit. I might include an empty table for vocabulary, but no words.

At the bottom is a list of problems or online resources.

Before students get started with answering questions and getting help, I get the entire class working on sorting these questions into the related standards in this document. A flurry of cutting and pasting ensues:

screen-shot-2016-11-07-at-1-30-51-pm

The number of edits and simultaneous users is a pretty cool indication that this document, in less than a couple of minutes, ceases to be mine, and begins to be ours. Some students then upload solutions to problems as they complete them, or can pose questions below a problem that another student might answer.

It isn't a perfect system at all, but feels a lot better than printing out a set of problems that show what I value in assessing the standards. That represents a line segment that starts at my computer and ends at the student's notebook. This system at least approaches a more complex interaction of ideas and synthesis at the end of a unit of study that helps both the strong and the weak students make progress before an exam.

1 3 4 5 6 7 31