City Frog Manual: Version 1.0

1. Introduction

City Frog is a coding app suitable for children (over 8 years old) and adults. It uses simple commands to navigate a sprite (a sprite is an image on the computer screen) on a road system. The road system is composed of connected square road units (or tiles). Each unit has rules for the sprite to follow. The aim of the game is to program the sprite to reach the destination without violating the rules. The sprite in City Frog is in the form of a frog. Currently City Frog can only run on Android. 

City Frog uses 4 commands to control the activities of the frog: move forward (MF), turn left (TL), turn right (TR), and wait. In addition, there are loop and conditional statements, including:

repeat

if/elif/else, and (note: elif is short for else if)

while statements. I will introduce these statements in detail.

City Frog supports subroutines, recursion (the subroutine calls itself), nested code blocks. In addition, City Frog provides 486 pictures/words for those who are learning English.

There are 7 levels/tutorials/lessons:

  Tutorial 1:  the traffic rules of the game

  Tutorial 2:  basic commands and subroutines

  Tutorial 3:  repeat statement

  Tutorial 4:  if/elif/else statement

  Tutorial 5:  while statement

  Tutorial 6:  function recursion

  Tutorial 7:  challenging coding puzzles

On the main page, there are 4 buttons in dark green (Figure 1): Quit, About, Credits, and Setting. On the right, there are 7 orange buttons for games of different levels. Click the About Button to learn more about City Frog.

Figure 1. The main page of City Frog

2. The Road Rules

Each road unit/tile has rules depicted mostly by one or multiple arrows, which specify the entry and exit directions of the unit. Figure 2 shows a road network consisting of 10 units. Each unit has a set of entry directions and a set of exit directions. For example, unit 3 has two entry directions: “East” and “west” and one exit direction: “south”. If the frog enters unit 3 vertically, it violates the rule. The start unit generally has an arrow-head, meaning the frog can leave but can not enter the unit (Unit 0 in Figure 2)  The terminal unit has one (or multiple) entry direction, but no exit direction (Unit 9 in Figure 2).

Figure 2. Rules of the road unit.

Level 1 is designed to teach these rules that the frog has to follow in the game. No coding is required. The frog moves or turns when the screen gets touched. If the touch position is in front of the frog, the frog moves forward. If the touch position is on the right (left) side, the frog turns right (left). In addition, Level 1 also familiarizes the users with the buttons on the left border of the screen (Figure 3).

Figure 3. The first task of Level 1. 

3.  City Frog Teaches Kids English Vocabulary

City Frog is a vocabulary building App for those whose first language is not English. For this purpose, a prize in the form of an image (with pronunciation) is positioned next to the terminal units. We divide the images into 21 categories, they are:

1) zoo animals,

2) farm animals,

3) birds,

4) insects,

5) sea animals,

6) fruits,

7) shapes and colors,

8) vegetables,

9) food and drinks,

10) body parts,

11) furniture and appliances,

12) sport and games,

13) traffic and transportation,

14) health and medicine,

15) actions and emotions,

16) machinery, tools and electronics,

17) great people,

18) clothes

19) nature and landscapes,

20) school supplies,

21) miscellaneous

To choose your own images from the above categories, tap the Setting Button on the main page, clear the selected vocab, then tap an image to select a category, and finally tap the Pick All Button (or you can tap individual images) and Accept Button.

4. Coding with City Frog

Coding starts from Level 2. The user moves the frog by using commands rather than by tapping the screen. Figure 4 shows the first task of Level 2. We introduce two areas, the command area in the lower right corner, and the coding area in the upper right corner. There are 3 commands: turn left, move forward and turn right. The coding area is blank at the beginning. You need drag commands from the command area to the coding area to form a series of instructions to navigate the sprite to the desired road unit. This process is called coding. Deletion of a code block is very simple, just drag the code block down. 

When the program is ready, tap/click the green flag to run the program (tap/click again to terminate the program). Note that the coding area can be moved by dragging the green flag; the game scene (road system) can be moved by dragging the frog, and the picture can be enlarged by tapping/clicking on the prize picture.

