//Lesson One
#Lesson 1: How to draw a symbol
#1-Write flower(25,25,1);.
Each statement in javascript should end with(;).
#2-Click the Run button and see the result on the right side.
#3-When you put the mouse on any symbol, you can see a gray box with three or more variables. for the flower symbol, these are x, y, and size.
#4-Try to change x, y and size to 125, 125, and 2 then run again to see the result.
#5-When you increase the x value the symbol moves to the right and when you increase the y value, the symbol goes down.

Lesson 1,1,2,0

//Lesson Two
//-------------------
#Lesson 2: How to change the Symbol color
#1-On the top left there are the Color and Stroke buttons where you can change the color and the outline of the symbol by choosing the color and then the symbol.
#2-Choose the Coral color on the third row or write color("Coral");
#3-Click the star button or type star(50,50,1);
#4-Click the Run button to see a coral star. Try to change the color and run again.
The color and the stroke statement should be before the star statement.
#5-The stroke statement has three parameters, so you can change the line color, the line width, and the line style to be a dashed or dotted line instead of the solid line.
#6- Write stroke("DarkCyan",5,0); before the star statement and run.
#7-Change the last paremeter of the the strok to 2 stroke("DarkCyan",5,2); and run again

Lesson 2,2,2,0

//Lesson Three
#Lesson 3: How to use Text
#1-To write a text click on the T button on the left or write
text(10,30,"Hello World",1,30);
#2-text(10,30,"Hello World",1,30);
10 is the x position. 30 is the y position, "Hello World" is the text, 1 is the font, and 30 is the font size.
#3-Try to change the text to the following:
text(50,130,"Hello World",2,60);
and click Run.
#4-for online text, write these three lines then click Run
stroke("CornflowerBlue",2,0);
color("White");
text(50,130,"Hello World",2,60);

Lesson 3,3,2,0

//Lesson Four
#How to write if-else statement
#1-write the following if-else statement:
x=3;
if(x==3)
flower(25,25,0.7);
else
star(25,25,1);
#2- Click Run, you should see a flower. Try to change x to 5 and run again. You should see a star.
#3- It is important to put two equal signs in the if condition (x==3). If you put only one equal sign (x=3), the condition will always be true which is wrong.
#4- If you have more than one statement to be executed if the condition is true then all statements should be enclosed in two curly brackets {}
#5- if-statement with curly brackets:
x=3;
if(x==3) {
flower(25,25,0.7);
star(25,25,1);
}

Lesson 4,4,2,0

//Lesson Five
//-------------
#How to write a for-loop
#1- Write the following for loop to draw 5 flowers
for (i=1; i&lt=5; i++){
flower(25,50*i,0.7);
}
#2- The for-loop has three statements
for (statement 1; statement 2; statement 3)
statements 1: set the initial value of the counter variable.
statements 2: has the loop condition.
statements 3: is executed each time to increase the counter variable.
#3- The i variable is the counter in the for-loop.
for (i=1; i&lt=5; i++)
the loop starts from i=1 and it repeats drawing the flower until i=5.
#4- The loop keeps repeating since the condition is true (i&lt=5).
#5- With each iteration, if the condition is true, the value of i is increased by one (i++).
#6- All statements enclosed in the for-loop block or between the curly brackets { } are executed.
#7- The following loop draw 5 flowers and 5 starts:
for (i=1; i&lt=5; i++){
flower(25,50*i,0.7);
star(50,50*i,0.7);
}

Lesson 5,5,2,0

//Lesson Six
//-------------
#How to write a switch statement
#1- Write the following code and click Run. You should see a flower:
a=3;
switch (a){
case 3: flower(50,50,0.7);break;
case 5: star(50,50,0.7);break;
case 7: heart(50,50,30); break;
}
#2- Try to change the value of a to 5 and click Run. You should see a star.
#3- Try to change the value of a to 7, you should see a heart.
#4- Each case statement should end with the break; statement.
#5- Try to add the default statement:
switch (a){
case 3: flower(50,50,0.7);break;
case 5: star(50,50,0.7);break;
case 7: heart(50,50,30); break;
default:circle(150,125,25);
}
#6- Change the value of a to 1 or any
value that is not 3 or 5 or 7. Click Run, You should see a circle.

Lesson 6,6,2,0

