Category Archives: programming

MeteorPad Tutorial: GoldMine

In a unit on Meteor applications for my web design class, I wrote a series of applications to help my students see the basic structure of a few Meteor applications so that they could eventually design their own. The students had seen applications that tallied votes from a survey, compiled links, and a simple blog. This one was about being competitive, and the students were understandably into it.

This tutorial was designed to use MeteorPad due to some challenges associated with installing Meteor on student computers. The first one involved permissions issues since students are not by default given access to the terminal. The second involved connectivity issues to the Meteor servers from China, which unfortunately, I never fully resolved. MeteorPad offered an awesome balance between ease of making an application and minimizing the need for Terminal. For anyone looking to get started with Meteor, I recommend trying out MeteorPad as it doesn't require any knowledge of working in the terminal or software installation.

I was able to take data on the students clicking away as I created new pieces of gold and put it out into the field. I've written previously about my enthusiasm for collecting data through clicks, so this was another fun source of data.

Code can be downloaded here from Github.

Coding The Feud with Meteor

Now that I'm cleaning up loose ends from the year, I'm finding time to share some of the projects that have kept me from posting here as of late. Sorry, folks.

We decided to shift from our usual Quiz Bowl activity at the end of the year to a new format of Family Feud. This process developed over the final quarter of the year, so I was able to get some student help putting a web application together for the visuals. A big shout out to Alex Canon in 9th grade who did prototyping of the HTML templates using Blaze in my Web Programming class.

Screen Shot 2015-06-17 at 9.20.49 PM

The application is written all in Meteor and was a big hit. I've posted the code here at Github and a demo application at http://HISfeud.meteor.com. The looping music and authentic sound effects made for a good show while students tried to remember what they answered on their survey from a month ago. This was part of our end of year house competition, which complicated things a bit since Family Feud is played two teams at a time. Still, I like how it worked out.

Lots more to share, so stay tuned.

Online School Resumes with Meteor

As you may know, I've been teaching a web programming course this year. I wrote previously about the work we did at the beginning of the year making interactive websites using the Meteor framework. Since then, we've spent time exploring the use of templates, event handlers, databases, and routing to build single page applications.

The latest assignment I gave students was to create an online school resume site with a working guestbook. I frequently discuss the importance of having a positive digital footprint online, and one of the most beneficial ways of establishing this is through a site created to share their work. Students worked last week to complete this and submitted their projects. We've had connectivity issues to the Meteor servers from China from school. As a result, some students used Meteorpad, which unfortunately means their sites aren't permanent.

Those that were successful at deploying, however, have persistent guestbooks that anyone can visit and comment upon. Some students added secret pages or like buttons to show that they have learned how to use the reactive features of Meteor. The students were excited when I said I would post links on my blog and have given me permission to share. Here is the set of deployed sites:

Maria's Site
Dominick's Site
Tanay's Site
Luke's Site
Steven's Site
Tiffany's Site

I'm really proud of how far these students have come since the beginning of the year. They have accrued some bad habits of copying code and avoiding commenting their Javascript, but I take some responsibility for not holding them accountable for this. My goal was to have the focus of this course be on building and creating as the first priority, and the second on developing skills as programmers. As with many of the subjects I teach, helping students see the need for the basics is often most easily done with the end product in mind.

If anyone wants recommendations for a summer hire, let me know.

Code for Teachers: What do you want to learn to build?

A conversation with Dan Anderson(@dandersod) this morning has pushed me to revisit a coding for teachers concept that I've nudged forward before, but haven't made happen to my liking yet. There's an amazing variety of coding materials and tutorials out there, but few that I've seen take the approach of helping teachers build immediately useful tools to improve their workflow.

 To be done right, this must acknowledge the fact that this valid sentiment is out there:

@cheesemonkeysf: @dandersod @emwdx @dcox21 But are you prepared for… the "coding-impaired"?

