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.

With the progress of digitaltransformation(DX)with the Internet, webapplicationsystemshave become common at various situations in daily lives. Then, web-client programmingusing HTML, CSS, and JavaScriptfor dynamic web pages has increased the importance for students, particularly in information technology majors. However, in most university around the world, the corresponding courses are not offered due to limited time and teachers. As a result, the development of a self-learning tool has been strongly demanded. In web-client programming, the interactions between the three languages must be understood and mastered, to make programs of interactive and dynamic web pages. Then, as exercise problems in the self-learning tool, we have studied the behavior understanding problem(BUP). A question in a BUP instance requests to answer the keyelementin the given source code, which corresponds to the behavior described in the statement. The correctness of any answer is marked through string matching. To generate a proper BUP instance, the rules of selecting the keyelementsfrom the source code must be clarified. In this paper, we present the key elementselection rules by analyzing interactions between HTML/CSS codes and JavaScript codes. Through observing manually generated BUP instances, we find that the rules should be made for the six categories: 1) JavaScript reserved word, 2) JavaScript library class/method, 3) JavaScript identifier, 4) Id name, 5) CSS syntax, and 6) text message. For the preliminary evaluation, we applied the proposed rules to ordinary web-clientprogrammingcodes and confirmed their correctness. As the next step, we will implement the program of applying the rules automatically and verify the validity of our proposal.

Nowadays, game programming is a dynamic and rapidly evolving domain, driven by its exceptional popularity and continuing growth in technology and entertainment sectors. As gaming industries expand across diverse platforms and audiences, the demand for proficient game developers has been risen significantly. In response, the need for accessible and effective learning resources is leading to a surge of online courses, tutorials, and learning tools. Previously, we have presented the element fill-in-blank problem (EFP) in the programming learning assistant system (PLAS) for self-study of basic web-client programming using HTML, CSS, and JavaScript by novice students. An EFP instance requests to fill in the blanks of the given source code by referring to the screenshots of the corresponding web page. The correctness of any answer is marked through string matching. Tags, function names, or text messages may be blanked in the code. In this paper, we present EFP for self-study of web-client game programming. By solving proposed EFP, it is expected that students not only gain hands-on experience in game programming but also learn in-depth unique programming styles and grammar concepts there. For preliminary evaluations, we generated three EFP instances using source codes for web-client games and assigned them to 20 students in State Polytechnic of Malang, Indonesia. Their solution results confirmed the validity of the proposal.