Tag Archives: teachers coding

Notes to the Future with Google Scripts & PearDeck

I wrote previously about my use of PearDeck in an end of semester activity. One of the slides in this deck was one in which I asked students to write themselves a note containing the things they would want to remember three weeks later at the beginning of semester two. With vacation now over, that day is now. I wrote a Google script that automatically sends the notes they wrote to each student. This allowed me to generally send these out without inadvertently reading the notes in detail. I saw some of them, but made an effort not to see who was writing what.

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() {

var sheet = SpreadsheetApp.getActiveSheet();
var startRow = 2; // First row of data to process
var numRows = 12; // Number of rows to process

var dataRange = sheet.getRange(startRow, 1, numRows, 5) //get all the data in the spreadsheet from the range between (startRow,1) and (numRows,5).
//This gets the first 12 students that are in this class, and the five columns of data I want to use for the email.

var data = dataRange.getValues(); //Store the spreadsheet data in an array
for (i in data) { //for each row in the spreadsheet
var row = data[i];

var studentEmail = row[2]; //the student email is in element 2, which is the third column

var subject = "Note To The Future (AKA Now): " + studentEmail; //email subject

//This next line is text formatted using HTML tags that appears before each students' note.

var greeting = "Happy New Year!

Before break, I asked you to write an email to yourself with things you would want to remember at the beginning of the semester. Whatever you wrote in that text box in Pear Deck is below for you to enjoy.

I'm looking forward to seeing you Tuesday or Wednesday in class.

Be well,
EMW


";
var message = greeting + row[3] //Combines the greeting and the student's individual note

MailApp.sendEmail({to:studentEmail, subject:subject, htmlBody:message});
//Sends the email to the student, with the subject defined in line 14, and the message from lines 20 and 21.
//htmlBody means the email will be formatted as HTML, not just text.
}

}

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.

Two Lane Road and Collaborative Data Collection

I love doing three act problems. This fact should surprise nobody that regularly reads my blog.

In tasks that involve prediction or measurement from a range of sources, I see lots of tables of values made by students that stay in the notebook. I have always wanted to get that data in the hands of the rest of the students to use, or not use, as they see fit. In one of my previous iterations, I pasted the data into a shared Google spreadsheet that students could then paste into a Desmos graph, again, if they felt doing so would be helpful. This was incredibly rich source of material for conversations between students. Still, that extra step of having to paste from one collaborative document (Google) to a non-collaborative one (Desmos Calculator) was one more step than I felt was needed.

Of course, you're now screaming at the screen. "Calling out Desmos for being non-collaborative is entirely off base, Evan" , you say. I agree to an extent. Their own activities share data collected by individual students, and on the teacher side, the Activity Builder does the same thing for letting teachers see student data all in one place. They do this incredibly well. Students also get to see each others answers when teachers let them. What doesn't happen right now is students seeing each other's graphs, tables, and lists of expressions.

This, along with a desire to play with the Desmos API, is why I created DataTogether (Github repository here), a hacky way to make Desmos data collaborative. The page is written in React, and uses Firebase to do the realtime data connection.

Dan Meyer tweeted shortly after that these changes might be somewhere in the pipeline already:

This is probably why I may not be adding a lot of code comments to my code in the near future.

I did my Two Lane Road 3-act with a small group of students this morning on account of tenth graders being out for the PSAT. After the standard Act 1 conversation, and a really great conversation about agreements between groups on collecting data from the video, the students began collecting data on the red and blue cars.

The students were efficiently able to collect data together on separate computers after profuse apologies for the limitations of my code:

screen-shot-2016-11-02-at-9-45-38-am

screen-shot-2016-11-02-at-9-44-37-am

I then had each student use the tools within Desmos to construct a linear model from the data. The fact that two computers were looking at the same data, but in different Desmos windows, paid significant dividends when two students on the same team created their models in different ways. One student made a regression. Another created a line that went through one set of points perfectly, but missed another. Math class conversation gold right there.

