Show program and output in text

[alexmojaki]

As you go through the course and run programs, you can see the results in the shell. That's fine at the time, but once you move on, the output gets replaced by the output of a different program. If you want to look back, either in the current page to the stuff you just saw or to review material in previous pages, you can't actually see what happened when you ran each program. It just shows this:

Implementing #84 would help with this problem, making it easy to rerun past snippets. But that's still unnecessary effort, and could be especially annoying if you're currently trying to write a solution to an exercise. You could open another tab, but this isn't great and people may not think of it. Reviewing past material should be quick and easy, like reading a book. Users shouldn't have to repeat the work they've already done of running the code, they should be able to quickly skim through and find what they're looking for. Plus it means less load on the servers for us.

So what I'd like is for the output to be copied into the text as each step is completed. If the program wasn't already included in the text, that gets shown too. This also means that students can review their solutions to exercises. The example above would then roughly look something like this:

I don't have any actual evidence that this is a serious problem, but I imagine the above would be a much nicer experience for a student reviewing the course than the first (current) screenshot.

Thoughts? Ideas?

[spamegg1]

Yeah I ran into this problem using the "Reverse step" developer tool. Obviously a user using the final product won't do that, but reviewing previous material is more or less the same as a reverse step. I have to recopy/repaste the code.

I think this is a pretty good idea. My only worry would be too much visual clutter for the user to sort/scroll through. Their eyes will get tired and glaze over. Some of the output text is very long vertically. Shortening each page's contents could help that, but that's not a good solution. If the program text and the output text of previous steps could be displayed in an expandable/collapsible dialog, with some color/visual indication that "it belongs to the past", it would be perfect.