To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the use of functional cookies. For more information read this page.

ClickIt: A web based application to aid the learning of web development in an educational environment

3 Literature review

3.1 Introduction

In this literature review, I intend to look at how web programming is currently taught, what issues it faces, to look into visual web programming and to understand how already existing programming aids make it easier for children who are learning to program.

The purpose of this review is to understand if web programming teaching can be improved and how this can be achieved.

3.2 Web development in the Scottish Curriculum

In the latest change to the Scottish school curriculum the SQA updated the course content for the Computer Science course to include web development as a staple part of the Information Systems and Design unit of the subject. At both Higher and Advanced Higher level Computer Science, web design and development requires students taking the courses can at least (SQA 2015, p. 15):

  • form structure using HTML
  • form processing using client-side or server-side scripting

However, students sitting this course must also know the basics of linking HTML and CSS, how to use CSS and know how to write content in HTML.

For the examination, students should be able to write the HTML and CSS as if they were writing into an integrated development environment (IDE) or text editor for these courses, so it is essential that students understand how HTML and CSS work in code too.

3.3 The issues with teaching web programming

Learning to program is one of those skills that is very useful as it can improve general problem solving skills as well as giving the ability to think differently. There are many free and easy to access programming languages but many of them have a steep learning curve, particularly if it is the first language learned. On the subject of web programming, a study was carried out to understand the issues with how it is taught: "a taxonomy of student errors in HTML and CSS is analysed, reinforcing the pedagogical idea that even entry level languages, not considered as 'computationally expensive' as many other languages, require developing computational skills such as checking syntax errors and debugging" (Maiorana 2014, p. 49). It is clear that, even with students at a university level, HTML and CSS require some knowledge of programming. They argue also that "mastering all the knowledge required is deemed 'unreasonable' while some practical level of understanding in all the technologies is considered necessary" (Maiorana 2014, p. 49).

Web development involving the multiple languages of the web includes learning HTML, CSS, JavaScript, a server side language such as PHP and a database language such as SQL. Normally a course begins with teaching HTML and introducing tags. It then continues the idea of tags and moves on to CSS and later JavaScript. Each of these languages means another language needs to be learned, increasing the complexity and the possibility of confusion and overlapping of concepts and ideas. This can make learning web development seem like a big task, since the multiple languages suggest a lot of content.

3.4 Visual learning

With children aged 12 to 16, learning to program seems like an even more daunting task. Tony Jenkins, a lecturer and former teacher, writes "at first sight, teaching programming appears to be a straightforward task" (Jenkins 2001, p. 1) but at any point learning to program requires something to "engage their curiosity and interest" (Jenkins, p. 3). This problem can be solved by making programming less about typing code and more about a graphical or visual programming style.

In the field of website development, there are no real alternatives to using either a What You See Is What You Get (WYSIWYG) development environment (as pictured in Figure 1) or writing the content in HTML, CSS and JavaScript in a text editor. Both of these have their own problems.

While WYSIWYG does offer a visual programming style, it does not encourage learning code and it does not offer the power of a text editor. Complicated user interfaces burden WYSIWYG editors even more and require some time before hand to understand the user interface even before any content is put on to the webpage. Developing this way is not suitable for education-based web development since it discourages the use of code. WYSIWYG editors such as Microsoft Word also suffer from the problem of lack of control over code content and often generate complex code that is often invalid.

Dreamweaver

Figure 1 - Adobe Dreamweaver CS6, a WYSIWYG editor

As shown in Figure 1, WYSIWYG editors often do not generate the most efficient code, which makes readability harder. This can be discouraging for someone who is learning HTML and CSS from scratch.

As ToonTalk (Figure 2) developer Ken Khan also discusses, whilst other languages like C++, Java or C are incredibly powerful, they have steep learning curves. Whilst neither HTML or CSS are particularly complex and difficult to the extent of some of these languages, for first time users the concept of sitting in front of a text editor and typing can be daunting.

However, ToonTalk has a different style, since it is not a programming language. Its goal however, is to teach children programming-like puzzles and improve problem solving skills. It does however use a visual interface to keep the attention of the user. With this application, the user is expected to follow certain tasks, some of which are problems that relate to computer programs.

ToonTalk

Figure 2 - ToonTalk

Neither HTML or CSS are programming languages but they still must be learned in a way similar to a standard programming language. As Kahn puts it "programming can be a fun and empowering activity, but it is accessible only to those who manage to surmount a large initial hurdle" (Kahn 1995, p. 198) - this is true of both HTML and CSS. ToonTalk takes the concept of visual learning and applies this to programming to "make the initial experience simple" (Kahn 1995, p. 198) and it aims to challenge without frustrating the user. According to Khan, both of these are key concepts of any visual learning system, particularly when the system is aimed at children.

Visual programming is one alternative to developing applications by writing code. With this style of the programming "the idea is that by using pictures to represent programs, programming will be easy to learn and programs easy to understand" (Kahn 1995, p. 201).

However, with any visual programming language, according to Kahn making a programming language powerful and easy to learn and use can be difficult, and often these are considered to be conflicting ideas.

