Mastering client-side Web programming is essential for the development of responsive and interactive Web applications. To support novice students’ self-study, in this paper, we propose a novel exercise format called the phrase fill-in-blank problem (PFP) in the Web Programming Learning Assistant System (WPLAS). A PFP instance presents a source code with blanked phrases (a set of elements) and corresponding Web page screenshots. Then, it requests the user to fill in the blanks, and the answers are automatically evaluated through string matching with predefined correct answers. By increasing blanks, PFP can come close to writing a code from scratch. To facilitate scalable and context-aware question creation, we implemented the PFP instance generation algorithm in Python using regular expressions. This approach targets meaningful code segments in HTML, CSS, and JavaScript that reflect the interactive behavior of front-end development. For evaluations, we generated 10 PFP instances for basic Web programming topics and 5 instances for video games and assigned them to students at Okayama University, Japan, and the State Polytechnic of Malang, Indonesia. Their solution results show that most students could solve them correctly, indicating the effectiveness and accessibility of the generated instances. In addition, we investigated the ability of generative AI, specifically ChatGPT, to solve the PFP instances. The results show 86.7% accuracy for basic-topic PFP instances. Although it still cannot fully find answers, we must monitor progress carefully. In future work, we will enhance PFP in WPLAS to handle non-unique answers by improving answer validation for flexible recognition of equivalent responses.