A Study of Grammar-Concept Understanding Problems for Web Client

Programming with JavaScript

Khin Thet Mon1), Nobuo Funabiki2), Soe Thandar Aung3), Khaing Hsu Wai4),
Khin Sandar Lin5)
1) Department of Electrical and Communication Engineering, Okayama University, 3-1-1 Tsushima-
Naka, Okayama, 700-8530, Japan (p3x78b2r@s.okayama-u.ac.jp)
2) Department of Electrical and Communication Engineering, Okayama University, 3-1-1 Tsushima-
Naka, Okayama, 700-8530, Japan (funabiki@okayama-u.ac.jp)
3) Department of Electrical and Communication Engineering, Okayama University, 3-1-1 Tsushima-
Naka, Okayama, 700-8530, Japan (soethandar@s.okayama-u.ac.jp)
4) Department of Electrical and Communication Engineering, Okayama University, 3-1-1 Tsushima-
Naka, Okayama, 700-8530, Japan (khainghsuwai94@gmail.com)
5) Department of Physics, Pathein University, No.3 Quarter, Kan Thone Sint Estate, Pathein,
Myanmar (khinsandarlin93@gmail.com)

Abstract— Nowadays, web client programming with
HTML, CSS, and JavaScript has become common in web
application systems on both desktop and mobile devices.
However, few universities offer the full courses, although
the study may not be easy for novice students due to
complex composing elements. In this paper, we study the
Grammar-Concept Understanding Problem (GUP) for
self-study of the web client programming by novice
students. In GUP, a question describes the definition of a
predefined word for a method, a tag, an attribute, or an
event, and requests to answer the corresponding word in
the given source code. It is expected a student naturally
learns the basic grammar concepts while touching their
usages in codes by understanding the questions and
answering the key words in the code. For evaluations, we
generated 25 GUP instances with 209 questions using
source codes in websites and books and confirmed the
effectiveness through applications to 26 university students
in Okayama University.
Keywords— PLAS, JavaScript, HTML, web, grammar-
concept understanding problem
I. INTRODUCTION
Nowadays, the web client programming with HTML,
CSS, and JavaScript has become common in web
application systems on both desktop and mobile devices.
Among the three languages, JavaScript plays key roles
in detecting browser types, customizing webpages,
enhancing security, checking forms, and causing special
effects in the webpage. As a result, JavaScript is the
most popular programming language [1].
JavaScript has remarkable features compared with
other major programming languages. 1) It is easy to get
started with by abstracting away most of the complex
details of programming and to focus on learning how to
program. 2) It allows coding and testing on a web
browser without setting up any development
environment. 3) It becomes the essential web
technology along with HTML and CSS to build
interactive websites. 4) It has many prewritten
functionalities to help programmers develop complex
systems easily.
JavaScript is a powerful motivator for first-time
programmers since it can very easily translate raw data
to interactive and engaging visualizations [2]. It can be
introduced in the early years of STEM (Science,
Technology, Engineering and Mathematics) education
curricula to expose students to basic programming
concepts.
Under the above-mentioned situations, a lot of
people have now started to interest in learning
JavaScript for web client programming. Then, high-
quality learning tools have been highly demanded for
students, especially for self-study at home since many
students have no opportunities of taking the courses at
schools. Currently, most universities are teaching
JavaScript in a part of a web programming course.
Previously, we have developed Java programming
learning assistant system (JPLAS) to assist self-study of
Java [3]. To cover various learning levels, JPLAS
provides several types of exercise problems, including
the grammar-concept understanding problem (GUP) [4],
the value trace problem (VTP), the element fill-in-blank
problem (EFP), the code amendment problem (CAP),
the code modifying problem (CMP), and the code
writing problem (CWP). For any type in JPLAS, the
answer from a student is marked automatically, to
support the self-studies by the students. By extending
the works, we have been developing JavaScript
programming learning assistant system (JSPLAS) [5].
To learn programming effectively, it is suggested
that students solve simple problems for code reading
and grammar concept studies first, and then practice the
coding problems using code modifying ones. Therefore,
students are expected to solve the programming
exercises along this order of problem types in JSPLAS.
In this paper, we study the grammar-concept
understanding problem (GUP) as the first step problem
to study web client programming with JavaScript. A
GUP instance consists of a source code, a set of
questions, and their correct answer strings. A question
describes the definition of a predefined word in basic
grammar concepts representing a method, a tag, or an
attribute that appears in the given source code, and
requests to answer the corresponding one in the code. C. Generated GUP Instances
The correctness of any student answer is marked Table 1 shows the grammar concept, the number of
through string matching with the correct string. To lines (LOC) in the source code, the number of questions,
generate a new GUP instance automatically, the and the average correct answer rate of the students for
generation program for Java in [4] is modified for web
the 25 GUP instances.
client programming. The keyword list and the question
list are newly presented.
Table 1 Generated GUP Instances.
For evaluations, we generated 25 GUP instances ID # of Avg
with 209 questions using source codes for basic web Grammar concept LOC ques- correct
client programming in websites and textbooks and tions rate
1 Output by using 11 5 100%
assigned them to 26 master students in Okayama innerHTML
University who have not studied JavaScript in schools 2 Output by using 13 10 99%
before. Then, it was found that all the students correctly innerHTML
solved all the questions except for two instances where 3 how to change the label 14 8 100%
99% of them were solved. Thus, we confirm the of the button
4 Get the ID of the clicked 21 7 100%
effectiveness of the proposal in studying basic concepts button
of web client programming with JavaScript by novice 5 Get the HTML elements 33 12 100%
students. by Query selector
6 How to use the alert 14 6 100%
The rest of this paper is organized as follows: message
Section II presents GUP for web client programming. 7 How to use event 14 3 100%
Section III evaluates them. Section IV presents the handlers
8 How to change the 10 7 100%
related literature works. Finally, Section V concludes HTML attribute values
this paper with future works. 9 Event handler when user 27 10 100%
leaves from input field
II. GUP INSTANCES FOR BASIC GRAMMER CONCEPTS 10 How to use on-submit 19 11 99%
function to redirect other
In this section, we present 25 GUP instances for page
studying basic grammar concepts. 11 How to use the select 17 8 100%
event handler
A. Design Goals of GUP 12 How to use the reset 17 5 100%
The design goals of GUP are as follows: event handler
13 How to use the key-up 17 8 100%
1) A new GUP instance can be automatically and key-down event
generated by find the proper source code. handler
2) A variety of source codes effective in 14 How to use confirm 20 7 100%
programming study are depicted with full forms to window object
15 How to use prompt 15 7 100%
novice students. window object
3) A student can memorize the keyword definitions 16 How to use open window 14 5 100%
by carefully reading and understanding the codes. object
17 How to use open window 17 7 100%
4) Any student answer can be marked through string object (time out setting)
matching automatically. 18 Validate form 25 10 100%
B. GUP Instance Generation Procedure 19 JavaScript retype 27 10 100%
password validation
A GUP instance can be generated by: 20 Email validation 26 12 100%
1) It modifies the program (GUP generator) to How to show date 15 10 100%
21
generate the text file for a new GUP instance that
describes the questions and the correct answers by 22 Digital clock 37 13 100%
updating the keyword list and the question list. 23 Eval function for 52 14 100%
calculation
2) It selects a source code that is suitable for studying 24 Timer 35 9 100%
basic grammar concepts by containing the Error handling 26 5 100%
25
important keywords.
Average 21.44 8.36 100%
3) It runs GUP generator with the source code to Total (SD) 9.82 2.81 0%
generate the text file.
4) It runs another program (Interface generator) D. Example GUP Instance
with the text file in 3) to generate the The following Source Code is used in ID=1. It uses,
HTML/CSS/JavaScript files for the answer innerHTML, and contains five keywords, script,
interface on a browser. document, getElementById, innerHTML, and id, which
5) It assigns the generated GUP instance to students. must be understood by the students.
In this section,
 Source Code
