skip to main content


Title: Ply: A Visual Web Inspector for Learning from Professional Webpages
While many online resources teach basic web development, few are designed to help novices learn the CSS concepts and design patterns experts use to implement complex visual fea- tures. Professional webpages embed these design patterns and could serve as rich learning materials, but their stylesheets are complex and difficult for novices to understand. This paper presents Ply, a CSS inspection tool that helps novices use their visual intuition to make sense of professional webpages. We introduce a new visual relevance testing technique to identify properties that have visual effects on the page, which Ply uses to hide visually irrelevant code and surface unintuitive relation- ships between properties. In user studies, Ply helped novice developers replicate complex web features 50% faster than those using Chrome Developer Tools, and allowed novices to recognize and explain unfamiliar concepts. These results show that visual inspection tools can support learning from complex professional webpages, even for novice developers.  more » « less
Award ID(s):
1735977
NSF-PAR ID:
10073061
Author(s) / Creator(s):
; ; ;
Date Published:
Journal Name:
Symposium on User Interface Software and Technology
Format(s):
Medium: X
Sponsoring Org:
National Science Foundation
More Like this
  1. While much computing education research focuses on formal K-12 and undergraduate CS education, a growing body of work is exploring alternative pathways to computing careers [7, 16], alternative outcomes for computing education [15], and adult learning in workplace communities [9, 13]. Within this context, we are studying novice-friendly computational work as a pathway to computing careers. Novice-friendly computational work is a phrase we use to describe computing activities that have a low barrier to entry, are used in authentic contexts outside formal CS spaces, and are legitimate computational activities, e.g., data work [13], web design [5], and Salesforce CRM [9]. Learning through authentic work practices is a promising pathway to computing careers because it poses lower financial and findability barriers than coding bootcamps [14] and online courses [4]. However, gatekeeping culture in computing deems novice-friendly tools like Excel, HTML/CSS, and JSON distinct from “real” programming [12]. Further, novice workers may not be considered legitimate peripheral members of computing communities of practice despite engaging in legitimate computational work [6, 11]. 
    more » « less
  2. Agrawal, Garima (Ed.)
    Cybersecurity education is exceptionally challenging as it involves learning the complex attacks; tools and developing critical problem-solving skills to defend the systems. For a student or novice researcher in the cybersecurity domain, there is a need to design an adaptive learning strategy that can break complex tasks and concepts into simple representations. An AI-enabled automated cybersecurity education system can improve cognitive engagement and active learning. Knowledge graphs (KG) provide a visual representation in a graph that can reason and interpret from the underlying data, making them suitable for use in education and interactive learning. However, there are no publicly available datasets for the cybersecurity education domain to build such systems. The data is present as unstructured educational course material, Wiki pages, capture the flag (CTF) writeups, etc. Creating knowledge graphs from unstructured text is challenging without an ontology or annotated dataset. However, data annotation for cybersecurity needs domain experts. To address these gaps, we made three contributions in this paper. First, we propose an ontology for the cybersecurity education domain for students and novice learners. Second, we develop AISecKG, a triple dataset with cybersecurity-related entities and relations as defined by the ontology. This dataset can be used to construct knowledge graphs to teach cybersecurity and promote cognitive learning. It can also be used to build downstream applications like recommendation systems or self-learning question-answering systems for students. The dataset would also help identify malicious named entities and their probable impact. Third, using this dataset, we show a downstream application to extract custom-named entities from texts and educational material on cybersecurity. 
    more » « less
  3. Existing approaches to teaching artificial intelligence and machine learning often focus on the use of pre-trained models or fine-tuning an existing black-box architecture. We believe advanced ML topics, such as optimization and adversarial examples, can be learned by early high school age students given appropriate support. Our approach focuses on enabling students to develop deep intuition about these complex concepts by first making them accessible to novices through interactive tools, pre-programmed games, and carefully designed programming activities. Then, students are able to engage with the concepts via meaningful, hands-on experiences that span the entire ML process from data collection to model optimization and inspection. 
    more » « less
  4. Existing approaches to teaching artifcial intelligence and machine learning (ML) often focus on the use of pre-trained models or fne-tuning an existing black-box architecture. We believe ML techniques and core ML topics, such as optimization and adversarial examples, can be designed for high school age students given appropriate support. Our curricular approach focuses on teaching ML ideas by enabling students to develop deep intuition about these complex concepts by first making them accessible to novices through interactive tools, pre-programmed games, and carefully designed programming activities. Then, students are able to engage with the concepts via meaningful, hands-on experiences that span the entire ML process from data collection to model optimization and inspection. This paper describes our AI & Cybersecurity for Teens suite of curricular activities aimed at high school students and teachers. 
    more » « less
  5. null (Ed.)
    Abstract How does STEM knowledge learned in school change students’ brains? Using fMRI, we presented photographs of real-world structures to engineering students with classroom-based knowledge and hands-on lab experience, examining how their brain activity differentiated them from their “novice” peers not pursuing engineering degrees. A data-driven MVPA and machine-learning approach revealed that neural response patterns of engineering students were convergent with each other and distinct from novices’ when considering physical forces acting on the structures. Furthermore, informational network analysis demonstrated that the distinct neural response patterns of engineering students reflected relevant concept knowledge: learned categories of mechanical structures. Information about mechanical categories was predominantly represented in bilateral anterior ventral occipitotemporal regions. Importantly, mechanical categories were not explicitly referenced in the experiment, nor does visual similarity between stimuli account for mechanical category distinctions. The results demonstrate how learning abstract STEM concepts in the classroom influences neural representations of objects in the world. 
    more » « less