PRE2020 4 Group3: Difference between revisions

From Control Systems Technology Group
Jump to navigation Jump to search
No edit summary
 
(455 intermediate revisions by 6 users not shown)
Line 1: Line 1:
Group members: Eline Boom 1465872, Luuk van Dorst 1469789, Kyra Moviat 1349171, Jeroen Pullen 1477730, Veerle Uhl 1462229
<div style="font-family: 'Arial'; font-size: 16px; line-height: 1.5; max-width: 1100px; word-wrap: break-word; color: #333; font-weight: 400; box-shadow: 0px 25px 35px -5px rgba(0,0,0,0.75); margin-left: auto; margin-right: auto; padding: 70px; background-color: white; padding-top: 25px;">


Interested in creating a software / theoretical solution.
=Group members=
{| class="wikitable" border=1 cellpadding=3 style="border-collapse: collapse;"
|+
|-
! Name !! Student number
|-style="text-align: center;"
| Eline Boom  || 1465872
|-style="text-align: center;"
| Luuk van Dorst || 1469789
|-style="text-align: center;"
| Robin van de Hoef || 1479679
|-style="text-align: center;"
| Kyra Moviat || 1349171
|-style="text-align: center;"
| Jeroen Pullen || 1477730
|-style="text-align: center;"
| Veerle Uhl || 1462229
|}


Interactive software learning children how to draw, count and recognize colors. Children will get small tasks like "draw 3 red apples", the software will recognize the extent to which this task is done correctly and provide compliments and or suggested improvements.
=Introduction=
With the rise of technology comes new ways to implement technology into our daily lives. One of these implementations is technology in education. More specifically, we wanted to develop a technological tool that will help young children in their learning process of number sense. Your knowledge of counting and quantities is tested daily throughout your life. Not a day goes by where you do not have to count or decide the quantity of something, which it is such an important skill to learn from an early age. We wanted to make an application that teaches children number sense in a fun and easy way.
 
 
Teaching children to count is very important. It helps with their development as well as being used in day-to-day life later on. The current curriculum used in most schools works well, but we feel that implementing technology into this curriculum would improve the learning of small children, both in school and at home.
According to Hsin (Hsin, 2014) <ref name=Hsin2014> Hsin, C. T., Li, M. C., & Tsai, C. C. (2014). The influence of young children's use of technology on their learning: A review. Journal of Educational Technology & Society, 17(4), 85-99. https://www.jstor.org/stable/pdf/jeductechsoci.17.4.85.pdf </ref>, who studied the influence of children's use of technology on their learning, this technology does have a positive effect on learning. Hsin does provide us with a few conditions in which learning with technology is optimal. When children are allowed to work together and communicate with each other, technologies may not only improve knowledge, but social skills as well. These skills are most important for children, since interaction with others is needed for humans to survive. The second condition that needs to be met, is that adults need to be present to provide a safe climate and to encourage participation. This makes sure children stay motivated to learn and the adult can give guidance when instructions might be unclear.
Our product is heavily influenced by these two conditions. What we designed is a web-based application that teaches children how to count and recognize shapes and color. It is targeted at children aged 3-5 that are at an average level of counting and shape / color recognition. It has a level-based design with three main levels. These levels then have several exercises each. The difficulty increases for each level, but stays the same within levels. OUr product is designed to be used in a classroom setting. It can be used on a whiteboard with a stylus or on a computer or laptop. When it is used on a whiteboard, children can interact and discuss with each other about the correct answer to the questions. This way, interaction and collaboration is promoted. When it is used in a classroom setting, the teacher can give extra help and information where needed, although the product is designed to need very little to none additional explanation. This wiki gives an overview of the research done for the project, the design behind the project as well as the website and its layout.
 
=USE=
====User====
 
The website described in this wiki is designed to teach young children how to learn counting, colors and shapes. The target user for the website is therefore children aged 3-5 years old. The website is targeted towards children of all education levels, as it can be both a learning tool as well as a revision tool. Since the user test was done by children of a Dutch primary school, the website is in Dutch. This means that for this course, the target group can be specified to only include Dutch children.
 
====Society====
The people that will benefit most from the website is schools and more specifically teachers. Tim's Telwereld was designed as an aid for teachers. It supplies a fun way for children to learn. This allows teachers to let children interact in a fun way with numbers and shapes, while not actively having to do anything. It allows teachers to reflect on the knowledge of the young children and to find possible gaps in their knowledge.
 
====Enterprise====
Tim's Telwereld can be interesting for business in a number of ways. First of all, there are improvements that could still be made. If a business picks up the project and continues working on it so that it can be released to the public, it can be sold to schools. It can be designed in such a way that only when a school buys the product, they (and the children they teach) can access the website. This allows businesses to implement several marketing strategies in order to sell a good product and make money out of it.
 
 
Currently a lot of money is made from the internet through digital advertisements. On almost all the websites available to the public, there are ads to the side or bottom of a webpage. This can also be done for Tim's Telwereld. Advertisement spaces can be bought for businesses to advertise their product or service. With this, however, comes the moral dilemma of advertising to young children, and whether this is ethical to do so. There are, however, already a lot of websites targeted towards children that have enabled ads, which could imply that it is a valid method of getting money, as long as the privacy of the user is taken into account. <ref name=Cai2013> Cai, X., &amp; Zhao, X. (2013). Online advertising on popular children’s websites: Structural features and privacy issues. Computers in Human Behavior, 29(4), 1510–1518. https://doi.org/https://doi.org/10.1016/j.chb.2013.01.013 </ref>
 
=Research=
====State Of The Art====
 
There are already a lot of apps on the market that are geared towards educating children. Certainly apps that teach children how to count or how to draw separately. Combining the two is also done, but less frequently. One app and one website that combine learning to count and to draw are found on the internet. The first one is an app made by Bini Bambini <ref name=BiniBambini> Goncharov, M. (2012, January 1). Learning games for kids. BiniBambini. https://binibambini.com/ </ref> and is called “123 tekenen tellen van nummers voor kinderen”. This game gives children very simple descriptions along with visual guides for drawing complex shapes. It then tells the child how many objects there are and lets the child draw the number. It does not have any AI to see what the user draws, it only gives an outline and a field in which to draw. Once the user stops drawing for a few seconds, the app goes on to the next step. The second one, a website, is called Kids Academy. <ref name=KidsAcademy> Boika, V. (2011, January 1). Educational Apps for Kids: Math, English, STEM: Pre-k to 3d Grade. Kids Academy. https://www.kidsacademy.mobi/. </ref> This has the same general layout of the bambini app, only the Kids Academy focuses on more than just learning math. What stands out quite prominently in both apps is the design layout. It is clearly targeted towards kids with simple shapes, bright colors and audio directions instead of text. Our product keeps these general GUI attributes, but it is different in the level design. We combine drawing and counting in a different way. First, we start off with a level where children do not even need to draw and just need to recognize amounts, colors and shapes. Then, children need to draw (simple) shapes themselves, without guidelines, and also need to draw the correct amount eventually. This makes it so the child is more actively working on the amounts of objects, which will promote their learning.
 
====How children learn====
 
In order to develop an application that supports the learning of children aged 3-5, we first need to know how children's learning develops during their early years and what knowledge they already possess or still need to learn. From when they are born to around the age of 5, children develop something called “everyday mathematics”. <ref name=EverydayMath> Ginsburg, H. P., Lee, J. S., &amp; Boyd, J. S. (2008). Mathematics Education for Young Children: What It Is and How to Promote It. Social Policy Report. Volume 22, Number 1. </ref> This means they develop informal ideas of more and less, taking away, shapes and sizes. These everyday mathematics can be surprisingly broad, complex and sophisticated for children of a young age. Apart from the everyday mathematics that children learn and develop on their own, they also start learning mathematics in school. From the age of 2, children learn the language and grammar of counting. They memorize the first ten or so counting words, and then learn a set of rules to generate the higher numbers. <ref name=Ginsburg89> Ginsburg, H. P. (1989). Children’s arithmetic: How they learn it and how you teach it (2nd ed.). Austin, TX: Pro Ed. </ref> When children are around 4 or 5 years old, they begin to develop metacognitive skills: they will become more and more aware of how they think about math problems and will start to say these thoughts out loud. <ref name=Kuhn2000> Kuhn, D. (2000). Metacognitive development. Current Directions in Psychological Science, 9(5), 178-181. </ref> The hardest form of language for children to learn, which they thus only learn at a later age, is the special written symbolism of mathematics, like 5, +, - or =. <ref name=Hughes86> Hughes, M. (1986). Children and number: Diffi culties in
learning mathematics. Oxford, England: Basil Blackwell </ref>
 
 
Understanding numbers involves more than saying a few counting words. It involves reasoning about numbers, making inferences and developing a mental number line. <ref name=Baroody92> Baroody, A. J. (1992). The development of preschoolers’ counting skills and principles. In J. Bideaud, C. Meljac & J. P. Fischer (Eds.), Pathways to number: Children’s developing numerical abilities (pp. 99-126). Hillsdale, NJ: Lawrence Erlbaum Associates, Publishers. </ref> Children also need to mathematize, they need to be able to think of problems in just mathematical terms. This means that they need to understand that when they combine one apple with two others, they can write this down as 1 + 2. This mathematizing is not very important for our product, as this only happens at a later age than the target group we are designing for. This means that we do not yet have to include problems of mathematization in our level design
 
====The Number Worlds Curriculum====
 
This curriculum is one of many out there that learns children what numbers are and how to use them. It provides a good understanding of the process a child goes through in order to learn how to count. Looking at 5-year-olds, there are several points of knowledge they need to know, relating to number sense <ref name=Griffin2004> Sharon Griffin, Building number sense with Number Worlds: a mathematics program for young children, Early Childhood Research Quarterly, Volume 19, Issue 1, 2004, Pages 173-180, ISSN 0885-2006, https://doi.org/10.1016/j.ecresq.2004.01.012. (https://www.sciencedirect.com/science/article/pii/S0885200604000146) </ref>. Five year old's know:
*that numbers indicate quantity and therefore, that numbers themselves have magnitude
*that the word “bigger” or “more” is sensible in this context
*that the numbers 7 and 9, like every other number from 1 to 10, occupy fixed positions in the counting sequence
*that 7 comes before 9 when you are counting up
*that numbers that come later in the sequence
*that are higher up - indicate larger quantities and therefore, that 9 is bigger (or more) than 7.
*that each counting number up in the sequence corresponds precisely to an increase of one unit in the size of a set. This enables children to use the counting numbers alone, without the need for real objects, to solve quantitative problems involving the joining of two sets. In doing so, it transforms mathematics from something that can only be done out there (e.g. by manipulating real objects) to something that can be done in their own heads, and under their own control.
 
 
As children get older, they progress through different knowledge they know: By the age of 4, children have constructed knowledge of counting and quantity. Sometime in kindergarten, children become able to integrate these knowledge networks. Around the age of 6-7, children connect this integrated knowledge network to the world of formal symbols. By the age of 8 or 9, most children become capable of expanding this knowledge network to deal with double-digit numbers and the base-ten system.
 
 
In the number worlds curriculum, there are 5 instructional principles that lie at the heart of the program:
 
1. Build upon children's current knowledge
 
2. Follow the natural developmental progression when selecting new knowledge to be taught
 
3. Teach computational fluency as well as conceptual understanding
 
4. Provide plenty of opportunity for hands-on exploration, problem-solving and communication
 
5. expose children to the major ways number is represented and talked about in developed societies
 
 
Lastly, the core of number sense forms a knowledge network that is called the central conceptual structure for number. This core is important for children for two reasons: 1) it enables children to make sense of quantitative problems across context, 2) it provides the foundation on which children's learning of more complex number concepts is built. <ref name=numberWorlds> Allan, S. (2009). Number Worlds: Math Intervention for PreK-8. McGraw Hill. https://www.mheducation.com/prek-12/program/MKTSP-TIG05M0.html.  </ref>
 
====Stakeholders====
Meetings with stakeholders were had in order to figure out what important topics they want to see included in the website design as well as other useful information they have on the learning trajectories of children. The converstations were had with two stakeholders, one an out-of-school care provider and the other a kindergarten teacher.
This resulted in a collection of information important for further development of the software model.
The stakeholders talked about what would make the software good in their perspective. Some of the topics they mentioned were a distinction between age groups, the software being available on a digital schoolboard, the importance of learning 'pen grip', the software returning performance data to the teacher (a 'test' system) and the relevance of a reward system.
 
 
The reason why a distinction between age groups within the level design was discussed, was because the stakeholders thought children from age 3-4 varied quite much in skill and learning goals compared to children from age group 4-5. They mentioned the following information about each of the age groups.
 
