Namespace: ex

ex

Base namespace for the CMU Unlocked API.
Source:

Members

(static) chromeElements :object

Object containing all chrome elements:
  • ex.chromeElements.undoButton
  • ex.chromeElements.redoButton
  • ex.chromeElements.resetButton
  • ex.chromeElements.newButton
  • ex.chromeElements.submitButton
  • ex.chromeElements.displayCAButton
  • ex.chromeElements.titleHeader
  • ex.chromeElements.instrButton
  • ex.chromeElements.feedbackButton
Type:
  • object
Source:

(static) data :Object

This object gets filled with all the fields from ex.data.json. An example file:

{
    "meta": {
        "author": "Student",
        "email": "student@andrew.cmu.edu",

        "title": "Example Exercise",
        "description": "An example exercise.",
        "id": "example-id",

        "language": "python3",
        "difficulty": "medium",
        "mainFile": "main.js",
        "instrFile": "instr.html",
        "constructorName": "main",
        "menuDisplayName": "Creating Buttons",

        "requires": {
            "js": ["js/helper.js"]
        }
    },

    "colors": {
        "red": "#cd0a0f",
        "green": "31de21",
    }
}
The above would be loaded such that ex.data.meta is the same object as the one in ex.data.
Type:
  • Object
Source:

(static) defaults :Object

Default style options.
Type:
  • Object
Source:

(static) graphics

Namespace that contains graphics related tools: `ex.graphics.ctx` is initialized to a 2d rendering context (HTML Canvas). ex.graphics.on() works the same as ex.on() but binds to the canvas. ex.graphics.off() works the same as ex.off() but binds to the canvas. ex.graphics.drawEllipse() draws an ellipse.
Source:
Example
var centerX = 0;
var centerY = 0;
var width = 100;
var height = 100;
ex.graphics.ctx.drawEllipse(ex.graphics.ctx,centerX,centerY,width,height);

Methods

(static) alert(message, optionsopt) → {Element112}

Creates an alert popup that automatically fades.
Parameters:
Name Type Attributes Description
message string The message displayed.
options string <optional>
Defaults:
  • color: "yellow"
  • transition: "alert-default"
  • stay: false
  • green
  • red
  • yellow
  • blue
Source:
Returns:
Type
Element112

(static) createButton(x, y, label, optionsopt) → {Element112}

Creates a button element.
Parameters:
Name Type Attributes Description
x Number Pixel x position.
y Number Pixel y position.
label String Display label of the button.
options Object <optional>
Defaults:
  • size: "medium"
  • color: "white"
  • selectable: true
  • keybinding: false
Source:
Returns:
Type
Element112

(static) createCode(x, y, code, optionsopt) → {Element112}

Creates a code element.
Parameters:
Name Type Attributes Description
x Number Pixel x position.
y Number Pixel y position.
code String Source code to display.
options Object <optional>
Defaults:
  • language: "python"
  • width: "auto"
  • size: "medium"
  • selectable: false
Source:
Returns:
Type
Element112

(static) createDropdown(x, y, label, options) → {Element112}

A drop down list, where each list element is bindable to a function. options should contain a field, elements that is an object that maps list labels to functions they perform when that element is clicked.
Parameters:
Name Type Description
x Number Pixel x position.
y Number Pixel y position.
label String Display label of the trigger.
options Object Defaults:
  • color: white
Source:
Returns:
Type
Element112
Example
// Dropdown has the label "Functions"
// with three elements in its list: foo, bar, and baz.
// Clicking on foo or bar logs its name, while clicking on baz
// does nothing.
var drop = ex.createDropdown(10, 10, "Functions", {
    color: "orange",
    elements: {
        foo: function() { console.log("foo") },
        bar: function() { console.log("bar") },
        baz: undefined,
    }
});

(static) createHeader(x, y, text, optionsopt) → {Element112}

Creates a header element.
Parameters:
Name Type Attributes Description
x Number Pixel x position.
y Number Pixel y position.
text String Text to display.
options Object <optional>
Defaults:
  • fontStyle: "bold"
  • size: "medium"
  • selectable: false
Source:
Returns:
Type
Element112

(static) createImage(x, y, src, optionsopt) → {Element112}

Creates an image element.
Parameters:
Name Type Attributes Description
x Number Pixel x position.
y Number Pixel y position.
src String Source of the image relative to main.js.
options Object <optional>
Defaults:
  • width: "200px"
  • height: "200px"
Source:
Returns:
Type
Element112

(static) createInputText(x, y, placeholderopt, optionsopt) → {Element112}

