What's the best way to implement a webapp to teach programming with?

Question

In the near future, I'm going to be doing a series of short workshops for teens aged 13-17, who may not have any programming experience at all, showing them the basics of programming and webapps. The workshops are short, so it really has to stick to the absolute basics. The apps will be written in Python, for App Engine.

Edit: I guess I wasn't very clear about the scope of this. The workshops are very short indeed - no more than about 20 minutes - and as such, it's impractical to start from scratch, or teach them programming in general. The goal here is to start off with a pre-written webapp, written in such a way as to make it easy to make trivial changes to the text of individual steps, and to make slightly less trivial changes to the code for more ambitious students. Then, we spend the time with them demonstrating how to customize it for their own quiz, and deploy it, and give them the code to take home. Hopefully some of them will be interested and pursue it in their own time.

The app we've chosen to implement is a very basic "what [x] are you" quiz. We're using this for several reasons:

• Everyone is familiar with them - they're quite popular, especially on social networks. People generally understand the basic idea of how these things work behind the scenes (I think).
• They're very simple to program. Complex flow control, loops, array and dict access, etc, can all be kept to a minimum.
• Even without any programming background, students can easily modify the text of the questions, answers, scores, and outcomes, and get a real sense of achievement. With a little programming knowledge, they can make more substantial changes like adding or removing questions, and changing the scoring criteria.
• Once they've created an app, they can show it off to their friends and have them try it out.

The basic flow of the app is that there are a series of question pages, each of which has multiple-choice answers. Each answer modifies the value of one or more internal scores. At the end of the quiz, the outcome corresponding to the internal score with the highest value is displayed. For example, in the "what dwarf are you" quiz, answering the question "What would be the perfect gift for a girl?" with "a shy smile" increases the score for "bashful" and decreases the score for "grumpy".

Now that I'm actually writing the template app, I'm trying to figure out the best way to represent it. How would you suggest writing an app like this for an audience who may have no programming experience at all? As I see it, I have several options:

Procedural with magic: Define a base handler for the app that does things I don't expect the students to understand (getting request parameters, converting strings to ints, assembling redirect URLs, etcetera), and have a handler per question that extends the base handler with specific logic. This makes the code as simple as possible, so they can understand the exposed bits more easily, but hides a lot of detail, so it'll make understanding the whole thing a bit more complicated. Handlers would look something like this:

class Question1Handler(webapp.RequestHandler):
  def get(self):
    """Show the page for this question."""
    self.ShowQuestion(
        "Question Title",
        "Answer 1",
        "Answer 2",
        "Answer 3",
        "Answer 4")

  def HandleAnswer(self, answer, a, b, c, d):
    """Handle the answer to this question."""
    if answer == "1":
      self.NextQuestion(2, a + 1, b, c, d)
    elif answer == "2":
      self.NextQuestion(2, a, b + 1, c, d)
    elif answer == "3":
      self.NextQuestion(2, a, b, c + 1, d)
    elif answer == "4":
      self.NextQuestion(2, a, b, c, d + 1)

Procedural with less magic: Like the above, but with basic use of dicts to make it easier to change the number of outcomes.

Data-driven with external resources: Load the questions, answers, scoring criteria, and outcomes from a couple of CSV files. This makes it really easy for students to change the questionnaire, but much more difficult for them to understand and make changes to the logic.

Data-driven with data structures: Like above, but using Python data structures embedded in the code. Eg:

questions = [
  ('Question 1', ('Answer 1', {'a': 2, 'b': -3}), ('Answer 2', {'b': 1})),
  # ...
]

outcomes = [
  'Most points for answer a',
  'Most points for answer b',
  # ...
]

This option should make the logic a bit simpler, and it's still easy to modify, but it still requires a lot more knowledge for them to understand the logic.

So what's the best way to write this? Do you have suggestions other than those above?

Answer 1

I don't have any experience with App Engine, but hopefully it is pretty darn simple to use with Python. I've found that (at least for myself) learning a language through web programming makes it much harder, and usually settle for console apps. Learning about programming itself through a web app would be very hard, unless almost all of the web related stuff was hidden.

However, since I assume you are using a template system to hide those details, it may work out. Given the options you suggested, I'd probably use procedural with magic. Try to get a few simple things in there (logic, if-else statements, method calls), but leave the rest to magic. After all, a lot of what happens in higher-level languages is magic for the normal programs we write.

