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.


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:

…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!

Students and Working With Big Data

I happened upon this tweet today:

I hadn’t heard of the Oceans of Data Institute before, but a quick look at its website revealed some interesting areas of focus:

  • Designing interfaces to let students interact with large sets of data
  • Defining the skills profile of big data scientists explicitly

As an example of their projects, the page includes a link to http://oceantracks.org, which allows students to visualize the movement of different animals in the ocean. In the image below, red is the track of an elephant seal, yellow is a blue-fin tuna, and turquoise is a white shark.
Screen Shot 2015-01-10 at 5.50.31 AM

I like the idea of students getting large data sets and learning to play with them. I agree with the idea that students need to understand the role of data in the world given how frequently it is used to guide decisions. Having students collect, manage, model, and understand data is key to the scientific method and the learning process. Feeling comfortable drawing conclusions from data is crucial to being considered quantitatively literate today. I really like that ODI is putting in the effort to make this sort of exploration possible, while also acknowledging that there is a lot of work to be done.

Here is an example of the curation they are doing to share best practices:

All that being said, here’s one quote from an executive summary about the skills profile for big data specialists that surprised me:

Unexpectedly, “soft skills” such as analytical thinking, critical thinking, and problem solving dominated the 20+ big data skill and knowledge requirements identified by the panel and endorsed by experts who completed the validation survey.

As a teacher, I find that this isn’t unexpected. The skills in the profile (which can be downloaded here) include skills that I’m interested in cultivating in my students. These soft skills are the key to students being successful in any field, not just big data. These are the truly transportable skills that I hope my students have long after they have left my classroom. The executive summary also identifies “defining problems and articulating questions” as one of the key tasks that are essential to the work of data scientists. I also believe this to be a focus of my time with students, and a focus of the work of most K-12 teachers.

The site also links to this article, which suggests that the conclusions drawn in the executive summary are more declarative and alarmist than I interpret them to be:

The skills necessary for the data analytics jobs of tomorrow aren’t being taught in K–12 schools today, according to a new report released by the Education Development Center, Inc.’s (EDC) Oceans of Data Institute.

I’m not sure how the Oceans of Data Institute feels about the comparison, but they do link to the article in their page about the project. I’m a big believer in teaching computational thinking skills. I acknowledge that getting more data scientists is an obvious goal for an organization with ‘data’ in their name. I think that using data is a nice way to tick off the ‘real-world relevance’ box along the way to the bigger picture skills that students need to develop.

I just don’t think we need another bold statement about a skill set that is missing from today’s curriculum. I want more tools that get students interacting with data, the creation of which ODI states and has demonstrated is its goal. That’s certainly a better way to get educators on board.

Planning for instruction: Not just for humans!

My wife and I welcomed a new member to our family a couple months ago. Meet Mileaux:

His name is a play on the more standard Milo, with the end spelled in the Cajun way as a tribute to Josie (my wife’s) roots. He’s now around six months old. We’re not exactly sure what he is – the current theory is a mix of a Pekinese and a Pomeranian, but there are hints of a whole bunch of other dogs in his behavior. His hobbies include chewing on towels and begging on command with his paws clenched together like an Italian soccer player trying to get out of a yellow card call. You have to see it to understand how spot on this description is.

Training him has been really interesting. As with every other part of my life since I started teaching, it serves as yet one more source of data on how learning occurs naturally. A disclaimer:

Yes, I know that my students are not dogs. I am saying, for the purposes of understanding the learning process, that outside of the supremely unnatural structure currently called ‘school’, that some aspects of learning are universal. As another comparison with my students, I can say for sure that Mileaux doesn’t like when I lecture him either.

Mileaux shows a lot of behavior that makes sense when thinking about how learning really should happen. He responds more strongly to positive reinforcement than negative, and the negative (when we do resort to it) has the consequence of sometimes leaving him confused rather than corrected. He sometimes gets tired of learning when he’s had enough. Sometimes he just needs to take a break in order to get it the next time.