- For the 3-4 year olds, they need easy levels. Drawing multiple different figures may be too hard. The children are usually already able to count to 10, via touch, so counting could be implemented. They can manage color and shape comparison, so asking for a certain colored and shaped object is an apropriate question. Additionally learing the pen grip is very important at this age, so levels where they can use a pen in a not too difficult task would be ideal. Listening skills, like those relating to executable tasks, are also important to learn at this age.
 
- For the 4-5 year olds, they should be able to manage the drawing levels. For them it's still important to learn shapes in a more deepening way (reproduction rather than recognition). As well as listening skills, number recognition also becomes an important learning goal.
 
 
The importance of being able to work with the software on a digital schoolboard was explained in two ways. For one this meant the children would be able to work with a pen and learn the 'pen grip' better, which is very important for children of this age. Additionally, it could be a very nice method of having the children work together on the levels. This way they can learn to cooperate and the teacher can see whether they do so enough.
 
 
Implementing some sort of test mode which provides performance feedback to an authorized figure was also described to be very usefull in this type of software. The stakeholders explained this by stating how it is important for them to keep track of the children, so they know what they still need to learn or are capable of doing. Besides the interest in an individual test mode, stakeholders also mentioned how it would just be nice if children were able to work with the software on their own. This way teachers could use the software as a tool to have children learn on their own while they could focus their attention to somewhere else.
 
 
Lastly, the stakeholders suggest to think of some sort of reward system for the software. They discuss how it is important for this type of learning applications to feel like a game so the children will stay engaged and not become bored after a series of repetitive tasks.
 
=== SLO ===
 
After the conversations with the stakeholders 2 concise lists relating to the most important design goals were made.
 
 
''What can kids learn from the software?''
 
- Colors, Shapes, Counting & Drawing
 
- Pen grip
 
- Vocabulary (if drawing objects)
 
- Listening skills (if tasks given in audio)
 
- Number recognition (number on screen)
 
 
''What are useful purposes for the software''
 
- Being able to use the software collaboratively (class setting, performing tasks together)
 
- Being able to use the software to test how far children are.
 
- Being able to have the kid perform tasks on their own, behind computer or tablet.
 
 
The website from the organisation SLO, which determines the curriculum for schools in the Netherlands, was used as a guideline to determine the extent to which 3-5 year olds should be able to master the skills relating to the topics on these lists.
 
 
{| class="wikitable" border=1 cellpadding=3 style="border-collapse: collapse;"
|+
|-
! Topic !! SLO Curriculum
|-style="text-align: left;"
| Colors  || “Child knows all colors” <ref> Stakeholder Interviews  </ref>
|-style="text-align: left;"
| Shapes || "Child is able to construct shapes" <ref> SLO (2021) https://www.slo.nl/thema/meer/jonge-kind/doelen-jonge-kind/ </ref>
|-style="text-align: left;"
| Counting || "Child can learn to count to 20 and can recognize amounts up to 12” <ref> SLO (2021) https://www.slo.nl/thema/meer/jonge-kind/doelen-jonge-kind/ </ref>
|-style="text-align: left;"
| Drawing/Motor skills || “Child should learn pen grip” <ref> Stakeholders </ref>
|-style="text-align: left;"
| Vocabulary || “Child should be able to understand instructions, learn new words” <ref> SLO (2021) https://www.slo.nl/sectoren/po/inhoudslijnen-po/inhoudslijnen-nederlands/ </ref>
|-style="text-align: left;"
| Listening skills || "Child should learn how to follow a task description” <ref> Expertisecentrum Nederlands (2021) https://lesintaal.nl/platform_taaldidactiek/1_mondelinge_taalvaardigheid/kennisbasis.htm </ref>
|-style="text-align: left;"
| Number recognition || “Child should know, read and write numbers” <ref> SLO (2021) https://www.slo.nl/sectoren/po/inhoudslijnen-po/inhoudslijnen-rekenen-wiskunde/ </ref>
|-style="text-align: left;"
| Digital skills || “Child should playfully get acquainted with technology and how to operate them, partially via educative games” <ref> SLO (2021) https://www.slo.nl/thema/meer/jonge-kind/doelen-jonge-kind/ </ref>
|}
 
===How The Research Is Used===
 
As a basis, we will use Number worlds curriculum and SLO curriculum. These have been tested and used by many schools and education institutes around the world and are proven to support learning of children.
 
 
Number words has 5 principles for learning, we used them as a framework to develop good exercises that cater to the needs of the children that want to learn.
Principle 1 talks about building upon children’s current knowledge. We do this by slowly incrementing the difficulty of our levels. First, we ask children to simply move an object into a box, then when they have mastered this, they need to move a specific amount or specific color or shape of object into a box. This way, we slowly add more variables while building onto the knowledge children already have.
Principle 2 is about following the natural developmental progression when selecting new knowledge to be taught. With this, we looked at what knowledge young children typically learn at what age. We also took into account the desired age for users and combined this to find what lessons work best. For example, we use squares and circles for objects instead of cars and dogs, since the latter is too far ahead in the developmental progress of knowledge for the small children.
Principle 4 talks about providing opportunity for hands- on exploration and communication. We hope to do this by making our product work as well on a digi board. This way, children and teachers can work together to solve problems and do exercises, promoting communication between them.
 
 
The SLO curriculum is one that does not just focus on math, or on younger children. It focuses on all subjects and children of all ages. For our application, we look at their learning materials for young children (ages 4-7) and specifically the math and number sense material. SLO works with "inhoudslijnen" <ref name=SLO> Verbruggen, I. (2021, March 24). Inhoudskaart jonge kind. SLO. https://www.slo.nl/thema/meer/jonge-kind/doelen-jonge-kind/. </ref> that give an overview of everything the young child (until age 7) needs to be able to do and what knowledge they need to posses. Even though our app focuses on children ages 3-5, we can still use these "inhoudslijnen" to shape our exercises. Learning never stops, and everything we teach children at a young age, they do not need to learn at a higher age still. If we for example look at some of the learning goals of SLO, we can see that, at age 7, they want children to learn how to count to 20 and to also be able to count quantities of at least 20. At age 4 or 5, children using our app probably would not already be able to have knowledge on all these topics, as they are aimed at children aged 7, but we can give them a good push in the right direction. Since we know that children aged 7 need to know at least how to count to 20, then children aged 5 should not only be able to count to 5, but probably to 10 already. In conclusion, using the learning goals of SLO, we can modify them to set our own learning goals for users of the application. Based on these learning goals, we can then shape the levels of the game to teach the children just what we want to know.
 
 
SLO has learning goals for children. There are a few of those learning goals that are important for our level design:
What we have now is doable for children aged 3-5 years old. What we might need to look out for is that it will not be too easy for 5 year old's, seeing as according to SLO, at that age they already learn additional things as well. What we have now as exercises follows the learning lines of children and will support their learning process. Nothing from the levels is too difficult, so it wont be the case that the level difficulty is above the level of the users. Related to language (listening/reading): reading is indeed too difficult for younger children. When you look at phase 1 of OSL, you can see it is mostly simple words and very very short sentences as well as looking at pictures. There is not a whole lot about listening, but according to the prephase (for ages 2-4) then children should be able to listen to and interpret explanations of exercises. We do have to keep in mind to only use very simple words
 
=Software Model=
 
Tim's Telwereld combines learning of shapes and numbers into a fun experience for young children. It is targeted at children aged 3-5 that are starting to learn number sense and shape recognition. It is a web-based design that is intended for use in the classroom, on digiboards or school computers. It is designed to follow the natural learning curve of children and to promote communication between users.
 
