A Design of Key Element Selection Rules for Behavior Understanding Problem in Web-Client Programming Learning

Abstract:

With the progress of digital transformation (DX) with the Internet, web application systems have become common at various situations in daily lives. Then, web-client programming using HTML, CSS, and JavaScript for 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 key element in 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 key elements from the source code must be clarified. In this paper, we present the key element selection 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-client programming codes 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.

• Periodical: Engineering Headway (Volume 27)
• Pages: 58-65
• DOI: https://doi.org/10.4028/p-qu2UYk
• Online since: October 2025
• Authors: Huiyu Qi*, Nobuo Funabiki, Khaing Hsu Wai, Flasma Veronicha Hendryanna
• Keywords: Client-Side Web Programming, Code Behavior Understanding, CSS, HTML, JavaScript

References

[1] "What is web-client programming," https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/.

[2] S. Kar, M. M. Islam, and M. Rahaman, "State-of-the-art reformation of web programming course curriculum in digital bangladesh," Interna- tional Journal of Advanced Computer Science and Applications 11 (2020).

DOI: 10.14569/ijacsa.2020.0110323

[3] A. Knutas, D. Savchenko, T. Hynninen, and N. Grönberg, "Constructive alignment of web programming assignments and automated as- sessment with unit testing," in Proceedings of the 19th Koli Calling International Conference on Computing Education Research (2019) p.1–2.

DOI: 10.1145/3364510.3366150

[4] D. Bau, J. Gray, C. Kelleher, J. Sheldon, and F. Turbak, "Learnable programming: blocks and beyond," Communications of the ACM 60, 72–80 (2017).

DOI: 10.1145/3015455

[5] X. Xia, L. Bao, D. Lo, Z. Xing, A. E. Hassan, and S. Li, "Measuring program comprehension: A large-scale field study with professionals," IEEE Transactions on Software Engineering 44, 951–976 (2017).

DOI: 10.1109/tse.2017.2734091

[6] D. Weintrop and U. Wilensky, "To block or not to block, that is the question: students' perceptions of blocks-based programming," in Proceed- ings of the 14th international conference on interaction design and children (2015) p.199–208.

DOI: 10.1145/2771839.2771860

[7] J. R. De Leeuw, "jspsych: A javascript library for creating behavioral experiments in a web browser," Behavior research methods 47, 1–12 (2015).

DOI: 10.3758/s13428-014-0458-y

[8] S. T. Aung, N. Funabiki, Y. W. Syaifudin, H. H. S. Kyaw, S. L. Aung, N. K. Dim, and W.-C. Kao, "A proposal of grammar-concept under- standing problem in java programming learning assistant system," J. Adv. Inform. Tech. (JAIT) 12 (2021).

DOI: 10.12720/jait.12.4.342-350

[9] "Online resource 1," https://www.runoob.com/.

[10] "Online resource 2," https://www.w3school.com.cn/index.html/.

[11] Y. Ryou and S. Ryu, "Automatic detection of visibility faults by layout changes in html5 web pages," in 2018 IEEE 11th International Conference on Software Testing, Verification and Validation (ICST) (IEEE, 2018) p.182–192.

DOI: 10.1109/icst.2018.00027