There are di erent available methodologies for teaching mathematics to children. Teachers use di erent approaches. Some of the exiting approaches include engaging students with di erent activities and games. Computer games/tools have been proven e ective with teaching mathematics. The aim of the paper is to provide teachers with no background in Computer Science with a utility that enables them to build their own games. In this way, teachers will be able to customize games according to the principles they want their students to learn.
One of the recently introduced activities for teaching in di erent elds,
including mathematics, is using games and computer platforms [
The provided tools are however, to the best knowledge of the authors, static ones. Teachers do not have the option to customize the games in any way. For example, the appearance cannot be changed. Users will have to stick to the look provided by the original programmers of the tools. In addition, teachers cannot customize the mathematical concepts tackled by the tools. They might thus have to use di erent games/tools in case they need to tackle more than one concept. The work in this paper aims at overcoming these drawbacks. It introduces a new rule-based approach for generating di erent interactive customizable games. Through the o ered tool, teachers are able to de ne the mathematical concepts students should practice. They are then able to state how numbers should be visualized.
The tool makes use of the recently introduced annotation rules for
animating Constraint Handling Rules' (CHR) programs [
The tool introduced in the paper generates CHR programs representing the di erent mathematical concepts entered by the teacher. Annotation rules are then utilized to visualize the execution of the program using the inputs of the teacher.
The paper is organized as follows: Section 2 introduces CHR. In Section 3, annotation rules are discussed in more details. Section 4 introduces the di erent features o ered to teachers. Section 5 shows how students can use the platform. Finally, conclusions and directions to future work are o ered. 2
CHR [
The last, and more general, type is the simpagation rule. A simpagation rule has two types of head constraints separated by a backslash: \n". On executing a simpagation rule, the constraints before the backslash are kept and the ones after the backslash are removed. For example the rule min(A)\min(B)<=>A<B|true compares two constraints and keeps only the one having the lower number. Thus, upon applying this rule successively, the only constraint remaining is the one with the smallest number. 3
Annotation Rules for Animating CHR Programs
With CHR becoming a general purpose language, the need of tracing tools has
been evoked. In [
In this section, the \teacher module" is introduced. This module is used by teachers to specify the mathematical concepts students should learn and the appearance of the output game. Figure 1 shows the rst screen teachers get. They have the option to de ne a \simple rule" and a \Rule with Steps". A simple rule is a rule computed through one step. Teachers can also de ne a rule with several cases/steps.
In the case of simple rules, teachers have to de ne the input(s) and output. Figure 2a shows the view teachers get once they decide to add a simple rule. The name of the rule is editable. As seen in Figure 2b, it was changed to sum. Users can enter any number of inputs. An input could be a variable name or an actual value as seen in Figure 2b. The output could also be a value or an expression as shown in Figure 2c.
In the case of de ning a rule with steps, instead of only de ning the expression for the output, teachers de ne steps. Except for the rst step, each step takes the output of the previous step as one of its inputs. There is an upper limit to the number of steps that could be performed. As a proof of the concept, the paper will focus only on the case of simple rules since the core principles for generating the animations in both cases are the same. 4.1
After teachers de ne the mathematical rule that students should practice, they can de ne how the quizzes students get look like. They can rst choose a color or an image for the background. They can also specify how numbers should appear. The idea is that each number m could be represented by a visual object or n visual objects. Teachers can customize what the objects are. Objects could be 1 http://www.cs.duke.edu/csed/jawaa2/ 4 simple shapes (provided by Jawaa) such as circles, rectangles, etc. Objects could also be linked to pictures to match a speci c theme. Teachers get the window shown in Figure 3 where they can link a number to its corresponding visual object to produce the required annotation rules. Once the teacher chooses an object, the panel gets populated with the corresponding parameters that have to be lled. In order to link a number to several objects, the teacher should choose to connect it with the visual object \nObjects". nObjects is a newly added object to Jawaa. It groups visual objects together.
For the example shown in the Figure 3, it was required that a number X gets associated with X di erent objects. The number was thus linked with \nObjects". The teacher enters a value for the required number of generated objects. In this case, X objects are needed. The teacher should then choose which type of visual object should be generated X times for each number X. The object \imageobject" was used in this case. An imageobject is an actual image with the extension \jpg" or \png". It was also added to Jawaa. For each imageobject users have to specify where the image should be shown (x and y coordinates) in addition to the location of the image (path). In general, each parameter could be one of the following values or expressions based on them: 1. a constant e.g. 30, red, etc 2. the built-in function valueOf (X) representing the value of the number X. 3. the keyword valueOf (N ) used in the case of nObjects to represent the varying number. For example the rst generated object would have an N = 0, the second would have an N = 1, etc. In the previous example the x-coordinate of each shown imageobject was set to 30 + valueOf (N ) 40. Thus for the rst image shown the x-coordinate will be 30 + 0 40 which is 30. The second image will have an x-coordinate of 30 + 1 40 or 70, etc. A user can also associate a number through more than one rule. For example, a number could be associated with a colored circle and a text object. Thus more than one object would be shown for the same number.
Once the teacher de nes the needed annotation rule(s), they move to the next (optional) step. In this step, teachers can de ne any number of constraints on the input numbers students will get. For example teachers can add constraints for an input to be a one-digit number (i.e. < 10 and 0). Constraints can also link more than one input together (e.g. X < Y ). Figure 4 shows an example where every input has more than one associated constraint. The available constraints are <, >, , , =, ! =. Teachers also choose lower and upper bounds for the generated numbers. Every simple rule named rule name with inputs X1; : : : ; XN is represented with the CHR constraint rule(rule_name,N). Inputs are represented separately through the constraints input(Rule_name,Value,Index). The output of the rule contains in most of the cases an expression to be evaluated. The evaluated output is stored inside the constraint output(Rule_name,Output). Thus such a simple rule is represented by the following CHR program:
The CHR le is automatically generated. Thus, the teacher does not have to be aware of CHR to use the system. The produced le is transformed using the CHRAnimation tool to be able to produce the required visual objects during execution. 5
Once users start to play, the background is set to the background chosen by the teacher. It could be just a color or an image. Afterwards, the random generator is used to generate numbers ful lling the needed constraints. Once the numbers are generated, the CHR le produced in Section 4.2 is queried. The aim of querying the CHR le is to: { generate the correct output to be able to compare the answer of the student with the correct one. { represent the inputs and output as CHR constraints activating the animation.
Every input is associated with the constraint input/3. Every time, such a constraint is added, its corresponding visual object(s) is added. For instance, in the previous example, every input with value X is associated with X pictures each showing an \apple". Thus every time a constraint for an input is added, CHRAnimation adds the corresponding visual objects to the animation frame resulting in the window shown in Figure 5a showing the two input numbers (2 and 4)1.
The student can then start to add the suggested output. Every time the student presses \Add", the output is incremented. Since the output is a number, it is visualized in the same way. Figure 5b shows the window after pressing the button one time. The output is thus now visualized with one apple. Figure 5c shows the window after setting the output to 6. In this case, six apples are shown. At any point, the student can \check" whether the current output is correct or not. They get the corresponding message in each case. 5.1
Another option for producing interesting interactive animations is to: 1. Link every input number with a normal Jawaa circular node. The text inside the node is its value. Its background is blue. 2. Link the output with a random number of nObjects displaying a group of nodes. Each node is placed in a random position. The text inside each node is also a random number. CHRAnimation has the keyword \Random" that could be utilized in this case. Such nodes have green backgrounds. 1 The y-coordinate speci ed by the teacher is automatically multiplied by the index of the input to have each input on separate line (a) Inputs
(b) Editing output I (c) Editing output II 3. Link the output with a Jawaa circular node with the name (jawaanodeout) displaying the actual output of the rule. It is also placed at a random position.
Its background is green as well. 4. Add an annotation rule linking the output constraint with an onclick command for the object jawaanodeout. Once it is clicked, the changeParam command is activated changing its color to red.1 1 The onclick command was previously added to Jawaa. It allows an action to be performed on clicking a speci ed object. Once the generated CHR le is queried two blue nodes representing the two inputs are shown. In addition, a group of green nodes are shown. Only one of them represents the output. Once the user clicks on the node representing the output value, its color changes to red. If the user clicks on any other node, nothing happens. Figure 6a shows the initial setup with the randomly placed nodes. Figure 6b shows the node with the output being highlighted after the user clicked it.
(a) Randomly placed nodes (b) Highlighted node after clicking
This paper shows how annotation rules could be utilized for generating quizzes to teach mathematics. The tool was able to customize the look of the games according to the inputs of the teachers unlike existing games with static looks and operations (such as: http://www.iboard.co.uk/iwb/Simple-Addition-Stories-721). The tool does not need any computer science background. As seen through the examples, annotation rules were able to produce interactive animations that could be used to teach mathematical rules. In the future, di erent mathematical concepts should be explored and animated. The tool should be linked with different visualization libraries as well. The paper o ered a prototype for a proof of concept. In the future, the tool should be extended in a way to handle di erent kinds of output quizzes in a generic way.