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



7 Implementation

The following section will describe how ClickIt was implemented. In this section it will cover what software was used to create ClickIt (section 7.1), how ClickIt will be tested (section 7.2) and the main features of ClickIt (sections 7.3 and 7.4).

There are two main parts of the ClickIt product, namely a website (section 7.3) and the ClickIt application (section 7.4). This section will also describe both of these features, their purpose and what they consist of.

7.1 Choice of software

The choice of software, including development languages and development environments is outlined below:

Name Description and reason
PHP PHP is a server side programming language for web applications and was ideal for this project due to the knowledge I already have in PHP.
PHP offers a variety of features such as the ability to connect to MySQL databases.
MySQL MySQL is a good choice of database management system due to the fact that it is lightweight, free and available on both the servers at Heriot-Watt and a range of hosting environments.
MySQL is also the preferred database management system due to the fact that I have a lot of experience with it.
Apache Although the system was developed to work on either an Apache or nginx web server, the development environment used was the Apache web server software due to the fact that I have knowledge of using this.
Git Git has been used to keep backups of code. Using Git will minimise risk of losing code and allows the code to be restored from an earlier version if there are issues.
Test browser Google Chrome was used to test the application primarily. This choice was made due to the fact that Google Chrome is currently the most used web browser and that schools across the country have support for Google Chrome.
GanttProject GanttProject was used to produce Gantt charts for the project timescale
JavaScript JavaScript is the choice of front end programming language for the compiler and all interaction for the application.
This is the case since JavaScript is available in almost every browser. JavaScript is also the most common programming language for front end development on the web and because it follows the EMCA standard well and therefore has a lot of support documentation.
Eclipse with Aptana Studio plugin Eclipse is primarily a Java based IDE (integrated development environment), but it also has the ability to work with web files such as HTML, CSS, PHP and JavaScript. For this reason Eclipse was the primary IDE used for development.

7.2 Testing strategy

Component testing

Each component of the application was tested on a regular basis by myself as I develop them. This allows issues to be detected before any updates are published.

System testing

The system was regularly tested by students from Heriot-Watt University to assess how the system works as a whole and to ensure that the system integrates well together. Several students have agreed that they will be able to test the software once a week. As well as this, several lecturers are testing ClickIt out whenever a major update is released.

Students access the ClickIt application through the ClickIt website for the latest version.

7.3 The ClickIt website and blog

The ClickIt website

Figure 9 - the ClickIt website

The ClickIt website is located at clickit.education. The purpose of the site is to give more information about the purpose of ClickIt and how it works. The website was developed using Bootstrap, an open source front-end framework, to minimise the amount of time spent on the development of the website front-end.

The website also features a blog (powered by my own BalfBlog system) that allows updates to both the website and the ClickIt application to be recorded and viewed online. Users can subscribe to this blog to receive updates. The blog is updated with all new features or fixes after the changes are published to the online ClickIt application.

The ClickIt editor application is also hosted on the main ClickIt website.

High level overview

Figure 10 - a high level overview of the components of ClickIt

The ClickIt application was developed in a modular manner as shown in Figure 10. It consists of four major parts, namely, the Compiler (jscompiler.js), the JSON (html.json, attributes.json) and the Interface (HTML and CSS files) and Front scripts (script.js, jquery.generateFile.js, jquery.joyride-2.1.js). The ribbon used with ClickIt also requires two extra files which are both external files (balfribbon.js, balfribbon.css).

The application was broken down like this to separate the compiler from the interface. As shown in the diagram, the compiler interacts with the interface through the front scripts and vice versa.

As a result of this design, the ClickIt application loosely follows a model-view-controller (MVC) pattern.

To save on a lot of development time, particularly in relation to animation and visual appearance of ClickIt, the JQuery JavaScript library has been used with ClickIt.

ClickIt was developed using JSON so that new elements or blocks could be added to the application with very minimal disruption to the application.

The choice of using JSON was also driven by the fact that JSON is a popular format for storing information and is usable with many programming languages such as JavaScript and PHP. The following is an example of a single entry in the HTML JSON file:

JSON
{
	"opening_tag" : "html",
	"closing_tag" : "/html",
	"name" : "HTML",
	"type" : "Basics",
	"multiline" : "true",
	"color" : "#000",
	"text" : "#fff",
	"acceptable" : [{"name":"head"}, {"name":"body"}, {"name":"comment"}],
	"W3" : "http://www.w3schools.com/html/html_intro.asp"
}
		

The JSON file is structured in the order that makes it as efficient as possible by reading the blocks in the order they are to be presented.

PHP is used to transform the blocks into HTML that can then be saved to the users computer.

System Overview

Both the interface design and the main application development were developed at the same time. This allowed the interface to connect better with the design. This section will look at the application development and describe the interface and how it connects together.

ClickIt was built with the same three panel design as shown in the mockup which was inspired by Scratch as shown in Figure 4.

On smaller displays, parts of the interface disappear and hide within buttons that allow them to only be shown when needed. The interface is shown in Figure 11.

ClickIt application

Figure 11 - the ClickIt application (as of the 3rd of April 2016)

The most obvious differences between the finished interface and the mockup interface are the tabbed interface on the left hand side instead of an ‘accordion’ style interface and the replacement of the toolbar with a ribbon.

Users of ClickIt are expected to drag blocks from the left hand side into the main central panel to produce HTML blocks. This will then produce valid HTML and a preview of the HTML.

ClickIt presents users with the HTML source code which is compiled in real time. The users are also presented with a live preview of the webpage they are constructing as well as the source code.

Users have the option to switch the real time compilation of code off to save on resources on systems with low performance.

Figure 12 shows a sample of the source code generated by the ClickIt compiler and how it looks in the user interface and Figure 13 shows a sample of that code being displayed in the live preview feature of ClickIt.

Source code

Figure 12 - source code generated by ClickIt

Preview of source

Figure 13 - a preview of the source code from Figure 12 demonstrated within ClickIt

The ribbon

The most significant part of the interface is the ribbon at the top. The ribbon keeps all the tools organised and grouped by their purpose.

The ribbon interface is also my own written jQuery plugin known as BalfRibbon. Prior to working on ClickIt, BalfRibbon was already developed and released under my own Web Neutral Project. The ribbon is pictured in Figure 14.

BalfRibbon

Figure 14 - the ClickIt ribbon interface

The main reason that the ribbon interface was chosen instead of a menu interface was down to the fact that the main users of ClickIt will already have experience with Microsoft’s Ribbon Menu Interface through the use of other software such as Microsoft Office. This was further supported when teachers were asked about this.

The tabbed interface

The left hand accordion style was exchanged for the tabbed interface as recommended by teachers because of usability concerns with younger children.

The tabbed interface is shown in Figure 15.

Figure 15 - Zurb Joyride in action. Here the user is getting an explanation of the left hand panel tabs (as shown in the black box on the right hand side)

Issues encountered with development of ClickIt

Within the development stages, many issues were encountered, particularly since ClickIt relies on the newly introduced drag and drop specification found in HTML5. The main issues were related to cross-compatibility with this feature since browsers have implemented different ways of doing similar tasks as well as the level at which the standard has been adopted.

The HTML5 drag and drop specification actually allows developers to transfer data at the time when the user begins to drag the block, but I found various issues in relation to this, particularly with Microsoft’s Edge browser. ClickIt used the drag and drop data transfer method for quite some time, but several issues were encountered after testing it with new versions of Firefox as well. These are documented in the ClickIt blog. I resolved the issue by not using this method of data transfer and moved to a much simpler method. The method I used meant some non-standards compliant code was required for the application to work again, but it works as expected.

An unexplainable issue did still occur with Firefox in that it required the HTML5 drag and drop method be implemented as well as the new method. The solution was to develop my own setData function and use a very simple dictionary-like variable as the transfer variable. The code below shows how this works.

JavaScript
//Global variable containing a map/dictionary
var transfer = {};
...
function setData(ev, x, v){
	try{
		//Firefox needs this for some reason
		ev.originalEvent.dataTransfer.setData(x, v);
	} catch(e){
		//Does not matter if it didn't work
	}
	transfer[x] = v;
}

My code comes with a very minor limitation that only one item can be dragged at once. For the sake of ClickIt, this method works perfectly since no more than one block can be moved at any one time and there are no plans to allow users to do so.

Another major issue occurs with slow networks and ones behind proxy servers. This issue prevents certain JSON pages being fully loaded first time around and on occasion modifies the order in which the JSON is loaded into the ClickIt application. Because of this, certain blocks do not appear. Figure 16 and Figure 17 show what happens when the blocks load correct and what happens when they do not load correctly.

Figure 16 - what happens when the application does not load properly

Figure 17 - what should be loaded and what loads if it loads properly

Another issue with ClickIt is down to the way in which some JavaScript implementations in certain browsers work. Some JavaScript implementations have rules that mean if an error occurs at any point in the JavaScript, that function will no longer be permitted to run. Whilst ClickIt has been tested thoroughly for errors, some errors can occur if too many blocks are added to the block builder. This can lead to errors that cause the JavaScript engine to throw a memory overflow error. Due to this, the compiler function is prevented from running again and the page needs refreshed to make it work again. This issue is out of the hands of ClickIt and cannot be fixed since it is a rule of certain JavaScript engines.

Legal and ethical

The very first check made by ClickIt is whether or not the user has already agreed to allow cookies on their system. If the user has not already agreed, a message is displayed asking them to agree to the terms or not use ClickIt. The message displayed is shown in Figure 19.

Figure 18 - the cookie warning shown to new users

ClickIt does not store any data about users and does not track any of their activities in compliance with the Data Protection Act (1998). This decision was made since ClickIt will be primarily used by children.

If the user accepts, ClickIt is permitted to store information for that user that includes personal preferences and whether or not they have visited the ClickIt application before (therefore would not need to view the Zurb Joyride tutorial again).

 

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)