Mathmatics with graphical programming

(1)

Mathmatics with graphical programming

Olle Wahlström

Computer Science and Engineering, masters level 2017

Luleå University of Technology

(2)

Abstract

(3)

Acknowledgments

I would like to thank everyone who have given me their time and knowledge to help me with this master thesis.

• Peter Parnes for you guidance as supervisor at LTU. Also for helping me with coming up with the idea of this thesis.

• Agneta Hedenstr¨om and the teachers at Antn¨asskolan in Lule˚a for their insight and tips early on.

• Niclas Ekholm for your time and help during the evaluation at Gl¨omstaskolan. • The 2nd and 3rd grade students at Gl¨omstaskolan who gave their time

(4)

1 Introduction

The national agency for education in Sweden has conducted an investigation and put forth a motion to the government to revise the curriculum. The revisions that they propose are mostly that basic programming education should start as early as first year elementary school. However it should not be a subject of its own but rather part of mathematics and technology courses. For this to be possible, programming needs to be taught in such a way that students who do not have a great understanding of English and mathematics understands how programming works and the thought process behind it. Graphical programming languages can help with this as it abstracts the code part of the programming into visuals. Instead of text you get blocks to drag and assemble into working instructions. This way of programming combined with a graphical canvas where what you program can be visualized instantly may make a good platform to start learning of programming and algorithms. Furthermore this project aims to investigate if math can be taught in a more fun and interactive way using this technique and by doing so also combine math and programming right from the beginning.

Another discussion that is gaining a lot of traction in the educational sector right now is the idea that students might learn better if they are not forced to strongly into finishing certain assignments or problems. According to Dan Meyer [1], students should get the opportunity to define their own problems and think of task for themselves. This is also mentioned in a paper published from the Cambridge Journal of Education [2] where they argue that boredom in school can often come from being to locked into a set way of learning. They argue that children at a young age should be more free to explore and satisfy their creative needs in a more open way. This go well in hand with programming which is in many ways a creative subject.

(6)

Programming [4] discusses the possibility of combining mathematics educa-tion with that of programming. One of the conclusions of the paper is that a lot of the value in the education of the mix comes from the involvement from the teacher. This makes sense as children at that age with the limited knowledge of both language and mathematics need some guidance to at least get started.

1.1 Aim

The aim of this thesis is to produce a good tool for teaching programming combined with mathematics for students in elementary school.

1.2 Objective

The objective of this thesis is to investigate how, if this motion would be set into action, a tool for combining programming and mathematics could look like. Some things that need further investigation.

• What could a tool like that look like so that it is reasonably easy to understand?

• What kind feedback system would be required for a student at that age to find programming engaging?

• How do we show young students what algorithms and sequential prob-lem solving is about?

• How can the tool be effective for teachers to help their students to learn?

1.3 Delimitations

(7)

2 Theory

The curriculum from the swedish board of school has been revised and is to be adopted from fall 2017. It states that programming should be introduced as parts of mathematics and technology classes [3]. Furthermore it states that primarily the fundamental theory of programming should be taught, as in the mind process behind the problem solving and the algorithmic method of solving a problem. In Merriam-Webster [5], the dictionary, algorithms are defined as ”a procedure for solving a mathematical problem (as of finding the greatest common divisor) in a finite number of steps that frequently in-volves repetition of an operation” or more broadly ”a step-by-step procedure for solving a problem or accomplishing some end especially by a computer”. This broad explanation of what should be involved within programming ed-ucation in elementary school means that it is not important to teach a spe-cific programming language but more importantly programming as a whole. Question like; What is a loop? Does the order of instruction matter? To get a general idea of all these aspects of programming one would benefit from some sort of graphical output.

One thing that makes it possible to argue that programming is such an en-gaging and fun subject to learn is that it creates its own feedback. The paper ’The power of feedback’ [6] argues that feedback is a fundamental part of learning and that for a student to engage thoroughly they need to be awarded for their work. Either it is positive feedback or negative. Program-ming makes its own feedback in a way where the student who programs sees if what they have done works or not almost instantaneously. They do not have to wait for a teacher to tell them if it is correct or not if they can see for themselves that is in fact working as they intended.