[[File:Homepage TimTelwereld.png|thumb|upright=2.0|The homepage of Tim's Telwereld]]
 
 
The website itself is designed with the users in mind. Since the main users will be children aged 3-5, the website needs to be exciting and fun for them. This means the use of lots of bright colors and fun shapes or cartoons. The website also has little to no text, with instructions being given through audio. During the levels there is also a story element with small videos to keep the attention of the children. The buttons for the levels as well as those used for the drawing tool are all quite large. This makes it so even children that cannot move the mouse with a lot of accuracy can still click on the interactables with ease.
 
====Level design====
[[File:Tim Telwereld Level 1.png|thumb|The first level of Tims telwereld]]
The levels are designed in a way to reflect the natural learning of children. There are 3 main moving levels, each with sub-difficulties that vary slightly. The first level is all about colors. In this level, users will have to move the correct colored object into a square box. This will make users get used to the layout of the website as well as teach them about the name of shapes and picking the right colors. The shapes are quite simple; circles, squares and triangles will be used.
 
When this first level is completed, the user moves on the second level where it is all about shapes. Here the idea is to move the object with the right shape between a range of same colored objects. Again, the amount of objects increases as the child moves up in difficulty.
 
For the third level shapes and colors are combined so that the task is to pick the object with the right shape and color at the same time. Difficulty again plays a role in the increasing number of objects and colors.
 
As potential for further development the concept of a fourth level could be to also introduce counting within these moving levels. As of now though, the attempt is to work counting into the drawing levels only.
 
====Difficulty====
 
To make sure the users will be engaged by the website, it is important to implement a range of difficulty that is able to build up in relation to the user's success rate. The user will have to successfully move through all difficulties of a level before being able to move on to the next level. The amount of difficulty has influence on the range of colors and amount of shapes that are available in the exercise. The difficulty will go up after a successful attempt at a level. The difficulty will stay the same and the child will be provided with a learning video after an unsuccessful attempt.
 
=Image Recognition=
 
====AI network====
In order to recognize images drawn by children, a neural network was used. In order to train this network, two databases were used. The MNIST dataset <ref name=MNIST> http://yann.lecun.com/exdb/mnist/ </ref> and the Google quick draw dataset <ref name=GoogleQuickdraw> HalfdanJ (2017) The Quick, Draw! Dataset. https://github.com/googlecreativelab/quickdraw-dataset </ref>.
 
 
In order to correctly label the images that the user draws as the right corresponding shape we have trained a two layer convolutional neural network. We believed that a two layer neural network would be more than sufficient since we are only dealing with simple geometric shapes which we need to recognize. This neural network was trained using the quickdraw dataset provided by google in which each of the three basic geometric shapes (circle, square and triangle) are represented by roughly 100000 images each. These images have been collected from users participating in the quickdraw game and have already been preprocessed by google into 28x28 grayscale images. We believe that these downsized images provide a sufficient amount of detail as we are only dealing with simple geometric images which should be easy to distinguish from each other even with little detail. From this dataset we created a training set containing 80% of the google dataset images and a test set containing the remaining 20%. After training the model we managed to get a 98% accuracy on the test set.
 
====Image processing====
To feed the output from the canvas to the AI trained to recognize the image, a JavaScript code was written. Initially, this code was also written in Python to be compatible with the TensorFlow model but was changed to JavaScript due to server compatibility. The main function of the code was the scanning of pixels from the canvas. This was done by putting a loop for the y-coordinate within the loop for the x-coordinate, with jumps of 10 pixels each iteration. Within this loop, the pixel data of the specified coordinates was retrieved and checked for non-transparent values. When such pixels were found, the code saved the color as well as cropped an image with a predetermined size. This image was then grayscale and converted to a 28x28 pixel image, which could then be fed to the AI. In Python this was done using the numpy, Pillow, and cv libraries on a .jpg or .png image while JavaScript allowed data extraction and manipulation straight from the canvas. The code also contains more optimization features in order for the quicker runtimes, such as changing starting values after feeding the AI an image.
Due to delays caused by the server and AI implementation, this code was never connected to level 4 and the AI. If more time was available, this could be done with a few lines of code and a bit of testing.
 
=The Website=
====Designing the website====
The website which holds the final product was made using glitch <ref name=Glitch> Dash, A. (2000). The friendly community where everyone builds the web. Glitch. https://glitch.com </ref>. This platform was chosen as it allowed the whole group to work together at the same time on the code, while also immediately seeing feedback on what the code changes to the website. Below are the links to the website as well as the code for the website:
 
The website:
https://group3use.glitch.me/
 
The code:
https://glitch.com/edit/#!/group3use
 
 
The code was designed in a distinctified way as to have each level link back or through to eachother. Each level has their own html page, for example for the first stage 'game1' containing information about the places and functions of all present objects. Linked to each of these html pages is a distinct javascript page containing functions for generating the randomized levels and level completion actions, for the first level this is called 'script1'. When a stage is completed the user is linked to a next html page, which depending on how far the user is becomes either a higher difficulty ('script1a') or the next level entirely ('script2'). At a later stage when the reward system was introduced, a separate page for showing the reward video was placed between the routes of stage to stage.
 
==== Reward system with a storyline====
To make completing all the levels more appealing to children, a storyline will be shown through visuals in the levels and animated videos. This reward system is set up in the following manner. Before starting the drag and drop levels there is an introduction video that introduces the storyline and explains what the children need to do to complete the levels. After every completed level a small reward video plays that shows the children that they are doing something that impacts the storyline. After every few levels a somewhat larger video plays that updates the storyline a bit. If the children complete every drag and drop level a video plays that concludes that part of the storyline. The drawing levels have animated videos in the same places as the drag and drop videos. Testing our product in a classroom proved that the reward system was effective for at least the drag and drop levels.
 
 
The subject of helping animals was chosen for the storyline because it is observed to be a timeless subject for children. Things like tv-shows and apps geared towards children use animals very often. Testing our product also confirmed this.
 
[[File:Storyline TimsTelwereld.png|thumb|A still from the storyline video]]
 
 
The overarching storyline is about a group of animals (a horse Pleun, a monkey Albert, a bunny Kiki and a tiger Tim) that are going on a summer holiday. The group however, has trouble reaching their destination because of a few obstacles that the children can help them with. The levels designed for 3-4 year olds are about the start of the journey, where all the animals get hungry. In each level the children drag a specific shape with a certain color into a box. If they do it right the video shows the shape transforming in food and one of the animals eating it. The videos updating the storyline show the animals getting less hungry and more energetic. Finally, the concluding video shows the animals having a full stomach and continuing their journey.
 
 
During the levels designed for 4-5 year olds the group of animals has almost reached their destination, which is a small house on the beach. But to get there they still have to cross quite a few rivers without bridges, and the children can help them build those bridges. In the levels they draw certain shapes that transform into bridges in the reward videos afterwards. The last concluding video shows the animals standing on the beach next to their holiday home. They thank the children for their help and can finally start their holiday.
 
==== Animating the videos ====
All the videos needed for the reward system of the drag and drop levels have been animated and added to the site. As much of the animated videos for the drawing levels as possible were also added to the website, which sadly was not all the videos, since the drawing levels couldn’t be finished in time. PowerPoint was used to make the animations.
 
=Product Test=
 
==Test Plan==
 
In order to make sure our product works as intended, user tests were run on children aged 5-6. Since there was limited time available for the study and design of the product (only 8 weeks), there was no possibility to test whether the product actually supports and improves learning for children. What was able to be tested, however, was whether children engage with the product and whether the product can keep their attention. In order to test this, a test plan was written out:
 
In total, the experiment will take an hour. This is not an ideal timeframe, but the children are only available for 1 hour. At the start of the experiment, there will be 15 minutes where the experimenter will explain to the children what the study is going to be about. The hypothesis will not be disclosed, but the general plan of the study will be. Somewhere before the study will take place, the teacher(s) present will be given a more thorough explanation as well. We will tell them the research question we want to answer, as they cannot influence the opinion of the children during the study. During these first 15 minutes, the children will also be divided into groups. There will be 3 groups in total, all with 3 children per group (for there are 3 versions of each level). If possible, one group with only first graders and one group with only second graders.
 
Then, we move on to the experiment. During this, each group will have 10 minutes in which they will play with the website on the digiboard. When the 10 minutes start, the website is started up and the intro video is played. The children will watch the introduction video and then start playing the levels in the correct order. Whenever there is a question, they are encouraged to search for an answer together before asking the teacher / experimenter for a solution or hints. After the 10 minutes is over, the group of children switches and the experiment gets repeated. This is done once for all groups, so a total of 3 times. When one group is busy with the experiment, the other two groups will (ideally) be in a different room.
 
After each session a short group discussion will be held with the children of the current group. Here, we can ask the opinions of children and possible ways for improvement. We can also ask about the comparison between our "fun" way of learning and the regular way of learning that they do in schools. Lastly, we want to know whether they liked the website or would change anything about it.
 
During the whole experiment, it is important to note down all the questions that children have and the points at which the children get stuck. These things will help us find ways in which to improve our website and make it easier to use. The experimenter must also pay close attention to whether the children find it too easy and get easily distracted, or find it too difficult and ask too many questions.
 
We do this experiment for a number of reasons. First of all, we want to know if our website is engaging enough for young children and if they like working with it. We believe that by adding small stories in between it grabs children’s attention and they want to help the animals in need.
Secondly, we want to know if the levels are not too difficult. We based the level design on the natural learning process of children in schools. We think this will mean that the levels are proper support to the regular curriculum and will be neither too easy or too difficult.
Thirdly, we want to know if there are enough explanation videos on the website and if its interface is clear enough. This is a very important question, since if the website is too difficult to navigate, then children will not be able to use it without the help of a teacher or guardian.
Lastly, we would like to test whether using the software within a group of children stimulates collaborative behaviour and learning, since it was expressed by one of the stakeholder that this could work as a very nicely in a classroom if it could do so.
 
We believe that with the current test plan, we will be able to answer all the questions named above and we will be able to optimally fine tune our website to match the needs of our target group best.
 
==Test Results==
 
The product test was held at the 10th of June at an elementary school in Brabant, the Netherlands. There was room for about 5 tests with different groups of 3 children. Within these groups two consisted of only first graders, one of only second graders and the other two were mixed. Unfortunately, at the day of the test, the digital schoolboard was not working so the tests were taken from a laptop, using a mouse instead of a pen.
 
===Engagement===
 
The engagement was tested by means of observation during the test and questions after the test. It was very apparent the children understood and enjoyed the reward system. Some of the children's comments during the test are transcribed and translated below, they show understanding and engagement from the children. When asking for the group’s opinion of the software after the tests the answers were positive, with every kid having their distinct reasons for it, however they all enjoyed the story. There was a noticeable difference between the groups of all first and second graders in story comprehension. Where the second graders could easily reproduce how they helped the animals by means of picking figures, the first graders could merely talk about how they liked the animals going on a trip but not fully reproduce the story.
 
 
''Transcriptions''
 
“This is fun!”
 
“Funny video”
 
“Now I’m hungry”
 
“We need to find the food!”
 
“The bunny and monkey still need to eat”
 
“Yay!”
 
“This is a fun game”
 
~ Can you help us find materials? ~ “Yes!”
 
“They should jump over!” (the river)
 
===Difficulty===
 
As hoped, the difficulty was not too hard for the children. They were all very able to get through the moving levels, making near to no mistakes. There was noticeable difference however in the speed at which the first grade groups went through the levels compared to the second graders, which were a little faster. Overall, the performance led to believe that for further development the moving levels could allow for some higher difficulties.
The drawing levels on the other hand usually took more than one attempt. Sometimes the children drew an object too poorly and other times they accidentally drew a different shape. Overall, the children did manage to get the drawings right in the end. Here too was a noticeable difference between first and second graders, where the first graders tended to make more mistakes and draw their objects bigger. The difficulty seemed appropriate here, but could also allow for an even more extensive range of difficulty in further development
 
===Usability===
 
The test showed some positive results in terms of usability, the software was understood and well operated by the children without more explanation than the tutorial videos. One nice example was a situation where a child accidentally drew a yellow square instead of a triangle. The teacher noticed this and said: "Hold up, can you count how many corners the triangle now has?". The child then started to count and noticed it was 4, so not a triangle. Right after they clicked on the eraser button, erased the previous drawing an tried again. This was some proof of how the interface was intuitive enough for children to navigate through it. Something will be improved after the test however is the size and user feedback of the buttons, for the children were sometimes confused whether they had selected a tool or not.
 
===Collaboration===
 
In terms of collaboration the user test gave some nice results. The children were very helpful and interactive with each other in different ways. This usually started in the first round of levels where the children would show and help each other, sometimes even physically, with how the mouse should be operated. It was interesting to see that they would and could quickly help each other until they understood and could do it by themselves. Somewhat further in the levels, as is visible in the translated transcriptions below, the children started to make comments about the tasks and the current performing child’s behaviour. The kids asked each other questions, notified each other on their mistakes and judged the quality of each others drawings. These results prove that the software fortunately do seem be able to work in a collaborative format.
 
 
''Transcriptions'' ( ⇒ means response)
 
*Child ‘W’ was making a mistake
 
“No ‘W’, don’t do that!”
 
 
“That is a square” ⇒  “Oh I forgot”
 
 
“Click on there and then (...) “
 
*The task audio played
 
“Now I didn’t hear it”         ⇒ “Click again!”
 
 
“What did you have to draw again?”
 
 
* Square was being drawn as a triangle
 
“No thats a triangle”            ⇒ “Oh yeah!”
 
 
“No, blue!”
 
=Project Plan=
In order to efficiently work on this project, a project plan was made. First, important topics and an outline of our project was written down. After that, a general planning was made with a timeframe of when what part needed to be finished on the website. Lastly, these broad tasks were divided into subtasks and each task was assigned to a group member. In the end, the tasks had more overlap than what is displayed in the planning made at the beginning of the project, but all the deliverables were finished and handed in on time.
 
''Subjects'': Child psychology, learning, image processing, software development.


=Plan=
''Subjects'': Child psychology, learning, image processing, software development
''Objectives'': Create software to help children learn
''Objectives'': Create software to help children learn
''Users'': Children (of parents that want to provide a playful learning app)
''Users'': Children (of parents that want to provide a playful learning app)
''State-of-the art'': Alternative apps that help children either count, draw or learn colors individually. Not in a combined way, we feel the combination might improve the way to learn these things. Additionally, we hypothesize that explaining problems via a childs own drawn elements could improve their understanding.
''State-of-the art'': Alternative apps that help children either count, draw or learn colors individually. Not in a combined way, we feel the combination might improve the way to learn these things. Additionally, we hypothesize that explaining problems via a childs own drawn elements could improve their understanding.
''Approach'': Make up a model for how the software should work, make software in which one can draw, program software that can recognize multiple drawn objects/shapes, implement everything in a working framework according to the model.
''Approach'': Make up a model for how the software should work, make software in which one can draw, program software that can recognize multiple drawn objects/shapes, implement everything in a working framework according to the model.
''Planning'':
Software model in week 2
Drawing software in week 3 & 4
Object recognition software in week 5 & 6
Implement recognition software in framework in week 7 & 8
Work on wiki and presentation during week 2-8


''Milestones'': Drawing software, Working object recognition, implementation in task framework
''Milestones'': Drawing software, working framework, Working object recognition, implementation in task framework
''Deliverables'': Peer review, Wiki, Final Presentation, The software (?)
 
''Who will do what'': yet to be determined
''Deliverables'': peer review, wiki, final presentation, the software, the website
 
 
 
====Planning====
 
{| class="wikitable" border=1 cellpadding=5 style="border-collapse: collapse;"
|+
|-
! Task !! Week 1!! Week 2!! Week 3!! Week 4!! Week 5!! Week 6!! Week 7!! Week 8
|-
| 1. Brainstorm Project ideas || X || || || || || || ||
|-
| 2. Investigate Literature || || X || X || || || || ||
|-
| 3. Create Software Model || || X || X || || || || ||
|-
| 4. Create Software Framework || || || X || X || || || ||
|-
| 5. Create Drawing Software || || || X || X || || || ||
|-
| 6. Create Object Recognition Software || || || || || X || X || ||
|-
| 7. Implement Recognition Software in Framework || || || || || || || X || X
|-
| 8. Work on Wiki || X || X || X || X || X || X || X || X
|-
| 9. Work on Presentation || || || || || || X || X || X
|-
| 10. Do a user test || || || || || || X || X ||
|}
 
====Subtasks====
 
{| class="wikitable" border=1 cellpadding=5 style="border-collapse: collapse;"
|+
|-
! subtask !! Done / to do by who
|-
| 1.1 Find topics that are of interest and comply with technical skills of the group || Everyone
|-
| 2.1 Investigate state of the art || Kyra
|-
| 2.2 Investigate how children learn to count and learn colors and shapes || Veerle/Robin
|-
| 2.3 Investigate current models or curricula that are used for learning  || Veerle
|-
| 2.4 Investigate the influence of online or "games" learning  || Veerle/Robin
|-
| 3.1 Meet with stakeholders to see what they want to see in an excercise  || Jeroen
|-
| 3.2 Create software level model based on stakeholder meetings  || Jeroen
|-
| 3.3 Implement level workings and layout in the website  || Jeroen / Eline
|-
| 3.4 Make an instruction video for the levels  || Kyra / Eline
|-
| 3.5 Write a reward system for software || Kyra
|-
| 3.6 Animate reward video's for drawing levels || Kyra
|-
| 3.7 Create introduction video for moving levels || Kyra
|-
| 3.8 Animate reward video's for moving levels || Kyra
|-
| 3.9 Animate concluding video moving levels and introduction video drawing levels || Kyra
|-
| 4.1 Set up a website || Eline
|-
| 4.2 Code and make a website layout, make it suitable for young children || Eline
|-
| 4.3 Create level generator based on software model || Jeroen
|-
| 4.4 Implement level generator in website || Jeroen
|-
| 4.5 Randomize level shapes and colors || Jeroen
|-
| 5.1 Set up a canvas where users can draw || Eline
|-
| 5.2 Find a way to use colors, a drawing tool and an eraser in the canvas || Eline
|-
| 6.1 Find databases to train a neural network with || Luuk
|-
| 6.2 Write code for a neural network || Luuk
|-
| 6.3 Write code that can read a database and train a neural network || Luuk
|-
| 6.4 Work on improving the accuracy of the neural network || Luuk
|-
| 7.1 Make the drawing made convert into a png || Eline
|-
| 7.2 Make the neural network compatible with a png || Luuk
|-
| 7.3 Convert the drawing png so it cuts out every individual shape and recognizes color || Robin
|-
| 8.1 Write down as much as we can on the wiki || Everyone
|-
| 8.2 Transform the summary on the wiki into a good text with logical structure || Veerle
|-
| 8.3 Keep wiki up to date and write out text parts || Veerle
|-
| 8.4 Add references and pictures to the wiki || Veerle
|-
| 9.1 Make a script for the presentation || Veerle
|-
| 9.2 Prepare their part for presentation || Everyone
|-
| 9.3 Edit the presentation video || Veerle
|-
| 9.2 Animate concluding video for drawing levels || Kyra
|-
| 10.1 Write testplan for user test || Veerle
|-
| 10.2 Test software at elementary school || Jeroen
|-
|}
 
=Time Log=
 
====Eline Boom ====
{| class="wikitable" border=1 cellpadding=5 style="border-collapse: collapse;"
|+
|-
! Date !! Description !! Hours
|-
| 22/04/21 || Brainstorm meeting || 1
|-
| 29/04/21 || Meeting || 1
|-
| 29/04/21 || Setting up the website || 4
|-
| 30/04/21 || Design of website || 5
|-
| 03/05/21 || Meeting || 1
|-
| 03/05/21 || Creating canvas function on website || 3
|-
| 03/05/21 || Converting canvas to image || 4
|-
| 03/05/21 || Colour pens and eraser || 4
|-
| 06/05/21 || Colour pens and eraser || 4
|-
| 06/05/21 || Switching between pen colours through button || 3
|-
| 06/05/21 || switching between draw and erase through button || 6
|-
| 10/05/21 || meeting|| 1
|-
| 13/05/21 || Researching possible ways to code Jeroen's game ideas || 2
|-
| 13/05/21 || Coding different geometric figures in css || 0.5
|-
| 14/05/21 || Start working on the actual game || 2
|-
| 17/05/21 || Meeting || 1
|-
| 17/05/21 || Difficulty level 3, randomization of figures || 3
|-
| 19/05/21 || Finishing all level difficulties + reward when correct || 7
|-
| 20/05/21 || working together with Kyra on animations || 8
|-
| 25/05/21 || changing button text to images || 1
|-
| 25/05/21 || adding audio files and play buttons || 3
|-
| 25/05/21 || Overall layout || 1.5
|-
| 26/05/21 || revisiting code for reward system || 6
|-
| 27/05/21 || audio, creating levels, reward system || 8
|-
| 31/05/21 || meeting|| 1
|-
| 02/06/21 || run-through whole website + fixing problems/ mistakes || 8
|-
| 03/06/21 || animating videos + adding audio and video material to website || 8
|-
| 09/06/21 || run-through whole website+ adding last animations || 1
|-
| 10/06/21 || meeting on test results || 1
|-
| 11/06/21 || implementing tips from the test on website || 1
|-
| 14/06/21 || Final Presentations || 2
|-
| 18/06/21 || Implement button usage feedback || 3
|-
! !! Total Hours: !! 105
|}
 
====Luuk van Dorst====
{| class="wikitable" border=1 cellpadding=5 style="border-collapse: collapse;"
|+
|-
! Date !! Description !! Hours
|-
| 22/04/21 || Brainstorm meeting || 1
|-
| 29/04/21 || Meeting || 0.5
|-
| 29/04/21 || Searching for viable datasets || 2
|-
| 30/04/21 || Researching neural networks || 3
|-
| 02/05/21 || Making a prototype neural network || 4
|-
| 03/05/21 || Meeting || 1
|-
| 08/05/21 || install and get tenserflow working (took longer than expected) || 1
|-
| 08/05/21 || Found some additional datasets || 1
|-
| 08/05/21 || Finished neural network code || 4
|-
| 09/05/21 || Did some research into how much nodes the neural network should have to increase performance || 2
|-
| 09/05/21 || Tested some parameters to increase performance || 4
|-
| 10/05/21 || edited wiki || 1
|-
| 14/05/21 || Did a couple of tensorflow tutorials to understand the library better || 2
|-
| 14/05/21 || Modified neural network to work with a different dataset || 3
|-
| 15/05/21 || Adjusted parameters and tested the neural network to see if performance improved || 5
|-
| 16/05/21 || Did some research to see how performance can be improved in the neural network || 4
|-
| 21/05/21 || Fixed input problems in neural network training code || 3
|-
| 22/05/21 || Tried fixing neural network model code || 3
|-
| 23/05/21 || Tried fixing neural network model code again || 5
|-
| 24/05/21 || Finally got the neural network model code working || 5
|-
| 25/05/21 || messed with some parameters to increase accuracy of model || 2
|-
| 25/05/21 || Edited the wiki || 1
|-
| 27/05/21 || Worked on implementing the AI in the webpage with Eline and Kyra || 5
|-
| 28/05/21 || Worked on implementing the AI in the webpage at home || 4
|-
| 30/05/21 || Tried converting the current image recognition model to a .JSON file || 3
|-
| 30/05/21 || edited the wiki || 1
|-
! !! Total Hours: !! 10.5 + 12 + 15 + 16 + 13 = 66.5
|}
 
====Kyra Moviat====
{| class="wikitable" border=1 cellpadding=5 style="border-collapse: collapse;"
|+
|-
! Date !! Description !! Hours
|-
| 22/04/21 || Research topics || 5
|-
| 22/04/21 || Brainstorm meeting || 1
|-
| 29/04/21 || Meeting || 0.5
|-
| 02/05/21 || Add tables to wiki and update layout || 1.5
|-
| 02/05/21 || Research state of the art || 1.5
|-
| 03/05/21 || Meeting || 1
|-
| 09/05/21 || Writing about state of the art || 1.5
|-
| 09/05/21 || Updating wiki || 0.5
|-
| 09/05/21 || Researching methods children learn counting || 2
|-
| 10/05/21 || Meeting || 1
|-
| 11/05/21 || Updating the wiki to only have 1 logging system instead of 2 || 0.5
|-
| 11/05/21 || Working on script videos that will accompany the levels || 2
|-
| 11/05/21 || Thinking of ideas for name of the app || 0.5
|-
| 12/05/21 || Working on script and asking for feedback on it || 1
|-
| 12/05/21 || Updating wiki || 1
|-
| 17/05/21 || Meeting || 1
|-
| 20/05/21 || Working together with Eline, animating videos to fit the levels || 8
|-
| 20/05/21 || Updating wiki || 1
|-
| 22/05/21 || Animating introduction video drag and drop levels || 8
|-
| 26/05/21 || Meeting and processing minutes || 1.5
|-
| 27/05/21 || Working together with Eline and Luuk, animating videos || 8
|-
| 28/05/21 || Animating reward videos || 7
|-
| 29/05/21 || Animating reward videos || 5
|-
| 31/05/21 || Meeting || 1 
|-
| 02/06/21 || win video sleeplevels animating and making planning for videos || 6
|-
| 03/06/21 || Introductionvideo drawinglevels animeren || 8
|-
| 07/06/21 || Meeting || 1 
|-
| 08/06/21 || rewardvideos tekenlevels animeren en inroductievideo af || 8
|-
| 10/06/21 || Demo product voor presentatie opnemen, inspreken en editen || 7
|-
| 11/06/21 || demo editen || 6
|-
| 14/06/21 || Eindpresentatie geven en bijwonen || 3
|-
| 15/06/21 || laatste winvideo animeren || 4
|-
| 15/06/21 || meeting for peer review || 1
|-
| 15/06/21 || editing wiki || 2
|-
! !! Total Hours: !! 107
|}


====Robin van de Hoef====
{| class="wikitable" border=1 cellpadding=5 style="border-collapse: collapse;"
|+
|-
! Date !! Description !! Hours
|-
| 22/04/21 || Brainstorm meeting || 1
|-
| 29/04/21 || Meeting || 0.5
|-
| 03/05/21 || Meeting || 1
|-
| 07/05/21 || Searching for suitable literature || 2
|-
| 09/05/21 || Searching for and researching literature || 4
|-
| 10/05/21 || Meeting || 1
|-
| 14/05/21 || Installing and testing python image libraries || 1
|-
| 15/05/21 || Color recognition || 2
|-
| 16/05/21 || Image separation || 4
|-
| 17/05/21 || Meeting || 1
|-
| 17/05/21 || Increasing code performance || 5
|-
| 21/05/21 || Testing code with front-end output || 3
|-
| 22/05/21 || Debugging || 4
|-
| 23/05/21 || Rewriting and optimizing code || 5
|-
| 24/05/21 || Trying to fix black pixel issue || 4
|-
| 24/05/21 || Meeting || 1
|-
| 27/05/21 || Adding grayscale functionality || 3
|-
| 29/05/21 || Attempting to add image rescaling || 5
|-
| 30/05/21 || Bug fixing and image rescaling || 4
|-
| 31/05/21 || Meeting || 1
|-
| 31/05/21 || Crying and learning Javascript basics || 3
|-
| 03/06/21 || Figuring out whether javascript rewrite is possible || 5
|-
| 04/06/21 || testing logic and structure in javascript || 4
|-
| 05/06/21 || Learning javascript and attemtping different libraries || 6
|-
| 06/06/21 || converting entire code || 5
|-
| 07/06/21 || Final official meeting || 1
|-
| 07/06/21 || Finishing up JavaScript version of code || 3
|-
| 08/06/21 || Attempting implementation || 3
|-
| 10/06/21 || post-test meeting || 1
|-
| 11/06/21 || Adding file to website without AI connection || 1
|-
| 12/06/21 || recording presentation intro + outro || 4
|-
| 14/06/21 || presentations || 2
|-
| 17/06/21 || last minute meeting || 3
|-
| 18/06/21 || Updating wiki || 2
|-
! !! Total Hours: !! 95,5
|}


====Jeroen Pullen====
{| class="wikitable" border=1 cellpadding=5 style="border-collapse: collapse;"
|+
|-
! Date !! Description !! Hours
|-
| 21/04/21 || Research project ideas || 4
|-
| 22/04/21 || Brainstorm meeting || 1
|-
| 26/04/21 || Prepare poject planning || 1
|-
| 27/04/21 || Research state of the art || 2
|-
| 28/04/21 || Updating Wiki || 1
|-
| 29/04/21 || Contacting stakeholders || 1
|-
| 29/04/21 || Meeting || 0.5
|-
| 29/04/21 || Preparing stakeholder questions || 1
|-
| 30/04/21 || Interview first stakeholder || 1.5
|-
| 03/05/21 || Meeting || 1
|-
| 03/05/21 || Prepare second stakeholder meeting || 1
|-
| 03/05/21 || Interview second stakeholder || 1.5
|-
| 04/05/21 || Work out model using interview data || 2
|-
| 05/05/21 || Work out model by researching learning paths || 3
|-
| 05/05/21 || Work on Wiki || 1
|-
| 08/05/21 || Work on Wiki || 1
|-
| 09/05/21 || Work out complete model based on combined information || 2
|-
| 10/05/21 || Meeting || 1
|-
| 11/05/21 || Create Level Generator || 3
|-
| 12/05/21 || Create Level Generator || 2
|-
| 13/05/21 || Create Level Generator || 3
|-
| 16/05/21 || Discuss Level Design with new stakeholder || 1
|-
| 16/05/21 || Redefine level design according to advice & SLO || 2
|-
| 17/05/21 || Finalize Level Generator according to redefined levels || 3
|-
| 19/05/21 || Watch HTML tutorials || 2
|-
| 20/05/21 || Watch Python to HTML tutorials || 2
|-
| 21/05/21 || Attempt and research javascript || 2
|-
| 22/05/21 || Turn Python Level Generator into Javascript || 3
|-
| 22/05/21 || Update wiki on level design || 1
|-
| 24/05/21 || Finish Level 1 & 2 in Javascript || 3
|-
| 25/05/21 || Finish Level 3 in Javascript || 1
|-
| 26/05/21 || Meeting || 1
|-
| 26/05/21 || Contact with stakeholder for possible testing || 1
|-
| 27/05/21 || Implement Javascript levels in website || 3
|-
| 29/05/21 || Contact with Stakeholder for test || 1
|-
| 31/05/21 || Meeting || 1
|-
| 01/06/21 || Implement Shape Randomizer in website || 4
|-
| 02/06/21 || Final planning with stakeholder for test || 1
|-
| 03/06/21 || Work on figure randomizer || 2
|-
| 05/06/21 || Finalize figure randomizer || 1
|-
| 07/06/21 || Meeting || 1
|-
| 07/06/21 || Work on drawing canvas || 2
|-
| 08/06/21 || Work on drawing cavnas || 3
|-
| 10/06/21 || Testing at school 'de Doelakkers' || 8
|-
| 10/06/21 || Meeting || 1
|-
| 11/06/21 || Review and summarize test material || 2
|-
| 12/06/21 || Work on script video || 2
|-
| 12/06/21 || Recorded and edited video test part || 2
|-
| 13/06 21 || Finalized editing video || 1
|-
| 14/06/21 || Final Presentations || 2
|-
| 15/06/21 || Meeting || 1
|-
| 19/06/21 || Work on wiki || 4
|-
| 20/06/21 || Work on wiki || 2
|-
! !! Total Hours: !! 100.5
|}


=Journal=
====Veerle Uhl====
{| class="wikitable" border=1 cellpadding=5 style="border-collapse: collapse;"
|+
|-
! Date !! Description !! Hours
|-
| 22/04/21 || Brainstorm meeting || 2
|-
| 29/04/21 || Meeting || 1
|-
| 29/04/21 || Literary research || 2.5
|-
| 30/04/21 || Literary research || 3
|-
| 03/05/21 || Meeting || 1
|-
| 03/05/21 || Literary research on how children learn || 5
|-
| 09/05/21 || Literary research on the Number World model || 4
|-
| 09/05/21 || Work on wiki, update the research and timetables || 2
|-
| 10/05/21 || Meeting || 1
|-
| 10/05/21 || Write a more detailed planning on the wiki || 1
|-
| 12/05/21 || Write something about the use of research || 4
|-
| 16/05/21 || Write something about our use of OSL and number worlds || 3
|-
| 17/05/21 || Meeting || 1
|-
| 17/05/21 || Looking into "inhoudslijnen" of OSL and level design || 4
|-
| 19/05/21 || Editing wiki texts || 5
|-
| 19/05/21 || writing wiki texts: level and website design || 3
|-
| 24/05/21 || Editing wiki texts || 4
|-
| 27/05/21 || reading through website code / work done by others || 1
|-
| 27/05/21 || Begin work on project plan || 3
|-
| 27/05/21 || work out testplan || 3
|-
| 31/05/21 || meeting || 1
|-
| 31/05/21 || Editing and changing testplan || 4
|-
| 2/06/21 || testplan, editing wiki || 5
|-
| 04/06/21 || finalizing test plan || 3,5
|-
| 07/06/21 || meeting || 1
|-
| 08/06/21 || work on the presentation || 5
|-
| 10/06/21 || discussing user test, recording presentation and editing text || 4
|-
| 13/06/21 || Editing video || 4
|-
| 14/06/21 || Video presentation meeting || 3
|-
| 15/06/21 || meeting || 1
|-
| 16/06/21 || Work on wiki texts || 4
|-
| 18/06/21 || Add references, pictures and USE section to wiki || 5
|-
| 20/06/21 || final additions to wiki || 5
|-
| 21/06/21 || adding hours and text of others to wiki || 3
|-
! !! Total Hours: !! 101
|}


Name, Total, Breakdown
=References=
<references />

Latest revision as of 13:15, 20 June 2021

Group members

Name Student number
Eline Boom 1465872
Luuk van Dorst 1469789
Robin van de Hoef 1479679
Kyra Moviat 1349171
Jeroen Pullen 1477730
Veerle Uhl 1462229

Introduction

With the rise of technology comes new ways to implement technology into our daily lives. One of these implementations is technology in education. More specifically, we wanted to develop a technological tool that will help young children in their learning process of number sense. Your knowledge of counting and quantities is tested daily throughout your life. Not a day goes by where you do not have to count or decide the quantity of something, which it is such an important skill to learn from an early age. We wanted to make an application that teaches children number sense in a fun and easy way.


Teaching children to count is very important. It helps with their development as well as being used in day-to-day life later on. The current curriculum used in most schools works well, but we feel that implementing technology into this curriculum would improve the learning of small children, both in school and at home. According to Hsin (Hsin, 2014) [1], who studied the influence of children's use of technology on their learning, this technology does have a positive effect on learning. Hsin does provide us with a few conditions in which learning with technology is optimal. When children are allowed to work together and communicate with each other, technologies may not only improve knowledge, but social skills as well. These skills are most important for children, since interaction with others is needed for humans to survive. The second condition that needs to be met, is that adults need to be present to provide a safe climate and to encourage participation. This makes sure children stay motivated to learn and the adult can give guidance when instructions might be unclear. Our product is heavily influenced by these two conditions. What we designed is a web-based application that teaches children how to count and recognize shapes and color. It is targeted at children aged 3-5 that are at an average level of counting and shape / color recognition. It has a level-based design with three main levels. These levels then have several exercises each. The difficulty increases for each level, but stays the same within levels. OUr product is designed to be used in a classroom setting. It can be used on a whiteboard with a stylus or on a computer or laptop. When it is used on a whiteboard, children can interact and discuss with each other about the correct answer to the questions. This way, interaction and collaboration is promoted. When it is used in a classroom setting, the teacher can give extra help and information where needed, although the product is designed to need very little to none additional explanation. This wiki gives an overview of the research done for the project, the design behind the project as well as the website and its layout.

USE

User

The website described in this wiki is designed to teach young children how to learn counting, colors and shapes. The target user for the website is therefore children aged 3-5 years old. The website is targeted towards children of all education levels, as it can be both a learning tool as well as a revision tool. Since the user test was done by children of a Dutch primary school, the website is in Dutch. This means that for this course, the target group can be specified to only include Dutch children.

Society

The people that will benefit most from the website is schools and more specifically teachers. Tim's Telwereld was designed as an aid for teachers. It supplies a fun way for children to learn. This allows teachers to let children interact in a fun way with numbers and shapes, while not actively having to do anything. It allows teachers to reflect on the knowledge of the young children and to find possible gaps in their knowledge.

Enterprise

Tim's Telwereld can be interesting for business in a number of ways. First of all, there are improvements that could still be made. If a business picks up the project and continues working on it so that it can be released to the public, it can be sold to schools. It can be designed in such a way that only when a school buys the product, they (and the children they teach) can access the website. This allows businesses to implement several marketing strategies in order to sell a good product and make money out of it.


Currently a lot of money is made from the internet through digital advertisements. On almost all the websites available to the public, there are ads to the side or bottom of a webpage. This can also be done for Tim's Telwereld. Advertisement spaces can be bought for businesses to advertise their product or service. With this, however, comes the moral dilemma of advertising to young children, and whether this is ethical to do so. There are, however, already a lot of websites targeted towards children that have enabled ads, which could imply that it is a valid method of getting money, as long as the privacy of the user is taken into account. [2]

Research

State Of The Art

There are already a lot of apps on the market that are geared towards educating children. Certainly apps that teach children how to count or how to draw separately. Combining the two is also done, but less frequently. One app and one website that combine learning to count and to draw are found on the internet. The first one is an app made by Bini Bambini [3] and is called “123 tekenen tellen van nummers voor kinderen”. This game gives children very simple descriptions along with visual guides for drawing complex shapes. It then tells the child how many objects there are and lets the child draw the number. It does not have any AI to see what the user draws, it only gives an outline and a field in which to draw. Once the user stops drawing for a few seconds, the app goes on to the next step. The second one, a website, is called Kids Academy. [4] This has the same general layout of the bambini app, only the Kids Academy focuses on more than just learning math. What stands out quite prominently in both apps is the design layout. It is clearly targeted towards kids with simple shapes, bright colors and audio directions instead of text. Our product keeps these general GUI attributes, but it is different in the level design. We combine drawing and counting in a different way. First, we start off with a level where children do not even need to draw and just need to recognize amounts, colors and shapes. Then, children need to draw (simple) shapes themselves, without guidelines, and also need to draw the correct amount eventually. This makes it so the child is more actively working on the amounts of objects, which will promote their learning.

How children learn

In order to develop an application that supports the learning of children aged 3-5, we first need to know how children's learning develops during their early years and what knowledge they already possess or still need to learn. From when they are born to around the age of 5, children develop something called “everyday mathematics”. [5] This means they develop informal ideas of more and less, taking away, shapes and sizes. These everyday mathematics can be surprisingly broad, complex and sophisticated for children of a young age. Apart from the everyday mathematics that children learn and develop on their own, they also start learning mathematics in school. From the age of 2, children learn the language and grammar of counting. They memorize the first ten or so counting words, and then learn a set of rules to generate the higher numbers. [6] When children are around 4 or 5 years old, they begin to develop metacognitive skills: they will become more and more aware of how they think about math problems and will start to say these thoughts out loud. [7] The hardest form of language for children to learn, which they thus only learn at a later age, is the special written symbolism of mathematics, like 5, +, - or =. [8]


Understanding numbers involves more than saying a few counting words. It involves reasoning about numbers, making inferences and developing a mental number line. [9] Children also need to mathematize, they need to be able to think of problems in just mathematical terms. This means that they need to understand that when they combine one apple with two others, they can write this down as 1 + 2. This mathematizing is not very important for our product, as this only happens at a later age than the target group we are designing for. This means that we do not yet have to include problems of mathematization in our level design

The Number Worlds Curriculum

This curriculum is one of many out there that learns children what numbers are and how to use them. It provides a good understanding of the process a child goes through in order to learn how to count. Looking at 5-year-olds, there are several points of knowledge they need to know, relating to number sense [10]. Five year old's know:

  • that numbers indicate quantity and therefore, that numbers themselves have magnitude
  • that the word “bigger” or “more” is sensible in this context
  • that the numbers 7 and 9, like every other number from 1 to 10, occupy fixed positions in the counting sequence
  • that 7 comes before 9 when you are counting up
  • that numbers that come later in the sequence
  • that are higher up - indicate larger quantities and therefore, that 9 is bigger (or more) than 7.
  • that each counting number up in the sequence corresponds precisely to an increase of one unit in the size of a set. This enables children to use the counting numbers alone, without the need for real objects, to solve quantitative problems involving the joining of two sets. In doing so, it transforms mathematics from something that can only be done out there (e.g. by manipulating real objects) to something that can be done in their own heads, and under their own control.


As children get older, they progress through different knowledge they know: By the age of 4, children have constructed knowledge of counting and quantity. Sometime in kindergarten, children become able to integrate these knowledge networks. Around the age of 6-7, children connect this integrated knowledge network to the world of formal symbols. By the age of 8 or 9, most children become capable of expanding this knowledge network to deal with double-digit numbers and the base-ten system.


In the number worlds curriculum, there are 5 instructional principles that lie at the heart of the program:

1. Build upon children's current knowledge

2. Follow the natural developmental progression when selecting new knowledge to be taught

3. Teach computational fluency as well as conceptual understanding

4. Provide plenty of opportunity for hands-on exploration, problem-solving and communication

5. expose children to the major ways number is represented and talked about in developed societies


Lastly, the core of number sense forms a knowledge network that is called the central conceptual structure for number. This core is important for children for two reasons: 1) it enables children to make sense of quantitative problems across context, 2) it provides the foundation on which children's learning of more complex number concepts is built. [11]