<html>
<head>
</head>
<body>
<h1>Output by using innerHTML</h1>
<p id="msg"></p>
<script>
document.getElementById("msg").innerHTML="HelloWorld";
</script>
</body>
</html>
The following five questions with the correct
answers are selected for Source Code by GUP
generator:
(1) What is the main tag to define the JavaScript part in
this program? (script)
(2) What is the pre-defined object that represents the
whole HTML document in this program? (document)
(3) What is the pre-defined method to return the html
element that has the value for the id attribute in the
argument in this program? (getElementById)
(4) What is the pre-defined property to set or return the
HTML message or contents of an element in this
program? (innerHTML)
(5) What is the attribute to specify a unique id for an
HTML element in this program to access and
manipulate the element with the specific id? (id)
E. User Interface of GUP
Figure 1 illustrates the user interface for this instance.
After filling in the answer form, the student clicks the
“Answer” button. If the answer is correct, the
background color will stay in white. Otherwise, it will
become red. The student can submit answers repeatedly.
By clicking the link noting “Click here to download the
source code” that appears between the source code and
questions in the interface, the student can download the
code to run or edit it.
Figure 1: GUP answer interface.
III. EVALUATION
In this section, we evaluate the 25 GUP instances
through applications to 26 first-year master students in
Okayama University. Before the application, there was
no class of the web client programming.
A. Correct Rate Results
As more details of the solution results in Table 1, 23
students among 26 achieved 100% correct rates, one
achieved 98%, and one achieved 99%. Thus, the
generated GUP instances are at the proper level for
novice students to start studying web client
programming.
B. Submission Times Results
Then, the number of answer submission times for
each instance is analyzed. JSPLAS allows the students to
repeatedly submit their answers for marking. Table 2
shows the number of students for each range of
submission times. In Table 2, one student achieved the
best result of 26 submissions for the 25 GUP instances
and the 100% correct rate. On the other hand, three
students did nearly 400 submissions, which is 16 times
of the number of instances and twice of the number of
questions. This means that these students submitted
answers 16 times for one instance and two times for
each question on average.
Table 2 Student Result for GUPs
Group # of submissions Size
26
I 1
II 27-50 6
III 51-100 6
IV 101-200 7
V 201-300 3
VI 301-400 3
IV. RELATED WORKS IN LITERATURE
In this section, we discuss related works to this study
in literature.
In [6], G`omez-Albarr`an reviewed several tools to
support teaching and learning of programming, and
categorized them into four groups, 1) tools including
simple development environments, 2) example-based
environments, 3) tools based on visualization and
animation, and 4) simulation environments.
In [7], Brusilovsky et al. presented QuizPACK that
asks the value of a particular variable or a string with a
fragment of a program. They demonstrated that it
significantly improved the knowledge of semantics.
In [8], Kordaki presented a computer-based problem-
solving environment named LECGO (Learning
Environment for programming using C using
Geometrical Objects) for learning C programming by
beginners. It emphasized: (a) multiple external
representations in student learning, (b) motivations
through performing problem-solving activities from the
familiar and meaningful context, (c) active participations
of students by using hands-on experiences, (d)
appropriate feedbacks to aid self-corrections, and (e)
holistic, activity-based, multi-media, multi-
representational and multi-layered contents for learning
basic concepts of C programming.
In [9], Lee et al. presented a game called Gidget
where the eponymous robot protagonist is cast as a
fallible character that blames itself for not being able to
correctly write codes to complete its missions. Players
learn programming by debugging problematic codes.
In [10], Li et al. presented a game-based learning
environment to support novice students learning
programming. It exploits game construction tasks to
make the elementary programming more intuitive and
comprises concept visualization techniques to allow
students to learn key concepts in programming through
game object manipulations.
In [11], Hwang et al. proposed the web-based
programming assisted system called WPASC, designing
learning activity for facilitating cooperative
programming learning, and investigated cooperative
programming learning behaviors of students and
relationships with learning performances.
In [12], Cazzpla et al. proposed an approach to
gradually teach programming to students. It will permit
to expose them to few programming concepts at a time
with the support of an incremental development
framework. They experimented this model by teaching
JavaScript programming.
V. CONCLUSION
The paper studied the Grammar-Concept
Understanding Problem (GUP) for web client
programming study by novice students. 25 GUP
instances with 209 questions were generated using
source codes for basic grammar concepts with
combination of HTML, CSS, and JavaScript. Their
application results to 26 university students in Okayama
University confirmed the effectiveness of them, where
every student achieved the 98% or higher correct rate for
any instance. In future works, we will generate GUP
instances for studying advanced grammar concepts,
common libraries, and web application systems, and
assign them to students in JavaScript programming
courses.
REFERENCES
[1] JavaScript is the most popular programming
language: StackOverflow survey,
https://fossbytes.com/javascript-most-popular-
programming-language
[2] L. A. Abriata1, J. P.G.L.M. Rodrigues, M. Salathé,
and L. Patiny, "Augmenting research, education
and outreach with client-side web programming,"
Trends Biotech., vol. 36, no. 5, pp. 473–476, May
2018.
[3] S. L. Ao, et al. ed., IAENG Transactions on
Engineering Sciences -Special Issue for the
International Association of Engineers onferences
2016 (Volume II)," pp. 517-530, World Sci. Pub.,
2018.
[4] 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 understanding
problem for Java programming learning assistant
system,” to appear in J. Adv. Inform. Tech., Oct.
2021.
[5] K. T. Mon, N. Funabiki, H. H. S. Kyaw, M. P. P.
Zaw, and E. E. Myat, “A study of value trace
problems in JavaScript programming learning
assistant system,” in Proc. FIT, vol. 1, pp. 33-36,
Aug. 2021.
[6] M. G`omez-Albarr`an, "The teaching and learning
of programming: a survey of supporting software
tools," Comput. J., vol. 48, no. 25, pp. 130-144,
2005.
[7] P. Brusilovsky and S. Sosnovsky, "Individualized
exercises for self-assessment of programming
knowledge: an evaluation of QuizPACK," ACM J.
Edu. Res. Comput., vol. 5, no. 3, pp. 1-22, Sep.
2005.
[8] M. Kordaki, "A drawing and multi-representational
computer environment for beginners’ learning of
programming using C: Design and pilot formative
evaluation," Comput. Edu. vol. 54, pp. 69{87, 2010.
[9] M. J. Lee and A. J. Ko, "Personifying programming
tool feedback improves novice programmers
learning," in Proc. ICER, pp. 109-116, Aug. 2011.
[10] F. W. B. Li and C. Watson, "Game-based concept
visualization for learning programming," in Proc.
MTDL, pp. 37-42, Dec. 2011.
[11] W.-Y. Hwang, R. Shadiev, C.-Y. Wang, and Z.-H.
Huang, "A pilot study of cooperative programming
learning behavior and its relationship with students’
learning performance," Comput. Edu., vol. 58, pp.
1267-1281, 2012.
[12] W. Cazzpla and D. M. Olivares, "Gradually learning
programming supported by a growable programming
language," IEEE Trans. Emerg. Topic. Comput., vol. 4,
no. 3, pp. 404-415, Sep. 2016.