Answer 2

I'd probably try the following:

Zero, I'd try the below steps a few times to see if it makes sense and flows well. I'd see what procedural, object-oriented, and data-oriented solutions look like. How much OOD would they need to understand? How much data structures would they need to understand?

First, develop the GUI, step-by-step, but without any logic. That is, hard code the links for the first couple of pages.

Second, I would work on the logic independent of the GUI. Show them that I can create a function that handles a very specific piece of input and that, over time, you can change bits and pieces of it until it handles everything you need.

Third, I'd integrate the two.

Given enough time, I'd like to explain everything, so a quick demonstration of Fiddler and what happens when you view webpages might help further their understanding.

This might help to show SRP and components. If you TDD'd the second piece, it might even demonstrate that they should think about the test cases and not just guess :).

Answer 3

You might already be assuming to much saavy on their end, while it seems intuitive to us now programming is very abstract when you first come across it. You need to make as many connections as you can between these abstract programming concepts and real-world analogues they already understand, in order to start building intuitions. Build up as much scaffolding as you can to insulate them, you can (and should) take the training wheels off later.

I think most programming-related learning boils down to some form of REPL. By witnessing cause and effect you learn how what you tell the computer to do affects what it does. The concept of the "instruction" is one of the first bricks in the foundation you're building.

Now, I understand not wanting to set them in front of a python command prompt, it's not very exciting, but you do want to create the cause->effect loop. I would abstract away as much as possible and create a question class. Let them addQuestion("...") to the object and see how the questions now appear in the rendered HTML page. This will allow them to understand that providing instructions to this abstract concept of an "object" results in the computer taking a different action.

Once that's down allow them to dive into the handler. Maybe now they'll receive an "answer object" as well as a question object. They can ask the answer object which answer was chosen and what the user's new score is.

As they reach a more advanced state (it might not take long at all!) you can allow them to modify the answer class to change their scoring. Now you can start to introduce the concepts of control-flow, variables and maybe even arrays.

This is a great question! I'm glad you asked it, I'll be curious to see what other people's thoughts are.

Answer 4

To start up with, I would let the kids modify only very basic functions and do myself all the rest. I think that 13-17yo would easily understand something like the following and would have a great time messing around.

def get_question_and_answers(n_question):
   if n_question = 1:
       question = "What's your name?"    
       answers = ['bob', 'joe', 'leo']
   elif n_question = 2:
       question = "What's your quest?"
       answers = ['learn', 'get a job at google', 'be happy']
   elif n_question = 3:
       question = "What's your favorite color?"
       answers = ['red', 'blue', 'black']

   return question, answers

def get_new_points(n_question, n_answer):
   points = {}
   if n_question < 2:
       if n_answer == 1:
           points['brian'] = 2
           points['sir'] = -1
       else:
           points['joe'] = 1

   return points

def get_final_message(result, points)
  return 'Congratulations! You are a %s. You made %d points' % (result, points[result]).

When they become bored, I would show the html templates or how the application works under the hood.

Good luck!

Answer 5

Start by having the kids create simple static HTML pages which they post to your classroom web server. Each student gets a directory and posts files thereto; then points a browser to find what they've done.

Naturally you could spend days just teaching them the intricacies of HTML, CSS and the mechanics of managing their files on the webserver. However, you'll want to gloss over all that and just focus on the most basic mark-up. (I've found that showing them how to "view page source" in their browsers can head off the urge to dive deeply into HTML ... because they are then reassure that they can "see the code" for any web page they can view, anywhere on the 'net; CSS adds some ugly little wrinkles to that basic concept ... but the gist of it can get you past this first hurdle).

From there you can add the absolute minimal HTML for presenting forms and give the basic "What's your name?" as a POST-able and GET-able CGI application. Some students may chafe at the simplicity of just copying your code to their home directories and getting it running; but when they actually try to accomplish the task they'll find out how easily even the most minute details (such as bad file permissions, the wrong sort of line terminations, or the wrong sort of output file descriptor buffering) can make this more complicated than it initially appears.

Hint: if you have some students who breeze past this part quickly --- pair them up with others who are encountering common issues. This will help convey the knowledge to the less advanced students and will also expose the more advanced ones to the sorts of bullets that they missed in their own work (sometimes by chance).

