Output Box
Results Box
Code Editor
Review Quiz
creates a link to another web page. gives the address of the web page. is set to '''_blank''' to show the linked page in a new tab when the user clicks it.
is put around things like news or magazine articles and blogs or forum posts.
used to play audio files. makes the audio play as soon as the page loads. displays audio player controls on the page. makes the audio play from the start as soon as it ends.
is an optional element that goes right after the head element.
puts text on separate lines.
explain complicated code, hide code to be shown later and remind you of things to do. They are not shown on the web page.
adds a caption to a figure
is put around content like images, maps and videos that are important to the meaning of the page but can be positioned anywhere without changing the meaning. The figcaption is optional.
normally contains information about the author, copyright data or links to related documents.
is an optional tag put right after the html start tag; contains tags that are not shown on the web page, e.g. title, link and meta tags.
usually contains the logo and navigation links.
is an optional element that is put after the doctype and surrounds the rest of the code for the web page.
represents a thematic break between paragraphs; displayed as a horizontal line.
adds an image to a web page. gives the address of the image. describes it to search engines and blind people. adds a tooltip. sets the height of the image. sets the width of the image.
is used to show another web page on your page. sets the page to be displayed in the iframe. sets the height of the iframe. sets the width of the iframe. is set to 0 to hide the border around the iframe.
is used to add items to an ordered (<ol>) or unordered (<ul>) list.
is used to link an HTML document to a CSS stylesheets. sets the type of link sets the address of the file to link to
tags give information about a web page; they are put in the head section of the code gives the type of information contains the information

For example: meta charset sets the character encoding for the web page. meta description describes your page to search engines. meta viewport scales a page so that it looks good on mobile devices.