Stakeholders

Meetings with stakeholders were had in order to figure out what important topics they want to see included in the website design as well as other useful information they have on the learning trajectories of children. The converstations were had with two stakeholders, one an out-of-school care provider and the other a kindergarten teacher. This resulted in a collection of information important for further development of the software model. The stakeholders talked about what would make the software good in their perspective. Some of the topics they mentioned were a distinction between age groups, the software being available on a digital schoolboard, the importance of learning 'pen grip', the software returning performance data to the teacher (a 'test' system) and the relevance of a reward system.


The reason why a distinction between age groups within the level design was discussed, was because the stakeholders thought children from age 3-4 varied quite much in skill and learning goals compared to children from age group 4-5. They mentioned the following information about each of the age groups.

- For the 3-4 year olds, they need easy levels. Drawing multiple different figures may be too hard. The children are usually already able to count to 10, via touch, so counting could be implemented. They can manage color and shape comparison, so asking for a certain colored and shaped object is an apropriate question. Additionally learing the pen grip is very important at this age, so levels where they can use a pen in a not too difficult task would be ideal. Listening skills, like those relating to executable tasks, are also important to learn at this age.

- For the 4-5 year olds, they should be able to manage the drawing levels. For them it's still important to learn shapes in a more deepening way (reproduction rather than recognition). As well as listening skills, number recognition also becomes an important learning goal.