Once everyone had gotten through the creation of a form that asks: "What's your name?" and responds back with "Hello, NAME" then you can work on the sort of application that you've described here.

I suspect that it will take a reasonably bright and attentive class of 20 teens about 4 hours to get that far. You could probably rush through it faster than that ... and I'm sure many folks here will be shocked at that time estimate. However, I strongly suggest finding one or two teens and trying this with them one-on-one and honestly time it. Then figure that the slowest students in a class of 20 will probably take twice that long. (This all assumes that you have your own webserver pre-configured with all of their accounts already in place on the system). I'm also assuming that all of their client machines are already configured, have suitable text editors and FTP, rsync, or scp clients all configured and so on. The IT requirements of running such a class are far too easy to overlook and underestimate).

Answer 6

On hiding much of the "magic"
A web application is a difficult place to start! Several other responses readily hint at this fact.
It is also a cool place to start, in particular with a teenage audience...
Luckily, Google App Engine, removes much of the overhead generally associated with web applications (Server installation, configuration, publishing pipeline, tools installation etc.)
Your "Procedural with less magic" approach is probably a good one. I don't think there's much interest in hiding too many of the realities of web programming. You can certainly "corral" the students to some specific pages, and also at first, have them stay clear of some parts of the page, but in general, they might as well see it all get used to used to the concepts you mention and then some: sessions, request parameters, string/int conversions and maybe even redirect URLs construction.
Maybe a possible compromise would be to have a first unit of your class be with stand-alone Python, i.e. interactively creating small console applications, to get over the bulk of language syntax before moving to the GAE framework.

On Data-driven frameworks:
Paradoxically, a data-driven architecture, which is often a recommended, elegant, approach for actual applications, is probably a bad idea for an introductory class (or for the least, in the initial iterations of the application in such a class).

The problem with such an approach with beginners is that either

• the details of the abstraction are hidden, and the "programming" task therefore becomes a matter of plugging-in the right configuration values to some black box,
  or
• the details of the abstraction are visible and/or require some support, and the basic programming concepts one is trying to demonstrate are drowned in some "rocket science" contraption.

That's not to say that abstractions should not be introduced at all in a beginners' class, it's just a reminder that "first one walks then one runs". First one gets familiar with basic syntax, simple idioms, small constructs. One can "play" with these, alter them, break them, fix them etc. And as familiarity with these fundamental blocks grows, better ways, i.e. more idiomatic ways, more abstract ways, data-driven behavior etc. can be introduced. In other words, after spending a few weeks writing and testing verbose, duplicated and otherwise un-idiomatic code, folks have the necessary fluency with the general mechanics of the language and host system to start learning abstraction and other concepts more easily since there is no/less struggle with the language per-se.

Answer 7

You say you want to teach web apps, but based on the technology choices, you seem to also want to teach OOP and frameworks. PHP would be the easiest out-of-the-box technology to use, not to mention your students could probably "take their projects home with them" and get them to run on other computers fairly easily.

Answer 8

Unless you're convinced that this group of kids are all hacker types that truly enjoy puzzling over a verbose error message, a web app is a terrible place to start.

I've taught classes like this for the last 5 years on a volunteer basis. Unless you have many sessions, very small groups (3-4 max), or several "helper devs", something as complex as a web app is very hard for a first-timer to wrap their mind around, and you definitely want them to wrap their mind around it.

I love Python for its power and simplicity, and first-time programmers can pick it up, however, the significant-whitespace feature (not a bug!) trips up many first-timers. Also, the setup and running of a script is non-trivial. The command-line is an intimidating thing when you first come across it. I highly recommend MIT's Scratch for first-time programmers.

Teaching kids how to program is like starting a fire. You start with the smallest pieces you have, and wait for a spark to catch.

Answer 9

Given that you only have about 20 minutes, I'd say that the best thing to do is simply to get them excited about programming. Show them that they could create a program -- no matter how simple it is -- that their friends could use in the browser, and they will all leave pretty excited.

Something as utterly straight-forward as the app that Brett Slatkin creates in the introductory video on the App Engine site will do very nicely, I expect. It has a totally bare bones UI, but the important point is that the code is pretty comprehensible and it is something that fosters communication with their friends. That's key.