# Web Application Development Achievement: Clarifying the Relationship Between Visual GUI Design and Textual Programming

Djordje M. Kadijevich

► To cite this version:

Djordje M. Kadijevich. Web Application Development Achievement: Clarifying the Relationship Between Visual GUI Design and Textual Programming. IFIP World Conference on Computers in Education (WCCE), Aug 2022, Hiroshima, Japan. pp.554-566, 10.1007/978-3-031-43393-1_50 . hal-05533311

HAL Id: hal-05533311

https://inria.hal.science/hal-05533311v1

Submitted on 2 Mar 2026

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_1.png" /></figure>

Distributed under a Creative Commons CC BY 4.0 - Attribution - International License
<figure><img src="image_2.png" /></figure>

ifip

International Federation for Information Processing

This document is the original author manuscript of a paper submitted to an IFIP
conference proceedings or other IFIP publication by Springer Nature. As such, there
may be some differences in the official published version of the paper. Such
differences, if any, are usually due to reformatting during preparation for publication or
minor corrections made by the author(s) during final proofreading of the publication
manuscript.
# Web Application Development Achievement: Clarifying the Relationship Between Visual GUI Design and Textual Programming

Djordje M. Kadijevich(✉) D

Institute for Educational Research, Belgrade, Serbia

djkadijevic@ipi.ac.rs