Figure 4. A screenshot of Task 1 of Level 2 after coding.

Level 2 also introduces a very important concept in coding: subroutine (routine, function, procedure or subprogram). City Frog supports 3 subroutines and they are referred to as P1, P2 and P3, and from now on the main program is referred to as P0. 

An example of subroutine is shown in Figure 5. This example has one subroutine (P1) with four “move forward” blocks. P1 is called twice by P0, so the frog moves 8 steps forward. To add P1 to the main program (P0), drag and drop it to the P0 area just like we do with other commands.

Figure 5. An example of coding with a subroutine.

In short, subroutines can be thought of as mini-programs which are packed as units and perform specific tasks. The use of subroutines generally reduces the size of the code, making the program clearer and easier to maintain. Later we will see that subroutines can be recursive, meaning that a function such as P0 can call itself.

5. The Repeat Statement

Level 3 introduces the repeat statement, which repeats a block of code (the loop body) N times. Each time we execute the loop body, we call it an iteration. We need to mark the loop body specific to a repeat statement. The computer language Python uses indentation to define the loop body. Most languages (such as C++, Java, Kotlin) put loop bodies in {}. In City Frog, we use a color bar to mark the loop body specific to a repeat statement (Figure 6). 

Figure 6. the repeat statement.

In the example shown in Figure 6, we need to advance the sprite 6 steps, and for this, we use two commands, the “repeat” command and the “move forward” command. Furthermore, we need to mark both commands, and specify the number of repetitions. We provide two tools: a paint brush to color the code blocks, and a number tool to specify the number of repetitions. Just drag the paint brush and drop it on the code you want to color. Tap the number icon until the number shown reaches the number you want and drag the icon to the repeat statement. To remove the color from a code, drag the code up and drop it. 

Let's look at another example (Figure 7). The frog needs to make three left turns (move forward, turn left, move forward) to reach its destination. If there is no loop statement, 9 code blocks are needed to complete the task. It can be seen that the repeat statement requires coders to be able to identify some common patterns in a task.

Figure 7. This task contains a regular pattern of move-turn-move.

6. Decision Making

In many situations, we do not know what to do until we reach a certain point in a task. For example, when we drive a car and reach an intersection, we may stop or just go straight depending on the signal we see.

In this tutorial, we introduce the if/elif/else statement to decide what actions to take based on different conditions. The if-statement has a conditional expression and specifies a block of codes (the if-block) which is executed when the expression is true. We use the color code to mark the if-block.

An optional else statement may follow the if-body and specifies a block of code to be executed when the condition in the if-statement is false.

An elif (short for else if) statement is used to check for multiple expressions. An if statement may have multiple elif statements. If the condition for if is False, it checks the condition of the next elif block and so on. If all the conditions are False, the body of else is executed.

The syntax of the if/elif/else statement is:

if   expression 1: { DO SOMETHING }

elif expression 2: { DO SOMETHING }

. . 

else: { DO SOMETHING }

We provide the following basic road rules for the control of the frog actions (Figure 8):

(1) left turn allowed/prohibited

(2) right turn allowed/prohibited

(3) forward movement allowed/prohibited

(4) road unit is/not terminated (from level 5)

Figure 8.

The frog can only see the rules of the current unit or the unit ahead. This will produce 16 combinations of conditional expressions.

Figure 9 shows an example of if statement. There is a traffic light in front of the frog, which switches between “forward motion allowed” and “right turn allowed”. The frog is required to reach a butterfly. Therefore, if the signal is “right turn allowed”, the frog must turn right.

Figure 9. The frog is required to reach a butterfly.

Finally, let's look at another example shown in Figure 10. We will not explain this example, since it is quite simple for users.

Figure 10. An example of the if-else pair

So far, the examples we have given are very simple. As the road system becomes more complex, you will find that coding is absolutely challenging.

7. While Loop

Starting from Level 5, we introduce the while statement, which can be thought of as a repeating if-statement: the computer iterates over a list of statements (the loop body) as long as the condition of the while statement is true. Namely, the Boolean expression is tested when execution first reaches the while statement. If the expression is true, the execution enters the loop body. After one iteration, check the test expression again. This process continues until the conditional expression is false.