Creates an input box element. The inputSize option is the width of the input box in characters (approximately). When the input box is in focus, document key events are suppressed using event.stopPropagation().
Parameters:
Name Type Attributes Description
x Number Pixel x position.
y Number Pixel y position.
placeholder String <optional>
Placeholder text
options Object <optional>
Defaults:
  • size: "medium"
  • inputSize: 20
Source:
Returns:
Type
Element112

(static) createParagraph(x, y, text, optionsopt) → {Element112}

Creates a paragraph element.
Parameters:
Name Type Attributes Description
x Number Pixel x position.
y Number Pixel y position.
text String Text to display.
options Object <optional>
Defaults:
  • fontStyle: "regular"
  • size: "medium"
  • width: "medium"
  • textAlign: "left"
  • selectable: false
Source:
Returns:
Type
Element112

(static) createTextArea(x, y, placeholderopt, optionsopt) → {Element112}

Creates an text area element. When a text area is in focus, document key events are suppressed using event.stopPropagation().
Parameters:
Name Type Attributes Description
x Number Pixel x position.
y Number Pixel y position.
placeholder String <optional>
Placeholder text
options Object <optional>
Defaults:
  • size: "medium"
  • cols: 20
  • rows: 8
  • resize: true
Source:
Returns:
Type
Element112

(static) height() → {Number}

Gets the exercise container height.
Source:
Returns:
The height in pixels.
Type
Number

(static) insertDropdown(Code, identifier, Dropdown)

This function takes a preexisting dropdown and replaces a string identifier in another preexisting code area with the dropdown. We recommend using values such as '_1', '_2', etc. as the unique identifier. The existing Code Area must contain the unique identifier in a '<span>' element.
Parameters:
Name Type Description
Code object A Code element.
identifier string A unique string in Code to be replaced.
Dropdown object A Dropdown element.
Source:
Example
// Create the code area with an identifier in a <span>
var myPythonCode =
    "def <span>_1</span>():\n" +
    "    print 'cat'";
var code = ex.createCode(10, 10, myPythonCode,
                         { language: "python" });

var drop = ex.createDropdown(10, 10, "Functions", {
    color: "orange",
    elements: {
        foo: function() { console.log("foo") },
        bar: function() { console.log("bar") },
        baz: undefined,
    }
});
ex.insertDropdown(code, "_1", drop);

(static) off(event, handleropt) → {undefined}

Detach a document level event handler.
Parameters:
Name Type Attributes Description
event String A Javascript event type in string form.
handler function <optional>
A function that optionally specifies a handler to remove.
Source:
Returns:
Type
undefined

(static) on(event, handler) → {undefined}

Attaches a document level event handler.
Parameters:
Name Type Description
event String A Javascript event type in string form.
handler function The handler function. Gets passed a Javascript event object.
Source:
Returns:
Type
undefined
Example
// Attach an alert triggered by the return key
ex.on("keypress", function(event) {
    if (event.which == 13) {
        alert("Return pressed.");
    }
});

(static) onTimer(delay, handler) → {Number}

Creates an window timer. Pass in any additional arguments to be passed to the handler.
Parameters:
Name Type Description
delay Number The delay, in milliseconds.
handler function A function that is called every cycle.
Source:
See:
Returns:
An unique identifier that can be passed to .stopTimer().
Type
Number
Example
// Greet someone every 100 milliseconds
function greet(name) {
    console.log(name);
}
var timerID = ex.onTimer(100, greet, "Fred");

// Stop the timer
ex.stopTimer(timerID);

(static) showFeedback(feedback) → {undefined}

Sets the text in the feedback modal and displays it. Sets a variable ex.data.meta.feedback to the parameter feedback.
Parameters:
Name Type Description
feedback string feedback string
Source:
Returns:
Type
undefined

(static) stopTimer(intervalID) → {undefined}

Stops a timer using it's unique identifier.
Parameters:
Name Type Description
intervalID Number The ID returned by .onTimer().
Source:
Returns:
Type
undefined

(static) trigger(event) → {undefined}

Manually trigger any events bound to the document.
Parameters:
Name Type Description
event String [description]
Source:
Returns:
Type
undefined

(static) unload(handler) → {undefined}

Called when the exercise unloads. Only one handler may be bound.
Parameters:
Name Type Description
handler function
Source:
Returns:
Type
undefined

(static) width() → {Number}

Gets the exercise container width.
Source:
Returns:
The width in pixels.
Type
Number

Documentation generated by JSDoc 3.3.2 on Sun Sep 13 2015 08:57:03 GMT-0400 (EDT)