April 1, 2023


Issues in Teaching Coding Skills

  • Increasing demand for online learning
    • Covid-19 Pandemic “Zoom University”
    • Massive Open Online Courses (MOOC)
    • Online degrees
  • Challenges teaching coding online
    • Trade-offs between live coding, illustrations, gestures/emotions, etc.

Multimedia Learning Principles

  • Evidence-based Principles of Multimedia and e-Learning

Cognitive Load and Learning

  • Amount of demand on brain’s working memory
  • Distributing presentation across multiple modes of communication decreases cognitive load (Mousavi et al.-1995)
  • Multimedia and e-Learning Principles (Clark & Mayer):
    • Multimedia Principle: {text + graphics} > {text}
    • Signaling Principle: signal most important information to pay attention to
    • Contiguity Principle: related information should be presented in close spatial and temporal proximity
    • Modality Principle: {audio + graphics} > {text + graphics}
  • Students tend to reflect positive emotions witnessed from instructor (Lawson and Mayer-2022)

Common “Zoom University” Presentation

  • Screen share
  • Camera share
    • Picture-in-picture
    Picture-in-picture webcam in the corner of screen share

Lightboard Presentation

  • Transparent markerboard with video camera
    • Flipped image for natural writing/drawing 'Lightboard' transparent markerboard with camera-facing presenter

Innovating the “CodeVid Studio”

CodeVid Studio In-Person

CodeVid Studio lightboard behind a camera

CodeVid Studio Design

CodeVid Studio layout

Usability Study

  • As part of Codewit.us usability study
  • Computer Science student participants (n=10)
    • CS1 passed, enrolled in CS2
  • Protocol
    • Interview on experience/attitudes on CS1 homework/reading material
    • Intervention: tutorial on recursion
      • Randomly assigned intervention: picture-in-picture (n=5) or CodeVid Studio (n=5)
      • Independent programming challenge on recursion
    • Debrief: attitudes and feedback on experience


  • “The video feature was helpful.” (1 strongly disagree to 5 strongly agree)
    • CodeVid Studio: M=5, s.d.=0
    • Picture-in-Picture: M=4.8, s.d.=0.2
  • “What did you like least about the website”
    • CodeVid Studio: (nothing video-related)
    • Picture-in-Picture: the video would be better with visuals/graphics to illustrate the topic


  • Novel presentation of text + graphics + presenter for teaching coding skills
    • Theoretical advantages based on evidence-based principles
  • Pilot videos integrated into Codewit.us beta release
  • Positive formative feedback from usability study

Future Work

Full Paper

The full paper is available online via ACM Digital Library

To cite this paper, use the following reference in your bibliography:

Kevin Buffardi. 2023. CodeVid Studio: Coding Videos with Multimodal Instruction. J. Comput. Sci. Coll. 38, 10 (April 2023), 26–34.

Or import the following BibTeX reference:

author = {Buffardi, Kevin},
title = {CodeVid Studio: Coding Videos with Multimodal Instruction},
year = {2023}, issue_date = {April 2023},
publisher = {Consortium for Computing Sciences in Colleges},
address = {Evansville, IN, USA},
volume = {38}, number = {10}, issn = {1937-4771},
month = {jun}, pages = {26–34}, numpages = {9}