As any person that has dabbled in programming knows, there's always a non-trivial period of frustration and bug hunting that comes with writing code. This discomfort is a part of learning any new skill, of course. It's also easy to say that you aren't a code person, just as someone can say that he or she isn't a math person. What pushes us (and our students) through this label to learn anyway?

  • Minimal hand-waving about how it 'just works'
  • Experiences that demonstrate the power of a growth mindset
  • Concrete ideas first, abstraction later
  • Building the need for better tools
  • Maybe the most important: having the right people at your side

I want to work to make this happen. Consider this a pile of rocks marking the beginning of that trail.
How do we start? I see this as an opportunity to use computational thinking as a way to improve what we do in the classroom. This project should be built on improving workflow, with the design constraint that it needs to be accessible and as useful as possible. I also want to use a range of languages and structures - block programming, spreadsheet, Automator, everything is fair game.

I want to first crowdsource a list of tools that would be useful to learn to build. Let's not limit ourselves to things that are easy at this point - let's see what the community wants first. I've posted a document here:

What Do You Want To Learn To Build?

Go there and share your ideas. I don't want to wait any longer to start talking about what this could be.

    Clicking Useless Buttons and Exponential Models

    Last fall, when I was teaching my web design students about jQuery events, I included an example page that counted the number of times a button was clicked and displayed the total. As a clear indicator of their strong engagement in what I asked them to do next, my students competed with each other to see who could click the most number of clicks in a given time period. With the popularity of pointless games like Cookie Clicker , I knew there had to be something there to use toward an end that served my teaching.

    Shortly afterwards, I made a three-act video activity that used this concept - you can get it yourself here.

    This was how I started a new unit on exponential functions with my Math 10 class this week. The previous unit was about polynomials, and had polynomial regression for modeling through Geogebra as a major component. One group went straight to Geogebra to solve this problem to figure out how many clicks. For the rest, the solutions were analog. Here's a sample:

    Screen Shot 2015-03-12 at 4.43.32 PM

    Screen Shot 2015-03-12 at 4.43.54 PM

    Screen Shot 2015-03-12 at 4.44.06 PM

    When we watched the answer video, there was a lot of discouragement about how nobody had the correct answer. I used this as an opportunity to revisit the idea of mathematics as a set of different models. Polynomial models, no matter what we do to them, just don't account for everything out there in the universe. There was a really neat interchange between two students sitting next to each other, one who added 20 each time, and another who multiplied by 20 each time. Without having to push too much, these students reasoned that the multiplication case resulted in a very different looking set of data.

    This activity was a perfect segue into exponential functions, the most uncontrived I think I've set up in years. It was based, however, on a useless game with no real world connections or applications aside from other also useless games. No multiplying bacteria or rabbits, no schemes of getting double the number of pennies for a month.

    I put this down as another example of how relevance and real world don't necessarily go hand in hand when it comes to classroom engagement.

    Projectile Motion with Python, Desmos, and Monte Carlo Simulation

    I've written about my backwards approach to to projectile motion previously here, here, and here.

    I had students solving the warm-up problem to that first lesson, which goes like this:

    A student is at one end of a basketball court. He wants to throw a basketball into the hoop at the opposite end.

    What information do you need to model this situation using the Geogebra model? Write down [______] = on your paper for any values you need to know to solve it using the model, and Mr. Weinberg will give you any information he has.
    Find a possible model in Geogebra that works for solving this problem.
    At what minimum speed he could throw the ball in order to get the ball into the hoop?

    The students did what they usually do with the Geogebra projectile motion model and solved it with some interesting methods. One student lowered the hoop to the floor. Another started with a 45 degree angle, and then increased the speed successively until the ball made it into the hoop. Good stuff.

    A student's comment about making lots of guesses here got me thinking about finding solutions more algorithmically. I've been looking for new ways to play around with genetic algorithms and Monte Carlo methods since they are essentially guess and check procedures made productive by the power of the computer.

    I wrote a Python program that does the following:

    • Get information about the initial characteristics of the projectile and the desired final location.
    • Make a large number of projectiles (guesses) with random values for angle and initial speed within a specified range.
    • Calculate the ending position of all of the projectiles. Sort them by how far they end up compared to the desired target.
    • Take the twenty projectiles with the least error, and use these values to define the initial values for a new, large number of projectiles.
    • Repeat until the error doesn't change much between runs.
    • Report the projectile at the end with the least error.
    • Report the entire procedure a number of times to see how consistent the 'best' answer is.

    I've posted the code for this here at Github.

    As a final step, I have this program outputting commands to graph the resulting projectile paths on Desmos. Pasting the result into the console while a Desmos calculator open, makes a nice graph for each of the generated projectiles and their intersecting at the desired target:
    Screen Shot 2015-02-14 at 11.12.03 AM

    This is also on a live Desmos page here.

    This shows that there is a range of possible answers, which is something I told my physics class based on their own solutions to the problem. Having a way to show (rather than tell) is always the better option.

    I also like that I can change the nature of the answers I get if I adjust the way answers are sorted. This line in the code chooses how the projectile guesses are sorted by minimizing error:

    self.ordered = self.array.sort(key=lambda x: abs(x.error))

    If I change this to instead sort by the sum of error and the initial speed of the projectile, I get answers that are much closer to each other, and to the minimum speed necessary to hit the target:

    Screen Shot 2015-02-14 at 11.19.01 AM

    Fun stuff all around.

    Coding WeinbergCloud - An Update

    Over the past few weeks, I've made some changes to my standards based grading system using the Meteor framework. These changes were made to address issues that students have brought up that they say get in the way of making progress. Whether you view these as excuses or valid points, it makes sense to change some of the features to match the students' needs.

    I don't know what standard 6.2 means, Mr. Weinberg.

    There are many places students could look to get this information. It does make sense, however, to have this information near where students sign up for reassessments.

    When students select a standard, a link pops up (if the standard exists) with a description. This has made a big difference in students knowing whether the standard they sign up for is what they actually intend to assess.

    Screen Shot 2015-02-13 at 1.07.27 PM

    I also added the entry for the current mastery level, because this is important in selecting appropriate assessments. The extra step looking it up in the online gradebook isn't worth it to me, and asking students to look it up makes it their responsibility. That's probably where it belongs.

    Can you post example problems for each standard?

    The biggest issue students have in searching for online resources for a specific standard is not knowing the vocabulary that will get the best resources. There's lots of stuff out there, but it isn't all great.

    I post links to class handouts and notes on a school blog, so the information is already online. Collecting it in one place, and organizing it according to the standards hasn't been something I've put time into.

    Students can now see the standards for a given course, listed in order. If students are interested, they can look at other courses, just to see what they are learning. I have no idea if this has actually happened.

    Screen Shot 2015-02-13 at 1.20.19 PM

    Selecting a standard brings a student to see the full text and description of the standard. I can post links to the course notes and handout, along with online resources that meet my standards for being appropriately leveled and well written.

    Screen Shot 2015-02-13 at 1.20.40 PM

    At the moment, I'm the only one that can add resources. I've written much of the structure to ultimately allow students to submit sites, up-vote ones that are useful to them, and give me click data on whether or not students are actually using this, but I'm waiting until I can tweak some UI details to make that work just the way I want it.

    Mr. Weinberg, I signed up for an assessment, but it's not showing up.

    The already flaky internet in China has really gotten flakier as of late. Students are signing up for reassessments, but because of the way I implemented these requests being inserted into the database, these requests weren't actually making it to the server. I've learned a lot more about Meteor since I wrote this a year ago, so I've been able to make this more robust. The sign-up window doesn't disappear until the server actually responds and says that the insert was successful. Most importantly, students know to look for this helper in the upper left hand side of the screen:

    Screen Shot 2015-02-13 at 1.14.13 PM

    If it glows red, students know to reload the page and reconnect. Under normal Meteor usage conditions, this isn't a problem because Meteor takes care of the connection process automatically. China issues being what they are, this feature is a necessity.

    I've written before about how good it feels to build tools that benefit my students, so I won't lecture you, dear reader, about that again. In the year since first making this site happen though, I've learned a lot more about how to build a tool like this with Meteor. The ease with which I can take an idea from prototype to production is a really great thing.

    The next step is taking a concept like this site and abstracting it into a tool that works for anyone that wants to use it. That is a big scale project for another day.

    Web Application Design Class and Meteor

    The first semester of my web design and programming course was an overview of HTML, CSS, Javascript, and jQuery. The end goal is to get students piecing together their own web applications using the Meteor framework. I don't know how sophisticated these will be. The prototypes they are putting together, however, as well as the questions they are asking, show that they are ready for Meteor.

    Given that few of my students have programmed before this class, there are some gaps in knowledge that I'll need to think through. The one thing I didn't want to do in this class was declare that students need to go through a full CS course before being able to touch this material. The value of a framework like Meteor is the ease with which anyone can piece together an application. The most consistent theme in this course has been that getting students working with code and troubleshooting upfront is much more productive than a lecture on for-loops. My model has been to have students take a piece of code, figure out what it does, and then hack or tweak it to do something different. As students get more experience, they become more comfortable writing code from scratch to complete a task.

    Despite knowing this about my group, I almost didn't do continue the model in exactly this way after the winter break. I was going to do a unit on classes and methods, but in my brainstorming how to do this, I realized that the better approach would be to look at database queries and MongoDB. The concepts of properties would be obvious in the way Mongo stores information, so it would then be easy to talk about the concept of objects once students were interacting with the database. Again, this became more 'Application first, theory second.'

    This also meant I had another opportunity to bring up fundamentals of computational thinking. I opened up the lesson by having students look at a screen sized list of all of the ninth grade students and some of the information stored by the school. I asked them questions like this:

    • How many students in Mr. S's advisory are girls?
    • How many students in the red or blue house are in Mrs. M's advisory?
    • Do any students share the same birthday?

    They didn't mind this too much, but there were some different answers to the questions that came from counting by hand. It was fairly mindless work and none of them were too bothered by my requests to do it with this data set. Then I told them that we were going to do the same with the list of 160 students in the entire upper school.

    Groans.

    They didn't ask it because they know me at this point, so I told them that there was, of course, a better way. I taught them some Mongo queries using a sandboxed collection consisting of student information from the school. I then set them loose with a list of questions about a fictional database of people that I generated and posted at http://citizens.meteor.com. (The names for the collection came from the cast list for the most recent Hobbit movie. A fun side project, by the way.) A subsequent lesson was about sorting, limiting, and interacting with an array of returned documents, and students handled it well. We did some quick demonstrations of dot notation, but I didn't make a big deal out of it.

    In the next class, I gave students the following prompt:

    Mr. Weinberg wants to survey students on their favorite ice cream flavor. He wants to be able to sort the results by grade, gender, and house. Sketch the layout of a web form he could use to collect this information.

    Their sketches were good fun:
    64BADB57 - image

    05D37A55 - image

    D844222E - image

    I asked them to then work backwards from their database experience: What would a single document in the database containing the results of this survey look like? They were coming up with sample properties and values. I then showed them how these values could be captured from the form elements using jQuery.

    Then came the Meteor magic.

    I took the web form and pasted it into a template. I took the jQuery calls and put them in an event handler for the template. I added a line to create a collection, made another quick template to show results, and then made a helper to fill that template with the entries in the database. One last thing I put in to prevent rapid submissions – calls to clear out all of the form elements after the database insert.

    I typed meteor in the terminal, fixed one error, and then the app was live. I had students go to my IP address and the form popped up. The page started filling with survey results as students realized they could interact with the page. These were initially full submissions, but soon after, lines with empty values showed up as students realized that they could add garbage data and submit them really quickly. I told some of the students that were doing this that people would be doing that with their apps soon, so there would need to be a way to handle it in their apps.

    I then set students off in groups to do this same process with different web applications along the lines of the one I used to start class. It was incredibly fun hearing them talk about how they were going to move forward, including a number of new web page sketches. I gave them more concepts to work from, including an after school activities form and a web portal through which students could tell school administration that they were going to be late to school. I asked them to write down potential database queries to help find important information quickly. The really impressive part came when they had ideas for what they wanted to program. One student suggested a database of sports scores. Another, an online store.

    The class was abuzz with ideas for what was possible. I knew that I had to show students how to get these into Meteor the next class, in the easiest way possible.

    Enter Meteorpad. I made a streamlined form with instructions on how to take the web forms they had designed and get them into a template with as few steps as possible. The students don't currently have terminal access on their Macbooks, so I can't get them to run Meteor locally.

    You can check out the MeteorPad template I gave them here:
    here...

    ...and the full set of instructions for adapting their code to it here.

    They followed the instructions, and by the end of the class, most had their own versions working. The students then started tweaking them to see what they could do to make it work as they wanted.

    Today, my students were going from an idea concept to coding their own apps to getting these prototypes online. Yes, they were primitive, lacked error handling, styling, and had typos. No, the students didn't have much understanding of the differences between helpers and event handlers. That is just fine. It's only January! I originally thought we'd get to this point by the end of the year, so this is a great point to be at right now.

    I'm can now help students take their ideas and turn them into working prototypes. These students know how to look up code to do what they want to do. They've happened upon W3Schools web pages and StackOverflow, and while they are generally overwhelmed by what they find there, they know how to ask me the right questions about what they see. This was a great way to end a busy week.

    Have a great weekend, everyone!

    Using Twine to Build a Choose Your Own Adventure Lesson

    If you haven't seen Dan Meyer's talk on using the structures of video games to make math class resemble things students like, you need to do so now. You could wait until after Christmas, I guess, but not too much longer.

    There's an interesting mix of comments on that blog post. The thread that interests me most is that on the relationship between the story telling aspect of video games, and the equivalent story telling that happens in good math problems. I'm not convinced that there needs to be a good backstory for a game to be compelling, just as a real world context doesn't tend to be sufficient to get most students enthusiastic about a particular problem.

    One comment from Kevin Hall, however, tapped into an idea I've also been mulling over since finding one of my own Choose-Your-Own-Adventure books during a trip back home in November. Here's Kevin writing in a comment on Dan's post:

    I’ve thought about embedding videos in a Google Form so students can choose their own adventure and see the consequence of their choices. For example, if each pizza is $6 and delivery is $1.50, you could ask how much it would cost to get 2 pizzas delivered. If a student selected $13.50, you’d take them to a video of a single delivery guy bringing 2 pizzas. If the student said $15, you’d show a guy bringing 1 pizza, driving back to the pizza place, and bringing the other pizza separately. But it’s a lot of work and, I think, a critical aspect of making math more like video games.

    The work of putting together such a task is not to be ignored. I do think though that getting students thinking about their thinking in a way that doesn't require whole class discussion is worth investigating. Some carefully crafted questions, ones that we might ask the entire class based on student responses, might also have some power for individual students to go through before sharing thoughts with others.

    I also recently learned about an online tool called Twine that takes away some of the difficulty of putting these together. You can edit your adventure in the browser, link pages together without too much hassle, and add links to pictures or videos online using standard HTML. If you know Javascript, you can use it to add even more interactivity to the story. The tool allows you to piece together a truly individualized path.

    Screen Shot 2014-12-24 at 1.32.37 PM

    I'm interested in piecing together some activities using Twine as a starting point for some explorations next semester. I've done things like this on paper before, but the limitations of paper are such that it's impossible to progressively reveal questions based on student responses. The way that Twine reduces the friction for doing this seems just enough to make this an option to explore. I'm writing this out now as a way to get some of you to push me to actually do it.

    I'd love to see what happens when the math-twitter-blog-o-sphere gives Choose Your Own Adventure a try. Give it a go, and let me know what you create. I'll be here.

    Analyzing IB Physics Exam Language Programmatically

    I just gave my IB physics students an exam consisting entirely of IB questions. I've styled my questions after IB questions on other exams and on homework. I've also looked at (and assigned) plenty of example questions from IB textbooks.

    Just before the exam, students came to me with some questions on vocabulary that had never come up before. It could be that they hadn't looked at the problems as closely as they had before this exam. What struck me was that their questions were not on physics words. They were on regular English words that, used in a physics context, can have a very different meaning than otherwise. For these students that often use online translators to help in decoding problems, I suddenly saw this to be a bigger problem than I had previously imagined. An example: a student asked what it meant for an object to be 'stationary'. This was easily explained, but the student shook her head and smiled because she had understood its other meaning. On the exam, I saw this same student making mistakes because she did not understand the word 'negligible', though we had talked about it before in the context of multiple ways to say that energy was conserved. Clearly, I need to do more, but I need more information about vocabulary.

    It got me wondering - what non-content related vocabulary does occur frequently on IB exams to warrant exposing students to it in some form?

    I decided to use a computational solution because I didn't have time to go through multiple exams and circle words I thought students might not get. I wanted to know what words were most common across a number of recent exams.

    Here's what I did:

    • I opened both paper 1 and paper 2 from May 2014, 2013, 2012 (two time zones for each) as well as both papers from November 2013. I cut and pasted the entire text from each test into a text file - over 25,000 words.
    • I wrote a Python script using the pandas library to do the heavy lifting. It was my first time using it, so no haters please. You can check out the code here. The basic idea is that the pandas DataFrame object lets you count up the number of occurrences of each element in the list.
    • Part of this process was stripping out words that wouldn't be useful data. I took out the 100 most common words in English from Wikipedia. I also removed some other exam specific words like instructions, names, and artifacts from cutting and pasting from a PDF file. Finally, I took out the command terms like 'define','analyze','state', and the like. This would leave the words I was looking for.
    • You can see the resulting data in this spreadsheet, the top 300 words sorted by frequency. On a quick run through, I marked the third column if a word was likely to appear in development of a topic. This list can then be sorted to identify words that might be worth including in my problem sets so that students have seen them before.

    Screen Shot 2014-12-18 at 6.41.30 PM
    There are a number of words here that are mathematics terms. Luckily, I have most of these physics students for mathematics as well, so I'll be able to make sure those aren't surprises. The physics related words (such as energy, which appeared 177 times) will be practiced through doing homework problems. Students tend to learn the content-specific vocabulary without too much trouble, as they learn those words in context. I also encourage students to create glossaries in their notebooks to help them remember these terms.

    The bigger question is what to do with those words that aren't as common - a much more difficult one. My preliminary ideas:

    • Make sure that I use this vocabulary repeatedly in my own practice problems. Insist that students write out the equivalent word in their own language, once they understand the context that it is used in physics.
    • Introduce and use vocabulary in the prerequisite courses as well, and share these words with colleagues, whether they are teaching the IB courses or not.
    • Share these words with the ESOL teachers as a list of general words students need to know. These (I think) cut across at least math and science courses, but I'm pretty sure many of them apply to language and social studies as well.

    I wish I had thought to do this earlier in the year, but I wouldn't have had time to do this then, nor would I have thought it would be useful. As the semester draws to a close and I reflect, I'm finding that the free time I'll have coming up to be really valuable moving forward.

    I'm curious what you all think in the comments, folks. Help me out if you can.