EXP: Readily Available Learning Experiences: Turning the Entire Web into Scaffolded Examples to Bridge Conceptual Knowledge Gaps for Novice Web Developers

There is a massive need to train more future computer scientists to meet the demands of our 21st Century workforce. Online learning platforms such as CodeAcademy attract millions of novice learners and expand the pool of advanced beginners. However, critical gaps in knowledge and experience remain between advanced beginners and professionals. This is in part because current learning platforms focus on procedural learning through toy examples that do not provide the deep understanding needed for professional-quality work. Professional websites offer rich details missing from training examples, content that relates to the real world, and opportunities to think in the models of the discipline. However, despite the abundant availability of front-end code, website source code is difficult to read and often contains superfluous details that can distract from learning core concepts. How might we use the entire web of professional examples to address the conceptual knowledge gap for large numbers of novice web developers? Despite the abundant availability of front-end code, most professional code examples are complex; they may be difficult for learners to understand as-is and contain superfluous details that distract learning core concepts. Even after identifying relevant portions of code, there’s a challenge in surfacing conceptual knowledge, creating scaffolds that help learners apply those concepts, and supporting transfer across examples so that concepts can be flexibly applied in a variety of contexts. The proposed research will enable readily available learning experiences, namely the ability for learners to approach every professional website as a resource for learning programming concepts. We will accomplish this by creating cyberlearning technologies that help learners (1) identify relevant code snippets from complex professional examples, (2) surface higher-order abstractions of programming concepts, (3) apply concepts by writing code, and (4) transfer learning across multiple examples. We have conducted initial pilot research that provides the core enabling technology for realizing the potential of learning from the entire web of professional examples. In particular, we have developed tools that instruments professional websites with upwards of 100,000 lines of code to identify relevant code snippets for any feature’s implementation. Building on this successful pilot work, we will develop tools and empirically grounded principles that will scaffold learning from these snippets. Our research team from NU's School of Engineering, the Segal Design Institute, and School of Education & Social Policy have expertise in cyberlearning, computer science education, web development, and advancing educational initiatives. Intellectual Merit: This project will produce principles and methods for turning real-world websites into scaffolded conceptual examples that provide notice programmers with authentic learning experiences. This work will contribute to a number of cyberlearning research areas including authentic learning, automated scaffolding, cognitive apprenticeship, analogical encoding, authoring tools, extracting and visualizing code structure, and mixed-initiative approaches. By developing principles for extracting and scaffolding learning from professional examples, RALE reduces the learning gap between novice developers and professionals, enabling more highly trained web professionals. This project will introduce principles and methods provide a window into real-world professional work by visualizing abstractions, allowing compariso