I exported both of their data through the console (code shown below) and pasted it into Desmos. I then put together a simulation of the red and blue car so that the teams could see what their car looked like in simulation.

screen-shot-2016-11-02-at-9-56-22-am

You can check out the Desmos graph here.

This allowed us to make a prediction directly off of their models that looked like the original video.

We ran out of time in the end to do much more than sharing predictions and watching the third act, but I'm pretty pleased with how things went overall. My paper handouts with three printed color frames of the video went unused. I think


A big shout-out of thanks to everyone for helping test the data collection tool I shared earlier.

Here's a screenshot of our age vs. teaching years data:
screen-shot-2016-11-02-at-10-00-41-am

The data can be downloaded from the DataTogether page, loading data set 3DR9, and then by going to the console and entering the code below:

ptString = "";
myComponent.state.groupData.forEach(function(pt){ptString=ptString+pt.x+" \t "+pt.y+" \n "});

This string can then be pasted right into the Desmos expression list if you want to play with it.

Exploring Functions (and Non-Functions) Interactively

Heeding Dan's encouragement to step things up in his NCTM talk, I revisited an introduction to functions activity that I put together three years ago. The idea is to get students to make observations about inputs and outputs and use the 'notice and wonder' parlance from the Math Forum to prompt conversations about these ideas.

I rewrote the activity with some deliberate changes and webified it to make it easy to access and share - you can find it here:
http://emwdx.github.io/functions-exploration/index.html

Screen Shot 2016-04-29 at 9.55.09 AM

The activity has a few elements that I want to highlight with the hope that you might consider (a) trying the activity with your students or (b) downloading the code for the activity, tweaking it, and then re-sharing it with your enhancements.

Students go through the modeling cycle multiple times.

The activity begs students to take a playful approach. Change the input value and watch the output. Predict what's going to happen and see if your mental model is correct. Then do the next one, and the next.

Arithmetic isn't necessarily a prerequisite.

Some students were actually more puzzled by the functions that took text inputs. They experimented nevertheless to figure out what was happening, and some noticed that the pattern worked for numbers too.

Controversy is built in.

Students working on Functions 5 and 6 saw nothing weird happening when they worked alone. When they then went to share their answers with classmates, the latter function started some really interesting interactions between students trying to figure out who was wrong.

Students of different levels all succeeded and all struggled at some point.

One student zipped through the arithmetic exercises and then got stuck figuring out Function 3 or 7. Some of the weaker students jumped around and got Functions 1 and 4 and 8, which is enough to get in the game of finding patterns and drawing conclusions. A higher level student experimented with Function 7 to find that there was a well defined range for the outputs - random, but with limitations.

The need for definitions came out of the activity, not the other way around.

Students felt the need to clearly define the behavior of Functions 6 and 7 as being different than the others in a fundamental way. Definitions for relations and functions weren't huge cognitive jumps for students since there was a recently established context. It's also important to notice that the definition for relations that aren't functions has to be more than just the lack of a pattern. Function 6 helps with this.

Many of the CCSS standards for mathematical practice are embedded within.

...as are some of the high school standards for functions.

If you try this with students, let me know how it goes.


Technical Details:

If you want to try this yourself, you can download the code from Github here:
https://github.com/emwdx/functions-exploration/tree/gh-pages

I did this also as an attempt to whip together something using the React JS library which I've been learning recently. It makes for a really nice interface for building this type of interactivity into a webpage. There will be more, so stay tuned.

The React components for the eight functions are in lines 86-102 of the index.html file. The function definitions used by each component are defined toward the bottom of the code in that file. You could change these around using Javascript to make these functions fit with your vision of this activity for students. The file is self contained, so you share just the HTML file you change with students, the page will function correctly.

Happy coding!

My Journey with Meteor as a Teacher-Coder

Many of you may know about my love for Meteor, the Javascript framework that I've used for a number of projects in and around the classroom. I received an email this morning alerting me (and the many other users) that the free hosting service they have generously offered since inception would be shutting down over the next month.

