The Sandbox

00:00

Welcome to the sandbox! Here, you can try out our editor and visualizer to get a feel for the platform.

To get you started, we've provided you with a program that removes duplicates from an ArrayList. Now, why not try modifying it to remove only duplicates of even numbers?

If you like what you see, please sign up and try a few challenges!

Edit the values of the function's parameters below.

ArrayList nums:

Jump to: ArrayList | Stack | Queue | Set | Linked List | String


Syntax Guide

Our syntax is similar to JavaScript, but with the following exceptions:

  • Nested data structures are not supported (e.g. Arrays of Queues)
  • Recursion and helper methods are not supported.
  • Each statement must end with a semicolon.
  • Strings must be declared using "", not ''.
  • Globals are not supported. The keyword "var" is required to declare variables.

Printing: To print to the browser console, use console.log().

Breakpoints: To add a breakpoint, click the desired line number at the left of the editor. To remove a breakpoint, click the breakpoint or press Clear to remove all breakpoints.


ArrayList

An ArrayList is a list of elements similar to a JavaScript array or a Java ArrayList: it is variable-length and zero-indexed.

To iterate over an ArrayList, use either of the following:
  • A traditional for loop: for (var i = 0; i < arr.length; i++)
  • A for-in loop: for (var elem in arr)
Methods:
  • ArrayList(elems): Initializes and displays a Visual Array containing the elems in elems. Usage: var array = new ArrayList();
  • add(val, i): If the optional parameter i is supplied, adds val to the array at index i. Otherwise, adds val to the end of the array.
  • remove(i): Removes the element at index i from the array.
  • get(i): Returns the element at index i of the array. If i is out of bounds, returns undefined.
  • set(i, val): Sets the element at index i to val. If i is out of bounds, returns undefined.
  • length(): Returns the number of elements in the array.
  • indexOf(val): Returns the index of the first occurrence of val in the array, or -1 if the array does not contain val.
  • []: Use arr[i] to get or set the ith element of ArrayList arr.

Stack

Methods:
  • Stack(): Initializes and displays an empty Visual Stack. Usage: var stack = new Stack();
  • push(val): Pushes val on top of the stack.
  • pop(): Removes the element at the top of the stack and returns it.
  • peek(): Looks at the object at the top of the stack without removing it from the stack.
  • isEmpty(): Returns true if the stack contains no elements and false otherwise.

Queue

A first-in-first out (FIFO) data structure. Supports an arbitrary number of elements.

Methods:
  • Queue(): Initializes and displays an empty Visual Queue. Usage: var queue = new Queue();
  • push(val): Pushes val onto the end of the queue.
  • pop(): Removes the element at the front of the queue and returns it.
  • peek(): Looks at the object at the front of the queue without removing it from the queue.
  • isEmpty(): Returns true if the queue contains no elements and false otherwise.

Set

To iterate over the elements in a Set, use a for-in loop: for (var elem in set)

Methods:
  • Set(): Initializes and displays an empty Set. Usage: var set = new Set();
  • add(val): Adds val to the set.
  • remove(): Removes val from the set if it is present.
  • contains(): Returns true if the set contains val and false otherwise.
  • size(): Returns the number of elements in the set.
  • isEmpty(): Returns true if the set contains no elements and false otherwise.

Linked List

An ordered list of Node objects. Nodes contain two attributes: val (the value) next (a reference to the following node). The head of the list is accessible via the head property.

The syntax to create nodes is as follows: Node n = {val: x, next: y};

Here is an example of adding a node with value 5 to the end of the linked list mylinked:
    Linked mylinked = new Linked([1,2,3,4,5,6,7,8]);
    Node curr = mylinked.head;
    while (curr.next != null) {
      curr = curr.next;
    }
    Node n = {val: 5, next: null};
    curr.next = n;


Methods:
  • Linked(elems): Initializes and displays an empty Visual Linked List containing the elems in the array elems. To begin with an empty list, omit the array parameter. Usage: var linked = new Linked();

String

As in JavaScript, strings in Aesop Academy can be either primitives or objects. Strings are always declared using string literal syntax:
var str = "hello world";
but also support common JS string methods, as detailed below.

Full list of methods: Mozilla Developer Network's String Reference

Common methods and properties:
  • []: Use str[i] to get or set the ith character of the string str.
  • charAt(index): Returns the character at the specified index index.
  • substr(index, numChars): Extracts the characters from a string, beginning at specified start position index, and through the specified number of characters numChars.
  • substring(start, end): Extracts the characters from a string, between the two specified indices start and end.
  • indexOf(val): Returns the index of the first occurrence of val in the string, or -1 if the string does not contain val.
  • lastIndexOf(val): Returns the position of the last found occurrence of val in the string, or -1 if the string does not contain val.
  • length [property, not method]: Returns the number of characters in the string.

How do I use the visualizer?

  • Type a solution to the problem, then hit Visualize to execute your code line-by-line.
  • Alternatively, click Step to step through line-by-line.
  • Click Clear to clear your code, the visualization, and all breakpoints.
  • Once you're satisfied with your code, click Check to check your solution (not available in the sandbox).
  • To change the values of the function's parameters, use the inputs above the editor.

What is a ArrayList/Stack/Queue/Linked?

Our platform uses a custom API that provides visual versions of the array, stack, queue, and linked list data structures common in programming. (The "V" stands for "Visual.") To see what methods these objects have available, check out the API tab.


Why am I getting an error when I press Visualize?

There are a number of possible reasons:

  • Our editor has its own unique set of syntax rules. If your code does not conform to these rules, errors may result. See the API tab to view a syntax guide.
  • Your code may be performing an illegal operation. For example, trying to access arr[5] on an array of length 4 will result in an Index out of Bounds error.
  • You may have run into a bug. Our platform is still a work in progress, so our editor isn't foolproof yet. If you believe you have run into an editor bug, feel free to e-mail us at aesopacademy (at) gmail (dot) com.

How do I print to the console?

The console you see below the Visualizer is a system console that displays the currently executing line of code.

If you would like to use print statements, use console.log, as in normal JavaScript, and check your browser console for the result.

Console
Execution Speed