Colaroid: A Literate Programming Approach for Authoring Explorable Multi-Stage Tutorials
April Yi Wang, Andrew Head, Ashley Ge Zhang, Steve Oney, Christopher Brooks
Abstract
Multi-stage programming tutorials are key learning resources for programmers, using progressive incremental steps to teach them how to build larger software systems. A good multi-stage tutorial describes the code clearly, explains the rationale and code changes for each step, and allows readers to experiment as they work through the tutorial. In practice, it is time-consuming for authors to create tutorials with these attributes. In this paper, we introduce Colaroid, an interactive authoring tool for creating high quality multi-stage tutorials. Colaroid tutorials are augmented computational notebooks, where snippets and outputs represent a snapshot of a project, with source code differences highlighted, complete source code context for each snippet, and the ability to load and tinker with any stage of the project in a linked IDE. In two laboratory studies, we found Colaroid makes it easy to create multi-stage tutorials, while offering advantages to readers compared to video and web-based tutorials.
Ask about this paper
Your agent reads all of it.
Lune indexed this paper to the last equation, along with the top-tier papers that cite it. Ask a question and the answer quotes them.
Your agent calls
Luneget_paper_fulltext
Free to start. No credit card required.
Terminal
Install the CLIlune papers fulltext 175cf619-5f36-461b-b8b3-a1162a87e775Cited by top-tier papers1
Ask how each one uses itBuilds on9
- What's Wrong with Computational Notebooks? Pain Points, Needs, and Design OpportunitiesSouti Chattopadhyay, Ishita Prasad, Austin Z. Henley, Anita Sarma et al.CHI 2020 · 162 citations
- Understanding and Visualizing Data Iteration in Machine LearningFred Hohman, Kanit Wongsuphasawat, Mary Beth Kery, Kayur PatelCHI 2020 · 114 citations
- Fork It: Supporting Stateful Alternatives in Computational NotebooksNathaniel Weinman, Steven Mark Drucker, Titus Barik, Robert DeLineCHI 2021 · 55 citations
- Callisto: Capturing the "Why" by Connecting Conversations with Computational NarrativesApril Yi Wang, Zihan Wu, Christopher Brooks, Steve OneyCHI 2020 · 44 citations
- Githru: Visual Analytics for Understanding Software Development History Through Git Metadata AnalysisYoungtaek Kim, Jaeyoung Kim, Hyeon Jeon, Young-Ho Kim et al.IEEE VIS 2020 · 36 citations
Related papers
- Composing Flexibly-Organized Step-by-Step Tutorials from Linked Source Code, Snippets, and OutputsAndrew Head, Jason Jiang, James Smith, Marti A. Hearst et al.CHI 2020 · 29 citations
- CoLadder: Manipulating Code Generation via Multi-Level BlocksRyan Yen, Jiawen Stefanie Zhu, Sangho Suh, Haijun Xia et al.UIST 2024 · 22 citations
- NotePlayer: Engaging Computational Notebooks for Dynamic Presentation of Analytical ProcessesYang Ouyang, Leixian Shen, Yun Wang, Quan LiUIST 2024 · 11 citations
- CodeToon: Story Ideation, Auto Comic Generation, and Structure Mapping for Code-Driven StorytellingSangho Suh, Jian Zhao, Edith LawUIST 2022 · 40 citations
- InterLink: Linking Text with Code and Output in Computational NotebooksYanna Lin, Leni Yang, Haotian Li, Huamin Qu et al.CHI 2025 · 10 citations
