[racket-dev] stepper UI question

Guillaume Marceau wrote:
> Right now, the stepper takes the code from the definition windows and
> displays it in a different window, with a different color, with a
> different layout, with some brackets turned into parenthesis, and with
> the comments are removed. I just opened a simple solution from last
> semester and launched the stepper on it.  It took me no less than 20
> seconds to trace the first redex presented by the stepper to the
> expression in the definition window it came from. It's really hard to
> do!
> 
> When using the stepper, students struggle to see the correspondence
> between what's on the left and what's on the right, despite the
> colored highlights and all that.  In my experience, the correspondence
> has to be carefully pointed out to them by the instructor.  Their
> understanding of the correspondence between the content of the stepper
> window and the code they wrote in the definition window must be
> fainter still.
> 
> There has to be an easy way to establish these two correspondences:
> from pre-step to post-step, and from the stepper window to the
> definition window. None of the proposals posted to in this thread so
> far address this.
> 
> I can think of many different ways to make the stepper<->definition
> correspondence manifest.  As John said, I once suggested that the code
> should be reduced in-place, in the definition window. Shriram doesn't
> like that idea (but he has never bothered to say why.)
> 
> Another possibility is to use a two column layout. The left column
> would show the normal definition window, and the right column would
> show a single stepper state, aligning each reduced (or partially
> reduced) expression with the expression it came from on the left-hand
> side.
> 
> To establish the pre<->post correspondence, the redex should disappear
> and its reduction be put in its place (with the rest of the code
> sliding downward smoothly to make space if necessary.)

Another, less invasive, way of making the stepper-definition connection 
might be on every step to scroll the definitions window and highlight 
the term from which the redex is derived. For function application the 
function definition could be highlighted too in a different color. The 
highlighting would require some creativity for forms like cond (maybe 
de-highlight clauses as they're eliminated?), but it would be a more 
incremental approach than forcing the stepper UI into the definitions 
window.

Ryan