is put around a group of links to other pages in a web site.
creates a numbered list.
is put at the start of each paragraph of text.
contains a section of a document, typically starting with a heading element.
is used to specify media files for audio and video elements. 2 source elements are needed because not all browsers support the same formats.
marks important text that is usually displayed with a bold font.
contains CSS style rules on an HTML page.
defines a span of text that should be displayed lower and smaller than the main text.
defines a span of text that should be displayed higher and smaller than the main text.
creates a table tr tag creates a new row td starts each cell th starts each header cell rowspan and colspan create cells that span more than 1 row or column.
sets the text that appears on the web browser tab, and is used in search-engine results, and when a page is added to favorites.
creates a bulleted list.
used to play video files. displays a video player on the page.
adds a rule that styles anchors the user hovers over.
adds a rule that styles elements the user hovers over.
adds a rule that styles elements the user hovers over.
is a shorthand for setting background image and background color.
sets the background color.
sets the background image.
adds a border.
sets the color of a border.
sets the type of border on a table.
sets the radius for borders with rounded corners.
sets the style of a border.
sets the width of a border.
sets the distance from the bottom for absolute and fixed position elements.
adds a box shadow. The order of the values is offset x, offset y, blur radius, spread radius, color.
sets the color of text.
sets the number of columns.
change the display type. elements drop below the previous element. Width and height are used. elements are displayed next to eachother if there is space. Width and height are ignored. elements are displayed next to eachother if there is space. Width and height are used. elements are not displayed on the page.
sets the generic font family.
sets font weight.
sets font size.
sets height of an element.
sets the distance from the left for absolute and fixed position elements.
adds a gradient background fill.
sets the style of the list bullet point.
sets the transparency of an element.
sets what happens to content that doesn't fit in an element. shows the extra content. hides the extra content. makes scroll bars appear when there is too much content. makes scroll bars always visible; they and are enabled only when there is too much content.
adds space between the content and border. padding is shorthand for setting padding-top, padding-right, padding-bottom and padding-left
change the display type. render in order as they appear in the document. elements are positioned relative to its first non-static ancestor element. elements are positioned relative to the browser window. elements are are positioned relative to its normal position. They are shifted using the left, right, top and bottom properties
adds space around the outside of an element. margin is shorthand for setting margin-top, margin-right, margin-bottom and margin-left
sets the distance from the right for absolute and fixed position elements.
set the text alignment.
set the text decoration.
adds a shadow to text. The order of the values is offset x, offset y, blur, color. Color can be first or last.
sets the distance from the top for absolute and fixed position elements.
controls the appearance of selection. none makes the element appear as if it can't be selected. text the text can be selected. all (in an HTML editor) makes a double-click in sub-elements select the highest ancestor with this value. element (supported in Firefox and IE) enables selection to start within the element but be contained by the bounds of that element.
controls the vertical alignment of elements. baseline aligns the box baseline with the parent baseline. top aligns the box top to the parent top. bottom aligns the box bottom to the parent bottom. middle aligns the vertical midpoint of the box, with half the x-height(height of lowercase x) of the parent.
sets width of an element.
displays a message box with an OK button. the text to display.
joins the elements of an array into a string and returns it. The elements will be separated the specified separator. the separator. The default separator is a comma {{,}}.
property that stores the length of the array. E.g. {{[1, 2, 3, 4].length}} is '''4'''
adds items to the end of an array and returns the new length of the array 1 or more items to add to the end of the array
sorts an array sets the sort order. If left out, the array items are converted to strings and sorted alphabetically.
terminates the current loop and transfers program control to the statement following the loop
displays a message and returns true if OK was clicked and false for cancel. the text to display.
displays messages to check a program works correctly the text to display
runs a group of statements a specific number of times It has 3 optional expressions, surrounded by ( ) and separated by ;, followed by statements that are run in the loop. The 1st expression is typically used to create a counter variable (which can be accessed both inside and outside the loop) Next is the loop condition. If this expression is true the statements inside the loop are run. If the expression is false, execution skips to the statement after the for loop.
a named reusable section of code that does a specific task and may return a value
Runs a statements if a specified condition is true.
is a special value that is returned when a number is divided by 0
returns true if a value is an illegal number (not-a-number). the value to be tested.
returns the absolute value of a number a number.
returns the smallest integer greater than or equal to a number a number.
returns the largest integer less than or equal to a number a number.
Represents the ratio of the circumference of a circle to its diameter, i.e. approximately 3.14159
Returns base to the power of exponent (i.e. baseexponent)
Returns a random floating point (decimal) number from 0 (inclusive) up to but not including 1, which you can scale to a desired range
returns the next highest integer if the fractional protion of the number is .5 or greater; otherwise it returns the next lower integer a number.
returns the square root of a number a number.
is a special value that is returned when the Number function tries to convert a string that is not a number.
is a special value meaning no value.
converts a value to a number; returns NaN if the value can't be converted to a number the value to be converted.
formats a number to fixed number of decimal points The parameter sets the number of digits to appear after the decimal point; this may be a value between 0 and 20 inclusive. If this parameter is ommitted, it is treated as 0
formats a number to a specified precision The parameter sets the number of significant digits
asks the user a question the question to ask the user the text shown as the default answer returns the response as a string, or null if the user clicks cancel
is a variable that is only accessible inside the class it was created in.
is a variable that can be accessed by any piece of code.
is a property that stores the number of characters in a string. E.g. 'CodeAvengers'.length is 12
returns a single character in a string an integer between 0 and 1 less than the length of string; it specifies the character to return E.g. {{'CodeAvengers'.charAt(0)}} is '''C''', and {{'CodeAvengers'.charAt(3)}} is '''e'''
coverts a string to lowercase E.g. 'CodeAvengers'.toLowerCase() is codeavengers
converts a string to uppercase E.g. 'CodeAvengers'.toUpperCase() is CODEAVENGERS
returns the index within a string object of the first occurrence of the specified value, starting the search at fromIndex; returns -1 if the value is not found. a string to search for. the location within the calling string to start the search from. It can be any integer between 0 and the length of the string. The default value is 0. E.g. 'CodeAvengers'.indexOf('e', 4) is 6
splits a string object into an array of substrings. a sequence of 1 or more characters used to separate the string. an integer specifying a limit on the number of substrings to return. The function splits normally but shortens the returned array to at past .
returns a substring from indexA up to but not including indexB a number between 0 and the length of the string a number between 0 and the length of the string; if omitted, substring gets characters from indexA to the end of the string If indexA equals indexB, substring returns an empty string If either parameter is less than 0 or is NaN, it is treated as 0. If either parameter is greater than the string length it is treated as if it were the string length. If indexA is larger than indexB, the effect is as if the 2 parametrers were swapped E.g. 'CodeAvengers'.substring(4) is Avengers and 'CodeAvengers'.substring(5, 8) is ven
creates a variable, optionally giving it an initial value. The variable name can consist of letters, numbers, $ and _, but can\'t begin with a number.
runs a group of statements while a test condition is true The loop condition is checked before each pass through the loop. If the condition is true, the statements inside the loop are run. When the condition is false, the run continues with the statement after the loop.
adds numbers and joins strings 4 + 8 equals 12 '4' + '8', 4 + '8' and '4' + 8 are equal to '48'
add 1 to the value of a variable
increase the value of a variable
subtracts numbers, e.g. 32 - 24 equals 8
subtract 1 from the value of a variable
decrease the value of a variable
multiplies numbers E.g. 4 * 8 equals 32
divides numbers E.g. 16 / 2 equals 8
means equal to; a == b is true if a and b have the same value. E.g. age == 15 is true if age is 15
means not equal to; a != b is true if a and b have different values. E.g. code>age != 0 is true if age is any value except 0
means AND; a && b is true if both a and b are true.
means OR; a || b is true if either a or b or both are true. E.g. age == 5 || age == 10 is true if age is 5 or 10 The | key is normally above the Enter key.
This is just a test.
is a property that stores the hue of the color as value in degrees between 0 and 360.
gets a random color.
pauses the code when the browsers debugging tools are active.
gets the distance the mouse moved since the last time that mouse event was triggered.
gets the position of the mouse when the mouse button was last clicked.
is a property that stores which mouse button was clicked represented by a number. 0 = left mouse button. 1 = middle mouse button. 2 = right mouse button.
is a property that stores additional information about the event. For mouse click events, it stores the number of clicks. For mouse wheel events, it stores the distance that the wheel rolled.
gets the item at the position of the mouse when the event occurred. It will contain {{null}} if there was no item there.
gets the position of the mouse when the event occurred.
creates a bar that slowly empties over time. the amount of time in seconds that it takes the bar to empty completely.
adds time to the bar. the amount of time in seconds to add to the bar. A negative time value will take time off the bar.
checks if the bar is active. Returns true if it is active. Returns false if it is not.
tells the bar to reset.
tells the bar to restart. Works the same as calling reset followed by start.
tells the bar to start emptying.
tells the bar to stop emptying.
creates a button. the text to be displayed. distance of the left side of the button from the left of the canvas. distance of the right side of the button from the right of the canvas. function that gets run when the button is clicked.
gets a random number. specifies the random number range. specifies the random number range. If no parameters are given then it returns a number between 0 and the width of the canvas. If just 1 number is given then it returns a number between 0 and the given number. If 2 numbers are given then it returns a number between num1 and num2.
creates a score object to keep track of and display a score. the text label for the score object. the position of the score object. Should be an array (e.g. [x, y]).
add points to the current score. the number of points to add to the score. The default value is 1.
gets the current score.
sets the score back to 0.
sets the background color. desired background color.
sets the background image. the background image source. the desired width of the image. the desired height of the image. If no width or height are given then the image will be drawn at its original size. If a width is given but not a height then height is set equal to width.
returns a shuffled version of a given array. array to be shuffled.
creates a text display area. the text you want to display. the position of the text area. Should be an array (e.g. [x, y]). the text alignment. Options are 'left', 'right', or 'center'.
stores the text for the text display area.
creates a text display area. the text you want to display. distance of the left edge from the left of the canvas. distance of the top edge from the top of the canvas. the function that gets run when the text area is clicked on. If the x and y positions are not specified then the text area will default to the middle of the canvas.
stores the color of the text.
stores the font family of the text.
creates a countdown timer in the top left corner of the canvas. the starting value of the timer. the function that will get run when the timer runs out.
gets the amount of time (in seconds) since the timer was started.
checks if the timer is running. Returns true if it is running. Returns false if it is not running.
stores the function that will get run when the timer runs out.
starts the timer.
stops the timer.
if the HitResult has a type of 'pixel', this property refers to the color of the pixel on the Raster that was hit.
stores the bounding rectangle of the item.
brings the item in front of all the other items.
creates a copy of the item.
specifies an array containing the dash and gap lengths of the stroke. The first element sets the dash length and the second sets the gap length.
adds an item to a group of items. the item to be added to the group.
performs a hit test on the item at the given point. the point to check for a hit. Returns a {{HitResult}} object containing information about what was hit or {{null}} if nothing was hit.
stores the function that handles mouse down events for the item.
stores the function that handles mouse drag events for the item.
stores the function that handles mouse move events for the item.
stores the function that handles mouse up events for the item.
adds transparency to items and is set with a value of 0 to 1. 0 is fully transparent, 1 is fully opaque (not transparent)
is a property that stores the pivot point of the item. The pivot point is the point around which all transformations hinge. The default value is the center of the bounding rectangle.
is a property that stores the current position of the item.
removes the item.
is a property that stores the current rotation angle of the item.
is a property that stores the current scale factor of the item.
is a property that stores whether or not the item is selected.
sends the item behind all the other items.
is a property that stores whether or not the item is visible.
checks if the given key is currently being pressed. the key to check. Returns true if the key is pressed, otherwise it returns false.
contains information about the keyboard event.
contains the character that caused the keyboard event.
contains the key that caused the keyboard event.
indicates which special keys are pressed down by use of boolean values. For example, if the option key is pressed down then {{KeyEvent.modifiers.option == true}}. The special keys are: control, option, command, shift, capsLock and space.
handles animations. details of the frame event including the total amount of time since the first frame event.
handles mouse down events. details of the mouse down event including the point.
handles mouse drag events. details of the mouse drag event including the point.
handles mouse move events. details of the mouse move event including the point.
handles mouse up events. details of the mouse up event including the point.
adds a point to the path. the new point to be added on the end of the path.
creates a circle. distance of the circle center from the left of the canvas. distance of the circle center from the top of the canvas. radius of the circle.
a property that stores whether or not the path is closed. If closed, the first and last segments will be connected.
the fill color of the shape.
contains the first point of the path object.
contains the last point of the path object.
creates a rectangle. distance of the left edge from the left of the canvas. distance of the top edge from the top of the canvas. width of the canvas. height of the canvas.
creates a star. distance of the star center from the left of the canvas. distance of the star center from the top of the canvas. number of points. radius of the outer part of each point. radius of the inner part of each point.
the color of the outline of the shape.
the width of the outline of the shape.
represents a 2-D point on the canvas. It also represents a 2-D vector object. x coordinate. y coordinate.
the vector's angle from the x-axis in degrees.
the length of the vector.
modifies the length of the vector without changing its angle. defines the length of the normalized vector. The default value is 1.
creates an object for displaying text. distance of the text from the left of the canvas. distance of the text from the top of the canvas.
represents an image. the file path of the image. distance of the image center from the left of the canvas. distance of the image center from the top of the canvas.
gets the average color of the raster in the specified area. the rectangle which specifies the area to be averaged.
resizes the image. the horizontal scale factor. the vertical scale factor; if omitted, scaleHeight will be set to the same as scaleWidth. if the horizontal scale factor is negative, then it will flip the image horizontally. if the vertical scale factor is negative, then it will flip the image vertically.
creates an invisible rectangle. starting corner of the rectangle. opposite corner of the rectangle.
creates a circle. distance from the center of the circle to the left of the canvas. distance from the center of the circle to the top of the canvas. the radius of the circle.
creates an ellipse. distance of the left side of the ellipse from the left of the canvas. distance of the top of the ellipse from the top of the canvas. the width of the ellipse. the height of the ellipse.
the radius of the circle.
creates a rectangle. If you give a radius then the rectangle will have rounded corners. distance of the left side of the rectangle from the left of the canvas. distance of the top of the rectangle from the top of the canvas. the width of the rectangle. the height of the rectangle. the radius of the rounded edges.
the text of the item.
the size of the font for the item.

Keyboard Shortcuts

Next task Ctrl+Space
Run Ctrl+Enter
Check Ctrl+Shift+Enter
Reset Ctrl+Backspace
Undo Ctrl+Z
Redo Ctrl+Y
Cut Ctrl+X
Copy Ctrl+C
Paste Ctrl+V
Find Ctrl+F
Find & replace Ctrl+R
Find & replace ALL Ctrl+Shift+R
Notepad
Toolbox
Index
Reference
Want to help get Code Avengers in your language? Contact translation@codeavengers.com
Tasks
Course Name
Course Name
Lessons
20
Time
Bonus
1
2
3
4
5
Lessons
20 / 20
Tool
Code
Notes
Schedule
Feedback
Question
Leaderboard

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
CodeAvengers');

This is a test paragraph');

  • Item 1
  • Item 2
  1. Item 1
  2. Item 2
'); CA icon

Our other web sites

Fern- an app to help you learn to read Spanish.

Mouse Master- A fun game for all ages that helps you develop your skills with a mouse.

Mj Software- Download the FREE cricket scoring application I started creating in high school.