(8)

hav-ing the input be graphical as well, helps to get a good foundation for learnhav-ing programming.

Programming has for a very long time been a subject of discussion when it comes to bringing it into the earlier years of education. Tools to teach programming has for a long time been developed and graphical programming is a rather old concept. The first graphical programming language was first designed in 1967 and got the name Logo [8]. Logo spawned a number of features with the most famous maybe known as turtle-graphics [9]. Turtle graphics gives the user only a few very simple operations move, rotate, pen up and pen down. These could be used to produce several different shapes on a screen.

Figure 1: Turtle graphics

Google has developed a visual programming language of their own, called Blockly [10] and using this language you can also program and give instruc-tions to a turtle [11]. Blockly has a lot more features than the turtle however and also lets other developers use the source of Blockly to make their own applications.

Other than blockly there are a number of other graphical programming lan-guages which uses the same technique of blocks as Blockly. An example of this is Tynker [12]. Tynker uses blocks as well to teach programming by mak-ing it fun and engagmak-ing. There are a lot of games to be played by assemblmak-ing blocks to give instructions to complete puzzles or other challenges.

(9)

program-ming language that uses blocks and they have lessons and a lot of material to get into programming. Scratch focuses heavily on the programming aspect however and lets the user follow tutorials to create rather advanced programs such as games and animations with sounds and controls.

When it comes to digital tools for mathematics online there are some choices as well. Most of the tools online however seem to focus on the same kind of practices that you find in a normal mathematics textbook. Sites like mat-teboken [14] offers lessons and assignments on all parts of the curriculum. While it does not give a very dynamic or interactive way of doing mathemat-ics it offers a lot of content. Other sites offers education in math in the form of smaller games to make it more interactive (mattespel.nu [15]). These are not very advanced games however and simply asks the student to answer a math problem.

(10)

3 Tools

To build the application a couple of open-source technologies were used. The two main technologies used were blockly and three.js together with javascript. Other than those some jquery and PHP handled all database interactions and the database was run by phpMyAdmin with MySQL.

3.1 Blockly

Blockly is a graphical programming language [10] developed by Google. The library includes support for the basic programming terms such as for, if and while. It also features the possibility to make lists, retrieve and add elements to lists. Basic mathematics is also supported as well as logic which makes it possible to perform most programming instructions on a basic level.

Furthermore, Blockly also features the possibility to define functions which can take input arguments and, if one wishes, return output.

Figure 2: Blockly

The blocks are interpreted by Blockly and writes a string with javascript code. This string then gets interpreted by the web browser which in turn runs the code that has been produced by the blocks.

(11)

factory is in itself a Blockly app, meaning a developer uses blockly to create custom blocks to use within Blockly.

Figure 3: Block Factory

Once a developer has dragged and dropped and defined the inputs and ev-erything you want to block to include, javascript code is produced that easily can be copied in to a javascript file to be used in other projects.

There is no built in functionality in blockly in addition to vanilla javascript code (except for some other languages, such as python and few others). If a developer were to use only Blockly to try to develop some application they would have to start from scratch in the meaning that blocks native to Blockly only correspond to very basic javascript code. For this project it is known that objects created with blockly should appear in some sort of scene meaning we need to explore other tools as well.

3.2 Three.js

(12)

as often as possible. This makes it possible to easily add, remove as well as move and rotate the objects in the scene and make all these objects move and rotate at the same time. In theory an unlimited number of objects can be created and manipulated in the scene and have them move, rotate or both at the same time. Having objects move at the same time was an important aspect of the project as it gives the user a sense of creating something massive with several different movements and rotations being done simultaneously. Another big reason why three.js was used is because the library has a lot of support for manipulating the point of view for the user, in other words the camera. There are built in functions which can be used to move the camera to specific coordinates and then point it at a specific coordinate. This is very important as it gives the sense of actually manipulating a 3-dimensional scene.

Figure 4: Camera position: Left: (0,0,400), Right: (50,200,400)

3.3 jQuery

Jquery [17] is a javascript library featuring a vast amount of features. For this project, mostly the easy way of posting to a server and so a database was used.