One command we hadn’t tried until today was to lay down. We hadn’t really figured out the best way to do it. Yes, there are videos with suggestions on how to do it, but it’s fun to try to figure out how to communicate what we want him to do. I went for a quick 20-minute run to think of how I wanted to approach it. Here was my process:

  • I knew what he already knew how to do – specifically to sit. That seemed like a good entry point into getting him to lay down.
  • He just had his Lepto shot yesterday and was consequently a bit stiff and sore today. I didn’t want to use a leash or pressure to urge him into the down position. I wanted him to be able to figure out what we wanted him to do, and do it on his own.
  • There would, of course, be treats involved in the process when he did exactly what I wanted him to do.

Since he knew how to sit, I could put a treat within his reach laying down on the floor in my fingers. Any time he got up to move toward the treat, I would again give the sitting command. After around five minutes of doing this, he figured out that he needed to stay seated, and chose to stretch out into an awkward leaning position with his head arched down toward the ground. Then came strained reaching and pawing toward the treat on the floor. Soon after, he realized that laying down was a much more comfortable option for getting the treat, and started doing that every time. Copious petting, treats, and praise followed.

The connections to teaching content?

  • There is no paragraph in the textbook introducing the concept of laying down. Mileaux and I didn’t read it together and then do a share-out. I just needed to clearly define what I wanted him to learn, and this didn’t involve words.
  • While it is true that the skill of ‘sitting’ is one that he needed to have beforehand for my method to work, if he didn’t, I would have chosen another entry point to the activity. He lays down every day. He knows what it is. My goal for him was to make the connection between this skill of laying down with the verbal command. The knowledge he already had was really useful in helping him understand what he needed to do, but the background knowledge was not necessarily a prerequisite for the task we were doing.
  • I posed the problem in a way that had constraints that he figured out on his own. I couldn’t tell him not to move his hind legs. That limitation needed to be obvious to him as part of the activity. Managing this limitation as part of getting the delicious snack was what led him to learn the command as quickly as he did.
  • I had him go through this activity from a number of different starting points – standing up in the kitchen, sitting next to the couch, begging in the doorway – because I needed him to see that in these different contexts, the one skill I wanted him to learn was to lay down on command. He figured out that it was the common thread, and not any of the other simpler cues or tricks he could have used as a crutch or shortcut.
  • He didn’t do exactly what I wanted him to do, and felt alright about that. He knew it was just fine to get things wrong. The key to his getting it right in the end was clearly communicating when he did what he was supposed to do.

Granted, this may be strained. I accept that this may not be immediately be applicable to everyone’s classrooms. I do think it’s important to think about what we are asking our students to do, how we are communicating those objectives, and how we are helping them develop a healthy mindset toward learning along the way. We need to be thinking about knowledge in the context of figuring out problems. Solving them is an innate part of living in the world, whether as a snail, a dog, or as a human. The more we can create learning experiences that connect to this need to challenge and interact with our world, the more effective these experiences can be for our students.

Dare to be silent.

I made a promise to myself today – I was going to force the physics class to speak. It isn’t that they don’t answer questions and participate, it’s that usually they seem to do that to please me. Sometimes they will explain ideas to each other and compare answers, but it never works as beautifully as I want it to.

So today I told them I wasn’t going to talk about a problem I gave them. They were. And then I sat on an empty table and waited. It was really difficult for me. Eventually someone asked someone else for an answer. I stayed quiet. Then another person nodded and agreed and then said nothing. I stayed quiet. Then someone disagreed.

Full disclosure – at this point I gestured wildly, but still stayed quiet.

After about five minutes of awkward silence punctuated with half explanations that trailed off, something happened – I don’t know what the trigger was because if I did I would bottle it and sell it at educational conferences – a full discussion was suddenly underway. I was so amazed that I almost didn’t think to capture it – thankfully I did get the following part:
[youtube http://www.youtube.com/watch?v=YVSSjQVpB70&w=420&h=315]

Especially cool to see this knowing that English is not the first language of the students speaking.

I’m going to try to do this more often, though I again must point out that it was incredibly difficult working through the silence. The students in the end decided they had something to say, so they shared their thoughts with each other. I did nothing but wait for it to happen.