//Lesson Seven
//-------------
#Lesson 7: How to use the oval symbol:
#1- Write the following code and run
oval(50,50,35,25,0);
#2- The oval symbol has the 5 parameters:
oval (x, y, width, height, angle);
#3- Try to change the last number to 90.
oval(50,50,35,25,90);
The oval angle should be changed.
#4- Try to change the width and height as follows:
oval(50,150,20,15,90);
You should see a smaller oval shape after clicking the Run button.

Lesson 7,7,2,0

//Lesson Eight
//-------------
#Lesson 8: How to use the Triangle symbol
#1- The Triangle Symbol: Write the following code and run
triangle(50,50,1,0);
#2- The triangle symbol has the 4 parameters:
triangle (x, y, size, flip);
#3- Try to change the last number to 1 and run.
triangle(50,50,1,1);
This will flip the triangle.
try to change it to 2 and 3 for diffrent directions.
#4- You can also change the triangle size by changing the third number from 1 to 2 or to 0.5:
triangle(50,50,2,1);
triangle(50,100,0.5,1);

Lesson 8,8,2,0

//Lesson Nine
//-------------
#Lesson 9: How to use the Arc symbol
#1- Write the following code and run
arc(50,50,40,40,140);
#2- The arc symbole has 5 parameters
arc(x,y,radius,start angle, end angle);
#3- You can change the arc thickness using the stroke function.
stroke("Black",3,0);
arc(50,50,40,40,140);
#4- Try to change the x and y position of the arc
arc(100,100,40,40,140);
#5- Try to change the radius
arc(50,50,140,40,140);
#6- Try to change the start and end angle
arc(50,50,40,20,170);
the start angle on the right while the end angle on the left.

Lesson 9,9,2,0

//Lesson Ten
//-------------
#How to use the Plygon symbol
#1- Write the following code and run
polygon(50,50,25,6,0);
#2- The polygon symbol has 5 parameters
polygon(x,y,raduis, sides,angle);
#3- Try to change the raduis and run. This will change the polygon size
polygon(50,50,50,6,0);
#4- Try to change the polygon sides
polygon(50,50,50,8,0);
polygon(50,150,50,4,0);
#5- Try to change the angle to 45
polygon(50,150,50,4,45,0);
Then add another polygon and run
polygon(50,150,50,4,0,0);

Lesson 10,10,2,0

//Lesson 11
//-------------
#How to use other symbols
#1- The rectangle symbol has 4 paramaters:
rect(x,y,width,height);
rect(50,50,100,100);
#2- the circle symbol has 3 parameters:
circle(x,y,radius);
circle(50,50,40);
#3- The line symbol has 4 parameters:
line(x1,y1,x2,y2);
line(0,0,50,50);
#4- To change the line thickness, the stroke function should be called before the line function
stroke("Crimson",3,0);
line(0,0,50,50);
#5- The star symbol has 3 parameters
star(x,y,size);
star(50,50,0.5);
#6- Several symbols has 3 parameter x,y, and size. these are:
cloud(50,50,0.5);
cloud2(50,50,0.5);
flower(50,50,0.5);
flower2(50,50,0.5);
flower3(50,50,0.5);
heart(50,50,0.5);
bow2(50,50,0.5);
umbrella(50,50,0.5);
bicycle(50,50,0.5);
shirt(50,50,1);
stickBoy(50,50,1);
#7- Some symbols have 4 parameters:
bow(x,y,center color).
bow(50,50,1,"Yellow");
#8- The stickGirl has the dress color parameter
stickGirl(x,y,dress color);
stickGirl(50,50,1,"red");
#9- The type in the gift symbol can be 1 or 2
gift(x,y,type);
gift(50,50,1,1);
#10- The direction in the crescent symbol can be 0 or 1
crescent(x,y,direction).
crescent(50,50,1,0);

#How to use the button symbol
#1- Click the button symbol or write the following code:
x=1;
button(200,25,"Button",
function(){
//write your code when the button clicked here
x+=1;
star(0+x*100,75,1);
});
#2- Run the code. You should see a new star on different x-position whenever you click the button
#3- You can add any code to be executed when the button clicked.
#4- You can change the button color and the text color by adding the following code before the Button symbol
color("CodeGenieBlue");
stroke("White",1,0);

// write a program that prints numbers from 1 to 10
for(i=0;i<10;i++)
{
text(10+i*20,30,i,1,20,1);
}
// write a program that prints even numbers from 1 to 10
for(i=0;i<10;i++)
{
if(i%2==0) text(10+i*20,80,i,1,20,1);
}
// write a program that prints odd numbers from 1 to 10
for(i=0;i<10;i++)
{
if(i%2) text(10+i*20,120,i,1,20,1);
}