The importance of being able to work with the software on a digital schoolboard was explained in two ways. For one this meant the children would be able to work with a pen and learn the 'pen grip' better, which is very important for children of this age. Additionally, it could be a very nice method of having the children work together on the levels. This way they can learn to cooperate and the teacher can see whether they do so enough.


Implementing some sort of test mode which provides performance feedback to an authorized figure was also described to be very usefull in this type of software. The stakeholders explained this by stating how it is important for them to keep track of the children, so they know what they still need to learn or are capable of doing. Besides the interest in an individual test mode, stakeholders also mentioned how it would just be nice if children were able to work with the software on their own. This way teachers could use the software as a tool to have children learn on their own while they could focus their attention to somewhere else.


Lastly, the stakeholders suggest to think of some sort of reward system for the software. They discuss how it is important for this type of learning applications to feel like a game so the children will stay engaged and not become bored after a series of repetitive tasks.

SLO

After the conversations with the stakeholders 2 concise lists relating to the most important design goals were made.


What can kids learn from the software?

- Colors, Shapes, Counting & Drawing

- Pen grip

- Vocabulary (if drawing objects)

- Listening skills (if tasks given in audio)

- Number recognition (number on screen)


What are useful purposes for the software

- Being able to use the software collaboratively (class setting, performing tasks together)

