Abstract—Nowadays, web application systems have placed contemporary significance in our societies through interactive human-computer interfaces made by web-client programming using HyperText Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript. Previously, we have studied the Element Fill-in-blank Problem (EFP) for self-study of web-client programming by novice students, and presented the blank element selection algorithm with selection rules to generate new EFP instances from proper source codes. However, several important rules were missing in the previous version, such as those for handling complex CSS properties and HTML attributes. Additionally, the previous version lacked rules for dealing with advanced JavaScript objects, like the navigator object used for geolocation. In this paper, we present an extension of the algorithm by adding new selection rules for a more comprehensive study of web-client programming. We increased new selection rules by analyzing 10 source codes. For evaluations, we first compared the number of generated blanks between the previous algorithm and the proposed one, showing a significant increase. Then, we generated 10 new EFP instances with the proposed rules and confirmed that through applications to students, they are more difficult and comprehensive than the previous ones, leading to a better understanding of a wider range of concepts.
 
Keywords—web-client programming, blank element selection algorithm, element fill-in-blank, Python, BeautifulSoup, regular expression


Copyright © 2025 by the authors. This is an open access article distributed under the Creative Commons Attribution License which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited (CC BY 4.0).