On Randomness & Teaching

I really enjoyed this article from Fast Company on the value of randomness in art and design.

As I read, I found many points resonated with what I feel about certain aspects of my teaching practice:

RANDOM VALUES CAN FILL IN THE UNIMPORTANT BLANKS

…The key here is an intelligent decision about what is ordered and configured versus what is appropriately random. In this kind of situation, a random function directly generates some aspect of the work, but that that aspect is usually not the focus.

I write often about the power of using programming and computation to take care of tedious tasks. This article reminded my that I also use computation to introduce randomness in situations where I don’t care about the specifics. I often use a random group generator to make groups for classes. When the size of the groups matters to me on a given day, I use the generator. When the composition matters though, I might arrange them by hand because I don’t have a tool to manage group composition automatically.

Another situation is where I need a nicely factorable quadratic expression – the values don’t matter, but it must be factorable over the rational numbers. The randomness fills in where the details are unimportant here. I can make up a pair of binomials and multiply it out mentally, but I’d rather put in the time to make a generator do this for me. This is where my Khan Academy powered reassessment problem generator has been serving me exceptionally well:

generating-problems

Randomness also helps identify what matters to me and what doesn’t. Sometimes I’ll start generating random problems and realize that I want negative coefficients, or a pair of irrational zeroes. Making decisions and recognizing the patterns is what I want to be spending my time doing, and the computer inserting randomness helps me focus on these tasks.

Here’s more from the article:

RANDOMNESS CAN BE USED TO EMPHASIZE THE ALGORITHM OVER THE RESULTS

Sometimes, the contribution of an artist or designer consist of the rules, logics and coded relationships rather than the output of that process. Repeatedly running the algorithm with random input values can productively undermine results relative to process.

It is an interesting challenge to design generators of questions that nurture specific types of thinking in students. Sometimes that thinking involves deliberate practice of a skill. Other times it involves figuring out a pattern. If students observe after solving a few equations that the form is the same or that the distributive property always seems to be useful after step three, they are identifying and making use of structure as CCSS.MP7 wishes they would.

animated

Having students notice what is the same about sets of different problems requires that you have a set of problems for them to look at. Textbooks always have these sets, but they are already neatly organized into rows and types. Being able to generate these problems easily and have students do the organization is a great way to get them to do the pattern finding themselves.

Credit Expiration & Standards Based Grading

For the background on my reassessment system, check out this previous post.

Here’s the run down of my progression in using standards based grading over the past couple of years:

  • When students could reassess whenever they wanted, they often did so without preparation. They also rushed to do as many reassessments as possible at the end of a quarter or semester. I also needed a system to know who had signed up for a reassessment, for which standard they were assessing, and when they were coming in.
    Solution: Students needed to complete a reassessment sign-up form through Google Forms that included reflection on work that was done to review a standard. In general though, the reflection on these forms wasn’t strong. I needed more, but didn’t get around to clearly defining what I meant by strong reflection.
  • The difficulty of scanning through a form and getting the information I needed prompted me to create an online site using the Meteor programming framework that lets students sign up for reassessments. In real-time, this sorts the reassessments for a given day and helps me stay organized. The problem was that I still wasn’t satisfied with what students needed to do to reassess. They needed to review their mistakes, talk to me, practice and get feedback, and then sign up. Having a way to manage that process was essential.
    Solution: The introduction of credits. Students earned credits for working after school, showing me practice problems, and doing other work to support the deliberate practice and learning needed to get closer to mastery.
  • Many students hoarded their credits until the end of the semester. This prevented the cycle of feedback about learning from continuing, and caused the end of the semester to still be a mad rush to reassess whichever standards are lowest in the grade-book using a machine gun approach.

This brings me to what I wrote about in my year-end reflection about SBG at the end of last year. Hoarding credits and saving them until they want to use them causes less reassessment, and that’s not right. I want to nudge students to reassess more often and know that they should take opportunities as often as possible to show what they know. I’ve threatened to make credit expiration happen since August, and students have been asking when it would start.

No time like the present.

After working on this for a couple of days, I’ve activated a feature on my reassessment management app that allows credits to expire.

Screen Shot 2015-10-15 at 8.45.55 AM

Right now, I will be expiring credits manually. I need to see how students respond to this change before the system does this automatically. I get a visual indication that a given credit has expired and click the ‘fire’ button to expire the credit. I can also restore the credit if I change my mind. The asterisk button lets me apply the credit lifetime in the input box to a specific credit and change the expiration.

For old credits, I applied a much longer lifetime, but as students learn to adjust their behavior, I’m starting with a ten day expiration lifetime. That seems to be just the right amount of time to get students assessing within a reasonable amount of time of doing work related to a standard. I don’t think this changes the time pressure to learn something within a given amount of time, which is one of the benefits of SBG. It does change the pressure to assess within a given amount of time, which I do want to happen.

