At present, web-client programming using HTML, CSS, and JavaScript is essential in web application systems to offer dynamic behaviors in web pages. With rich libraries and short coding features, it becomes common in developing user interfaces. However, the teaching course is not common in universities due to limited time. Therefore, self-study tools are strongly desired to promote it in societies. Previously, we have studied the programming learning assistant system (PLAS) as a programming self-study platform. In PLAS, among several types of programming problems, the element fill-in-blank problem (EFP) has been implemented for code understanding study of C and Java programming. In an EFP instance, the blank elements in a source code should be filled in with the proper words, where the correctness is checked by string matching. In this paper, we implement EFP for web-client programming in PLAS. In a web page, HTML and CSS define the components with tags in the document object model (DOM), and JavaScript offers their dynamic changes with libraries, which are blanked in EFP. Besides, a set of web page screenshots are given to help the solution. For evaluations, the generated 21 EFP instances were assigned to 20 master students in Okayama University. By analyzing their solution results, the effectiveness was confirmed for JavaScript programming learning.

A web-based Java programming learning assistant system (JPLAS) has been developed for novice students to study Java programming by themselves while enhancing code reading and code writing skills. One type of the implemented exercise problem is code writing problem (CWP), which asks students to create a source code that can pass the given test code. The correctness of this answer code is validated by running them on JUnit. In previous works, a Python-based answer code validation program was implemented to assist teachers. It automatically verifies the source codes from all the students for one test code, and reports the number of passed test cases by each code in the CSV file. While this program plays a crucial role in checking the correctness of code behaviors, it cannot detect code plagiarism that can often happen in programming courses. In this paper, we implement a code plagiarism checking function in the answer code validation program, and present its application results to a Java programming course at Okayama University, Japan. This function first removes the whitespace characters and the comments using the regular expressions. Next, it calculates the Levenshtein distance and similarity score for each pair of source codes from different students in the class. If the score is larger than a given threshold, they are regarded as plagiarism. Finally, it outputs the scores as a CSV file with the student IDs. For evaluations, we applied the proposed function to a total of 877 source codes for 45 CWP assignments submitted from 9 to 39 students and analyzed the results. It was found that (1) CWP assignments asking for shorter source codes generate higher scores than those for longer codes due to the use of test codes, (2) proper thresholds are different by assignments, and (3) some students often copied source codes from certain students.

Currently, C programming is taught as the first programming language in many universities around the world due to the easy-to-learn and middle-level nature. However, the confusing concepts of keywords and unfamiliar formality make it difficult for students to study. Therefore, we have previously developed C programming learning assistance system (CPLAS) for self-studies of novice students. CPLAS offers several types of exercise problems with the automatic answer marking by string matching. In this paper, we propose a mistake correction problem (MCP) for code debugging study as a new problem type in CPLAS. MCP requests to answer every mistaken element and its correction in a given corrupt source code. We list up reserved words and common library functions in C programming for candidates of mistaken elements, and implement the MCP instance generation algorithm. To help solving MCP instances by a student, we implement the answer interface that shows the line number of each mistake, the corrupt code and answer forms in parallel, and the hint of suggesting the first character of each answer. For evaluations of the proposal, we generate 20 instances with 91 mistakes for basic grammars, and assign them to 18 university students in Japan, China, and Indonesia. Their answer results confirm the effectiveness of MCP.

Programming has gained significant importance worldwide as societies increasingly rely on computer application systems. To support novices in learning various programming languages, we have developed the Programming Learning Assistant System (PLAS). It offers several types of exercise problems with different learning goals and levels for step-by-step self-study. As a personal answer platform in PLAS, we have implemented a web application using Node.js and EJS for Java and Python programming. Recently, the Flutter framework with Dart programming has become popular, enabling developers to build applications for mobile, web, and desktop environments from a single codebase. Thus, we have extended PLAS by implementing the Flutter environment with Visual Studio Code to support it. Additionally, we have developed an image-based user interface (UI) testing tool to verify student source code by comparing its generated UI image with the standard one using the ORB and SIFT algorithms in OpenCV. For efficient distribution to students, we have generated Docker images of the answer platform, Flutter environment, and image-based UI testing tool. In this paper, we present the implementation of a web-based answer platform for the Flutter Programming Learning Assistant System (FPLAS) by integrating three Docker images using Docker Compose. Additionally, to capture UI images automatically, an Nginx web application server is adopted with its Docker image. For evaluations, we asked 10 graduate students at Okayama University, Japan, to install the answer platform on their PCs and solve five exercise problems. All the students successfully completed the problems, which confirms the validity and effectiveness of the proposed system.

Presently, C++ programming has been taught in many universities around the world as the first object-oriented programming language for undergraduate students to start studying programming concepts and computer architecture. However, many of them may struggle in studying C++ programming due to the nature in the formal language. Thus, hands-on self-study tools can be effective. In previous, we have developed Java programming learning assistant system (JPLAS) for assisting self-study of Java programming. JPLAS offers the value trace problem (VTP) for novice students to study Java programming through code reading study. In a VTP instance, actual values of important variable or standard output messages in a given source code are questioned, where the correctness of each answer is checked through string matching. In this paper, we investigate the effectiveness of VTP for hands-on self-study of C++ programming by novice students. We generated 37 VTP instances for basic grammar concepts using source codes in textbooks or websites for C++ programming, and asked 46 students in three universities in three countries to solve them using the answer interface for JPLAS. The results suggest that most of the students are satisfactory, but some students need cares at early programming study stage.

Nowadays, Java is one of the world’s most used object-oriented programming languages for its dependability and portability. To assist the self-studies of novice students, we have developed the Java programming learning assistance system (JPLAS). JPLAS offers several types of exercise problems for different difficulties, including the grammar-concept understanding problem (GUP), the mistake correction problem (MCP), the element fill-in-blank problem (EFP), and the phrase fill-in-blank problem (PFP), where a question asks to answer the corresponding keyword or phrase in the given source code. Unfortunately, some students cannot solve them well as the difficulty level is ascending. In this paper, to help such students, we propose a hint function that will show the first or more characters of each correct answer word in the answer interface on a web browser for JPLAS, when requested. The use of this function by a student can be traced by a teacher to analyze the performance and problem difficulty. For evaluations, we generated three instances for GUP, MCP, EFP, and PFP respectively, and assigned them to junior students taking the Java programming course in Okayama University, Japan. Their answer results found that the proposal is effective in helping students solve exercise problems in JPLAS, but the thinking time needs to be adjusted for PFP.