3.4 PHPMyAdmin

(13)

4 Method

The first few weeks of the project was spent gathering information about other projects which use graphical programming languages and as soon as the libraries which was going to be used were decided upon, a prototype was made. This prototype was then further developed and features were added. While developing it was quickly clear that some constraints had to be made so that important features had priority. As the project mostly aim at how programming and math can be taught the actual features of the platform were prioritized. This made it clear that aesthetics and design had to be neglected as it is time consuming and not important to making a platform of this kind work. The amount of css code and styles was kept to a minimum.

Another constraint made was the level of mathematics to be featured. While the platform does feature some more advanced line creating tools which give visual feedback in the forms of sinus waves, this was not worked upon very far and left at a proof of concept kind of stage. However, since the platform does have some of this functionality it will be more discussed in the future works part of this report how this could be worked upon further.

4.1 Interview with elementary school teachers

Early in the project, when the platform could only perform very simple instructions, I had a meeting with a number of elementary school teachers from Antn¨asskolan in Lule˚a. I showed them what I had made so far and asked what they thought could be good features to aim for. Big points they pushed for:

• Tools for teachers to save and load own projects.

• Tools for teachers to define what blocks the students are allowed to use (toolboxes).

• Minimize the need to login for students as it can be cumbersome to help 20+ students with their user names and passwords.

(14)

• Some mascot who ”helps” and gives positive feedback as a reward. • Other choices of colors and images instead of just a one color

back-ground.

Like already stated and already decided before this interview, design of the platform would be less important than features for the time being. More focus on functionality was prioritized which means that the first four points were to be the most important ones.

4.2 The Platform

The platform as it stands today offers a lot of functionality. Not only can user create objects and move them around. They can also register and log in, save their work and more.

4.2.1 Overview

(15)

Figure 5: Overview of the platform

1: Toolbox

The toolbox contains all possible blocks that are available to use. To have access to all of them it is most convenient to have them ordered in a list where they are categorized like in figure 5.

2: Work space

The work space is the blockly code part of the platform. Here the blocks from the toolbox are dragged out onto the work space and connected to create the actual code that is going to be run.

3: Code

(16)

important as when user get more familiar with programming they will need to take the step towards writing actual code. While this windows only lets user see the code it can still give them a sense of what it looks like.

4: Canvas

This is the domain of Three.js. The scene is rendered in this window and will display whatever is run from the work space. The scene is rendered continuously as soon as the user push the ”K¨or” button from the interface. Every time ”K¨or” is pressed the scene is cleared, the code from the work space is run, creating new objects and adding them to the scene which then is rendered on the canvas. While hovering the canvas with the mouse the user can also manipulate the camera. Zooming with the wheel on the mouse and rotating the camera by holding left click and moving. The camera is locked on to the center, meaning that however the user rotates and zooms, the camera will always look at the origin.

5: Interface

The interface contains a number of buttons to give the user control of his or hers creations. Here the code is executed on demand (”Kör”). It can also be temporarily saved (”Spara temporärt”) and loaded (”Ladda”) at a later time. It can also load a couple of predefined examples (”Exempel 1-5”). If the user has moved around with the camera to much and wishes to get back to default he or she can do so (”˚Aterställ kameran”). The last two buttons are used to decide which view the user wants to see things. Either a normal view where the camera can be rotated and moved or a grid view where a grid appears giving a more 2-dimensional feel where the coordinate (0,0) is in the lower left corner and the camera is set and cannot be moved..

6: Open Examples

(17)

7: Your Examples and extended interface

As mentioned, if a user has logged in, they can see and load all their previous work from here, overwrite them with new or more extensive creations and also save totally new ones. Here are also a button which gives the user the possibility to create their own tool bars. When clicked, the page will set up another workspace with a full toolbox where a a user can drag the blocks they want to be able to use onto the workspace and save it. He or she can then load these settings/toolbox into the main workspace and work with a limited set of blocks.

8: Register and Login

Simple login and register forms which creates a user in the database and for instance gives access to the possibility to save their work.

9: Search

Any user, logged in or not, can search for users that are registered. That users examples will appear below the search bar and be available for anyone who know who to search for.