Let's look at an example (Figure 11), where the frog is required to repeat the forward command until the end unit is reached. We can use the repeat statement to accomplish this task. However, if the length of the road differs, we need to specify different number of iterations. The use of the while statement handles this situation better than the repeat statement.

Figure 11. Example of the while statement

Next, we introduce the wait command. Basically the wait command tells the frog to do nothing, and the execution goes to the next command. Let's take a look at how to use this command.

In the game shown in Figure 12, the pig icon on the left is the target. There is a traffic light in front of the frog. The light alternates between two states: left turn allowed and right turn allowed. Obviously, if the signal is in the "right turn allowed" state, the frog has to keep waiting.

Figure 12. The use of the wait command

Now let's summarize the commands/statements of City Frog:

move forward,

turn left,

turn right,

wait,

repeat

if

elif

else

while

These 9 commands and 16 Boolean expressions can solve very complex problems. Anyone with programming experience knows that programming is fun and challenging when loops and Boolean expressions are used together. Let's look at an example shown in Figure 13. In this game, there are three traffic lights, all of which alternate in two states: "forward motion allowed" and "left turn allowed". 

Figure 13. An example of how the decision make commands solve complicated problems.

A task may have multiple solutions. Let's see the task shown in Figure 14a. One of the solutions requires you to use 3 statements to write a program with 5 code blocks (Figure 14b), and the other solution requires you to use 4 statements for a program with 4 code blocks (Figure 14c).

Figure 14. (a) the task may have multiple solutions, try to give the answers to (b) and (c)

8. Recursion

Level 6 is about function recursion, a common mathematical and programming concept. Function recursion means that a function calls itself. Recursion provides a way to break complicated problems down into simple problems which are easier to solve.

Recursive functions can run into the problem of infinite recursion, meaning the function never stops calling itself. Therefore, every recursive function should have a halting condition, which is the condition where the function stops calling itself.

Let's take a look at the following example (Figure 15). The program contains three code blocks. First, the frog is advanced 1 step, then the current road rule is checked and if it is “forward motion allowed”, start P0 again. Otherwise, the program reaches the end. Basically, recursion is similar to an infinite loop statement. When combined with if statement, recursion acts as a conditional loop.

Figure 15. Example of coding with recursion

Look at the three code blocks in the upper right corner of Figure 15. The main program P0 calls itself, this is a recursion. When combined with the if statement, recursion functions as a conditional loop, just like a while statement. Let's look at two more examples below (Figure 16).

Figure 16. Multiple solutions using recursion for the same task

So far, all the commands of City Frog have been introduced. Level 7 gives some tasks for the users to solve. For example, Figure 17 is an example showing how a code block is nested in another code block.

Figure 17. The task is the same as that in Figure 13, but this example shows an if code block is nested in a while code block

9. Setting

The Setting sets the speed at which a program is run, the vocabulary used for the gift images and the sound. Tap the Setting Button, the user will be brought to a new page as in Figure 18.

Figure 18. Setting of the City Frog Game

9.1 Choose your own vocabulary

To select your own vocabulary, tap the Clear Button to clear selected items, then tap the image category you want. For example, if you want the Insect vocabulary, scroll down and tap the Insect Image Button, the available insects will be shown as:

Figure 19. Images under the Insect Category

You can tap individual images for images you want or just tap the Pack All Button to select all images. Tap Done Button to go back.

9.2 Turn on the Solutions

If you turn on the Solutions, a new button will appear in the coding games and you can load the solution to each task by tapping this button. These solutions are tested, but if you find better solutions, send me an email, so I can incorporate the solutions in the next version of City Frog.

9.3. Change the Speed of the Program Execution

Tap the number 600 to drop down more options and select. The smaller the number, the faster of the execution.

9.4. Turn on/off the sound

If the sound is off, all sounds are off. 

Finally, tap the Done Button to return to the main page.

The current version of City Frog does not deal with variables. In the near future, we will introduce variables. In addition, we also plan to rewrite City Frog in Swift so that Apple users can also try City Frog.