An Interactive Environment for the Didactical Manipulation of Programs


Here is my work of the last 4 months.


Download PDF Thesis here


Video embedded in presentation


(To run it locally on your machine, you have to install Google App Engine for Python [which you can find it here at time of writing ] and then launch the google app engine program and ‘add existing…’ which will be the content of the zip from above, and press play to run it locally)

Web app

This work has been referenced in

and in

BloP: easy creation of Online Integrated Environments to learn custom and standard Programming Languages (Stefano Federici, Elisabetta Gola,università di cagliari, Italy)

at siremsiel2014  (sirem – sie – l 2014 )


9 pensieri su “An Interactive Environment for the Didactical Manipulation of Programs

  1. Pingback: Eple per chi vuole cominciare da piccolo | Ok, panico

    • Hello there, thank you so much! You also reminded me to update the post with the infos on how to use the software locally! Again, thank you very much! In the meantime, wish you all the best!

  2. Slider focus 1) arrow keys move 2) jump to line number – pick step, or earliest step that go to line

    Slider focus = 1) arrow keys move 2) jump to line number – pick Frames-Objects pair, or earliest step that gets to desired line

    Please consider making the slider (ui-slider-handle) keyboard-controllable with arrow keys once it has focus.

    This can be done in Java Visualizer.

    Another feature to consider:

    Again when the slider has focus, press “j” (for jump), or another key, and follow that with a number.

    That would teleport you to the line of code that corresponds to that number.

    The difficulty is that multiple Frames-Objects pair images can belong to 1 line of code.

    If it’s possible, perhaps show a list of all the pairs.
    The pairs could be shortened, compacted, and/or summarized to fit on the screen.
    Maybe it just lists the step numbers that correspond to that line number.
    Then, a person would be allowed to choose the Frames-Objects pair to skip to.

    Or, just pick the earliest Frames-Objects pair that will appear from the current step.
    That is, “what’s the next step that will take me to this line of code?”.

    I have a motor disability, so keyboard accessibility is something that I seek.

    (The second request of skipping to a numbered line might be too much, but I still think that it would be pretty convenient 😃).

    Thanks for the amazing program.

    • Jeff, I really want to thank you for sharing this and for suggessting me so many improvements!
      I’m really happy to hear that a concept like this has some sort of interest! that will keep me on track for future works as I gain some more practice with web-programming! Again, thanks a lot! feel free to download and modify this concept in whatever it may evolve for needs you may encounter!

      in the meantime, I wish you all the best! bye! 🙂


Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:


Stai commentando usando il tuo account Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...