4.3 The Toolbox

The toolbox is depicted as number 1 in figure 5. The blocks in the toolbox that are included with blockly are very extensive and support a lot of basic programming operations. However, the real power of blockly comes from that it is very easy to create custom blocks. Custom blocks are blocks which correspond to code that is written by a third-party developer. In this ap-plication most of these custom blocks correspond to code that execute some sort of three.js operation.

(18)

4.3.1 Shapes and their movements

Built into blockly there are blocks to assign variables to anything. As long as the ”set variable” block connects to something that corresponds to a func-tions that returns something, it works. The ”Sf¨ar” and ”Kub” blocks are custom made and corresponds to the javascript code in figure 6.

Figure 6: Left: Blockly, Right: Javascript

The createCube/Sphere function essentially returns a new shape, either a cube or a sphere and assigns the variable name (Sphere or Cube in figure 6) to that object. To create a shape one value must be given to the program; the radius for the sphere and the length for the cube. This to give the user freedom for how big the objects in the scene should be but mostly to give students the idea and understanding what radius and length are.

The cube and sphere objects contains the same information and can be ma-nipulated in the same ways. The only real difference between them is how the mesh and materials are setup in Three.js. They both are defined as a shape and a shape can move, rotate and change color.

Figure 7: Move, Rotate and Color blocks

(19)

destination with very small steps so that for each function call to the ren-der loop, which executes as often as possible, the object moves a little bit closer to its destination and it looks as if the object is moving. In reality the position of the object is changed with a few pixels each iteration.

Figure 8: Cube being moved 5 times upwards

The intuitive way the MoveObject(”Cube”, ”up”); function could work (See figure 9 ). The move block only gives option in which direction to move the object. This was decided after having tried to make a move block that took three variables as in a x, y and z coordinate and then have the object move towards that position. Instead, having the user only being able to move an object up, down, left, right and so on it forces the use of more blocks and also to use the loop block which corresponds to a for loop. If it was too easy to move an object to the wanted destination the need for sequential problem solving and a algorithmic mindset would be unnecessary.

Figure 9: Example code for a move function

(20)

As the workspace gets its code executed with eval(code), the render loop halts and the workspace is executed fully and then the render loop comes back. If the movement blocks in figure 8 were handled in a way like in figure 9 it would result in the objects, as soon as the workspace is executed, would all already be at their destination and no animation or movement would have taken place. This is not what the project is aiming towards as we want to see a lot of objects move around on the scene continuously.

A different approach was decided upon. Instead of making the move block actually change the position of the object, each block adds a move instruction to the object. These instruction are added into an array of moves (Figure 10) which gets handled once the render loop starts going again.

Figure 10: Set Move

(21)

Advanced move instructions

Figure 11: A cube instructed to move in a sinus wave pattern

In figure 11 there is a cube moving in a sinus wave pattern. In the image the grid-view in enabled and shows that the cube is between squares in the grid, something that would not be possible with normal move objects blocks. This is an advanced math function that students in lower elementary school will not know about for another couple of years. However, there could be a benefit showing them and giving them the image early on so that when they are introduced to the math, they remember seeing it when they were young.

Infinite movement

(22)

Figure 12: A block to keep an object moving forever

Changing colors

(23)

Figure 13: A green sphere moving up

In figure 13 a sphere is on its way up (as illustrated by the red arrow). Its color is green because it got the instruction to change to green after the instruction to move up.

Figure 14: The sphere is now teal

(24)

4.3.2 Pointer

One of the first questions that had to be answered is how the user is supposed to define coordinates. To keep the same theme through the whole application a pointer block was made. The pointer block is basically a pointer to a coordinate. The way to move it around is to move it with move blocks. Objects created will be created in the positions of the pointer.

Figure 15: Pointer in action

The pointer block simply creates the pointer. If no pointer is made before objects are made the coordinates for them are set to (0,0,0). Like with the shapes, the move blocks can take the pointer as an argument. The pointer however will move instantly, meaning that the move function for the pointer actually just sets the coordinates of the pointer instantly rather than making a move command like we saw in the case of shapes. As one can see from figure 15, the pointer is moved after each sphere is created to make them appear on different locations.