- Being able to use the software to test how far children are.

- Being able to have the kid perform tasks on their own, behind computer or tablet.


The website from the organisation SLO, which determines the curriculum for schools in the Netherlands, was used as a guideline to determine the extent to which 3-5 year olds should be able to master the skills relating to the topics on these lists.


Topic SLO Curriculum
Colors “Child knows all colors” [12]
Shapes "Child is able to construct shapes" [13]
Counting "Child can learn to count to 20 and can recognize amounts up to 12” [14]
Drawing/Motor skills “Child should learn pen grip” [15]
Vocabulary “Child should be able to understand instructions, learn new words” [16]
Listening skills "Child should learn how to follow a task description” [17]
Number recognition “Child should know, read and write numbers” [18]
Digital skills “Child should playfully get acquainted with technology and how to operate them, partially via educative games” [19]

How The Research Is Used

As a basis, we will use Number worlds curriculum and SLO curriculum. These have been tested and used by many schools and education institutes around the world and are proven to support learning of children.


Number words has 5 principles for learning, we used them as a framework to develop good exercises that cater to the needs of the children that want to learn. Principle 1 talks about building upon children’s current knowledge. We do this by slowly incrementing the difficulty of our levels. First, we ask children to simply move an object into a box, then when they have mastered this, they need to move a specific amount or specific color or shape of object into a box. This way, we slowly add more variables while building onto the knowledge children already have. Principle 2 is about following the natural developmental progression when selecting new knowledge to be taught. With this, we looked at what knowledge young children typically learn at what age. We also took into account the desired age for users and combined this to find what lessons work best. For example, we use squares and circles for objects instead of cars and dogs, since the latter is too far ahead in the developmental progress of knowledge for the small children. Principle 4 talks about providing opportunity for hands- on exploration and communication. We hope to do this by making our product work as well on a digi board. This way, children and teachers can work together to solve problems and do exercises, promoting communication between them.


The SLO curriculum is one that does not just focus on math, or on younger children. It focuses on all subjects and children of all ages. For our application, we look at their learning materials for young children (ages 4-7) and specifically the math and number sense material. SLO works with "inhoudslijnen" [20] that give an overview of everything the young child (until age 7) needs to be able to do and what knowledge they need to posses. Even though our app focuses on children ages 3-5, we can still use these "inhoudslijnen" to shape our exercises. Learning never stops, and everything we teach children at a young age, they do not need to learn at a higher age still. If we for example look at some of the learning goals of SLO, we can see that, at age 7, they want children to learn how to count to 20 and to also be able to count quantities of at least 20. At age 4 or 5, children using our app probably would not already be able to have knowledge on all these topics, as they are aimed at children aged 7, but we can give them a good push in the right direction. Since we know that children aged 7 need to know at least how to count to 20, then children aged 5 should not only be able to count to 5, but probably to 10 already. In conclusion, using the learning goals of SLO, we can modify them to set our own learning goals for users of the application. Based on these learning goals, we can then shape the levels of the game to teach the children just what we want to know.


SLO has learning goals for children. There are a few of those learning goals that are important for our level design: What we have now is doable for children aged 3-5 years old. What we might need to look out for is that it will not be too easy for 5 year old's, seeing as according to SLO, at that age they already learn additional things as well. What we have now as exercises follows the learning lines of children and will support their learning process. Nothing from the levels is too difficult, so it wont be the case that the level difficulty is above the level of the users. Related to language (listening/reading): reading is indeed too difficult for younger children. When you look at phase 1 of OSL, you can see it is mostly simple words and very very short sentences as well as looking at pictures. There is not a whole lot about listening, but according to the prephase (for ages 2-4) then children should be able to listen to and interpret explanations of exercises. We do have to keep in mind to only use very simple words

Software Model

Tim's Telwereld combines learning of shapes and numbers into a fun experience for young children. It is targeted at children aged 3-5 that are starting to learn number sense and shape recognition. It is a web-based design that is intended for use in the classroom, on digiboards or school computers. It is designed to follow the natural learning curve of children and to promote communication between users.

The homepage of Tim's Telwereld


The website itself is designed with the users in mind. Since the main users will be children aged 3-5, the website needs to be exciting and fun for them. This means the use of lots of bright colors and fun shapes or cartoons. The website also has little to no text, with instructions being given through audio. During the levels there is also a story element with small videos to keep the attention of the children. The buttons for the levels as well as those used for the drawing tool are all quite large. This makes it so even children that cannot move the mouse with a lot of accuracy can still click on the interactables with ease.

Level design

The first level of Tims telwereld

The levels are designed in a way to reflect the natural learning of children. There are 3 main moving levels, each with sub-difficulties that vary slightly. The first level is all about colors. In this level, users will have to move the correct colored object into a square box. This will make users get used to the layout of the website as well as teach them about the name of shapes and picking the right colors. The shapes are quite simple; circles, squares and triangles will be used.

When this first level is completed, the user moves on the second level where it is all about shapes. Here the idea is to move the object with the right shape between a range of same colored objects. Again, the amount of objects increases as the child moves up in difficulty.

For the third level shapes and colors are combined so that the task is to pick the object with the right shape and color at the same time. Difficulty again plays a role in the increasing number of objects and colors.

As potential for further development the concept of a fourth level could be to also introduce counting within these moving levels. As of now though, the attempt is to work counting into the drawing levels only.

Difficulty

To make sure the users will be engaged by the website, it is important to implement a range of difficulty that is able to build up in relation to the user's success rate. The user will have to successfully move through all difficulties of a level before being able to move on to the next level. The amount of difficulty has influence on the range of colors and amount of shapes that are available in the exercise. The difficulty will go up after a successful attempt at a level. The difficulty will stay the same and the child will be provided with a learning video after an unsuccessful attempt.

Image Recognition

AI network

In order to recognize images drawn by children, a neural network was used. In order to train this network, two databases were used. The MNIST dataset [21] and the Google quick draw dataset [22].


In order to correctly label the images that the user draws as the right corresponding shape we have trained a two layer convolutional neural network. We believed that a two layer neural network would be more than sufficient since we are only dealing with simple geometric shapes which we need to recognize. This neural network was trained using the quickdraw dataset provided by google in which each of the three basic geometric shapes (circle, square and triangle) are represented by roughly 100000 images each. These images have been collected from users participating in the quickdraw game and have already been preprocessed by google into 28x28 grayscale images. We believe that these downsized images provide a sufficient amount of detail as we are only dealing with simple geometric images which should be easy to distinguish from each other even with little detail. From this dataset we created a training set containing 80% of the google dataset images and a test set containing the remaining 20%. After training the model we managed to get a 98% accuracy on the test set.

Image processing

To feed the output from the canvas to the AI trained to recognize the image, a JavaScript code was written. Initially, this code was also written in Python to be compatible with the TensorFlow model but was changed to JavaScript due to server compatibility. The main function of the code was the scanning of pixels from the canvas. This was done by putting a loop for the y-coordinate within the loop for the x-coordinate, with jumps of 10 pixels each iteration. Within this loop, the pixel data of the specified coordinates was retrieved and checked for non-transparent values. When such pixels were found, the code saved the color as well as cropped an image with a predetermined size. This image was then grayscale and converted to a 28x28 pixel image, which could then be fed to the AI. In Python this was done using the numpy, Pillow, and cv libraries on a .jpg or .png image while JavaScript allowed data extraction and manipulation straight from the canvas. The code also contains more optimization features in order for the quicker runtimes, such as changing starting values after feeding the AI an image. Due to delays caused by the server and AI implementation, this code was never connected to level 4 and the AI. If more time was available, this could be done with a few lines of code and a bit of testing.

The Website

Designing the website

The website which holds the final product was made using glitch [23]. This platform was chosen as it allowed the whole group to work together at the same time on the code, while also immediately seeing feedback on what the code changes to the website. Below are the links to the website as well as the code for the website:

The website: https://group3use.glitch.me/

The code: https://glitch.com/edit/#!/group3use


The code was designed in a distinctified way as to have each level link back or through to eachother. Each level has their own html page, for example for the first stage 'game1' containing information about the places and functions of all present objects. Linked to each of these html pages is a distinct javascript page containing functions for generating the randomized levels and level completion actions, for the first level this is called 'script1'. When a stage is completed the user is linked to a next html page, which depending on how far the user is becomes either a higher difficulty ('script1a') or the next level entirely ('script2'). At a later stage when the reward system was introduced, a separate page for showing the reward video was placed between the routes of stage to stage.

Reward system with a storyline

To make completing all the levels more appealing to children, a storyline will be shown through visuals in the levels and animated videos. This reward system is set up in the following manner. Before starting the drag and drop levels there is an introduction video that introduces the storyline and explains what the children need to do to complete the levels. After every completed level a small reward video plays that shows the children that they are doing something that impacts the storyline. After every few levels a somewhat larger video plays that updates the storyline a bit. If the children complete every drag and drop level a video plays that concludes that part of the storyline. The drawing levels have animated videos in the same places as the drag and drop videos. Testing our product in a classroom proved that the reward system was effective for at least the drag and drop levels.