This style of programming may sound appealing, although visual languages may not be the complete solution as mentioned by Kahn when developing ToonTalk: "anecdotal evidence suggests that powerful visual languages are somewhat easier but that they are still difficult to learn and master" (Kahn 1995, p. 201).

Another project with goals similar to ToonTalk, Scratch, from which this project takes inspiration, aimed to improve the learning experience of programming and encouraged children to "learn through exploration and peer sharing, with less focus on direct instruction than other programming languages" (Maloney et al. 2010, p. 2). Scratch uses constructionist ideas similar to Logo (Figure 3) to encourage learning. It does not however focus on web development techniques such as nesting HTML elements and styling using CSS. This is where there exists a niche.

SuperLogo

Figure 3 - SuperLogo - a variation of Logo

Like both ToonTalk and Scratch, an application being used by children to introduce them to a new concept should initially attempt to grab their interest. This can be achieved using "abstract concepts" (Kahn 1995, p. 199) with "equivalent everyday concrete analogs" (Kahn 1995, p. 199). Finding a way to do this can be hard, especially when trying to make the application abstract away from program code but giving it the same meaning and it is difficult to make it fun to learn as well as giving the user the underlying knowledge of what they are doing.

3.5 Overview of the user interface of similar applications

Other applications make the user interface of the application easy to navigate. Scratch has an interface that "strives to make navigation easy. It uses a single-window, multi-pane design to ensure that key components are always visible" (Maloney et al. 2010, p. 3). It "strives to help users build intuitions about computer programming as they create projects that engage their interests. The user interface layout, with its prominent command palette and central scripting area, invites users to program". (Maloney et al. 2010, p. 3) The multi-pane interface used in Scratch makes it easier to understand than formerly used methods since the user moves from the left hand pane, to the middle pane, to the very right hand pane and then back again. This was a major part of the design of Scratch.

the Scratch user interface

Figure 4 - the Scratch user interface

The Scratch interface is shown in Figure 4. The interface has a very clear division between the three panels going from left to right that make it easy to understand. Live updates to the output from the code are also something that Scratch puts at the top of its feature list. This is again featured in Figure 4 at the right hand side (the white area where the cat is standing). A key feature of Scratch is that it does not require compiling of code. This step often leads to further complications. In fact, in Scratch, almost anything will run, since the whole interface provides a scaffold for users, preventing them from doing things that may not compile. This means that the user will see fewer errors that they may not understand. Whilst Scratch makes it a core feature, adding this kind of feature can be demanding in a web environment, since multithreading web applications is difficult. The user interface of Scratch also avoids floating windows, which can get buried, and keeps the use of panes to a minimum. According to Maloney et al., this is an important part of the user interface.

"Scratch is tinkerable because it lets users experiment with commands and code snippets the way one might tinker with mechanical or electronic components. Tinkerability encourages hands-on learning and supports a bottom-up approach to writing scripts" (Maloney et al. 2010, p. 4). 'Tinkerability' is an essential part of the interface of a visual programming environment like Scratch due to the fact that, as mentioned before, it encouraged the users to explore the environment for themselves. With children exploring is one way of the most important ways of learning.

The Scratch scaffolding system to prevent users placing blocks in the wrong place that arguably improves the usability of the application: "when assembling scripts, Scratch only allows blocks to be connected in meaningful ways. A command block connects when dropped into command sequence, but a function block will not connect if dropped in the same place. As the user drags a block, Scratch gives visual feedback showing possible sequence insertion points (command blocks) or parameter slot targets (function blocks)" (Maloney et al. 2010, p. 8). Again, with children who are learning something for the first time, having something to keep them on track means that they can explore the application on their own.

3.6 Interaction Design with children

Making a user interface that is suited to children can be a difficult task in itself and according to Hourcade (2001), Jean Piaget, was an influential expert on child development and in turn the field of interaction design with children made three very important points about the way that children learn.

It is the first of these that is perhaps the most significant for this project. In this point, Piaget describes the way children learn through adaptation. The idea is that "children construct knowledge structures by experiencing the world and interacting with it. The idea that children actively construct their own knowledge through experiences and that this construction is based on each individual's existing knowledge structures is referred to as constructivism" (Hourcade 2003, p. 283). Seymour Papert expanded on this by proposing that this method works best "when children are 'consciously engaged in constructing a public entity'. In other words, constructing public entities helps children construct knowledge. Papert's ideas have had a great influence in the work on interaction design and children. This is particularly clear in terms of the emphasis of providing children with technologies with which they get to be authors, rather than experiencing worlds and situations that are pre-scripted, or absorbing facts provided by a computer" (Hourcade 2003, p. 283). In other words, children learn more by doing things themselves, not being instructed how to do it. This is an important consideration for the application design - encouraging users to explore new ideas through their own methods improves the quality of the output. Papert was also one of the developers of the Logo programming language, which itself was an educational language. Papert was considered to be key in the field of interaction design and children (Hourcade 2003, p. 283).

