A Blank Element Selection Algorithm for Element Fill-in-blank Problems in Client-side Web Programming

Nowadays, web applications play central roles in information systems using the Internet. Then, client-side web programming using HTML, CSS, and JavaScript should be mastered first by novice students. Previously, we have presented the element fill-in-blank problem (EFP) for its self-study. An EFP instance requests to fill in the blank elements in the given source code by referring to the screenshots of the corresponding web page. The correctness of any answer is marked through string matching. However, these blanks were manually selected by considering the importance of elements and the uniqueness of their correct answers. In this paper, we propose a blank element selection algorithm to automatically generate a new EFP instance from a given source code for client-side web program-ming. We define the seven rules on blank element selections from the code, and implement the procedure in Python using the open source BeautifulSoup and regular expressions.‘For evaluations, we applied the algorithm to the 47 source codes used for manual generations and obtained the better EFP instances with more blanks. Besides, we verified the effectiveness by generating 10 new instances with the algorithm and assigning them to 40 students. In addition, we extended its application to three source codes for games and verified the effectiveness by assigning them to 20 students, to further validate the applicability of the algorithm in EFP instance generations. We also evaluated the relationships between the number of blanks, the number of lines in source codes, the submission times and answer rates of students to further assess the adaptability of the algorithm. These results allow us to measure the algorithm’s versatility in generating a wide range of EFP instances and contributes to comprehensive understanding of instance difficulties and learning outcomes.