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

4 General Description

4.1 Product Perspective

The product is primarily designed for use by children aged 12 - 16, although is can be used by someone of any age.

The application has a similar goal to that of Scratch (Figure 4) by MIT but with a focus more on web development. Logo (Figure 3) is also a visual programming language and was also designed to introduce users to programming. ToonTalk is a visual programming language that differs in the sense that it uses animated source code to represent functionalities in the programming.

4.2 Product Requirements

The following is a list of requirements that the application has:

The requirements with in bold are core requirements that must be in the finished product.

Functional requirements

  • FR1: The application should have a graphical interface with tools to aid development
  • FR2: The application should be user-friendly
  • FR3: The application should be able to generate valid HTML and CSS code
  • FR4: The application should be able to display HTML live previews of the current state of the user’s work
  • FR5: The application should support drag and drop
  • FR6: The application should allow users to save and reload projects that they are working on either to a database or their local system

Non-functional requirements

  • NFR1: The application should run on all platforms such as Windows, Linux and Mac OS X.
  • NFR2: The application should produce code generation results efficiently and quickly
  • NFR3: The application should be able to store and retrieve from the database in real time

4.3 Comparison of other visual learning environments

The following table compares existing applications with similar goals to the requirements of this project.

Feature Requirement Scratch Logo ToonTalk
Simplistic and friendly interface FR1, FR2 Yes No Yes
Creates web content (HTML, CSS etc.) FR3 No No No
Generates code for another language such as C, HTML or Java FR3, NFR2 No No No
Live demo FR4 Yes Yes Yes
Drag and drop FR5 Yes No No
File operations such as saving and loading projects FR6, NFR3 Yes Yes Yes
The application runs on multiple platforms NFR1 Yes, (limited only due to use of Adobe Flash) Yes No
The application is currently supported --- Yes No* No

*The concept and the syntax of Logo has continued to produce new versions of the language but written differently. The original Logo programming environment is no longer supported officially. Note that for this reason, Logo is considered a somewhat out of date language, but since it was one of the most influential educational programming languages it has been included in this comparison.

The most important thing to note is that none of these development environments offer any kind of web developing tools and are solely focused on their own specific programming language. They also do not generate code for real world applications outwith their own environments.

4.4 Operating environment

The system will be deployed on an Apache web server or an nginx web server. Either web server will need to support the MySQL database management system and the PHP interpreter.

4.5 System Constraints

The system must have a level of restriction on it so that users can login in to their own part of the system. This allows users to save their projects to their own space and restore them at a later point.

4.6 User Characteristics

If the ClickIt application allows users to sign in there are two types of user

Standard User

The standard user is the default user who visits the website. The user can create their own web page within the application but cannot save their work to the web server or retrieve previous items.

Registered User

A registered user is a user who has signed up to the application. They can do everything a Standard User can do. Once they have created their own account, they can login and view previous projects as well as save current ones.

4.7 Design Constraints

Browser compatibility

As the web application demands a lot of modern user interface tools, the system should support most modern browsers and have full support in at least one browser. This browser will be used to test the application and should be one that is free to download and supported across all of the major operating systems if need be.

Programming language(s)

In order for the application to support modern features, it will be developed using HTML5 and CSS2 and CSS3 for the front-end. The compiler will need to be real time and free from server side code and should use JavaScript. The back-end will be written in PHP. It will use the MySQL database management system for any databases required by the application.

4.8 Legal and Ethical Decisions

Since this product will primarily be tested by children, all due diligence has been carried out. As a part of being a STEM (Science, Technology, Engineering and Mathematics) Ambassador I have obtained Disclosure Scotland which permits me to work with children.

Since the ClickIt application is to be hosted on the world wide web, it must comply with EU Law set out in May 2011 that states that all websites that store cookies or local information on a user's computer should inform the user that they are doing so. Users must then be able to decide whether or not they wish to allow this or not.


  1. Computing Science Project General assessment information, SQA, 2015 . Available from: . 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: . 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: . Accessed: 17 Nov 2015
  10. Kolb’s Learning Styles, Business Balls, 2015. Available from: . Accessed: 17 Nov 2015


  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 (
  6. Logo versions website (
  7. Scratch website (
  8. Zurb Joyride website (