The subject of helping animals was chosen for the storyline because it is observed to be a timeless subject for children. Things like tv-shows and apps geared towards children use animals very often. Testing our product also confirmed this.

A still from the storyline video


The overarching storyline is about a group of animals (a horse Pleun, a monkey Albert, a bunny Kiki and a tiger Tim) that are going on a summer holiday. The group however, has trouble reaching their destination because of a few obstacles that the children can help them with. The levels designed for 3-4 year olds are about the start of the journey, where all the animals get hungry. In each level the children drag a specific shape with a certain color into a box. If they do it right the video shows the shape transforming in food and one of the animals eating it. The videos updating the storyline show the animals getting less hungry and more energetic. Finally, the concluding video shows the animals having a full stomach and continuing their journey.


During the levels designed for 4-5 year olds the group of animals has almost reached their destination, which is a small house on the beach. But to get there they still have to cross quite a few rivers without bridges, and the children can help them build those bridges. In the levels they draw certain shapes that transform into bridges in the reward videos afterwards. The last concluding video shows the animals standing on the beach next to their holiday home. They thank the children for their help and can finally start their holiday.

Animating the videos

All the videos needed for the reward system of the drag and drop levels have been animated and added to the site. As much of the animated videos for the drawing levels as possible were also added to the website, which sadly was not all the videos, since the drawing levels couldn’t be finished in time. PowerPoint was used to make the animations.

Product Test

Test Plan

In order to make sure our product works as intended, user tests were run on children aged 5-6. Since there was limited time available for the study and design of the product (only 8 weeks), there was no possibility to test whether the product actually supports and improves learning for children. What was able to be tested, however, was whether children engage with the product and whether the product can keep their attention. In order to test this, a test plan was written out:

In total, the experiment will take an hour. This is not an ideal timeframe, but the children are only available for 1 hour. At the start of the experiment, there will be 15 minutes where the experimenter will explain to the children what the study is going to be about. The hypothesis will not be disclosed, but the general plan of the study will be. Somewhere before the study will take place, the teacher(s) present will be given a more thorough explanation as well. We will tell them the research question we want to answer, as they cannot influence the opinion of the children during the study. During these first 15 minutes, the children will also be divided into groups. There will be 3 groups in total, all with 3 children per group (for there are 3 versions of each level). If possible, one group with only first graders and one group with only second graders.

Then, we move on to the experiment. During this, each group will have 10 minutes in which they will play with the website on the digiboard. When the 10 minutes start, the website is started up and the intro video is played. The children will watch the introduction video and then start playing the levels in the correct order. Whenever there is a question, they are encouraged to search for an answer together before asking the teacher / experimenter for a solution or hints. After the 10 minutes is over, the group of children switches and the experiment gets repeated. This is done once for all groups, so a total of 3 times. When one group is busy with the experiment, the other two groups will (ideally) be in a different room.

After each session a short group discussion will be held with the children of the current group. Here, we can ask the opinions of children and possible ways for improvement. We can also ask about the comparison between our "fun" way of learning and the regular way of learning that they do in schools. Lastly, we want to know whether they liked the website or would change anything about it.

During the whole experiment, it is important to note down all the questions that children have and the points at which the children get stuck. These things will help us find ways in which to improve our website and make it easier to use. The experimenter must also pay close attention to whether the children find it too easy and get easily distracted, or find it too difficult and ask too many questions.

We do this experiment for a number of reasons. First of all, we want to know if our website is engaging enough for young children and if they like working with it. We believe that by adding small stories in between it grabs children’s attention and they want to help the animals in need. Secondly, we want to know if the levels are not too difficult. We based the level design on the natural learning process of children in schools. We think this will mean that the levels are proper support to the regular curriculum and will be neither too easy or too difficult. Thirdly, we want to know if there are enough explanation videos on the website and if its interface is clear enough. This is a very important question, since if the website is too difficult to navigate, then children will not be able to use it without the help of a teacher or guardian. Lastly, we would like to test whether using the software within a group of children stimulates collaborative behaviour and learning, since it was expressed by one of the stakeholder that this could work as a very nicely in a classroom if it could do so.

We believe that with the current test plan, we will be able to answer all the questions named above and we will be able to optimally fine tune our website to match the needs of our target group best.

Test Results

The product test was held at the 10th of June at an elementary school in Brabant, the Netherlands. There was room for about 5 tests with different groups of 3 children. Within these groups two consisted of only first graders, one of only second graders and the other two were mixed. Unfortunately, at the day of the test, the digital schoolboard was not working so the tests were taken from a laptop, using a mouse instead of a pen.

Engagement

The engagement was tested by means of observation during the test and questions after the test. It was very apparent the children understood and enjoyed the reward system. Some of the children's comments during the test are transcribed and translated below, they show understanding and engagement from the children. When asking for the group’s opinion of the software after the tests the answers were positive, with every kid having their distinct reasons for it, however they all enjoyed the story. There was a noticeable difference between the groups of all first and second graders in story comprehension. Where the second graders could easily reproduce how they helped the animals by means of picking figures, the first graders could merely talk about how they liked the animals going on a trip but not fully reproduce the story.


Transcriptions

“This is fun!”

“Funny video”

“Now I’m hungry”

“We need to find the food!”

“The bunny and monkey still need to eat”

“Yay!”

“This is a fun game”

~ Can you help us find materials? ~ “Yes!”

“They should jump over!” (the river)

Difficulty

As hoped, the difficulty was not too hard for the children. They were all very able to get through the moving levels, making near to no mistakes. There was noticeable difference however in the speed at which the first grade groups went through the levels compared to the second graders, which were a little faster. Overall, the performance led to believe that for further development the moving levels could allow for some higher difficulties. The drawing levels on the other hand usually took more than one attempt. Sometimes the children drew an object too poorly and other times they accidentally drew a different shape. Overall, the children did manage to get the drawings right in the end. Here too was a noticeable difference between first and second graders, where the first graders tended to make more mistakes and draw their objects bigger. The difficulty seemed appropriate here, but could also allow for an even more extensive range of difficulty in further development

Usability

The test showed some positive results in terms of usability, the software was understood and well operated by the children without more explanation than the tutorial videos. One nice example was a situation where a child accidentally drew a yellow square instead of a triangle. The teacher noticed this and said: "Hold up, can you count how many corners the triangle now has?". The child then started to count and noticed it was 4, so not a triangle. Right after they clicked on the eraser button, erased the previous drawing an tried again. This was some proof of how the interface was intuitive enough for children to navigate through it. Something will be improved after the test however is the size and user feedback of the buttons, for the children were sometimes confused whether they had selected a tool or not.

Collaboration

In terms of collaboration the user test gave some nice results. The children were very helpful and interactive with each other in different ways. This usually started in the first round of levels where the children would show and help each other, sometimes even physically, with how the mouse should be operated. It was interesting to see that they would and could quickly help each other until they understood and could do it by themselves. Somewhat further in the levels, as is visible in the translated transcriptions below, the children started to make comments about the tasks and the current performing child’s behaviour. The kids asked each other questions, notified each other on their mistakes and judged the quality of each others drawings. These results prove that the software fortunately do seem be able to work in a collaborative format.


Transcriptions ( ⇒ means response)

  • Child ‘W’ was making a mistake

“No ‘W’, don’t do that!”


“That is a square” ⇒ “Oh I forgot”


“Click on there and then (...) “

  • The task audio played

“Now I didn’t hear it” ⇒ “Click again!”


“What did you have to draw again?”


  • Square was being drawn as a triangle

“No thats a triangle” ⇒ “Oh yeah!”


“No, blue!”

Project Plan

In order to efficiently work on this project, a project plan was made. First, important topics and an outline of our project was written down. After that, a general planning was made with a timeframe of when what part needed to be finished on the website. Lastly, these broad tasks were divided into subtasks and each task was assigned to a group member. In the end, the tasks had more overlap than what is displayed in the planning made at the beginning of the project, but all the deliverables were finished and handed in on time.

Subjects: Child psychology, learning, image processing, software development.

Objectives: Create software to help children learn

Users: Children (of parents that want to provide a playful learning app)

State-of-the art: Alternative apps that help children either count, draw or learn colors individually. Not in a combined way, we feel the combination might improve the way to learn these things. Additionally, we hypothesize that explaining problems via a childs own drawn elements could improve their understanding.

Approach: Make up a model for how the software should work, make software in which one can draw, program software that can recognize multiple drawn objects/shapes, implement everything in a working framework according to the model.

Milestones: Drawing software, working framework, Working object recognition, implementation in task framework

Deliverables: peer review, wiki, final presentation, the software, the website


Planning

Task Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8
1. Brainstorm Project ideas X
2. Investigate Literature X X
3. Create Software Model X X
4. Create Software Framework X X
5. Create Drawing Software X X
6. Create Object Recognition Software X X
7. Implement Recognition Software in Framework X X
8. Work on Wiki X X X X X X X X
9. Work on Presentation X X X
10. Do a user test X X

Subtasks

subtask Done / to do by who
1.1 Find topics that are of interest and comply with technical skills of the group Everyone
2.1 Investigate state of the art Kyra
2.2 Investigate how children learn to count and learn colors and shapes Veerle/Robin
2.3 Investigate current models or curricula that are used for learning Veerle
2.4 Investigate the influence of online or "games" learning Veerle/Robin
3.1 Meet with stakeholders to see what they want to see in an excercise Jeroen
3.2 Create software level model based on stakeholder meetings Jeroen
3.3 Implement level workings and layout in the website Jeroen / Eline
3.4 Make an instruction video for the levels Kyra / Eline
3.5 Write a reward system for software Kyra
3.6 Animate reward video's for drawing levels Kyra
3.7 Create introduction video for moving levels Kyra
3.8 Animate reward video's for moving levels Kyra
3.9 Animate concluding video moving levels and introduction video drawing levels Kyra
4.1 Set up a website Eline
4.2 Code and make a website layout, make it suitable for young children Eline
4.3 Create level generator based on software model Jeroen
4.4 Implement level generator in website Jeroen
4.5 Randomize level shapes and colors Jeroen
5.1 Set up a canvas where users can draw Eline
5.2 Find a way to use colors, a drawing tool and an eraser in the canvas Eline
6.1 Find databases to train a neural network with Luuk
6.2 Write code for a neural network Luuk
6.3 Write code that can read a database and train a neural network Luuk
6.4 Work on improving the accuracy of the neural network Luuk
7.1 Make the drawing made convert into a png Eline
7.2 Make the neural network compatible with a png Luuk
7.3 Convert the drawing png so it cuts out every individual shape and recognizes color Robin
8.1 Write down as much as we can on the wiki Everyone
8.2 Transform the summary on the wiki into a good text with logical structure Veerle
8.3 Keep wiki up to date and write out text parts Veerle
8.4 Add references and pictures to the wiki Veerle
9.1 Make a script for the presentation Veerle
9.2 Prepare their part for presentation Everyone
9.3 Edit the presentation video Veerle
9.2 Animate concluding video for drawing levels Kyra
10.1 Write testplan for user test Veerle
10.2 Test software at elementary school Jeroen

Time Log

Eline Boom

Date Description Hours
22/04/21 Brainstorm meeting 1
29/04/21 Meeting 1
29/04/21 Setting up the website 4
30/04/21 Design of website 5
03/05/21 Meeting 1
03/05/21 Creating canvas function on website 3
03/05/21 Converting canvas to image 4
03/05/21 Colour pens and eraser 4
06/05/21 Colour pens and eraser 4
06/05/21 Switching between pen colours through button 3
06/05/21 switching between draw and erase through button 6
10/05/21 meeting 1
13/05/21 Researching possible ways to code Jeroen's game ideas 2
13/05/21 Coding different geometric figures in css 0.5
14/05/21 Start working on the actual game 2
17/05/21 Meeting 1
17/05/21 Difficulty level 3, randomization of figures 3
19/05/21 Finishing all level difficulties + reward when correct 7
20/05/21 working together with Kyra on animations 8
25/05/21 changing button text to images 1
25/05/21 adding audio files and play buttons 3
25/05/21 Overall layout 1.5
26/05/21 revisiting code for reward system 6
27/05/21 audio, creating levels, reward system 8
31/05/21 meeting 1
02/06/21 run-through whole website + fixing problems/ mistakes 8
03/06/21 animating videos + adding audio and video material to website 8
09/06/21 run-through whole website+ adding last animations 1
10/06/21 meeting on test results 1
11/06/21 implementing tips from the test on website 1
14/06/21 Final Presentations 2
18/06/21 Implement button usage feedback 3
Total Hours: 105