4.3.3 Lines

(25)

Figure 16: A sinus wave with corresponding block

Every time a line is made the application keeps track of where it ended. That way it’s easy to extend the lines. Shapes can be made which looks like one connected long line even though they are all of different shape and using different functions to be defined.

Figure 17: More advanced line

Figure 17 shows a more advanced line, made by 4 lines that are then repeated with a loop block.

4.4 Communication

(26)

Figure 18: A diagram showing how the database communication is setup

5 Evaluation

To see if this way of teaching could work, an evaluation environment was setup. It was designed a little bit like a game where the user got a reduced number of blocks to work with, mainly the move object block. The task was to move the blocks to their corresponding colors. A timer is setup to keep track of the users progress and when they are finished an array with times taken to complete each level along with the total time is sent to a database for storage. This assignment involves counting how many steps each block has to move in order to get to its destination. A combination of low level mathematics with low level programming. Later levels of the game includes additional cubes to move and walls which cannot be passed through. This forces the user to go around them making the number of move blocks to increase. The blocks can also block each other, something the user has to be aware of and plan for.

(27)

Figure 19: The test environment. Level 2

As seen in figure 19 the number of blocks in the toolbox are greatly re-duced and the workspace starts with a function (the purple blocks in the workspace) that is already pre-defined. The start function only creates the cubes in the scene and a underlying function creates the goals for them at a random position within the grid. The objective is to move the cubes to their correspondent colors by using the ”flytta objekt” block.

The student will have to count have many steps to move the cubes in each direction and then use the appropriate blocks to finish each level is also stored.

Data is collected in the form of time taken to complete each level and the workspace for how they solved the level.

Level 1 looks the same as figure 19 but with only the yellow cube. Level 3 and 4 has one more cube (a total of 3 cubes to move) and some walls in the grid that cannot be passed through.

5.1 Execution

(28)

actually programming with blocks themselves. The school which hosted the experiment is a newly started school where their students come from a big variety of schools. This meant that their proficiency in reading and mathe-matics was very varied and so the results was varied as well. The test had to be done on I-Pads which probably was best for the students but not optimal since the platform has not been made with I-Pads in mind.

The evaluation was conducted by first explaining, rather quickly what they needed to do to finish a level. How to finish the first level was shown on a big screen so that they would at least see a solution once before trying themselves. When they tried themselves a lot of question was raised and some showed frustration while others showed great enthusiasm. They all had around one hour to do as many levels as they could and the result was very varied, but very interesting nonetheless.

5.2 Results

The results form this project is not only the data collected from the evaluation but also the application in itself. However, to see if the application could be of any use, the results from the evaluation are important.

5.2.1 Results from the evaluation

Some big points (Also references to images explaining further):

• All students finished the first level with very little help from grown ups. • 3 students finished all levels within the hour and did so with very little

help. Most of the solution looked the same (Figure 20).

• The most troublesome concept to grasp was how to move more than one cube at a time. Some wanted to move one cube at a time and did not understand that the whole scene and code got executed from scratch every time is was run.

(29)

• Two students showed experimentation in the sense that they combined movements of an object within the same loop. This was not explained or shown before (Figure 21).

• Some students got frustrated very quickly when the objects did not move the way they wanted. This was largely due to not understanding how to do it initially and after some help even they got it and enjoyed it.

• Only one student made a solution where they repeated move blocks many times instead of using a loop (Figure 22).

(30)

Figure 21: Two move blocks within the loop

(31)

Figure 23: Graph showing the average and median times on each level

In figure 23 an interesting graph is depicted. As seen the median times and average times correlate but it is interesting to note that the difference between completion time goes up drastically between level 1 and 2 to then start a trend to shorter times. Level 4 median and average are both lower than for level 2.

Assuming a normal distribution, confidence intervals can be calculated.

Figure 24: Table of statistical data

(32)

Figure 25: A box graph illustrating a confidence interval on each level

From the intervals in the table in figure 24 a graph can be drawn, illustrating how the students did on each level (figure 25). The maximum value (at the top of the straight lines) are a lot higher than the interval suggests.