**Abstract.** To develop web applications, the design of a graphical user interface (GUI design) is combined with textual programming. As these two practices are inevitably interconnected, the relationship between students' achievements in GUI design and textual programming should be a positive one. In order to improve instruction in web application development, this relationship should be clarified. This clarification is relevant because different kinds of GUI controls are available (e.g., standard input/output controls, data validation controls). These controls differ with respect to the nature and complexity of their properties, which need to be specified, possibly resulting in positive relationships of different strengths. To this end, this study used a sample of 74 second-year undergraduate students, who developed simple web applications through combining visual GUI design in the ASP.NET language and textual programming in C# language. By considering the students' web development achievements regarding this design and that programming, a positive relationship between them was found. In one group of 36 students, whose achievements in a 3-variable task were modest (almost 65% correct), this relationship was very strong (Spearman's rho = 0.868, df = 34, p < 0.01); the correlation between visual GUI design using validation controls and textual programming was also very strong (r_S = 0.872, df = 34, p < 0.01), whereas the correlation between visual GUI design using standard controls and textual programming was moderate (r_S = 0.555, df = 34, p < 0.01). In the other group of 38 students, whose achievements in a 5-variable task were quite good (about 90% correct), this relationship was moderate (r_S = 0.564, df = 36, p < 0.01); the correlation between visual GUI design using standard controls and textual programming was also moderate (r_S = 0.540, df = 36, p < 0.01), whereas the correlation between visual GUI design using validation controls and textual programming was rather weak (r_S = 0.348, df = 36, p < 0.05). Suggestions for practice and research are included.

**Keywords:** ASP.NET · C# · Standard Controls · Textual Programming · Undergraduate Students · Validation Controls · Visual GUI Design · Web Applications
# 1 Introduction

Initially, programming was mainly practiced through developing console applications, which enabled limited human-computer interaction by using strings of text that were entered in computers and displayed by them in a line-by-line fashion. With the wider implementation of graphical user interfaces (GUIs) at the end of the twentieth century – first done in operating systems, then in various application software – this interaction was greatly simplified by using graphical elements, such as input boxes, buttons, menus, icons, and windows (e.g., [1]). As a result, the development of console applications has been coupled with and gradually replaced by developing emergent windows and web applications. Bearing in mind the increasing relevance of web applications to today’s work and life, some elements of web programming are even included in introductory programming courses (e.g., [2,3]); this programming may be an ideal vehicle for teaching students a range of important computer science topics [4].

To practice web programming (i.e. to develop web applications), the design of a graphical user interface (GUI design) is combined with programming; the two practices can be accomplished in visual and textual modes, respectively (e.g., [5]). These practices belong to core programming knowledge areas, especially regarding components and relations [6]. They are also inevitably interconnected because, in practical terms, the outcome of one practice cannot be made live without the outcome of the other. To this end, the two practices require students to apply a range of related cognitive processes successfully (e.g., analysis and application in data manipulation and calculation; evaluation and synthesis in binding variables to GUI components; adapted from [7]). It is thus reasonable to expect that the relationship between students’ achievements in visual GUI design and textual programming should be a positive one.

In order to improve instruction in web application development (e.g., to support students’ better connection between visual GUI design and the work with its components in the underlying program), this relationship should be clarified. This clarification is relevant because different kinds of GUI controls can be applied. These are primarily standard input/output controls (e.g., labels and text-boxes) and data validation controls (e.g., required field validators and range validators); see Fig. 1. These kinds of controls differ with respect to the nature and complexity of their properties, which need to be specified, possibly resulting in positive relationships of different strengths. Despite this relevance, the relationship in question has not (to the author’s knowledge) been studied in the literature so far. (A Google Scholar search with the phrase “visual GUI design”, performed in May 2023 among papers published in the last five years, returned just 9 hits, none of which was relevant to the research

<figure><img src="image_3.png" /><figcaption>**Fig. 1.** Examples of GUI controls; messages concern data validation controls (taken from Fig. 1 in [3])</figcaption></figure>
summarized in this paper.) Hence, this study applied empirical research that examined the following research questions:

1. Was there a positive relationship between visual GUI design and textual programming? If so, could its strength be related to the complexity of tasks assigned to students or to their success in solving them?

2. If this positive relationship applied, did it differ in strength for different kinds of GUI controls? If so, what might the possible reasons for this be?

These questions were answered by a sample of second-year undergraduate students pursuing business studies at a private faculty.

The next, second section describes the method used in this empirical research. Its main findings are summarized in the third section, whereas the fourth section discusses these findings in detail. The final, closing section critically examines this empirical research and gives suggestions for practice and further research.

# 2 Method

## 2.1 Sample

This study used a convenience sample of seventy-four second-year undergraduate students attending a “Basics of programming” course as part of their business studies at a private faculty. Forty-seven of them (63.5%) were female. There were two groups of students attending this course in two academic years. About half of the students registered for the second year participated in this study. As most second-year students did not have any prior experience in programming, many of them decided to postpone their obligation regarding this course. Such an approach reduced the size of the potential sample to be used.

## 2.2 Programming Course

The content of the course “Basics of programming” focused on developing simple web applications, paying special attention to data validation. Students were taught both visual GUI design and textual programming, and this design included detailed work with standard input/output controls and data validation controls [3].

This course lasted for fifteen weeks, each week comprising five 45-min lessons with lectures and practical work. Students’ programming achievements during the course were evaluated using three examinations and one optional project. The first examination in week 4 dealt with developing a web application with linear structure. The second examination in week 8 assessed the development of a web application that involved branch and/or loop structure(s). The third, last examination in week 12 dealt with creating a simple database and developing a web application that showed and updated its content. An optional project, completed at the end of the course, required students to create a database and develop a web application that processed its content. As web applications with
data validation are highly relevant to today's businesses, developing such applications should be included in modern business studies. Although most future business executives would not develop these applications, many of them would be involved in projects concerning their development (e.g., [4]).

## 2.3 Software

Developing web applications was realized in Visual Web Developer, a component of Microsoft Visual Studio (https://visualstudio.microsoft.com/). The edition of the Developer was 2010 Express, which could be downloaded from the Internet for free. This environment was found to be suitable for introducing programming to undergraduate students engaged in business studies because, even with modest visual GUI design and only a little textual programming (with just 5-10 lines of code), interesting, business-relevant web applications could be developed. Consider, for example, a web calculator for a break-even analysis that determines the volume of production needed to produce zero profit.

## 2.4 Design and Variables

This study utilized a correlative design involving four variables. These variables were: Visual GUI design using standard controls; Visual GUI design using validation controls; Overall visual GUI design; and Textual programming.

There were three variables regarding visual GUI design because two types of GUI controls were used. These controls were standard controls (including labels, text-boxes, and buttons) and validation controls (including required field validators, range validators, and validation summaries). The controls differed with respect to the nature and complexity of their properties, which needed to be specified. Contrary to the standard controls that required at most one property to be specified (e.g., label text for labels), validation controls had two or more properties that needed to be specified. For range validators, for example, these properties were: control to validate, error message, minimum value, maximum value, and data type. Furthermore, their display property had to be set to "None" as summary validators were used.

## 2.5 Instrument and Procedure

The values of the four applied variables were determined using a programming assignment given on the first examination mentioned above concerning simple web applications with linear structures, covering data validation. As this examination was part of regular assessments during the academic year, participants were not told that their solutions and achievements might be used as data in subsequent research.

The variables applied were measured in the following way:

- visual GUI design using standard controls was measured by the student's success in designing web pages using labels, text-boxes, and a button;
- visual GUI design using validation controls was measured by the student's success in designing web pages using a required field validator, a range validator, and a validation summary;

- overall visual GUI design concerned the success in applying all these controls;

- textual programming was measured by the student's success in declaring variables, assigning values to them, and calculating these values.

The reliability of these measures (Cronbach's alpha) are reported in Table 1. For scoring students' solutions, see the appendix.

In each academic year (recall that there were two groups of students in two academic years), the students completed the assignment working in three groups. All students were taught both types of control and were required to use them to solve the task given. Although these groups solved different programming tasks, the structures of these tasks could be considered as isomorphic because they required the students to use the same number of variables, connected straightforwardly. In one group, the 3-variable task group, the relations to apply were: $c = a-b, c = a/b$, or $c = a*b$. In another group, the 5-variable task group, these relations were: $e = a*(b+c+d)$, $e = a*b+c*d$, or $e = a+b*c+d$. An example of a 3-variable task and its solution with scoring are given in the Appendix. An example of the 5-variable tasks can be found elsewhere (e.g., [3], Exam 1 in Appendix 2). Note that in each academic year the achievements of these three student groups were not different, statistically, according to the Kruskal-Wallis test. Hence, in each academic year, all students could be considered as being members of one programming group.

## 2.6 Data Transformation and Statistical Analysis

The values of each variable were first rescaled to interval [0, 1]. Apart from calculating descriptive statistics, correlative analyses were undertaken. Because the assumption of normality was violated for all variables applied (see the values of K-S $z$ listed in Table 1), the relationship between pairs of variables was measured by Spearman's correlation. Instead of the values of variables in question, this correlation deals with the ranks of these values by variable. Note that because of this violation, instead of one-way ANOVA, the Kruskal-Wallis test was used. This test examined whether there were different achievements from students who solved tasks using the same number of variables as already mentioned in the previous paragraph.

## 3 Results

Table 1 summarizes the means and standard deviations of the measured variables (in terms of percentage correct) and reports Spearman's correlations among them. For each variable, the first row contains data regarding students who solved 3-variable tasks ($N_1 = 36$), whereas the second row lists data concerning students who solved 5-variable tasks ($N_2 = 38$).
<table><caption>**Table 1.** Descriptive and correlative statistics for measured variables</caption><thead><tr><th rowspan="2">Variable</th><th rowspan="2">M (SD); α; K-S z</th><th colspan="3">Correlations</th></tr><tr><th>2</th><th>3</th><th>4</th></tr></thead><tbody><tr><td rowspan="2">1. VGUID (SCs)</td><td>73 (32); 0.86; 2.197**</td><td>0.554**</td><td>0.739**</td><td>0.555**</td></tr><tr><td>86 (12); 0.66; 1.581*</td><td>0.314+</td><td>0.854**</td><td>0.540**</td></tr><tr><td rowspan="2">2. VGUID (VCs)</td><td>56 (44); 0.86; 1.596*</td><td></td><td>0.959**</td><td>0.872**</td></tr><tr><td>94 (12); 0.80; 1.908**</td><td></td><td>0.708**</td><td>0.348*</td></tr><tr><td rowspan="2">3. VGUID</td><td>63 (36); 0.85; 1.732**</td><td></td><td></td><td>0.868**</td></tr><tr><td>90 (11); 0.78; 1.581*</td><td></td><td></td><td>0.564**</td></tr><tr><td rowspan="2">4. TP</td><td>64 (40); 0.95; 1.352+</td><td></td><td></td><td></td></tr><tr><td>87 (15); 0.89; 2.058**</td><td></td><td></td><td></td></tr></tbody></table>

VGUID (SCs) – Visual GUI design using standard controls;

VGUID (VCs) – Visual GUI design using validation controls;

VGUID – Overall visual GUI design; TP – Textual programming;

+ *p* < 0.06, * *p* < 0.05, ** *p* < 0.01

Programming achievements of students who solved 3-variable tasks were modest (almost 65% correct), and the relationship between visual GUI design and textual programming was very strong ($r_S = 0.868, df = 34, p < 0.01$). It was very strong due to a very strong correlation between visual GUI design using validation controls and textual programming ($r_S = 0.872, df = 34, p < 0.01$). On the other hand, programming achievements of students who solved 5-variable tasks were quite good (about 90% correct), but the relationship between visual GUI design and textual programming was moderate ($r_S = 0.564, df = 36, p < 0.01$). It was moderate due to a weak correlation between visual GUI design using validation controls and textual programming ($r_S = 0.348, df = 36, p < 0.05$). The correlation between visual GUI design using standard controls and textual programming did not differ from group to group (0.555 vs. 0.540; *p* < 0.01).

## 4 Discussion

Three important findings emerged from this study. Firstly, for students with lower achievements who solved 3-variable tasks, the relationship between visual GUI design and textual programming was very strong due to a very strong correlation between visual GUI design using validation controls and textual programming. Secondly, for students with higher achievements, who solved 5-variable tasks, the relationship between visual GUI design and textual programming was moderate due to a weak correlation between visual GUI design using validation controls and textual programming. Thirdly, for both groups of students, there was a moderate, almost identical correlation between visual GUI design using standard controls and textual programming. The following paragraphs examine these findings in more detail.
## 4.1 First Research Question

The first research question asked whether there was a positive relationship between visual GUI design and textual programming, and if so, could its strength be related to the complexity of tasks assigned to students or to their success in solving them. It was found that this relationship was indeed positive, also being of different strength for different programming tasks solved (0.868 for 3-variable tasks vs 0.564 for 5-variable tasks). As shown below, instead of the complexity of these tasks in terms of the number of variables applied, this difference in strength could be attributed to the students' success in solving them (almost 65% vs. about 90%), with a stronger correlation for students with lower achievements.

That there was a positive relationship between visual GUI design and textual programming was expected. Visual GUI design and textual programming influence each other in a positive way. This is because the two practices, which belong to core programming knowledge areas, especially regarding components and relations, require students to apply a range of related cognitive processes successfully (e.g., [6,7]). A detailed argumentation that considers two kinds of controls applied in this design may go as follows.

- Standard controls used by a web application hold, as their values, data processed by a program implementing web application. In other words, to have these visually-managed controls live, a program written in the textual mode was needed, and vice versa.

- Validation controls required a number of their properties to be set properly, making the work with validation controls beyond the drag-and-drop actions similar (albeit small in scope) to the work required by textual programming in general. In particular, to make a web application workable, visual GUI design using these controls and textual programming were mutually dependent. These practices link with each other through entities and their properties used at both web application development sides (e.g., specify input/output entity, choose entity data type, do entity value assignment, choose entity value constraint(s)).

That this positive relationship between visual GUI design and textual programming might be of different strength for different groups of students might also hold true. A stronger correlation was found for students with lower achievements, who solved simpler tasks applying three variables only. Additional correlative analysis showed why a stronger correlation was found for those students. In each group of students, visual GUI design and textual programming were not related for students whose achievements in both GUI design and textual programming were higher than 80%. There were many more such students who solved 5-variable than 3-variable tasks with that success (32 of 38 vs. 18 of 36; $\chi^2 = 9.873$, $df = 1, p = 0.002$). Hence, it was this wider absence of relationship that might primarily contribute to a lower correlation for the group of students with higher achievements. To realize the impact of zero or low correlation in a subsample on the correlation in the whole sample, see [8], for example.
As already underlined in the Introduction, the relationship between visual GUI design and textual programming has not been examined in earlier studies according to the author's readings. However, there is a study that examined the relationship between design skills and programming skills in an advanced programming class [9]. These skills were related to (1) writing a Unified Modeling Language (UML) class diagram for a solution (program) of the problem given and (2) implementing in Java several methods applied in this diagram. There was a strong, positive correlation between these skills ($r = 0.797, df = 35, p < 0.001$). According to the scatterplot of the students' scores, the examined relationship was missing for students with high achievements in both design and programming skills as found in our study.

## 4.2 Second Research Question

Provided that a positive relationship between visual GUI design and textual programming applied, the second research question asked whether this relationship differed in strength for different kinds of GUI controls, and if so, what might be the possible reasons for such a state. It was found that for students with lower achievement who solved 3-variable tasks, this relationship did differ in strength for different kinds of GUI controls; textual programming correlated much higher with visual GUI design using validation controls than with visual GUI design using standard controls ($0.872 > 0.555, Z = 3.524, p = 0.000$). Although the opposite seemed to apply for students with higher achievement who solved 5-variable tasks ($0.348 < 0.540$), the relationship did not differ for different kinds of GUI controls, statistically ($Z = 0.951, p = 0.341$). Being aware of the fact that, in both groups of students, there was a moderate, almost identical correlation between visual GUI design using standard controls and textual programming ($0.555 < 0.540; p < 0.01$), possible reasons for the existence/non-existence of differences in strength might be found in the specificity of the relationship between visual GUI design using validation controls and textual programming.

That the relationship between visual GUI design and textual programming applied could differ in strength for different kinds of GUI controls favoring standard controls was suggested by the fact that the use of standard controls is vital to program execution. On the other hand, the use of validation controls is optional, provided that input data are correctly given. However, the work with validation controls beyond the drag-and-drop actions requires a number of properties to be specified. Hence, this work is, as already underlined, similar (albeit small in scope) to the work required by textual programming in general. This similarity might cause a much higher correlation of textual programming with visual GUI design using validation controls than with visual GUI design using standard controls in the group of students with lower achievements who solved 3-variable tasks. The similarity was always there, but this pattern was not present in the group of students with higher achievements who solved 5-variable tasks. What could the reasons for that be?

Possible reasons for the existence/non-existence of differences in strength might be found in another specificity of the relationship between visual GUI
design using validation controls and textual programming observed in students' achievement scores. Recall that we already considered students whose achievements on both visual GUI design and textual programming were higher than 80% and underlined that there were many more such students among those who solved 5-variable than 3-variable tasks with that success (84% vs. 50%). As in each group of students, visual GUI design using validation controls and textual programming was not related ($r_S = 0.112, df = 30, p = 0.543$ vs. $r_S = 0.330, df = 16, p = 0.181$), this absence limited the strength of the relationship in question, especially in the 5-variable task group.

It is important to underline that the missing dependency between visual GUI design using validation controls and textual programming for high achieving students was a result of a somewhat careless approach to one kind of practice of many students. For example, inappropriate or missing assignments for some properties of validation controls used; inappropriate declarations of variables and thus inappropriate conversions of data in programs developed. The same careless approach might be applied by some Java programmers in the above-mentioned study on the relationship between design skills and programming skills [9]. Future studies may confirm the implication that some students with high levels of achievement for both kinds of practice nevertheless need special support regarding these shortcomings in order to develop a positive relationship between visual GUI design and textual programming. Note that the dependency between visual GUI design using standard controls and textual programming was missing among best solvers of 3-variable tasks due to a missing label or unclear/unsuitable label text, for example.

# 5 Closing Remarks

The relationship between visual GUI design and textual programming was found to be positive, being of different strength for different programming tasks solved. Instead of the complexity of these tasks in terms of the number of variables applied, this difference in strength could be attributed to the students' success in solving them, with a stronger correlation for lower-achieving students. Furthermore, the relationship could differ in strength for different kinds of GUI controls as found for lower-achieving students who solved 3-variable tasks. The existence/non-existence of differences in strength might be attributed to the missing dependency for high-achieving students between visual GUI design using validation controls and textual programming, which was a result of a somewhat careless approach of many high achievers to this design or that programming.

Bearing in mind that modern approaches to introductory programming start with applying control flow from the very beginning (e.g., [10]), the programming tasks used in this study (applying linear structures only) may appear very simple because they do not call for the application of a full range of the cognitive skills required for successful programming. As already mentioned, the participants in this study were novice programmers. Novice programmers can only successfully deal with programs with linear and branch structures; programs with loop structures are usually hard for most of them (e.g., [11, 12]). Hence, focusing first on
the tasks used in this study might be found appropriate. Furthermore, visual GUI design, as a design activity that calls for the demanding learning activity of problem structuring and articulation [13], involved (although indirectly) some sort of algorithmization.

It is important to underline that the positive relationship between visual GUI design and textual programming found in this study should not imply that requiring students to create web pages with validation controls would help them learn some programming logic. It should rather imply that, as already emphasized, a workable web application calls for a mutual interdependence between visual GUI design and textual programming. These practices link with each other through entities and their properties used at both web application development types (e.g., input/output entities, entity data type, entity value assignment, entity value constraint(s); validation summary controls make use of branch and loop structures). The finding that a positive relationship between visual GUI design and textual programming only applies at lower achievement levels for both kinds of practice might be a signal that, in order to develop a positive relationship between these kinds of practice, some high-achieving students may need special support to make this linkage more explicit to them.

To summarize: Although this study used a relatively small sample and a simple programming task that might be characterized as preliminary research, it revealed valuable findings. To improve textual programming, educators may invest in visual GUI design, and vice versa. In doing that, certain aspects of web controls used (especially validation ones) should be connected to the corresponding aspects of textual programming. Despite its educational relevance, a positive relationship between visual GUI design and textual programming has not been clarified in the literature so far. In order to improve instruction in web application development (e.g., to support students' better connection between visual GUI design and work with its components in the underlying program), further research may focus on this clarification using more complex programming tasks (including also other kinds of controls) solved by students of different programming experience. Although visual GUI design may not be considered as visual programming, the outcome of this research may suggest promising directions to follow in clarifying the relationship between visual and textual programming. This clarification, which has not been done so far as well, would help educators better arrange programming practice in so-called hybrid programming environments, which support both kinds of programming, aiming at attaining competent textual programming (e.g., [14]).

**Acknowledgement.** This contribution resulted from the author's research funded by the Ministry of Education, Science and Technological Development of the Republic of Serbia (Contract No. 451-03-47/2023-01/200018). The author dedicates the contribution to his son Aleksandar.
# Appendix

- One exam task and its solution with scoring

## Exam Task

The total value of issued bonds is calculated in the following way:

Total value of bonds = Value of one bond * Number of bonds issued.

Create a web application that calculates the total value of issued bonds for the given value of one bond and the number of bonds issued. (When this value and that number are 50,000 val and 10,000 respectively, the total value of bonds is 500,000,000 val). To validate input data, use three different validation controls.

Ten controls needed are underlined in Fig. 2 on the next page. If correctly applied, one point was given for each shaded assignment. One point was given for each text-box used. Eighteen points (4-labels, 2-text-boxes, 1-button, 3-required field validator, 6-range validator, 2-validation summary) could be earned in total.

```html
<form id="form1" runat="server">
  <div>
    <asp:Label ID="Label1" runat="server" Height="9px" Style="z-index: 100; left: 112px; position: absolute; top: 59px; text="Total value of bonds" Width="120px"></asp:Label>
    <asp:Label ID="Label2" runat="server" Style="z-index: 101; left: 50px; position: absolute; top: 120px; text="Value of one bond"></asp:Label>
    <asp:Label ID="Label3" runat="server" Style="z-index: 102; left: 45px; position: absolute; top: 173px; text="Number of bonds issued"</asp:Label>
    <asp:TextBox ID="TextBox1" runat="server" Style="z-index: 103; left: 109px; position: absolute; top: 117px"></asp:TextBox>
    <asp:TextBox ID="TextBox2" runat="server" Style="z-index: 104; left: 128px; position: absolute; top: 172px"></asp:TextBox>
    <asp:Button ID="Button1" runat="server" Style="z-index: 105; left: 108px; position: absolute; top: 227px; text="Calculate" OnClick="Button1 Click" />>
    <asp:Label ID="Label4" runat="server" Style="z-index: 106; left: 52px; position: absolute; top: 286px; text=""</asp:Label>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" Display="None" ErrorMessage="Enter bond value!" Style="z-index: 107; left: 356px; position: absolute; top: 42px"></asp:RequiredFieldValidator>
    <asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="TextBox2" Display="None" ErrorMessage="Number of bonds is between 100 and 1000!" MaximumValue="1000" MinimumValue="100" Style="z-index: 108; left: 370px; position: absolute; top: 97px" Type="Integer"></asp:RangeValidator>
    <asp:ValidationSummary ID="ValidationSummary1" runat="server" Style="z-index: 109; left: 375px; position: absolute; top: 179px" ShowMessageBox="True" ShowSummary="False" Style="z-index: 110; left: 383px; position: absolute; top: 168px"></asp:ValidationSummary>
  </div>
</form>
```

<caption>Fig. 2. Code generated with visual GUI design</caption>

```csharp
protected void Button1 Click(object sender, EventArgs e)
{
    decimal value = Convert PROPERTY TextBox1 PROPERTY Text;
    int number = Convert PROPERTY TextBox2 PROPERTY Text;
    decimal totalValue = number * value;
    Label4.Text = "Total value of bonds: " + Convert.ToString(totalValue) + " val";
}
```

<caption>Fig. 3. Code produced by textual programming</caption>
## Code Produced by Textual Programming

The code is given in Fig. 3 between {}. Three points could be earned for declaring variables (one point for each variable needed); four points for assigning values to these variables and a label (one point for each assignment required); and five points for calculating these values (one arithmetic operation, three data conversions, and one string operation needed); twelve points in total.

## About Partial Credit

For an inappropriate variable declaration (e.g., decimal instead of int) or an inappropriate data conversion (e.g., Convert.ToDecimal instead of Convert椒32), only half a point could be earned. Inappropriate assignments of some properties of the web control used (e.g., an unclear error message or label text) were assigned 0.75 point each.

## References

1. Martinez, W.L.: Graphical user interfaces. WIREs Comput. Stat. 3(2), 119–133 (2011)

2. Xiong, X., Ning, A.: Exploration and research on web programming course in higher vocational college. In: 10th International Conference on Computer Science & Education (ICCSE), New York, pp. 824–828. IEEE (2015)

3. Kadijevich, D.M.: First programming course in business studies: content, approach, and achievement. In: Barendsen, E., Chytas, C. (eds.) ISSEP 2021. LNCS, vol. 13057, pp. 45–56. Springer, Cham (2021). https://doi.org/10.1007/978-3-030-90228-5_4

4. Taylor, T.: Web competencies for IT students. In: Braun, R. (ed.) Proceedings of 7th International Conference on Information Technology Based Higher Education and Training, New York, pp. 297–304. IEEE (2006)

5. Delamater, M., Boehm, A.: Murach's ASP.NET 4.6 Web Programming with C# 2015. Mike Murach & Associates, Fresno (2016)

6. Wang, W., Bromall, N.: Knowledge and skill gaps in programming. In: Proceedings of the EDSIG Conference, Norfolk, VA, pp. 1–10. Information Systems & Computing Academic Professionals, Wrightsville Beach (2018)

7. Sobral, S.R.: Bloom's taxonomy to improve teaching-learning in introduction to programming. Int. J. Inf. Educ. Technol. 11(3), 148–153 (2021)

8. Charter, R.A., Alexander, R.A.: A note on combining correlations. Bull. Psychon. Soc. 31(2), 123–124 (1993). https://doi.org/10.3758/BF03334158

9. Coffey, J.W.: Relationship between design and programming skills in an advanced computer programming class. J. Comput. Sci. Coll. 30(5), 39–45 (2015)

10. Robins, A.V.: Novice programmers and introductory programming. In: Fincher, S.A., Robins, A.V. (eds.) The Cambridge Handbook of Computing Education Research, pp. 327–376. Cambridge University Press, Cambridge (2019)

11. Hofuku, Y., Cho, S., Nishida, T., Kanemune, S.: Why is programming difficult? Proposal for learning programming in “small steps” and a prototype tool for detecting “gap”. In: Diethelm, I., Arndt, J., Dnnebier, M., Syrbe, J. (eds.) Informatics in Schools: Local Proceedings of the 6th International Conference ISSEP 2013 - Selected Papers, pp. 13–24. Universitätsverlag Potsdam, Potsdam (2013)
12. Lahtinen, E., Ala-Mutka, K., Jrvinen, H.-M.: A study of the difficulties of novice programmers. In: Proceedings of the 10th Annual SIGCSE Conference on Innovation and Technology in Computer Science Education (ITiCSE 2005), pp. 14–18. ACM, New York (2005)

13. Jonassen, D.H.: Toward a design theory of problem solving. Educ. Tech. Res. Dev. **48**, 63–85 (2000). https://doi.org/10.1007/BF02300500

14. Noone, M., Mooney, A.: Visual and textual programming languages: a systematic review of the literature. J. Comput. Educ. **5**(2), 149–174 (2018). https://doi.org/10.1007/s40692-018-0101-5