Back in 1997, an article by Libby Hanna et al. wrote about how to conduct usability studies and tests in classes of children. They state how important it is that the room in which the children will be evaluated doing the study should be analysed first, knowing what input devices the children have, the setting in which they will be working in and the environment in which the computer systems work within is very important.

This article also states that any study carried out should be tested to ensure that it functions on the system before attempting the study with children since children will loose interest if they try something over and over that does not work.

It is also very important that all tests performed by children are small enough and manageable. Activities should be divided if they are too large (Lee, 2011) and broken into far more manageable tasks. Children have a short span of attention and thus when working with large tasks, stop concentrating from time to time.

It is also important the application models how the user thinks. Again, the left to right strategy used by Scratch is being adopted for this reason.

3.7 Learning Styles

In 1984, David Kolb published a learning styles theory. This theory, often known as the Kolb theory, suggests that children learn in different ways. They are described as 'feeling', 'watching', 'thinking' and 'doing'. These can be combined as 'feeling' or 'thinking' and at the same time 'watching' or 'doing'. The idea is that children do two of these four actions at the same time to learn something.

Another similar theory developed was by Alan Mumford and Peter Honey. This variation of the Kolb Model/Theory of Learning suggests that there are four types of learners, namely 'activists' - those who learn by 'hands-on' experience, 'reflectors' - those who learn by being told how to do something, 'theorists' - those who like to be convinced of something before attempting it themselves and the 'pragmatist' learners - those who like to see an expert perform it first.

An application aiming to teach should accommodate this situation and not focus entirely on hands on experience.

3.8 Conclusion

From this literature review, I have drawn several conclusions.

The first most important conclusion is that there is an apparent problem with teaching web development as it is currently taught, particularly when teaching children aged 12 to 16 years old since children learn how to use technology better through exploration of features and the environment, something which text editors do not lend themselves to. WYSIWYG editors offer a visual development environment, but they themselves come with many issues including invalid code and a lack of knowledge of the programming language and the code that generates the page that secondary level school curriculum require students understand.

Web programming also requires basic programming ideas including debugging tools and syntax checking abilities in the user that are obtained from learning the basics of programming which tends to come later in secondary level education.

MIT's Scratch visual programming environment offers the most up to date solution to the issue of learning to program and is designed for use by children. It follows a very standard left to right interface with three panels that have the tools build applications with Scratch.

Children learn better through constructivism, the concept of exploration and teaching themselves by interacting with something. This raises the issue that current programming languages and text editors have not managed to overcome. They do not encourage exploration of features, and while constructivism is a part of programming, since programming requires knowledge beforehand, including an idea of how debugging tools work and how syntax is defined.

To my knowledge, there are no visual programming aids to help users learn to program through interfaces similar to Scratch in the field of web development. This project aims to address this issue.

In addition to this literature review, I have observed several other things when working with children who use off-the-shelf products such as Scratch, that many of the older children (14 - 16) find existing application user interfaces 'childish' and 'dull'. Other pupils were too easily distracted by all of the different menus and elements on the screen. On the other hand, several other students have informed me of their personal liking of the triple pane interface of Scratch. All of this will be taken into consideration for the final design.

References

  1. Computing Science Project General assessment information, SQA, 2015 . Available from: http://www.sqa.org.uk/files_ccc/GAInfoCompScience.pdf . Accessed 12 Nov 2015
  2. Maiorana, F, 2014. Teaching Web Programming . University of Catania, pp. 49
  3. Jenkins, T, 2001. Teaching Programming - A Journey from Teacher to Motivator. University of Leeds, pp. 1 - 3.
  4. Kahn, K, 1995. ToonTalk - An Animated Programming Environment for Children . Stanford University, pp 198 - 201.
  5. SuperLogo, Axe Valley Community College, Available from: http://folders.axevalley.devon.sch.uk/html/ict/year7/SuperLogo/ . Accessed: 11 Nov 2015
  6. Maloney, J, Resnick, M, Rusk, N, Silverman, B, 2010. The Scratch Programming Language and Environment . Massachusetts Institute of Technology, vol. 10, pp. 2 - 8.
  7. Hourcade, J P, 2001. Interaction Design and Children . University of Iowa, pp. 282 - 283
  8. Hanna, L, Risden, K, Alexander, K, 1997. Guidelines for Usability Testing with Children
  9. Texas Child Care: Back Issues, Lee, T, 2011. Available from: http://www.childcarequarterly.com/spring11_story3.html . Accessed: 17 Nov 2015
  10. Kolb’s Learning Styles, Business Balls, 2015. Available from: http://www.businessballs.com/kolblearningstyles.htm . Accessed: 17 Nov 2015

Bibliography

  1. W3C HTML5 and CSS2 and CSS3 specifications
  2. PHP Reference library
  3. SQA Curriculum for Excellence
  4. SQA Higher and Advanced Higher Computing course notes and past examination papers
  5. ToonTalk website (http://www.toontalk.com)
  6. Logo versions website (https://logo.codeplex.com)
  7. Scratch website (https://scratch.mit.edu)
  8. Zurb Joyride website (http://zurb.com/playground/jquery-joyride-feature-tour-plugin)