I’m also adjusting some of my policies that cause the hoarding in the first place. Some of this tendency was a consequence of my system – I haven’t let students go from a 5 to a 10 (on a ten point scale) with one assessment session. Mastery is demonstrated over time. I typically had students go from a 5 to an 8 on a perfect first assessment, and then left it there until the unit exam, when students can demonstrate mastery of standards in the context of many other problems.

I’m planning to loosen this progression in light of the credit expiration changes here. If a student is able to demonstrate the ability to answer questions related to a standard, no matter what I throw at them, that’s a pretty good hint on their mastery level. It’s up to me to give reassessment questions that measure what I’m looking for though. That’s where the art of good assessment and experience comes in. I reserve the right to not raise the mastery level if I’m not convinced of a student’s level – students know that taking a reassessment does not automatically mean their level will be raised. As long as that understanding continues, I think these changes will lead to better learning.

As always, I’ll keep you all updated with how well this works in practice. I can always turn this feature off if it’s a disaster.

#TeachersCoding: Improving Report Writing with CommentHelper

Whenever I start the process of report card comments, I always think of how I might make things more efficient. Text-expander? A comment bank nearby for cutting and pasting common phrases? In the end, however, I end up writing them all from scratch anyway, usually in a spreadsheet. Storing comments that way means that over the course of a year, I can see the progression of my comments for a given student. I like being able to do that, but using a spreadsheet as a writing interface is lousy.

I started thinking about my comments workflow a bit earlier than usual, so there was time to think about using code to redesign the process. I write a lot of the same things over and over again in the process of writing comments. Might it be possible to use code to make this more efficient?

The first thing I thought to do was some word analysis to figure out what phrases to use. I picked up a nifty book: Web Scraping with Python which has a chapter on language processing. There I learned about the n-gram library in Python, which has the ability to parse text for phrases of a given length. I took the text of my comments from last year and ran them through a script to create a list of three, four, and five word phrases that appeared multiple times. I then took this list and embedded it in a file that used the jQueryUI Autocomplete function to make those common phrases available.

Here was what I ended up with:

Screen Shot 2015-10-09 at 8.01.18 AM

The common text area is where I put the blurb about the course that is common to each class of students. Clicking the ‘Add Common’ button adds that text to the text box below. I type the student specific text into the horizontal box below that button, and hitting the right arrow key dumps that text into the comment box below and clears out the text input. As I type into the middle text box, common phrases pop up, and I can select them with the arrow keys.

How well did this work? Well, the autocomplete thing didn’t end up being that useful. The phrases that my script picked up certainly showed up frequently in the words that I typed, but it didn’t feel like using them saved much time. The autocomplete function I put in only matches the complete text in that box, so I would have had to know in advance that I wanted a common phrase, hit the arrow key, and then start typing that phrase afterwards. Not really a time saver. I suppose curating those phrases a bit more carefully would have made for a better use of that function.

What was interesting, however, was that it was easier for me to focus when I was constantly writing in the text box, and then appending that text to the comment when I knew the text was the way I wanted it. Clearing out the text each time made it easier to say exactly what I wanted to say without having to read the entire sentence before. I occasionally moved down to the comment box to patch up the wording directly, but most of the text input was through that middle box. I wonder if clearing the box also cleared my head to let me think what I wanted to say next.

Anyway, it was a fun exercise. Feel free to adapt and use for your own purposes. You can download the code from Github as a zip file. The file comment-helper.html is the file you want to open. You could clear out the phrases in the phrases.js file and use your own.

Let me know if you try this to good effect. Happy coding, and happy Friday everyone!

Building (Ev)anAcademy Exercises for Reassessments

I’ve written multiple times previously about WeinbergCloud, the system I created using the Meteor framework that lets students sign up for reassessments. Over the course of the semester, I’ve been developing some aspects of the system that I’m excited about, and I’ll talk about them all eventually. One in particular has held my focus for the past few days, and it’s probably the one feature I’ve been talking about for the longest: building a reassessment engine within the system.

Part of this is out of necessity. The wireless network settings on our school network have changed, so the Python reassessment engine that I’ve used for reassessments over the last two years no longer works when hosted on my personal laptop. I’ve managed reasonably well this year using problems from textbooks and handouts, but it became time to automate this using my new knowledge of Javascript and Meteor.