Luuk van Dorst

Date Description Hours
22/04/21 Brainstorm meeting 1
29/04/21 Meeting 0.5
29/04/21 Searching for viable datasets 2
30/04/21 Researching neural networks 3
02/05/21 Making a prototype neural network 4
03/05/21 Meeting 1
08/05/21 install and get tenserflow working (took longer than expected) 1
08/05/21 Found some additional datasets 1
08/05/21 Finished neural network code 4
09/05/21 Did some research into how much nodes the neural network should have to increase performance 2
09/05/21 Tested some parameters to increase performance 4
10/05/21 edited wiki 1
14/05/21 Did a couple of tensorflow tutorials to understand the library better 2
14/05/21 Modified neural network to work with a different dataset 3
15/05/21 Adjusted parameters and tested the neural network to see if performance improved 5
16/05/21 Did some research to see how performance can be improved in the neural network 4
21/05/21 Fixed input problems in neural network training code 3
22/05/21 Tried fixing neural network model code 3
23/05/21 Tried fixing neural network model code again 5
24/05/21 Finally got the neural network model code working 5
25/05/21 messed with some parameters to increase accuracy of model 2
25/05/21 Edited the wiki 1
27/05/21 Worked on implementing the AI in the webpage with Eline and Kyra 5
28/05/21 Worked on implementing the AI in the webpage at home 4
30/05/21 Tried converting the current image recognition model to a .JSON file 3
30/05/21 edited the wiki 1
Total Hours: 10.5 + 12 + 15 + 16 + 13 = 66.5

Kyra Moviat

Date Description Hours
22/04/21 Research topics 5
22/04/21 Brainstorm meeting 1
29/04/21 Meeting 0.5
02/05/21 Add tables to wiki and update layout 1.5
02/05/21 Research state of the art 1.5
03/05/21 Meeting 1
09/05/21 Writing about state of the art 1.5
09/05/21 Updating wiki 0.5
09/05/21 Researching methods children learn counting 2
10/05/21 Meeting 1
11/05/21 Updating the wiki to only have 1 logging system instead of 2 0.5
11/05/21 Working on script videos that will accompany the levels 2
11/05/21 Thinking of ideas for name of the app 0.5
12/05/21 Working on script and asking for feedback on it 1
12/05/21 Updating wiki 1
17/05/21 Meeting 1
20/05/21 Working together with Eline, animating videos to fit the levels 8
20/05/21 Updating wiki 1
22/05/21 Animating introduction video drag and drop levels 8
26/05/21 Meeting and processing minutes 1.5
27/05/21 Working together with Eline and Luuk, animating videos 8
28/05/21 Animating reward videos 7
29/05/21 Animating reward videos 5
31/05/21 Meeting 1
02/06/21 win video sleeplevels animating and making planning for videos 6
03/06/21 Introductionvideo drawinglevels animeren 8
07/06/21 Meeting 1
08/06/21 rewardvideos tekenlevels animeren en inroductievideo af 8
10/06/21 Demo product voor presentatie opnemen, inspreken en editen 7
11/06/21 demo editen 6
14/06/21 Eindpresentatie geven en bijwonen 3
15/06/21 laatste winvideo animeren 4
15/06/21 meeting for peer review 1
15/06/21 editing wiki 2
Total Hours: 107

Robin van de Hoef

Date Description Hours
22/04/21 Brainstorm meeting 1
29/04/21 Meeting 0.5
03/05/21 Meeting 1
07/05/21 Searching for suitable literature 2
09/05/21 Searching for and researching literature 4
10/05/21 Meeting 1
14/05/21 Installing and testing python image libraries 1
15/05/21 Color recognition 2
16/05/21 Image separation 4
17/05/21 Meeting 1
17/05/21 Increasing code performance 5
21/05/21 Testing code with front-end output 3
22/05/21 Debugging 4
23/05/21 Rewriting and optimizing code 5
24/05/21 Trying to fix black pixel issue 4
24/05/21 Meeting 1
27/05/21 Adding grayscale functionality 3
29/05/21 Attempting to add image rescaling 5
30/05/21 Bug fixing and image rescaling 4
31/05/21 Meeting 1
31/05/21 Crying and learning Javascript basics 3
03/06/21 Figuring out whether javascript rewrite is possible 5
04/06/21 testing logic and structure in javascript 4
05/06/21 Learning javascript and attemtping different libraries 6
06/06/21 converting entire code 5
07/06/21 Final official meeting 1
07/06/21 Finishing up JavaScript version of code 3
08/06/21 Attempting implementation 3
10/06/21 post-test meeting 1
11/06/21 Adding file to website without AI connection 1
12/06/21 recording presentation intro + outro 4
14/06/21 presentations 2
17/06/21 last minute meeting 3
18/06/21 Updating wiki 2
Total Hours: 95,5

Jeroen Pullen

Date Description Hours
21/04/21 Research project ideas 4
22/04/21 Brainstorm meeting 1
26/04/21 Prepare poject planning 1
27/04/21 Research state of the art 2
28/04/21 Updating Wiki 1
29/04/21 Contacting stakeholders 1
29/04/21 Meeting 0.5
29/04/21 Preparing stakeholder questions 1
30/04/21 Interview first stakeholder 1.5
03/05/21 Meeting 1
03/05/21 Prepare second stakeholder meeting 1
03/05/21 Interview second stakeholder 1.5
04/05/21 Work out model using interview data 2
05/05/21 Work out model by researching learning paths 3
05/05/21 Work on Wiki 1
08/05/21 Work on Wiki 1
09/05/21 Work out complete model based on combined information 2
10/05/21 Meeting 1
11/05/21 Create Level Generator 3
12/05/21 Create Level Generator 2
13/05/21 Create Level Generator 3
16/05/21 Discuss Level Design with new stakeholder 1
16/05/21 Redefine level design according to advice & SLO 2
17/05/21 Finalize Level Generator according to redefined levels 3
19/05/21 Watch HTML tutorials 2
20/05/21 Watch Python to HTML tutorials 2
21/05/21 Attempt and research javascript 2
22/05/21 Turn Python Level Generator into Javascript 3
22/05/21 Update wiki on level design 1
24/05/21 Finish Level 1 & 2 in Javascript 3
25/05/21 Finish Level 3 in Javascript 1
26/05/21 Meeting 1
26/05/21 Contact with stakeholder for possible testing 1
27/05/21 Implement Javascript levels in website 3
29/05/21 Contact with Stakeholder for test 1
31/05/21 Meeting 1
01/06/21 Implement Shape Randomizer in website 4
02/06/21 Final planning with stakeholder for test 1
03/06/21 Work on figure randomizer 2
05/06/21 Finalize figure randomizer 1
07/06/21 Meeting 1
07/06/21 Work on drawing canvas 2
08/06/21 Work on drawing cavnas 3
10/06/21 Testing at school 'de Doelakkers' 8
10/06/21 Meeting 1
11/06/21 Review and summarize test material 2
12/06/21 Work on script video 2
12/06/21 Recorded and edited video test part 2
13/06 21 Finalized editing video 1
14/06/21 Final Presentations 2
15/06/21 Meeting 1
19/06/21 Work on wiki 4
20/06/21 Work on wiki 2
Total Hours: 100.5

Veerle Uhl

Date Description Hours
22/04/21 Brainstorm meeting 2
29/04/21 Meeting 1
29/04/21 Literary research 2.5
30/04/21 Literary research 3
03/05/21 Meeting 1
03/05/21 Literary research on how children learn 5
09/05/21 Literary research on the Number World model 4
09/05/21 Work on wiki, update the research and timetables 2
10/05/21 Meeting 1
10/05/21 Write a more detailed planning on the wiki 1
12/05/21 Write something about the use of research 4
16/05/21 Write something about our use of OSL and number worlds 3
17/05/21 Meeting 1
17/05/21 Looking into "inhoudslijnen" of OSL and level design 4
19/05/21 Editing wiki texts 5
19/05/21 writing wiki texts: level and website design 3
24/05/21 Editing wiki texts 4
27/05/21 reading through website code / work done by others 1
27/05/21 Begin work on project plan 3
27/05/21 work out testplan 3
31/05/21 meeting 1
31/05/21 Editing and changing testplan 4
2/06/21 testplan, editing wiki 5
04/06/21 finalizing test plan 3,5
07/06/21 meeting 1
08/06/21 work on the presentation 5
10/06/21 discussing user test, recording presentation and editing text 4
13/06/21 Editing video 4
14/06/21 Video presentation meeting 3
15/06/21 meeting 1
16/06/21 Work on wiki texts 4
18/06/21 Add references, pictures and USE section to wiki 5
20/06/21 final additions to wiki 5
21/06/21 adding hours and text of others to wiki 3
Total Hours: 101

References

  1. Hsin, C. T., Li, M. C., & Tsai, C. C. (2014). The influence of young children's use of technology on their learning: A review. Journal of Educational Technology & Society, 17(4), 85-99. https://www.jstor.org/stable/pdf/jeductechsoci.17.4.85.pdf
  2. Cai, X., & Zhao, X. (2013). Online advertising on popular children’s websites: Structural features and privacy issues. Computers in Human Behavior, 29(4), 1510–1518. https://doi.org/https://doi.org/10.1016/j.chb.2013.01.013
  3. Goncharov, M. (2012, January 1). Learning games for kids. BiniBambini. https://binibambini.com/
  4. Boika, V. (2011, January 1). Educational Apps for Kids: Math, English, STEM: Pre-k to 3d Grade. Kids Academy. https://www.kidsacademy.mobi/.
  5. Ginsburg, H. P., Lee, J. S., & Boyd, J. S. (2008). Mathematics Education for Young Children: What It Is and How to Promote It. Social Policy Report. Volume 22, Number 1.
  6. Ginsburg, H. P. (1989). Children’s arithmetic: How they learn it and how you teach it (2nd ed.). Austin, TX: Pro Ed.
  7. Kuhn, D. (2000). Metacognitive development. Current Directions in Psychological Science, 9(5), 178-181.
  8. Hughes, M. (1986). Children and number: Diffi culties in learning mathematics. Oxford, England: Basil Blackwell
  9. Baroody, A. J. (1992). The development of preschoolers’ counting skills and principles. In J. Bideaud, C. Meljac & J. P. Fischer (Eds.), Pathways to number: Children’s developing numerical abilities (pp. 99-126). Hillsdale, NJ: Lawrence Erlbaum Associates, Publishers.
  10. Sharon Griffin, Building number sense with Number Worlds: a mathematics program for young children, Early Childhood Research Quarterly, Volume 19, Issue 1, 2004, Pages 173-180, ISSN 0885-2006, https://doi.org/10.1016/j.ecresq.2004.01.012. (https://www.sciencedirect.com/science/article/pii/S0885200604000146)
  11. Allan, S. (2009). Number Worlds: Math Intervention for PreK-8. McGraw Hill. https://www.mheducation.com/prek-12/program/MKTSP-TIG05M0.html.
  12. Stakeholder Interviews
  13. SLO (2021) https://www.slo.nl/thema/meer/jonge-kind/doelen-jonge-kind/
  14. SLO (2021) https://www.slo.nl/thema/meer/jonge-kind/doelen-jonge-kind/
  15. Stakeholders
  16. SLO (2021) https://www.slo.nl/sectoren/po/inhoudslijnen-po/inhoudslijnen-nederlands/
  17. Expertisecentrum Nederlands (2021) https://lesintaal.nl/platform_taaldidactiek/1_mondelinge_taalvaardigheid/kennisbasis.htm
  18. SLO (2021) https://www.slo.nl/sectoren/po/inhoudslijnen-po/inhoudslijnen-rekenen-wiskunde/
  19. SLO (2021) https://www.slo.nl/thema/meer/jonge-kind/doelen-jonge-kind/
  20. Verbruggen, I. (2021, March 24). Inhoudskaart jonge kind. SLO. https://www.slo.nl/thema/meer/jonge-kind/doelen-jonge-kind/.
  21. http://yann.lecun.com/exdb/mnist/
  22. HalfdanJ (2017) The Quick, Draw! Dataset. https://github.com/googlecreativelab/quickdraw-dataset
  23. Dash, A. (2000). The friendly community where everyone builds the web. Glitch. https://glitch.com