(33)

Figure 26: Three students who finished all levels

In figure 26 the results for the only students who finished all levels is pre-sented. Given the data only represent three students, no real conclusion can be drawn. It is interesting to note, however, that two of the three students take the longest to complete level two and then completes level three and level four faster. This correlates with the average times for all students in figure 23.

5.2.2 Source Code

In order for this project to have been made a lot of code had to be written. The whole platform with functionality and database structure is available as open source [19]. The Readme explains how to get started with the applica-tion.

6 Discussion

(34)

What also needs to be discussed are the objective mentioned in the beginning of this thesis.

6.1 Ethics

When dealing with information and internet technology there are always concerns regarding the ethics of such a project. In this case however there are not many concerns to be raised. No personal data has been gathered and no personal data is required if someone wishes to register to the platform. During the evaluation with the elementary school students, no names were recorded and so the sample population is anonymous.

6.2 Security

In the tool there are functionality for creating users which always bids the question if there are anything that needs to be properly secured. The plat-form supports creating user accounts and saving custom examples which if a security breach were to happen, these could be lost. However since there are no other information such as who the user actually is or any data on a personal level, a security breach would not cause any personal damage to a users integrity. The security of the site has not been formally tested but as it stands there are no known security threats. Protection against SQL-injection has been implemented and the site is setup at a third party web-hotel.

6.3 Objective

Under objective (section 1.2) a number of questions were raised:

1. What could a tool like that look like so that it is reasonably easy to understand?

(35)

However, a hypothesis presented in the beginning of this thesis was that students would benefit from not having a set of assignments to complete but rather work and explore programming and mathematics in a sand box environment. The core product from this thesis is also that, a sand-box environment. The evaluation did not really examine how students can use this tool. The conclusion made from the evaluation can only conclude that young students are indeed able to learn how to use a graphical programming language and the logic behind making objects move. To get further results, more studies would have to be made and during a longer time period where the real tool is used.

2. What kind feedback system would be required for a student at that age to find programming engaging?

A graphical scene is constantly giving feedback and during the evaluation many students showed enthusiasm when they got the cubes to move. However more feedback might need to be added in the form of characters (mascots), textures and background images to bring the application more to life. 3. How do we show young students what algorithms and sequential problem solving is about?

The objects in the scene move and rotate in a sequential manner giving users insight into how algorithms are setup. Even though all objects will move at the same time, they all so do with their own sequence of moves and rotations. It can be discussed if it really is important that the students know that they are performing algorithms or if it is enough that they actually are. To iterate what was said in the introduction, more focus should be on the fact that they are performing algorithm and sequential problem solving than teaching the definitions of those words.

4. How can the tool be effective for teachers to help their students to learn?

(36)

6.4 Conclusion

The main focus of this project has been to see how basic mathematical expres-sions can be used together with a graphical programming language to create shapes and forms in a 3-dimensional scene and to give these objects instruc-tions which are executed in a sequential manner. The platform features an easy way for teachers to prepare for lessons with examples of their own that can be made beforehand and easily loaded into a students workspace. The project aims to be as open as possible with no set assignments or limita-tions. However, for the purpose of gaining some kind of quantifiable data, an evaluation environment was made with specific objectives and was tried by students at a local elementary school in Huddinge, Stockholm. The evalua-tion proved that the applicaevalua-tion is not too hard for students to understand and that they get into the concept of programming instruction to objects in a sequential manner rather quickly. Considering the students who did the assignment had very little to no previous experience in programming they did very well. The students who finished all the levels said that they would like more objects to control, which is what the main application offers. Given the results of the evaluation and that all students finished at least the first two levels we can assume that after more instructions and lessons they would be able to use the main application to its fullest extent creating tens of objects and have them move, rotate and change colors.

(37)

of ways, depending on the problem obviously, and forcing students to do it in one way or another goes against a large aspect of what the whole subject is about. Going forward in this field, a strategy to make it more open and encourage exploration is essential.