Whatever your feelings about Khan Academy, the reality is that the organization has put a lot of energy and resources into developing a pretty comprehensive web application built around assessment. Not only are these resources available for free for teachers and students to use, but the source code is as well. The code for anyone to be able to run their own local version of exercises has been around for a while at Github here. The Javascript libraries that go with these exercises are also pretty impressive and capable – generating random numbers with constraints, simplifying fractions and expressions, and numerous other helper functions are already written by people that code much better than I do. They also wrote a math-typesetting library called KaTEX that has some performance advantages over some other libraries…or so I hear. I’m sure much of the ‘why’ here is lost on me.

After two days of tinkering, I’ve adapted some of their code in my app for the purposes of generating questions for reassessments. Writing questions and defining variables is all done in HTML, just as in their own local application, which means it’s possible to add questions without having to load in a database through FTP or some other method. The code rendering the questions onto the webpage I had to write myself, but eventually I determined some ways to make this work for me.

I can put in HTML and Javascript definitions into text areas. Here’s an example of a question asking for a simplified fraction for slope:
Screen Shot 2015-10-02 at 9.14.46 PM

A preview appears below to make sure the question appears the way I want it. In the variable definitions are strings of Javascript code that calculate and define the variables using the Khan Academy utility functions. The question text is then rendered using KaTEX. The random values change on each reload of the page, but these values could potentially be fixed for an individual student’s quiz.

As I create frames for questions, I get a virtually infinite supply of questions I can use for assessing students on learning. Here are a bunch that I put together for testing the interface:

Screen Shot 2015-10-02 at 9.35.43 PM

The next step is to link each question frame to a course standard and build my database of questions. I’m loving the possibilities for building on this further, and will share as they develop. Stay tuned.

#TeachersCoding: Building an Image Downloader for WODB

If you read my blog regularly, you know how I feel about using technology to manage repetitive tasks. It’s intimidating to learn to code without purpose. Seeing how code can be used in the context of making a teacher’s job easier is a much more direct motivation for learning to do it yourself.

Here’s my next installment in the TeachersCoding series. In four minutes, you get the basic steps and tools for putting together a Python program that will download images from Mary Bourassa‘s excellent Which One Doesn’t Belong website . All that’s missing is you going through the steps yourself:

This program doesn’t download all of the images from the website – that’s a task for you to figure out and do on your own. It doesn’t take much. My goal is to have more teachers get hooked by the thrill of seeing code they create do something that is practical and adaptable to their own purposes. We need to grow our ranks.

Share any issues you find in the comments below. I’m excited to get this out there and see what you do with it.

Relevant links:

#TeachersCoding: Picking Groups

In my previous post on using OneNote with students, I wrote about the need to choose students to be responsible for each day’s notes. This needed to be deliberately planned and fair to students. Here were my requirements:

  • Over the course of a quarter or semester, students had to be picked around the same number of times.
  • I needed groups of two or more students for redundancy.
  • If a student was picked for a given week, there should be some time before being picked again. If repetition of a given student did occur, cycling through the class was a requirement before that student could reappear.

After a while playing around with this, I came up with the code below. Feel free to play with the code. It’s embedded in this post through the nifty tools from http://trinket.io..

Here’s a walkthrough of the algorithm: fill a list with the student names, and then shuffle the list. Create groups of the desired size until there aren’t enough to create a full group. Make a new copy of the student list, shuffle it, and then remove the students that remain from the first list. Finally, tack those remaining students at the beginning of the second list. Repeat until you have the number of groups that you are looking for, and then print out the list.