To be honest, I'm cool with this decision. I think it's important to explain why and express my appreciation for having access to the tool for as long as I have.

I started writing programs to use in my classroom in earnest in 2012. Most of these tended to be pretty hacky - a simple group generator and a program to randomly generate practice questions on geometric transformations were among these early ones. The real power I saw for these was the ability to collect, store, and filter information that would be useful for teaching so that I could focus my time on using that information to decide on the next steps for my students. I took a Udacity course on programming self-driving cars and on web applications and loved what I learned. I learned to use some Python to take some of the programs I had written early on and run them within web pages. I built some nifty online activities inspired by the style of Dan Meyer and put them out for others across the world to try out. (Links for these Half-Full and Shapes tasks are below.) It was astounding how powerful I felt being able to take something I created and get it out into the internet wilderness for others to see.

It was also astounding how much time it took. I learned Javascript to manage the interactivity in the web page, and then once that was working, I switched to Python on the server to manage the data coming from users. For those that have never done this sort of switching, it involves a lot of misplaced semicolons, tabs, and error messages. I accepted that this was the way the web worked - Javascript in front, and Python (or PHP, Rails, Perl, etc.) on the back end. That extra work was what kept someone like me from starting a project on a whim and putting it together. That cost, in the midst of continuing to do my actual job of teaching and assessing students five days a week, was too great.

This was right around the summer of 2013 when a programmer named Dave Major introduced me to Meteor. I did not know the lingo of reactivity or isomorphic Javascript - I just saw the demonstration video on YouTube and thought it was cool. It made the connection between the web page and the server seamless, eliminating the headaches I mentioned earlier. Dave planned to put together some videos and tutorials to help teachers code tools for the classroom using Meteor, and I was obviously on board. Unfortunately, things got in the way, and the video series didn't end up happening. Still, with Dave's help, I learned a bit about Meteor and was able to see how easy it was to go from an idea to a working application. I was also incredibly impressed that Meteor made it easy to get an application online with one line: meteor deploy (application-name here) . No FTP, no hostname settings - one line of code in the terminal, and I could share with anybody.

With that server configuration friction eliminated, I had the time to focus on learning to build truly useful tools for myself. I created my standard based grading system called WeinbergCloud that lets students sign up for reassessments, earn credit for the homework and practice they did outside of class, and see the different learning objectives for my course. I created a system for my colleagues to use to award house points for the great things that students did during the school day. I made a registration and timing system for our school's annual charity 5K run that reduced the paperwork and time required of our all volunteer staff to manage the hundreds of registrants. I spoke at a Meteor DevShop about this a year and a half ago and have continued to learn more since then.

Most importantly to me, it gave me knowledge to share with a class of web programming students, who have learned to create their own apps. One student from last year's class learned about our library media specialist's plan to hold a read-a-thon, and asked if he could create an interactive website to show the progress of each class using, you guessed it, Meteor. Here's a screenshot of the site he created in his spare time:
Screen Shot 2016-03-11 at 10.34.26 AM

And yes, all of these apps have been hosted on the free deploy server at *.meteor.com, and yes, I will have to do the work of moving these sites to a new place. The public stance from Meteor has been that the free site should not really be used for production apps, something I've clearly been doing for over two years now. I re-read that line on the documentation website back in January and asked myself what I would do if I no longer had access to that site. The result: I did what I am paid to do as a master learner, and learned to host a site on my personal server. That learning was not easy. The process definitely had me scratching my head. But it also meant that I had a better understanding of the value that the free site had given me over my time using it.

The reality is that Meteor has clearly and publicly shifted away from being just being that framework that has a free one line deployment. The framework has so much going for it, and the ability to create interesting apps is not going away. The shift toward doing what one does best requires hard choices, and the free site clearly was something that did not serve that purpose. It means that those of us that value the free deploy as a teaching tool can seek other options for making it as easy to get others in the game as it was for us.

Meteor has helped me be better at my job, and I appreciate their work.


As promised, here are those learning task sites I mentioned before: