As mentioned before, the methodology was first applied over two groups of different levels for learning HTML, CSS, and JavaScript programming concepts while enhancing their motivation and Computational Thinking skills, and then applied to a third group. Different activities were proposed as part of a bigger project, in which the students had to design, test and evaluate their own solutions and ideas in an iterative process. The goal was to engage the students through a process that involves several subjects and tasks, connecting different contents in a project that motivates them. This project used robotics as context to impart the concepts of programming and to awake the interest of students. The different tasks were adapted to the different profiles and skills of the students, so that, although the content taught is basically the same, the activities may vary from one group to another in the search of the best motivation and results. The results for the different groups and their corresponding activities are now summarised.
4.1. First Year of Web Application Design in Vocational Education
The project proposed to the 15 students of the first year of vocational education in Web Application Design (WAD) was in the context of the Brand Language and Business Management Systems subject. The project consisted of simulating the localisation and control of several robots so that the students could apply the concepts learned about HTML, CSS, JavaScript, XSD, DTD, XSLT, and XML. The assimilation of these contents and concepts, as well as others from other subjects (math operations, variables, loops, functions, etc.) is obtained by designing, testing, evaluating and validating their own solutions, and comparing and discussing them with the solutions of their classroom mates.
The statement of the project was based on a robotics shop, where several robots are exhibited and each of them has an area to demonstrate its skills. As only one of them can be sold, their skills should be tested and evaluated to select the most appropriate. Therefore, the students should define an application with the following characteristics:
Delimit the area in which each robot could act and move, and obtain its position, as part of an indoor localisation system.
Test the connection of JavaScript and XML to read data from a file. Store and save the robot movement in a XML file, duly validated by DTD or XSD.
Control that each robot only moves in its corresponding area and the visualisation of data.
Apart from the above, the results of the scores given to the robots should be presented in the correct format using XSLT.
Notice that additionally to the HTML, CSS, and JavaScript concepts, the students had to apply additional knowledge and skills acquired in other subjects and related to programming and CT. In this sense, the robot position is computed based on a real positioning system, where the distances from a set of sensors to the robot are measured, and based on these distances, the robot position is determined. In the simulation project, the sensors are considered to be placed on the four corners of the area in which the robot can move, so students should apply trigonometry and maths operations to compute the position. In addition, this position must be computed recursively to update the robot position based on the programmed or commanded movements, so loops, variables, functions, etc. must be correctly applied to obtain a functional and valid solution.
Before working on the project, the students were working on different activities to acquire enough skills and demonstrate their proficiency in HTML, CSS, JavaScript, the programming and validation of XML files with DTD and/or XSD, and their corresponding presentation with XSLT. Partial developments of the robot project were also carried out in each unit so they could appreciate the possible application of these concepts to the project, although they were not the final designs or decisions adopted. However, these partial developments allowed them to start with the testing and evaluation of prototypes and ideas. Some of these tasks are presented next.
HTML: Students had no prior knowledge of HTML at the beginning of the course. Therefore, their first steps focused on the creation of links (to web pages, or a section inside a document), insertion of images and video considering the specific MIME types and using relative and absolute addresses, tables and forms for data entry, accessibility and semantic tags on pages, etc. It was important to start with HTML, firstly for its accessibility and ease of use, and secondly in order to gain abilities regarding design and conception for the final project.
JavaScript and CSS: Initially, a set of exercises directly related with the project were proposed to the students, which allowed them to work with the interface, to position objects on the screen and also to react to different events. Different activities were included both for handling the page and to operate with data types such as vectors or strings using control structures. Once these concepts were assimilated, CSS tasks were carried out to style a HTML document, together with JavaScript functions to provide more dynamism to the page front-end and a responsive design.
For a better understanding of these concepts, the students had to develop from scratch a “cultural magazine” web page using HTML, CSS, and JavaScript. The resultant HTML document should keep an easily maintainable structure with good search engine ranking capabilities. Mandatory elements were including links of different types, a form, some of the lists (ordered, unordered, definitions), a table, tags that make the page more accessible and understandable for browsers, and images and videos. In
Figure 1, one of the solutions developed by the students about the cultural magazine is shown. Most of them achieved the requested requirements.
Learning HTML was well received by the students, but CSS and JavaScript were somewhat more difficult for some. Nevertheless, the pass rate in the individual exams that were taken at the end of each content was over 50% in both, as detailed in
Section 4.3. The student difficulty perception for each subject can be seen in
Table 1.
Regarding learning difficulties, the main one was the learning and understanding of the programming structures, especially loops. This was a common difficulty in all groups, and more time was needed to understand and adequately handle these concepts. At this point, the JavaScript concepts were not mature enough yet and had to be reviewed later on.
XML files and validation: Concepts related to databases already taught in the databases subject, such as 1:1, 1:N, and M:N relationships, were reviewed, confirming that they had this knowledge. The differences of XML as a tag language with respect to HTML were established and files with different hierarchies were created. Reflecting the characteristics of the users with their nickname, age and password; organising and storing products in a greengrocer’s/gardener’s shop or simulating the organisation of a magazine or class schedules were some of the exercises carried out and reviewed in the classroom. Regarding the project of the robot, the students started to deliver different XML solutions, which allowed the specification of several areas and several robots with their functionalities and spaces where they can operate.
To check that the XML files were defined correctly, DTD (Definition Type Document) and XSD (XML Schema Definition) were used interchangeably. In both cases, emphasis was placed on the relationship that should exist between the definition of these schemas with the XML, so the students always first made the XML for each validation exercise individually. In this way, the practice in generating XML files was reinforced.
DTD: How to define attributes and elements, how to refer to an internal or external DTD, as well as how to specify keys while maintaining integrity, were the issues basically addressed in the DTDs. In addition to the previously mentioned exercises to create an XML, to which the corresponding DTD was included, the exercise related to the robot shop was carried out. In the solutions requested, the positions, the selected robot and the plot should refer to an existing value, so as to validate possible errors in the data entry in the XML.
XSD: Although most students understood DTD better and saw it more accessible, others opted to validate the XML file with XSD, as they perceived it as a more exact way of defining the elements and attributes, although they also considered the .xsd file to be much more extensive and that could be cumbersome. Some of the exercises carried out previously were taken up again to validate them in this way. Subsequently, they were reinforced with new exercises. They were trained in: (a) defining simple elements with different attributes; (b) the validation of elements composed of other elements; (c) the cases in which it was more convenient to declare attributes; (d) ensuring the referential integrity of the elements, so that no element was referenced that had not been in the system before; (e) comparing different solutions, encouraging discussion about the merits of each one; (f) referencing the .xsd document from within and outside the .xml. The results obtained in the exams showed proficiency in these types of problems and they proposed very complete solutions.
XSLT: to display the elements of a .xml file and for timing issues, the structures “xsl:for-each”, “xsl:if”, “xsl:when”, and “xsl:value-of” were used. In the robot shop project, the users participating in the voting and robot selection should be shown. To determine which robot won the voting, the condition was set for each of the participating robots. In
Figure 2 one of the solutions is shown. In
Figure 2a the test of robot movements is done and in
Figure 2b the voting for the best robot is shown. To make another movement, the XML data are changed and when the button is pressed again, the movement continues from the previous position. The “Access voting” button opens the page with the voting data of the XML made with XSLT. The XML validation DTD was included.
The latter concepts, which were only taught to this group, were evaluated through an exam whose results are shown in
Table 2.
At this point, and after learning how to format the outputs coming from a .xml file, the students were able to take on completely the research project. The results showed the different opinions of the students when conceiving the robot’s movement, which served as a basis for the localisation algorithms used. These algorithms were based on basic trigonometry using the distances measured to the robot from conveniently spaced sensors. The adequate sensor configuration and target position estimation followed descriptions similar to those in [
68,
69]. As mentioned before, in the simulated project, the sensors were considered to be placed at the four corners of the area of each robot, and the robot position was iteratively computed by the use of trigonometry, math operations, variables, loops and functions. Mainly, they had difficulties in connecting JavaScript and XML, as well as in conceiving the movement of the robots at the same time. These tests served to draw conclusions about how best to approach the teaching of programming in these areas. Not all students were able to solve the proposed localisation problem.
4.2. Second Year of High School Secondary Compulsory Education
A similar experience in terms of teaching HTML, CSS, and JavaScript was implemented in the second year of high school compulsory secondary education (CSE2), where the learning of HTML was also better accepted than CSS and JavaScript. A project was proposed so that they could apply the knowledge and skills learned during the course. Although they were taught JavaScript to be able to manipulate the pages, the level of commitment of the students at the stage of the course (final weeks) was lower, and taking into account that it was an optional subject and the project was also optional, the concentration decreased. Nevertheless, the results are considered to be also satisfactory, and the generally good classroom climate and good students’ background and commitment facilitated the application of the methodology, with all students participating in the project although it was optional, as mentioned.
Different activities were also proposed to practice the contents before addressing the final project. Similarly to WAD students, they were asked to apply what they had learnt in HTML during the first term by imagining that they were managers of their own companies and should perform marketing functions in order to publicise their company’s potential. To do this, they had to design a web page, through which they could disseminate the main results of the company. As a requirement, they also had to include a form, a table, lists, images and videos, semantic tags and good search engine positioning. Emphasis was placed on the internal structure of the document, so that it would be easily maintainable. The activity was successfully completed by most of the students, and one of the solutions proposed is shown in
Figure 3.
Subsequently, learning of CSS was included, practising first with the previous pages. They had to apply what they had learned in HTML and CSS in terms of formatting and positioning. The pages had to show the activities prepared by each region of the country of the company.
A project was proposed to incorporate and apply all the knowledge acquired. This project was based on the same contents, i.e., HTML, CSS, and JavaScript, applied to robotics and programming. It was presented as end-of-year project and it was composed of three steps:
The DT methodology was mainly applied to step 2 and 3. In step 2 the students had to construct different robot prototypes, testing different ideas and solutions, evaluating and comparing them, and finally selecting and validating one for the final prototype. In step 3, they had to construct the web pages following a similar procedure to the one indicated in the WAD group.
Then, following the above steps, the students were asked to carry out research in groups on computer security and awareness of active and passive safety through robotics. They had to look for information on applications that generate security breaches (a specific application was assigned to each group) and how to implement protection by applying active and passive security. Three teams were created, where each one had to deliver a document with its research and also present it orally in the class. Then, they made a Kahoot test to reinforce the knowledge imparted and subsequently, they proceeded to implement in 2 groups an interpretation of the safety concepts using Lego Mindstorm. The two final prototypes of the robots constructed by the groups are shown in
Figure 4. All was reflected in a web page that each team made, in order to show the impressions of their peers on the process of making the robot, as well as the results obtained after applying the concepts learned in the project.
It is important to mention that before addressing control structures in programming (loops, conditionals) for the robot movements, they were proposed to work with Blocky Games (
https://blockly.games/, (accessed on 1 September 2023)) based on positive experiences from previous years [
25].
Although they also included programming sentences in their pages, it was considered that their knowledge of programming was very limited for several reasons: they did not understand loops well, it was necessary to dedicate more time to this section than the available in the didactic programming, and the students’ dedication at this stage of the course was not complete, as they had to prioritise other compulsory subjects (this one was optional).
The difficulty perception in this group can be found in
Table 3.