[UI idea] Give students more information about expected outputs

[schneems]

Check code with expected output - Levels 1-4+

First of all: I love the idea of hedy. Thanks for all the work!

Context: I'm currently working with 4th and 5th graders. We meet for one hour a week and this thursday was our second week. Previously we used code.org for block based programming, but want to try introducing them to text based languages and wanted to give hedy a try. The students are already somewhat familiar with high level concepts like variables, loops, if-logic. The main thing I'm hoping to do with hedy is teach text based syntax.

In code.org the puzzles present a clear goal (usually). I think that it would help students to see a simulated output of what's being expected. This is similar to a TDD style of learning where you essentially give people the end state, but they have to figure out how to get there. If you run the program and it doesn't get to the goal, it explains in simple terms why not.

For an explicit example, this is some code my students struggled with. This is a fill in the blank example from lesson 4:

choices is rock, paper, scissors
print _ The computer chose: _ _ at _

It was unclear to the student that the expected program output should be:

The computer chose: rock

I think it would have been helpful to show an example of what they should expect when it runs correctly. Or output an expected goal state on run.

For example if they run without changing anything it will give you an unhelpful syntax error message. It would be great if it was something like:

That doesn't seem quite right. Expected output to be:

The computer chose: rock

But was:

SyntaxError, your code could not be run due to the following problems.

Even better if the code could check the AST to ensure they've used certain values. For example if they tried hardcoding

print "The computer chose: rock"

And on the off chance that it's the right random seed (1 in 3 chance). They might get an output like:

That looks like the right output, but something isn't quite right. Your program needs to use the following features:

- The `choices` variable must be used in the print statement

Or later when there are more ways to access the list:

That looks like the right output, but something isn't quite right. Your program needs to use the following features:

- The `random` keyword must be applied to the `choices` variable

Other possible alternatives

When I looked at the fill-in-the-blank problem:

choices is rock, paper, scissors
print _ The computer chose: _ _ at _

It wasn't intuitive that some _ placeholders represent a single character while others represent a variable or keyword.

I could imagine variations that might give stronger hints to students (after they click/ask for them). Some examples:

• Madlibs style. Include details about what the values are:

choices is rock, paper, scissors
print _character_ The computer chose: _character_ _variable_ at _command_

• Hangman style. Show all possible characters and let students click one or more to fill them in the appropriate place. For example:

choices is rock, paper, scissors
print _ The computer chose: _  _ _ _ _ _ _ _ at _ _ _ _ _ _ 

With options: ", d, a, s, i, h, c, o, ,e, r, n, m. If they select o it would then look like:

choices is rock, paper, scissors
print _ The computer chose: _  _ _ o _ _ _ _ at _ _ _ _ o _ 

Now that i'm typing it out, maybe not as helpful. Could be interesting as a quiz format or something. Try to guess the right answer in as few hints as possible.

[Felienne]

Hi @schneems!

Thanks for the nice words and ideas! Not sure how much you already know about the teacher's UI, but you can author your own adventures where you incorporate these ideas? You can even then donate them to all teachers! Would be very welcome.

[Felienne]

And there is also a longer answer (a blog post) in this about the tension between having puzzles with one answer that is helpful and fun for some type of kis, and the free-form nature of programming that is more engaging to some students, but yeah, who has the tome to type that up :)

[Felienne]

Moving this to a Discussion since it might be a thing a student would like to pick up, and is too large/not concrete enough at this point to warrant an issue.

[Felienne]

@MarleenGilsing has some ideas about this, which she will put into a few screenshots soon(ish) so we can discuss them!

[MarleenGilsing]

Yes! I would still really like something like this:

The students get a blurred or hidden program that they can run. They have to try to recreate the program on their own.
This way the students really have to think about how to get a code like this, instead of just giving "static" output.
For me the problem with static output is that students could simply type: print computer chooses rock instead of print computer chooses choice at random.

We could also think of ways to give them hints. Like making a 'reveal the code' button, that appears after a few tries. And maybe even an option that reveals only part of the code at first to nudge them in the right direction.