Improvements of Blank Element Selection Algorithm for Element Fill-in-blank Problem in Web-client Programming

In modern societies, web application systems take main roles among Internet-based information systems. To enhance educations of web-client programming for interactive user interfaces on browsers, we have studied the Element Fill-in-blank Problem (EFP) as a self-guided learning tool. EFP involves students completing the given source code based on the web page screenshots, fostering a dynamic approach to mastering web-client programming. Previously, the blank element selection algorithm has been studied to automatically generate EFP instances from source codes. However, the current algorithm encounters several limitations such as selections of meaningless blanks and insufficient selections of CSS properties. In this paper, we propose two improvements of this algorithm to address the limitations, namely, the two-step blank element identification and the key CSS property consideration. These improvements will help generate higher-quality EFP instances. As the evaluation of the proposal, we compared the outputs of the previous and proposed algorithms on the 10 source codes, and confirmed that the proposal could avoid meaningless blanks and increase the blanks for CSS properties.