When it comes to the mathematics that can be taught in this environment it is rather limited. This application mostly features different shapes that can be of different sizes. Also more advanced movements such and sinus waves. It is difficult to combine any more elementary school level mathematics and still have it presented as moving objects in a scene. This application can not take over and be the sole tool used to teach mathematics, but should be a good way to introduce 3-dimensional shapes. As an example a student can create many spheres and look at the difference of them when the radius differ.

When comparing this application with others that also use a graphical pro-gramming language, some differences can be found. Compared to other tool, in this the user can create and manipulate multiple objects and these objects are all a type of mathematical shape with properties that are defined using mathematical expressions. Another difference is that most pre-existing tools only handle one object and the user is not able to manipulate more objects at the same time. A trade off was discovered during the development in this area. It was important that a user would be able to create multiple objects and they would move more or less at the same time. This made it hard to implement a function that is used in a lot of similar projects. A function that highlight each block in the workspace that is being executed. This could be of benefit for students so they actually see what part of their code triggers what behavior. For reasons discussed in section 4.3.1, having to with how movements are handled, this function was neglected.

More data would obviously have to be gathered in order to safely guarantee that the students learn what algorithms are and that what they are doing is in fact sequential problem solving. However, knowing what algorithms are and what sequential problem solving is, is not necessarily required to learn how they work. Most likely by using a tool like this, students will learn the thought process behind it and will be more susceptible to further education in the field of programming.

(38)

support-ing some kind of tool like this combined with the results of the evaluation, this thesis concludes that this is indeed something worth further develop-ment.

7 Future Work

It should be easy to make levels like the ones created for the evaluation to be made with customization options which also could be saved for each individual user. That way, teachers who have a lot more knowledge on how to teach can setup their own levels and restraints to make the teaching more effective. This is still only focused on low level mathematics where basically only adding and subtracting operations are necessary.

As discussed earlier in the paper there are possibilities to define lines. These lines could be made more advanced than what has been presented in this thesis and be a good way to introduce programming and more advanced mathematics in higher levels of education. This way of visualizing mathe-matics has been studied for a long time as well. In Visualizing Mathemathe-matics [7] Konrad Polthier writes about how advanced mathematics has been easier to understand when visualized in a suitable way. Defining lines with mathe-matical function and have them drawn out instantly could be a good way for students to grasp the concept of different functions. Also combining it with other subjects such as art could be made possible as defining lines in three.js is a start to defining faces and meshes of a variety of forms. These forms could then be made into objects of their own which also could be translated into suitable formats for 3d-printing[20]. Programming your own shape and have it 3d-printed could be a step into arts and crafts and involve programming in the most creative subjects.

(39)

(40)

References

[1] Dan Meyer. Math curriculum makeover? https://www.ted.com/ talks/dan_meyer_math_curriculum_makeover?language=en),. Ac-cessed: 2016-05-12.

[2] Teresa Belton and Esther Priyadharshini. Boredom and schooling: A cross-disciplinary exploration. In Cambridge Journal of Education Vol-ume 37, Issue 4, 2007.

[3] Skolverket. Swedish curriculum. http://www.skolverket.se/ publikationer?id=3668,.

[4] Morten Misfeldt and Ejsing-Duun. Learning mathematics through pro-gramming. In CERME9.

[5] Merriam-webster. http://www.merriam-webster.com/dictionary/ algorithm,. Accessed: 2016-05-12.

[6] Brannon Park J. The power of feedback. In REVIEW OF EDUCA-TIONAL RESEARCH March 2007 vol. 77 no. 1 81-112.

[7] Konrad Polthier. Visualizing mathematics. In Mathematics and Art, C. Bruter (Ed.), Springer Verlag (2002).

[8] Logo, graphical programming language. https://en.wikipedia.org/ wiki/Logo_(programming_language),.

[9] Turtle graphics. https://en.wikipedia.org/wiki/Turtle_ graphics,.

[10] Blockly. https://blockly-games.appspot.com/,.

(41)

[17] The jQuery Foundation. jquery. https://jquery.com/,.

[18] phpMyAdmin contributors. php. https://www.phpmyadmin.net/,. [19] Olle Wahlstr¨om. Source code. https://github.com/olleboll/

graphical-mathematics-programming,.

Mathmatics with graphical programming