I can see a number of other applications for something like this. My hope is that you take some time to adapt it to your needs, and then circle back here to share what you used it to do.

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.

    Theory of Knowledge and the Thinking Machine

    tl,dr

    I created an interactive lesson called Thinking Machine for use with a talk I gave to the IB theory of knowledge class, which is currently on a unit studying mathematics.

    Screen Shot 2015-03-21 at 9.47.12 PM
    The lesson made good use of the Meteor Blaze library as well as the Desmos Graphing Calculator API. Big thanks to Eli and Jason from Desmos for helping me with putting it together.


    I was asked by a colleague if I was interested in speaking to the IB theory of knowledge class during the mathematics unit. I barely let him finish his request before I started talking about what I was interested in sharing with them.

    If you read this blog, you know that I’m fascinated by the intersection of computers and mathematical thinking. If you don’t, now you do. More specifically, I spend a great deal of time contemplating the connections between mathematics and programming. I believe that computers can serve as a stepping stone between students understanding of arithmetic and the abstract idea of a variable.

    The fact that computers do precisely what their programmers make them do is a good thing. We can forget this easily, however, in our world that has computers doing fairly sophisticated things behind the scenes. The fact that Siri can understand what we say, and then do what we ask, is impressive. The extent to which the computer knows what it is doing is up for debate. It’s pretty hard to argue though that computers aren’t doing similar types of reasoning processes that humans do in going about their day.

    Here’s what I did with the class:

    I began by talking about myself as a mathematical thinker. Contrary to what many of them might think, I don’t spend my time going around the world looking for equations to solve. I don’t seek out calculations for fun. In fact, I actively dislike making calculations. What I really enjoy is finding interesting problems to solve. I get a great deal of satisfaction and a greater understanding of the world through doing so.

    What does this process involve? I make observations of the world. I look for situations, ideas, and images that interest me. I ask questions about what I see, and then use my understanding of the world, including knowledge in the realm of mathematics, to construct possible answers. As a mathematical and scientific thinker, this process of gathering evidence, making predictions using a model, testing them, and then adjusting those models is in my blood.

    I then set the students loose to do an activity I created called Thinking Machine. I styled it after the amazing lessons that the Desmos team puts together, and used their tools to create it. More on that later. Check it out, and come back when you’re done.

    The activity begins with a first step asks students make a prediction of a mathematical rule created by the computer. The rule is never complicated – always a linear function. When the student enters the correct rule, the computer says to move on.

    The next step is to turn the tables on the student – the computer will guess a rule (limited to linear, quadratic, cubic, or exponential functions) based on three sets of inputs and outputs that the student provides. Beyond those three inputs, the student should only answer ‘yes’ or ‘no’ to the guesses that the computer provides.

    The computer learns by adjusting its model based on the responses. Once the certainty is above a certain level, the computer gives its guess of the rule, and shows the process it went through of using the student’s feedback to make its decision. When I did this with the class, more than half of the class had their guesses correctly determined. I’ve since tweaked this to make it more reliable.

    After this, we had a discussion about whether or not the computer was thinking. We talked about what it means for a computer to have knowledge of a problem at hand. Where did that knowledge come from? How does it know what is true, and what is not? How does this relate to learning mathematics? What elements of thinking are distinctly human? Creativity came up a couple times as being one of these elements.

    This was a perfect segue to this video about the IBM computer Watson learning to be a chef:

    Few were able to really explain this away as being uncreative, but they weren’t willing to claim that Watson was thinking here.

    Another example was this video from the Google Deep Thinking lab:

    I finished by leading a conversation about data collection and what it signifies. We talked about some basic concepts of machine learning, learning sets, and some basic ideas about how this compared to humans learning and thinking. One of my closing points was that one’s experience is a data set that the brain uses to make decisions. If computers are able to use data in a similar way, it’s hard to argue that they aren’t thinking in some way.

    Students had some great comments questions along the way. One asked if I thought we were approaching the singularity. It was a lot of fun to get the students thinking this way, especially in a different context than in my IB Math and Physics classes. Building this also has me thinking about other projects for the future. There is no need to invent a graphing library on your own, especially for use in an activity used with students – Desmos definitely has it all covered.

    Technical Details

    I built Thinking Machine using Bootstrap, the Meteor Blaze template engine, jQuery, and the Desmos API. I’m especially thankful to Eli Luberoff and Jason Merrill from Desmos who helped me with using the features. I used the APIto do two things:

    • Parse the user’s rule and check it against the computer’s rule using some test values
    • Graph the user’s input and output data, perform regressions, and give the regression parameters

    The whole process of using Desmos here was pretty smooth, and is just one more reason why they rock.

    The learning algorithm is fairly simple. As described (though much more briefly) in the activity, the algorithm first assumes that the four regressions of the data are equally likely in an array called isThisRight. When the user clicks ‘yes’ for a given input and output, the weighting factor in the associated element of the array is doubled, and then the array is normalized so that the probabilities add to 1.

    The selected input/output is replaced by a prediction from a model that is selected according to the weights of the four models – higher weights mean a model is more likely to be selected. For example, if the quadratic model is higher than the other three, a prediction from the quadratic model is more likely to be added to the list of four. This is why the guesses for a given model appear more frequently when it has been given a ‘yes’ response.

    Initially I felt that asking the user for three inputs was a bit cheap. It only takes two points to define a line or an exponential regression, and three for a quadratic regression. I could have written a big switch statement to check if data was linear or exponential, and then quadratic, and then say it had to then be cubic. I wanted to actually give a learning algorithm a try and see if it could figure out the regression without my programming in that logic directly. In the end, the algorithm works reasonable well, including in cases where you make a mistake, or you give two repeated inputs. With only two distinct points, the program is able to eventually figure out the exponential and quadratic, though cubic rules give it trouble. In the end, the prediction of the rule is probability based, which is what I was looking for.

    The progress bar is obviously fake, but I wanted something in there to make it look like the computer was thinking. I can’t find the article now, but I recall reading somewhere that if a computer is able to respond too quickly to a person’s query, there’s a perception that the results aren’t legitimate. Someone help me with this citation, please.

    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.

    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!