Philip Guo (Phil Guo, Philip J. Guo, Philip Jia Guo, pgbovine)

Improv: Teaching Programming at Scale via Live Coding

research paper summary
Improv: Teaching Programming at Scale via Live Coding. Charles Chen and Philip J. Guo. ACM Conference on Learning at Scale, 2019.
Computer programming instructors frequently perform live coding in settings ranging from MOOC lecture videos to online livestreams. However, there is little tool support for this mode of teaching, so presenters must now either screen-share or use generic slideshow software. To overcome the limitations of these formats, we propose that programming environments should directly facilitate live coding for education. We prototyped this idea by creating Improv, an IDE extension for preparing and delivering code-based presentations informed by Mayer's principles of multimedia learning. Improv lets instructors synchronize blocks of code and output with slides and create preset waypoints to guide their presentations. A case study on 30 educational videos containing 28 hours of live coding showed that Improv was versatile enough to replicate approximately 96% of the content within those videos. In addition, a preliminary user study on four teaching assistants showed that Improv was expressive enough to allow them to make their own custom presentations in a variety of styles and improvise by live coding in response to simulated audience questions. Users mentioned that Improv lowered cognitive load by minimizing context switching and made it easier to fix errors on-the-fly than using slide-based presentations.
@inproceedings{ChenLAS2019,
 author = {Chen, Charles and Guo, Philip J.},
 title = {Improv: Teaching Programming at Scale via Live Coding},
 booktitle = {Proceedings of the Sixth Annual ACM Conference on Learning at Scale},
 series = {L@S '19},
 year = {2019},
 numpages = {10},
 url = {https://doi.org/10.1145/3330430.3333627},
 doi = {10.1145/3330430.3333627},
 publisher = {ACM},
 address = {New York, NY, USA},
}

Programming instructors often write and run code live in front of their class. Live coding has many benefits, including:

  • forcing instructors to incrementally build up code and narrate aloud rather than showing large blocks of code all at once,
  • making instructors' step-by-step thought processes explicit,
  • letting them respond to “what-if?” questions from students by editing code on-the-fly,
  • making instructors more relatable since students can see that they make mistakes while coding as well,
  • and holding students' attention better since live coding is more dynamic than static PowerPoint slides.

However, live coding gets messy and disorganized since instructors need to constantly switch between application windows, remember what parts of their code to emphasize, and remember what code they need to write next at each step. If they get interrupted with student questions (which they should encourage!), they need to recall how to get back on track with their code. Students can also find it hard to know what to pay attention to as many UI elements are shown on-screen at once without cues of what to focus on. When not done well, live coding imposes high extraneous cognitive load on both instructors and students.

An alternative to live coding is to use slide presentations during lecture. Slides are great because they're organized and predictable, but it's hard to convey the dynamic nature of writing and running real code using slides. Also, instructors can't as easily improvise in response to student questions.

How can we combine the benefits of slide presentations and live coding? To explore this question, we created a system called Improv that allows instructors to create slides within their IDE and embed live views of their code and outputs into those slides.

Here's how an instructor can use Improv to create and deliver a live coding presentation (click image to enlarge):

  1. They set up their demo starter code in their IDE.
  2. They create PowerPoint-style slides in a slide editor within the IDE. Aside from regular text and graphics, they can also embed live views of IDE components into their slides.
  3. For instance, they can select portions of code in the IDE to embed as code blocks into their slides.
  4. They can also embed the IDE's terminal output and live views of any webpage. Webpage embeds are useful for showing results of writing and running, say, JavaScript web code.
  5. After creating their slide presentation, the instructor can now perform live coding within their IDE, and the live embed blocks within their slides will update in real time as they code.

Improv lets the instructor work entirely within their IDE, which has all the context that they need, while letting students see organized presentation slides instead of the instructor's chaotic screen. From an instructional design perspective, it brings some of Mayer's principles of multimedia learning to the often-messy world of live coding. Specifically, it allows instructors to segment their live coding session into meaningful chunks (e.g., showing one major concept per slide) introduced with labeled cues. It also eliminates unnecessary visual clutter from students' field of view. Finally, instructors can place explanatory text labels near key concepts they are demoing in live embed blocks.

Improv has one more feature to help instructors when live coding: waypoints.

  1. For each code block, the instructor can record edits to its code during rehearsal before class. Along the way, they can click a button to set waypoints showing intermediate steps to building up the full code.
  2. This way, when they're live coding in front of the class, Improv always shows them the current and next waypoint that they should be aiming for, sort of like a teleprompter.
  3. If they get lost while coding or sidetracked by student questions (which again they should encourage!), they can click a button to advance to the next waypoint to get back on track. Thus, waypoints also act as a safety net. In the figure above, the instructor is starting to write the deactivate() function, and the next waypoint shows the completed code for deactivate(), which is what they're aiming to work toward.

In sum, Improv combines the benefits of both slide presentations (organized, predictable, scaffolded) and live coding (energetic, fluid, spontaneous). Our user study showed that Improv users appreciated fewer context switches, could better stay in flow while live coding, and could more easily fix errors and improvise.


Read the full paper for details:

Improv: Teaching Programming at Scale via Live Coding. Charles Chen and Philip J. Guo. ACM Conference on Learning at Scale, 2019.
Computer programming instructors frequently perform live coding in settings ranging from MOOC lecture videos to online livestreams. However, there is little tool support for this mode of teaching, so presenters must now either screen-share or use generic slideshow software. To overcome the limitations of these formats, we propose that programming environments should directly facilitate live coding for education. We prototyped this idea by creating Improv, an IDE extension for preparing and delivering code-based presentations informed by Mayer's principles of multimedia learning. Improv lets instructors synchronize blocks of code and output with slides and create preset waypoints to guide their presentations. A case study on 30 educational videos containing 28 hours of live coding showed that Improv was versatile enough to replicate approximately 96% of the content within those videos. In addition, a preliminary user study on four teaching assistants showed that Improv was expressive enough to allow them to make their own custom presentations in a variety of styles and improvise by live coding in response to simulated audience questions. Users mentioned that Improv lowered cognitive load by minimizing context switching and made it easier to fix errors on-the-fly than using slide-based presentations.
@inproceedings{ChenLAS2019,
 author = {Chen, Charles and Guo, Philip J.},
 title = {Improv: Teaching Programming at Scale via Live Coding},
 booktitle = {Proceedings of the Sixth Annual ACM Conference on Learning at Scale},
 series = {L@S '19},
 year = {2019},
 numpages = {10},
 url = {https://doi.org/10.1145/3330430.3333627},
 doi = {10.1145/3330430.3333627},
 publisher = {ACM},
 address = {New York, NY, USA},
}
Related pages tagged as research paper summary:
Related pages tagged as human-computer interaction:
Related pages tagged as computing education: