Skip to content

WISE4 Developer Documentation

Jump to bottom Edit New page
hirokiterashima edited this page Nov 2, 2012 · 100 revisions

# Table of Contents # Quick Links: [ [Authoring Tool](#wiki-authoringToolTOC) ] [ [Grading Tool](#wiki-gradingToolTOC) ] [ [Portal](#wiki-portalTOC) ] [ [VLE](#wiki-vleTOC) ] [ [FAQ](#wiki-faq) ]

Authoring Tool

Grading Tool

Portal

VLE

FAQ




## VLE ## The VLE (Virtual Learning Environment) is where students learn information and answer questions.
### Branching ### --- **Description**

Important folders/files and the important functions/variables in them

How the code works


### Component Loader ### --- **Description** Specifies which components to load for the vle, grading, or authoring views. Some examples of components are 'core', 'config', 'vle', 'hint', 'annotations'. Each component specifies what variables, events, and methods it will use and can specify what needs to be done to initialize the component. Each component also has an entry in the [Script Loader](#wiki-scriptLoader) that specifies which .js files need to be loaded for that component.

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/util/componentloader.js
The file where all the components are defined and also where the views specify which components they use.
views - an object that contains the views and which components each of those views use
components - an object that contains all the components and where their variables, events, methods, and initialization are defined
variables - where a component specifies global variables that will be available in the view
events - where a component declares events so that the Event Manager knows what events to listen for
methods - where a component declares any global functions
initialization - where a component performs any necessary initialization when the view starts up. This is where event handlers subscribe to events.
listener() - the function that loads components
initializeComponent() - calls the initialize functions for a component
loadComponent() - loads the variables, events, and methods for a component and also tells the scriptloader to load the .js files for the component

vlewrapper/src/main/webapp/vle/util/scriptloader.js
The file that loads the necessary .js files for a given component. The scriptloader and componentloader work together to start the view up.
bootstrap() - the function that loads all the bootstrap .js files
listener() - the function that listens for 'scriptLoaded' events

vlewrapper/src/main/webapp/vle/environment/environment.js
The file that creates a view.
startView() - tells the componentloader to load a view

How the code works
The Component Loader is created when the Script Loader loads the bootstrap scripts which includes the componentloader.js file. When the componentloader.js file is loaded, the componentloader is created as a global variable.

Here is how the components are loaded
Depending on which view you are loading, you will load vle.html, author.html, or gradework.html and in that file, the window.onload() or loaded() function will call bootstrap()

scriptloader.bootstrap(this, bootstrapListener);

this function will load the bootstrap .js files by calling

scriptloader.loadScripts('bootstrap', win.document, 'bootstrap', win.eventManager);

when the last bootstrap script is loaded, the listener() function in scriptloader will receive the 'scriptLoaded' event and check that all the scripts for the bootstrap have been loaded and then fire a 'scriptsLoaded' event

if(queue.length<1){
	resetTimer();
	eventManager.fire('scriptsLoaded', [callerId, currentName]);
}

the bootstrapListener in the .html file will receive the scriptsLoaded event and call the startView() function

env.startView('vle');

the startView() function calls the loadView() function

componentloader.loadView(window[name], view, document, compress);

the loadView() function calls the loadComponent() function to load the first component in the array of component names specified for the view you are loading. loadComponent() inserts all the variables, events, and methods into the view and also tells scriptloader to load all the .js and .css files for that component.

loadComponent(comp[0], comp[1], comp[2], comp[3], comp[4]);

when all the scripts from the first component are loaded, the scriptloader will fire the 'scriptsLoaded' event

eventManager.fire('scriptsLoaded', [callerId, currentName]);

the listener() function in the componentloader will receive the 'scriptsLoaded' event and fire the 'loadingComponentComplete' event

eventManager.fire('loadingComponentComplete', [args[1]]);

the listener() function in the componentloader receives the 'loadingComponentComplete' event and calls the initializeComponent() function. the initializeComponent() function calls all the functions in the initialize field of the component.

initializeComponent(args[0]);

at the end of the initializeComponent() function, the 'componentInitializationComplete' event is fired

eventManager.fire('componentInitializationComplete', [name]);

the listener() function in the componentloader receives the 'componentInitializationComplete' event and calls loadComponent() on the next component

loadComponent(comp[0], comp[1], comp[2], comp[3], comp[4]);

this continues until all the components for that view are loaded. once all the components are loaded, the 'loadingViewComplete' event is fired

eventManager.fire('loadingViewComplete', [args[0]]);

### Config ### --- **Description**

Important folders/files and the important functions/variables in them

How the code works


### Connection Manager ### --- **Description** The Connection Manager is what we use to make almost all AJAX requests to the server. Whether we are retrieving or sending data, we will almost always use the Connection Manager to make the request for us.

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/io/ConnectionManager.js
The file where the Connection Manager is defined request() - the function that will make requests to the server for us

vlewrapper/src/main/webapp/vle/util/componentloader.js
The file where the Connection Manager is created components.core.initialize - this is where the Connection Manager is created and set into the view

How the code works
The Connection Manager is created in the initialize of the core component

connectionManager:function(){return new ConnectionManager(eventManager);}

Whenever we want to make a request to the server we will call the request() function of the Connection Manager. Here is an example where we send student data back to the server.

var url = this.getConfig().getConfigParam('postStudentDataUrl');
var postStudentDataUrlParams = {
    id: nodeVisit.id,
    runId: this.getConfig().getConfigParam('runId'),
    periodId: this.getUserAndClassInfo().getPeriodId(),
    userId: this.getUserAndClassInfo().getWorkgroupId(),
    data: postData
};
this.connectionManager.request('POST', 3, url, postStudentDataUrlParams, this.processPostResponse, {vle: this, nodeVisit:nodeVisit}, this.processPostFailResponse, sync, null);

url - this points to the servlet page on the server that saves student data
postStudentDataUrlParams - this contains all the student information and work that we will save to the server
this.processPostResponse - this is a function that is called when the request is completed and we receive a success response from the server
this.processPostFailResponse - this is a function that is called when the request fails to complete
{vle: this, nodeVisit:nodeVisit} - this is an object that is passed to the this.processPostResponse and this.processPostFailResponse functions. when we are in the context of this.processPostResponse or this.processPostFailResponse we are not in the view so we need to pass the view (in this case 'this' is the view) into it so we can have access to the view.


### Constraints ### ---
### Content ### --- **Description** Content objects allow us to easily retrieve project content files in the format we want. Project content files consist of the project json file as well as step files.

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/content/content.js
The file that creates content objects and retrieves content for us
createContent() - creates a content object that is directly linked to a specific content file on the server which we can then retrieve content from
getContentJSON() - get the content for the file as a JSON object (this is assuming the content inside the file is a JSON string)
getContentString() - get the content for the file as a string setContent() - update the contents of the content file (this does not automatically save back to the server, you must make a special request to do so)

vlewrapper/src/main/webapp/vle/view/coreview.js
The file where we create the content object for the project

vlewrapper/src/main/webapp/vle/project/Project.js
The file where we create the content objects for the steps in the project

How the code works
Here is how we create content objects
Whenever we want to access a project file or a step content file, we will call createContent() and pass it the url to the content.

For example if we want access to a project file we would do something like this

var url = 'http://wise4.berkeley.edu/curriculum/1080/wise4.project.json';
var projectContent = createContent(url);

or if we want access to a step content file we would do something like this

var url = 'http://wise4.berkeley.edu/curriculum/1080/node_37.or';
var stepContent = createContent(url);

Then if we wanted the JSON object representation of that content, we would call getContentJSON() like this

var projectJSON = projectContent.getContentJSON();

and then we would be able to access the fields of the JSON object like this

var projectTitle = projectJSON.title;

Here is where we create the content for the project
In coreview.js we call loadProject() and that calls createContent()

o.project = createProject(createContent(url), contentBase, lazyLoading, o);

Here is where we create the content for the steps
When we call createProject() in Project.js, we call generateProjectNodes(). In generateProjectNodes(), we loop through all the steps in the project and call createContent() for each of the steps.

thisNode.content = createContent(makeUrl(currNode.ref, thisNode), contentBaseUrl);

### Event Manager ### --- **Description** The Event Manager handles event subscribing and event firing.

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/events/eventmanager.js
The file where the Event Manager and Event objects are defined

EventManager
subscribe() - subscribes an event handler to listen for a specific event
fire() - notifies all the event handlers that a specific event has been fired

Event
fire() - notifies all handlers that have subscribed to this event that this event has been fired

vlewrapper/src/main/webapp/vle/util/scriptloader.js
The file where the Event Manger is created
bootstrap() - the function where the Event Manager is created

vlewrapper/src/main/webapp/vle/util/componentloader.js
The file where events are declared and subscribed for step authoring events
addEvent() - the function that declares an event and subscribes a handler to listen to that event (usually only used for step authoring events)

How the code works
The Event Manager is created in the bootstrap function of the scriptloader.

bootstrap:function(win, fun, isMinifiedEnabled){
    win.eventManager = new EventManager(false);
    ...
}

The bootstrap() function is called in the vle.html, author.html, or gradework.html depending on which view you are loading.

How an event is declared
Events are usually declared in the events section of a component in the Component Loader. For example, the 'loadingProjectComplete' event is declared in the core component and can be found here components.core.events

var components = {
    core: {
        variables: {
            ...
        },
        events: {
            ...
            'loadingProjectComplete':[null, null],
            ...
        }
    }
}

How a handler subscribes to an event
Handlers usually subscribe to an event in the initialize section of a component in the Component Loader. For example, the vleDispatcher subscribes to the 'loadingProjectComplete' event in components.vle.initialize

var components = {
    vle: {
        variables: {
            ...
        },
        events: {
            ...
        },
        methods: {
            ...
        },
        initialize: {
            ...
            view.eventManager.subscribe('loadingProjectComplete', view.vleDispatcher, view);
            ...
        }
    }
}

Multiple handlers can subscribe to a single event. You will notice that the gradingDispatcher() and navigationDispatcher() also subscribe to the 'loadingProjectComplete' event.

How an event is fired
An event is fired by calling the fire() function of the eventManager. For example, here is how we would fire the 'loadingProjectComplete' event.

eventManager.fire('loadingProjectComplete');

How an event is handled
When an event is fired, all of the handlers that have subscribed to that event will be called. For example, when the 'loadingProjectComplete' event is fired, the vleDispatcher(), gradingDispatcher(), and navigationDispatcher() will all be called. This is what the vleDispatcher() looks like

View.prototype.vleDispatcher = function(type,args,obj){
    if(...) {
        ...
    } else if(type=='loadingProjectComplete') {
        obj.onProjectLoad();
        obj.setProjectPostLevel();
        obj.setDialogEvents();
    }
}

When the vleDispatcher() is called, we will pass in the event name as the type. Then it will run whatever code it plans to run when that event has been fired. In this case it will call

obj.onProjectLoad();
obj.setProjectPostLevel();
obj.setDialogEvents();

where obj is the view because when the event is fired we are no longer in the context of the view and we need to pass the view in as an argument.

Passing arguments when firing an event
You can pass an argument when firing an event. For example, here is how we fire the 'saveScore' event in the Grading Tool.

eventManager.fire('saveScore', [nodeId, workgroupId, teacherId, runId, stepWorkId])

The argument can be anything you want, an object, an array, a string, a number, etc. In this case it's an array. This argument gets passed along to the handler and is passed in as the args argument.

View.prototype.gradingDispatcher = function(type, args, obj) {
    ...
    } else if(type=='saveScore') {
        obj.checkAndSaveScore(args[0], args[1], args[2], args[3], args[4]);
    }
    ...
}

Then we use the values in the argument that we passed in to call the checkAndSaveScore() function.

Creating events for step authoring
The other location we declare events is for the step authoring. The events are declared in the <insert step type name>Events.js file because these events are specific to the step type and not the VLE. For example, for the Open Response step we have a file named openResponseEvents.js. In this file you will find the event handler function openResponseDispatcher(), and an events array that contains the names of all the events we use for Open Response authoring.

View.prototype.openResponseDispatcher = function(type,args,obj){
    if(type=='openResponsePromptChanged'){
        obj.OpenResponseNode.updatePrompt();
    }
    ...
}

var events = [
    'openResponsePromptChanged',
...
];

At the bottom of the openResponseEvents.js file we register all these events by calling componentloader.addEvent() on all of the events which declares all the events and also subscribes the openResponseDispatcher to those events.

for(var x=0; x<events.length; x++) {
    componentloader.addEvent(events[x], 'openResponseDispatcher');
};

### Hints ### ---
### Idea Basket (aka Idea Manager) ### --- **Description** The Idea Basket is a tool that allows students to create and save ideas as they navigate through the project. The Idea Basket is a global tool within a run but not across runs. This means that a separate Idea Basket is created for each workgroup for each run. The Idea Basket can be accessed at any time during a run by clicking on the Idea Basket button at the top of the VLE. This is as long as the teacher has enabled the Idea Basket for the run. The Idea Basket can also be loaded from within a step by using the Idea Basket step. The ideas that students create can be used in Explanation Builder steps.

Important folders/files and the important functions/variables in them

vlewrapper/WebContent/vle/ideaBasket
The folder where the files for the Idea Basket are located when it is opened from the global Idea Basket button

vlewrapper/WebContent/vle/ideaBasket/basket.js
Contains the logic for the Idea Basket which includes loading the basket, adding ideas, editing ideas, deleting ideas, and saving the basket. This is used regardless of whether it was opened from the global Idea Basket button or from an Idea Basket step.
load() - used when loading the Idea Basket from the global Idea Basket button
loadIdeaBasket() - used when loading the Idea Basket for an Idea Basket step
add() - used when an idea is added to the Idea Basket
edit() - used when an idea is changed
remove() - used when an idea is moved to the trash
saveIdeaBasket() - saves the Idea Basket

vlewrapper/WebContent/vle/node/ideabasket
The folder where the files for the Idea Basket step are located

vlewrapper/WebContent/vle/node/ideabasket/ideaBasket.html
The html that is used to display the Idea Basket when it is opened from an Idea Basket step

vlewrapper/WebContent/vle/ideaManager.html
The html that is used to display the Idea Basket when it is opened from the global Idea Basket button

vlewrapper/src/vle/web/VLEIdeaBasketController.java
The servlet that handles sending the Idea Basket data to the client and also saving the Idea Basket when the client sends the Idea Basket back to the server to be saved.

portal/src/main/java/org/telscenter/sail/webapp/presentation/web/controllers/BridgeController.java
The servlet that handles forwarding the request from the portal context to the vlewrapper context.

How the code works
When the Idea Basket button is clicked, the “displayIdeaBasket” event is fired which then calls displayIdeaBasket(). The ideaManager.html page is then loaded into the Idea Basket popup. When the Idea Basket is opened from an Idea Basket step, the ideaBasket.html page is loaded into the step ifrm like all other steps. Once the html is loaded, the logic from basket.js handles all the logic of loading the ideas, adding ideas, editing ideas, deleting ideas, and saving the basket.

The Idea Basket is loaded and saved to the server by making GET and POST requests to the VLEIdeaBasketController servlet.

The request to retrieve the Idea Basket looks like
http://wise4.berkeley.edu/webapp/bridge/request.html?type=ideaBasket&runId=639&action=getIdeaBasket
This request is internally forwarded by the BridgeController servlet to the url below which maps to the VLEIdeaBasketController servlet.
http://wise4.berkeley.edu/vlewrapper/ideaBasket.html
This needs to be forwarded to the vlewrapper context because the Idea Basket data is saved in the vle_database.

The request to retrieve the Idea Basket looks like
http://wise4.berkeley.edu/webapp/bridge/request.html?type=ideaBasket&runId=639&action=saveIdeaBasket
This request is internally forwarded by the BridgeController servlet to the url below which maps to the VLEIdeaBasketController servlet.
http://wise4.berkeley.edu/vlewrapper/ideaBasket.html
This needs to be forwarded to the vlewrapper context because the Idea Basket data is saved in the vle_database.

The Idea Basket data is saved in the vle_database.ideabasket table. Each row in the table represents a revision of a workgroup’s Idea Basket. Every time an Idea Basket is changed and saved, a new row is created. This allows us to maintain a history of how a workgroup’s Idea Basket has changed over time.


### International Language Support ### --- **Description** The VLE have been internationalized so that it can be displayed in different languages. WISE looks at the user’s browser’s language setting to see if a translation for that language already exists. If not, WISE will default to English (en_US).

In order to translate the VLE in another language, you needs to

  1. translate the text in i18n_en_US.json and save it as a new file, e.g. i18n_en_XX.json, where XX is the language code (“ja”=Japanese, “de”=German, “ko”=Korean, etc)
  2. add a new entry “XX” in the View.prototype.i18n.supportedLocales array in view_i18n.js.

Important folders/files, along with list of important functions and variable names
vlewrapper/WebContent/vle/view/i18n/*
vlewrapper/WebContent/vle/view/i18n/view_i18n.js
View.prototype.i18n.defaultLocale // what the default locale
View.prototype.i18n.supportedLocales // array of supported locales
View.prototype.getI18NString()
View.prototype.getStringWithParams()
vlewrapper/WebContent/vle/view/i18n/i18n_en_US.json English translation mapping file
vlewrapper/WebContent/vle/view/i18n/i18n_XX.json Translation mapping file for XX language

How the code works
The i18n_XX.json files contain key:value mappings of translated text, like this:

i18n_en_US.json:
	"top_toolbar_file_button_text":{
		"value":"Files",
		"description":"Text on the File Manager button on Top Toolbar"
	},
i18n_ja.json:
	"top_toolbar_file_button_text":{
		"value":"ファイル",
		"description":"Text on the File Manager button on Top Toolbar"
	},

i18n_en_US.json is always loaded by default on VLE startup. If the user’s browser’s language setting is not english, but is Japanese (ja), for example, the VLE will also fetch i18n_ja.json. Code that builds page elements calls view.getI18NString(KEY_NAME) or view.getStringWithParams(KEY_NAME, PARAMS) to retrieve the translated text that is mapped to the KEY. For example calling,
view.getI18NString(“top_toolbar_file_button_text”)

will return the string “Files” if the user’s browser setting is set to English, or "ファイル" if it is set to Japanese.

view.getStringWithParams(KEY_NAME,PARAMS) is used to look up values with parameters, like:

"student_assets_student_usage_message":{
	"value":"You are using {0} of your {1} storage space.",
	"description":"Text on a button in Student Asset Manager to delete a selected file"
},

in this case, you might call view.getStringWithParams("student_assets_student_usage_message", [“1 MB”,”5 MB”]) and get a return string of “You are using 1 MB of your 5 MB storage space.”

If a specific mapping cannot be found in i18n_ja.json, the VLE will use the mapping in i18n_en_US.json.


### Navigation Arrows ### --- **Description** The green left and right arrows at the top of the VLE allow the student to navigate backwards and forwards within the project. These arrows are an alternative to using the navigation menu on the left of the VLE.

Important folders/files and the important functions/variables in them
vlewrapper/WebContent/vle/view/vle/vleview_navigation.js
renderPrevNode() - tells the VLE to open the previous step
renderNextNode() - tells the VLE to open the next step

vlewrapper/WebContent/vle/view/vle/vleview_core.js
displayGlobalTools() - generates the HTML arrow buttons and inserts them into the VLE when the VLE starts up

How the code works
When the left arrow is clicked, the “renderPrevNode” event is fired which tells the VLE to open the previous step. When the right arrow is clicked, the “renderNextNode” event is fired which tells the VLE to open the next step.


### Navigation Menu ### --- **Description** The navigation menu shows up on the left of the VLE and allows students to navigate throughout the project. The menu has two levels, activity and step. There can be multiple activities and each activity can contain multiple steps. The activities can be collapsed to save space. When a step is clicked on within the menu, the VLE loads that step. The current step the student is on is highlighted in the menu.

Important folders/files and the important functions/variables in them
vlewrapper/WebContent/vle/ui/menu/sdmenu.js
init() - initializes the menu
expandMenu() - expands an activity
collapseMenu() - collapses an activity

vlewrapper/WebContent/vle/ui/menu/NavigationPanel.js
render() - creates the HTML for the navigation menu
createSequenceHtml() - creates the HTML for an activity in the menu
createStepHtml() - creates the HTML for a step in the menu

vlewrapper/WebContent/vle/css/sdmenu.css
Contains the styling for the menu

vlewrapper/WebContent/vle/view/vle/vleview_core.js
renderNode() - opens the step in the VLE

How the code works
After the VLE retrieves the project file, the navigation menu is created. When an activity in the menu is clicked, a “toggleMenu” event will be fired. This will expand or collapse the activity. When a step in the menu is clicked, a “renderNode” event will be fired. This event opens up the corresponding step in the VLE.


### Node ### ---
### Node State ### ---
### Node Visit ### ---
### Notification Manager ### ---
### Peer Review Sequence ### ---
### Project ### --- **Description** The project object is what we use to easily obtain content and information about the project.

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/project/Project.js
The file that creates the project object. Also contains functions that allow us to easily obtain content and information about the project.
createProject() - creates a project object
getTitle() - gets the title of the project
getNodeById() - get a step in the project given the id of the step
getNodeByPosition() - get a step given its position in the project
getNodeIds() - get all the step ids
getShowAllWorkHtml() - get the html for show all work
getStartNodeId() - get the id of the first step in the project
removeNodeById() - removes the step with the given id (used when authoring)
addNodeToSequence() - adds a step to an activity (used when authoring)
getStartNodePosition() - get the position of the first step
getPositionById() - get the position of a step given its id
getContentBase() - get the content base url for the project (e.g. http://wise4.berkeley.edu/curriculum/1080/)
getLeafNodes() - get all the steps
getRootNode() - get the entry point into the project
getVLEPositionById() - get the position of the step as seen in the VLE (e.g. 1.1, or 2.1 etc.)
getConstraints() - get the constraints in the project
addConstraint() - add a constraint to the project (used when authoring)
removeConstraint() - remove a constraint fromt the project (used when authoring)
getStepNumberAndTitle() - get the step number and title for a step (e.g. 1.1: What is a Tectonic Plate?)
populateSequences() - inserts step Nodes into the sequence Node
and many more

vlewrapper/src/main/webapp/vle/node/nodefactory.js
The file that creates Node objects for the steps in the project.
createNode() - creates Node objects

vlewrapper/src/main/webapp/vle/view/vle/vleview_core.js
The file where we start the VLE startVLE() - where we call loadProject()

vlewrapper/src/main/webapp/vle/view/coreview.js
The file where we obtain the project loadProject() - obtains the project from the server and loads it into the view

How the code works
We create a project object by calling createProject() and passing in the content object for the project (see Content). The createProject() function creates a private object. This means we can specify which project object functions we want to make public. It does this by declaring a function that immediately gets called. The return value of that function is an object that contains all the public functions.

Here is how the Project.js file is structured

function createProject(content, contentBaseUrl, lazyLoading, view, totalProjectContent){
    return function(content, cbu, ll, view, totalProjectContent){
        //private fields
        //private functions
        return {
            //public functions
        }
    }(content, contentBaseUrl, lazyLoading, view, totalProjectContent);
}

Here is how it works
We call the createProject() function with the five arguments (content, contentBaseUrl, lazyLoading, view, totalProjectContent).

createProject(content, contentBaseUrl, lazyLoading, view, totalProjectContent)

Then it declares the inner function here

    function(content, cbu, ll, view, totalProjectContent){
        ...
    }

This inner function gets called immediately with the five original arguments

    function(content, cbu, ll, view, totalProjectContent){
        ...
    }(content, contentBaseUrl, lazyLoading, view, totalProjectContent);

The return value of this function call is an object that is ultimately what our project object is

        return {
            //public functions
        }

Now lets look back at the inner function again. The inner function contains private fields and private functions. None of these are accessible from outside of the object that is returned. The only way to access any of these private fields or functions is to have a public function that accesses them.

    function(content, cbu, ll, view, totalProjectContent){
        //private fields
        //private functions
        return {
            //public functions
        }
    }

Here's an example
Say we want to obtain the title of the project. This is what our inner function looks like with the private title field and public getTitle() function.

    function(content, cbu, ll, view, totalProjectContent){
        //private fields
        var title;
        //private functions
        return {
            //public functions
            getTitle:function(){return title;}
        }
    }

We can't directly access the title field because it is a private field

var project = createProject();
//we can not do this
var title = project.title;

but we do have a public function called getTitle() that will retrieve the title for us

var project = createProject();
//we can do this
var title = project.getTitle();

This allows us to provide a little abstraction and security to our project object.

How we load the project
Near the bottom of the Project.js file you will see code that is actually run when createProject() is called. It looks like this

var project = content.getContentJSON();
if(project){
    ...
    generateProjectNodes();
    generateSequences();
    ...
}

The call to generateProjectNodes() is what creates the Node objects for the steps. We create one Node object for each step in the project. If the step is an Open Response step, we will create an OpenResponseNode. If the step is a Multiple Choice step, we will create a MultipleChoiceNode, etc.

In generateProjectNodes() we create a Node by using the NodeFactory

var thisNode = NodeFactory.createNode(currNode, view);

The call to generateSequences() will create the sequences (aka Activities) in the project. It does this by creating a sequence Node for each sequence and then inserting the appropriate step Nodes into the appropriate sequence Node.

var sequenceNode = NodeFactory.createNode(sequences[e], view);
...
populateSequences(allSequenceNodes[s].id);

How the project gets created in the view
Loading the project is one of the first tasks that is performed when the VLE starts up.

this.startVLE();

In startVLE(), we call loadProject() and pass it the url to the project

this.loadProject(this.config.getConfigParam('getContentUrl'), this.config.getConfigParam('getContentBaseUrl'), true);

In loadProject(), we call createProject() to retrieve and create the project object. Then we set the project into the project variable in the view

this.project = createProject(createContent(url), contentBase, lazyLoading, this);

Once this is accomplished, the project object is accessible from the view.


### Project Structure ### --- Each project or content is stored in its own folder and has a main file called wise4.project.json file that stores the structure of the project as well as references to the nodes and sequences within the project. Each node is defined in its own file and is referenced by its identifier. The sequence defines how the nodes and other sequences are grouped within the project. This idea was loosely modeled off of the IMS Learning Design standard for content representation (http://www.imsglobal.org/learningdesign/).

You can check out a sample Plate Tectonics project (platetectonics.zip) from here: http://wise4.org/downloads/projects/pt_w4.zip. You will see that an entire project (sans external resources that are being referenced from within the project) can be stored in a folder. All of the resources like images, swf files, and audio files are stored in the “assets” folder within the project folder.

Partial contents of the pt_w4 directory:

assets/                         // assets directory. contains images, swf files, audio files, etc.
assets/Mt Hood.png
assets/convection-intro.swf
css/ 
images/
lib/
wise4.project.json      // main file
node_4.ht          // html node file, contains link to display1.html
node_4.html      // html content page
node_0.or                  // open response node file

what pt_w4/wise4.project.json looks like:

{
   …
   “nodes”:[
      …
      {
         "class": "intro",
         "identifier": "node_4.ht",
         "links": [],
         "previousWorkNodeIds": [],
         "ref": "node_4.ht",
         "title": "Introduction",
         "type": "HtmlNode"
      },
      ...
   ],
   “sequences”:[
       {
         "identifier": "startsequence",
         "refs": [
            "seq_1",
            "activity2",
            "activity4",
            "activity5",
            "seq_3",
            "activity7",
            "seq_2"
         ],
         "title": "",
         "type": "sequence",
         "view": ""
      },
      {
         "identifier": "seq_1",
         "refs": [
            "node_4.ht",
            "node_20.or",
            "node_23.or",
            "node_65.al",
            "node_74.al",
            "node_25.ht"
         ],
         "title": "Initial Ideas",
         "type": "sequence",
         "view": "normal"
      },
      ...
   ],
   "startPoint": "startsequence",
   "stepLevelNum": true,
   "stepTerm": "",
   "title": "Plate Tectonics"
}

The “startPoint” indicates the first sequence in this project. In this case, it is the sequenced with the “startsequence” identifier (see above). The “startsequence” sequence block contains references to other sequences like “seq_1”, “activity2”, “activity4”, and so forth. The “seq_1” sequence block (see above) contains references to “node_4.ht”, “node_20.or”, and so on. You can find the node definition blocks like “node_4.ht” and “node_20.or” in the “nodes” array in wise4.project.json. In the case of node_4.ht, you can see that it has a reference to “node_4.ht”. This means that this node’s content can be found in a file called node_4.ht, which you can find in the pt_w4 directory.

contents of node_4.ht (html node):

{
   "src": "node_4.html",
   "type": "Html"
}

node_4.ht is another JSON file with a reference to the actual html file, node_4.html.

contents of node_20.or (open response node):

{
   "assessmentItem":{
      "adaptive":false,
      "identifier":"OpenResponse",
      "interaction":{
         "expectedLines":"5",
         "hasInlineFeedback":false,
         "placeholderText":"",
         "prompt":"<img src=\"assets/Mt%20Hood.png\">\u000a<br><br>This is Mount Hood. It is a part of the mountain range called the Cascades on the West Coast in Oregon.<br /><br />Write a story to explain how the mountain formed.  <br /><br />Be as specific and detailed as you can!",
         "responseIdentifier":"OR"
      },
      "responseDeclaration":{
         "baseType":"string",
         "cardinality":"single",
         "identifier":"OR"
      },
      "timeDependent":false
   },
   "isRichTextEditorAllowed":false,
   "starterSentence":{
      "display":"0",
      "sentence":""
   },
   "type":"OpenResponse"
}

node_20.or is a JSON file containing the contents of an open response node. Note the “<img src="assets/Mt%20Hood.png">” html element in the “prompt” field. This is referencing the “Mt Hood.png” file that is in the pt_w4/assets directory.

WISE projects are usually authored using the WISE Authoring Tool, but it can also be authored using a simple text editor.


### Script Loader ### --- **Description** Loads all the necessary .js files.

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/util/scriptloader.js
The file where all the .js file paths are defined. Also contains the functions that retrieve the .js files and injects them into the .html page.
scripts - contains the .js file paths for all components
css - contains the .css file paths for all components
dependencies - specifies which files need to be loaded before other files
loadScripts() - loads the .js files for a specific component
loadScript() - injects the .js file content into the head of the document
listener() - listens for 'scriptLoaded' events which are fired when a .js file has loaded
bootstrap() - loads the bootstrap .js files
insertSetupPaths() - looks at the project and determines which step types we need to load
addScriptToComponent() - adds a .js path to a given component. this is mainly used after determining which step types we need to load.

vlewrapper/src/main/webapp/vle/util/componentloader.js
The file where we define which components are to be loaded for each view.
views - an object that contains the views and which components each of those views use
components - an object that contains all the components and where their variables, events, methods, and initialization are defined

vlewrapper/src/main/webapp/vle/environment/environment.js
The file that creates a view.
startView() - tells the componentloader to load a view

How the code works
The scriptloader global object is created when the scriptloader.js file is loaded. Depending on which view you are loading, you will load the vle.html, author.html, or gradework.html. The scriptloader.js file will be imported using a script tag at the top of one of those .html file.

<script type='text/javascript' src='util/scriptloader.js'></script>

Here is how we make the scriptloader load the necessary .js files.
Depending on which view you are loading, you will load vle.html, author.html, or gradework.html and in that file, the window.onload() or loaded() function will call bootstrap()

scriptloader.bootstrap(this, bootstrapListener);

this function will load the bootstrap .js files by calling

scriptloader.loadScripts('bootstrap', win.document, 'bootstrap', win.eventManager);

this function will loop through all the .js file paths in the bootstrap array, that can be found in componentloader.js, and inject them into the .html page. when the last bootstrap script is loaded, the listener() function in scriptloader will receive the 'scriptLoaded' event and check that all the scripts for the bootstrap have been loaded and then fire a 'scriptsLoaded' event

if(queue.length<1){
    resetTimer();
    eventManager.fire('scriptsLoaded', [callerId, currentName]);
}

the bootstrapListener in the .html file will receive the scriptsLoaded event and call the startView() function

env.startView('vle');

the startView() function calls the loadView() function

componentloader.loadView(window[name], view, document, compress);

the loadView() function calls the loadComponent() function to load the first component in the array of component names specified for the view you are loading. these components can be found in the componentloader.js file in the views array. loadComponent() inserts all the variables, events, and methods into the view and also tells scriptloader to load all the .js and .css files for that component.

loadComponent(comp[0], comp[1], comp[2], comp[3], comp[4]);

loadComponent calls loadScripts

scriptloader.loadScripts(name, doc, 'componentloader', eventManager);

scriptloader obtains the .js file paths that we need to load into the .html for the current component that we are loading. for example if we are currently loading the 'annotations' component we would be loading these files

'vle/grading/Annotations.js'
'vle/grading/Annotation.js'

loadScripts() loops through all the file paths we need to load for the current component and injects them into the document by calling loadScript once for each file path.

var loadScript = function(url){
    currentDoc.getElementsByTagName('head')[0].appendChild(createElement(currentDoc, 'script', {type: 'text/javascript', src: baseUrl + url}));
};

when a .js file is injected into the document, the .js file will be parsed. at the bottom of every .js file you will see a call to fire a 'scriptLoaded' event. here is the code that is at the bottom of the OpenResponseNode.js file.

//used to notify scriptloader that this script has finished loading
if(typeof eventManager != 'undefined'){
	eventManager.fire('scriptLoaded', 'vle/node/openresponse/OpenResponseNode.js');
};

the listener function in the scriptloader will receive this 'scriptLoaded' event and check if there are other .js files that depend on the .js file we just loaded. if there are, it will load those other files. it also checks if there are any more .js files to load in the queue. if there are no more .js files to load for the current component, it fires a 'scriptsLoaded' event

if(queue.length<1){
    resetTimer();
    eventManager.fire('scriptsLoaded', [callerId, currentName]);
}

the listener() function in the componentloader will receive the 'scriptsLoaded' event and fire the 'loadingComponentComplete' event

eventManager.fire('loadingComponentComplete', [args[1]]);

the listener() function in the componentloader receives the 'loadingComponentComplete' event and calls the initializeComponent() function. the initializeComponent() function calls all the functions in the initialize field of the component.

initializeComponent(args[0]);

at the end of the initializeComponent() function, the 'componentInitializationComplete' event is fired

eventManager.fire('componentInitializationComplete', [name]);

the listener() function in the componentloader receives the 'componentInitializationComplete' event and calls loadComponent() on the next component

loadComponent(comp[0], comp[1], comp[2], comp[3], comp[4]);

this continues until all the components for that view are loaded. once all the components are loaded, the 'loadingViewComplete' event is fired

eventManager.fire('loadingViewComplete', [args[0]]);

### Session Manager ### --- When a student is using the VLE or a teacher is using the gradingtool, WISE4 session is monitored and maintained by the SessionManager (http://code.google.com/p/sail-web/source/browse/trunk/vlewrapper/WebContent/vle/session/SessionManager.js).

SessionManager manages sessions. When the VLE client starts up, the SessionManager is initialized with the session that was created when they logged into the WISE4 portal. The SessionManager will warn the user several minutes (calculated by taking the % of the timeout interval) before the session is about to expire. In the warning dialog, the user can choose to ignore the warning or renew the session. If the user ignores the warning and the session is about to time out, the SessionManager will:

  1. save the student's current work (by invoking view.onWindowUnload)
  2. force log out of the session
  3. close the VLE and
  4. take the user back to the homepage.

Steps that require students to spend a long time without renewing a session (for example, a drawing step, or an essay step, where the student stays on the same page for an extended duration) can request to renew the session programatically by firing a “renewSession” event:

eventManager.fire(‘renewSession’)

function SessionManager(em, view) {
// session timeout limit, in milliseconds.
this.sessionTimeoutInterval;

// how often session should be checked, in milliseconds
this.sessionTimeoutCheckInterval;

// how many milliseconds to wait before warning the user about a session timeout
this.sessionTimeoutWarning;

// timestamp of last successful request to renew the session.
this.lastSuccessfulRequest;

// Updates lastSuccessfulRequest timestamp after the session was successfully renewed.
SessionManager.prototype.maintainConnection = function(){...}

/**
 * Checks if the session is still valid, invoked periodically via setInterval.
 * There are three main cases:
 * 1) User was inactive for too long and ignored the renew session dialog.
 * Need to save work and close VLE
 * 2) User was inactive for longer than this.sessionTimeoutWarning milliseconds.
 * Need to warn them and let them renew the session.
 **/

### Setup Nodes ### --- **Description** Dynamically loads the necessary step types.

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/setupNodes.js
The file that contains references to all step types. A step type must be defined in this file in order for the vle, authoring tool, or grading tool to have knowledge of that step type.
SetupNodes.setupFiles - the array that contains references to all the step types

vlewrapper/src/main/webapp/vle/util/scriptloader.js
The file that loads the .js files for the step types.
insertSetupPaths() - looks at the project and determines which step types we need to load
addScriptToComponent() - adds a .js path to a given component. this is mainly used after determining which step types we need to load.

How the code works
setupNodes.js is one of the bootstrap files and is one of the first files to be loaded when the vle, authoring tool, or grading tool, is launched. At the end of the file, we call insertSetupPaths() to load the step types into the scriptloader.

scriptloader.insertSetupPaths(SetupNodes.setupFiles);

If we are loading the vle or grading tool, we will only load the step types that are in the project. If we are loading the authoring tool, we will load all the step types. When we are loading the vle or grading tool, insertSetupPaths() retrieves the the project and determines what step types are used. Then for each one of those step types it adds it to the setup component.

scriptloader.addScriptToComponent('setup', nodeSetupPath);

The .js files for the step types are then loaded when the setup component is loaded by the componentloader.


### Show All Work (aka My Work) ### --- **Description** The Show All Work page allows the student to easily view all the work they have completed for the project and also any feedback they have received from their teacher. All the steps in the project that the student can perform work on are listed on the page. If the student has completed work for a step, it will be displayed under that step. If the teacher has provided the student with score or comment feedback, it will also be displayed under that step. In addition to this, the total accumulated score and project percentage completion are displayed at the top of the Show All Work page.

Important folders/files and the important functions/variables in them

vlewrapper/WebContent/vle/view/vle/vleview_topmenu.js
Contains the logic for a lot of the buttons that are displayed in the top bar of the VLE showAllWork() - this is called when the student clicks on the “My Work” button. it retrieves the teacher annotations and project meta data. then it loads the Show All Work page. getShowAllWorkData() - retrieves the teacher annotations and project meta data getAnnotations() - retrieves the teacher annotations from the server displayShowAllWork() - starts generating the HTML to display in the Show All Work page

vlewrapper/src/vle/web/VLEAnnotationController.java
The servlet that handles the requests for annotations

vlewrapper/WebContent/vle/view/view_utils.js
getProjectMetaData() - retrieves the project meta data from the server

portal/src/main/java/org/telscenter/sail/webapp/presentation/web/controllers/ProjectMetadataController.java
The servlet that handles the request for project meta data

portal/src/main/java/org/telscenter/sail/webapp/presentation/web/controllers/BridgeController.java
The Java servlet that handles forwarding the request from the portal context to the vlewrapper context.

vlewrapper/WebContent/vle/project/Project.js
Contains the logic for the project getShowAllWorkHtml() - generates the HTML for all the steps, student work, and teacher feedback that is displayed in the Show All Work page

How the code works
When the student clicks on the “My Work” button, the “showAllWork” event is fired which then calls the showAllWork() function. This function makes a request for the teacher feedback and project meta data.

The request to the annotations servlet looks like this
http://wise4.berkeley.edu/webapp/bridge/request.html?type=annotation&runId=639&runId=639&toWorkgroup=27371&fromWorkgroups=27368&periodId=29185
This request is internally forwarded by the BridgeController servlet to the url below which maps to the VLEAnnotationController servlet.
http://wise4.berkeley.edu/vlewrapper/annotations.html
This needs to be forwarded to the vlewrapper context because the annotation data is saved in the vle_database.

The annotation data is saved in the vle_database.annotation table.

The request to the project meta data servlet looks like this
http://wise4.berkeley.edu/webapp/metadata.html?command=getProjectMetaData&projectId=684

The project meta data is saved in the sail_database.project_metadata table.

After the VLE successfully receives the teacher feedback and project meta data, it calls displayShowAllWork() to start generating the HTML for the Show All Work page. This function calls getShowAllWorkHtml() to handle the generating of the HTML for the steps, student work, and teacher feedback. Once the HTML is generated, the VLE insert the HTML into the Show All Work popup and then makes the popup visible.


### Show Flagged Work ### --- **Description** Teachers can choose specific student work that they would like to share with the whole class. Once the teacher flags some student work, all of the students in the same period as that work can visit the Flagged Work section to view it. This allows teachers to share a student’s work with the whole class and start a discussion.

This section describes the student side of the interaction. If you would like to read about the teacher side, you should navigate to the “Grading Tool: Flags” section of this document.

Important folders/files and the important functions/variables in them
vlewrapper/WebContent/vle/view/vle/vleview_topmenu.js
Contains the logic for a lot of the buttons that are displayed in the top bar of the VLE showFlaggedWork() - this is called when the “showFlaggedWork” event is fired, which calls getShowFlaggedWorkData() getShowFlaggedWorkData() - gets the flagged work data by calling getFlaggedWork() getFlaggedWork() - retrieves the flagged work and then calls displayFlaggedWork() displayFlaggedWork() - displays the flagged work in the popup

vlewrapper/src/vle/web/VLEGetData.java
The servlet that retrieves the flagged work for the period that the student is in.

portal/src/main/java/org/telscenter/sail/webapp/presentation/web/controllers/BridgeController.java
The Java servlet that handles forwarding the request from the portal context to the vlewrapper context.

How the code works
When the student clicks the “Flagged” button, the “showFlaggedWork” event is fired which then calls showFlaggedWork(). The flagged work is then retrieved by making a request to the server.

The request looks liks this
http://wise4.berkeley.edu/webapp/bridge/getdata.html?type=flag&runId=639&userId=27371&periodId=29185&isStudent=true
This request is internally forwarded by the BridgeController servlet to the url below which maps to the VLEAnnotationController servlet.
http://wise4.berkeley.edu/vlewrapper/getdata.html
This needs to be forwarded to the vlewrapper context because the flag data is saved in the vle_database.

The flag data is saved in the vle_database.annotation and vle_database.annotation_flag tables.


### Startup ### ---
### Step Types ### ---

Brainstorm

Description
Students are presented a topic to discuss. They type up their response and submit it. Whenever their classmates visit that same step, they will see their classmate’s responses to read and discuss. This step is similar to a forum thread.

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/brainstorm

How the code works

Branching

Description

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/branching

How the code works

Car Graph

Description
Students are presented with a position vs. time graph which they can click on to plot points. When they click the play button, a small image of a car is moved along a line with distance points to imitate the data from the student’s graph. This allows the student to visually compare how the points on the position vs. time graph affect the movement of an object in real time.

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/cargraph

How the code works

Challenge Question

Description
Students are presented with a multiple choice question. If the workgroup answers incorrectly, they will need to visit an author-specified previous step before they can try answering again. This helps guide students to the information that will help them figure out what the correct answer is. Authors can also specify point values for challenge questions depending on how many tries it takes students to answer correctly.

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/multiplechoice

How the code works

Data Graph

Description
Students enter numerical values into a table and then click a button to automatically generate a graph from those values. This helps students view their values in a graph to allow them to analyze a visual representation of their data.

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/datagraph

How the code works

Draw

Description
Students are presented with a customized Javascript drawing tool (based on SVG-Edit). Students can create drawings and animations using basic drawing tools, as well as “stamps” (author-specified images). Authors can also include a background image to guide student drawing and/or animation. Animations are created by taking snapshots of their drawings which act as frames and can be played back at varying framerates. Students can write descriptions/explanations for their drawings/snapshots. Curriculum authors can enable or disable, descriptions, snapshots, and prompts for each WISE Draw step.

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/draw

How the code works

Explanation Builder

Description
Students are asked a question or phenomenon to explain and use ideas that they have added to their Idea Basket to generate an answer/explanation. The step provides an organizing space with an author-specified background image to help the student organize the ideas they choose to use in their explanation. Students drag and drop ideas from their basket to the organizing space. After they have chosen all the ideas they want to use in their explanation, they type up their explanation or answer. This allows students to use ideas they have come up or evidence they have collected with while working through the project to generate a reasoned argument. If students revise or trash an idea that is being used in an explanation, they are alerted and told to review the explanation, as changing an idea may change their answer too. Revised and trashed ideas are identified in the explanation builder steps with an icon and students are given options to deal with the change (accept/revise/remove, etc.).

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/explanationbuiler

How the code works

Fill In

Description
Students are given a sentence of paragraph with blank spaces. They enter words they think correctly complete the passage. Authors can specify multiple correct answers for each blank. Students must work in order and have to get the first blank correct before proceeding on the next and so on.

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/fillin

How the code works

Flash

Description

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/flash

How the code works

Graph/Sensor

Description

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/sensor

How the code works

Idea Basket

Description
Students can collect ideas or pieces of evidence they encounter during a project (or have coming into the project). Ideas are limited to text inputs of 150 characters for now. Students can identify the source of their idea (Simulation/Visualization, Evidence Page, etc.), add tags or keywords to their ideas, and flag their ideas with an icon (as of now: question mark, exclamation point, checkmark). Ideas are collected in a table and can be sorted by any of the categories or manually by drag-and-drop. Students can edit/revise their ideas and move ideas to and from the trash. *The Idea Basket is a persistent tool that available to students throughout a project (see below) but can also be instantiated as a step which displays the students’ Idea Basket along with an optional prompt.

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/ideabasket

vlewrapper/src/main/webapp/vle/ideaBasket

How the code works

Match Sequence

Description

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/matchsequence

How the code works

Molecular Workbench

Description

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/mw

How the code works

Multiple Choice

Description
Students are presented with a question and possible answers and must choose the correct answer to get credit. Authors can specify feedback to give students if they choose a corresponding incorrect answer.

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/multiplechoice

How the code works

My System 2

Description

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/mysystem2

How the code works

NetLogo

Description

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/netlogo

How the code works

Open Response

Description
Students are presented with a question or prompt and respond by writing a text answer (usually in complete sentences).

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/openresponse

How the code works

Outside URL

Description
Students are presented with an author-specified webpage (from outside WISE) that is embedded in the step display.

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/outsideurl

How the code works

Questionnaire

Description
Students are presented with a series of assessment questions. These can be a mix of multiple choice and open response questions. Authors can require students to complete each section of the questionnaire before moving on in the project.

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/assessmentlist

How the code works

Reflection Note

Description
Students are presented with a pop-up (jQuery dialog) with one or multiple questions or instructions for reflection. They respond by writing text answers (usually in complete sentences).

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/openresponse

How the code works

Seasons

Description

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/seasons

How the code works

Surge

Description

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/surge

How the code works

Table

Description

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/table

How the code works

Template

Description
Used for developers when creating new step types (see Developing with WISE section).

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/template

How the code works

Text/HTML Page

Description
Students are presented with an authored html page. Usually used to present students with information, including multimedia (images, videos, etc.). Often also used to embed interactive media such as Flash applets and Java applets (Molecular Workbench simulations, Netlogo models) when student data logging is not needed.

Important folders/files and the important functions/variables in them
vlewrapper/src/main/webapp/vle/node/html

How the code works


### Student Asset Uploader ###

Note: you need to log into WISE first and get the JSESSIONID in the cookie for the following commands to work:

How to GET a list of student assets for a particular run.

curl -H "Cookie: JSESSIONID=1C36BF1E555613776DC4B3063EFE061B" -X GET "http://localhost:8080/webapp/bridge/request.html?type=studentAssetManager&runId=1&forward=assetmanager&command=assetList"

How to GET the total size of student assets for a particular run. curl -H "Cookie: JSESSIONID=1C36BF1E555613776DC4B3063EFE061B" -X GET "http://localhost:8080/webapp/bridge/request.html?type=studentAssetManager&runId=1&forward=assetmanager&command=getSize"

How to POST a new asset for the student for a particular run.

curl -H "Cookie: JSESSIONID=1C36BF1E555613776DC4B3063EFE061B" -X POST -F [email protected] -F type=studentAssetManager -F runId=1 -F forward=assetmanager -F cmd=studentAssetUpload http://localhost:8080/webapp/bridge/request.html


### Student Work ### ---
### Tag Maps ### ---
### Theming ### ---
### User and Class Info ### ---
### VLE State ### ---
### VLE Statistics ### ---
### VLE Utils ### ---
### XMPP ### ---


## Grading Tool ## The Grading Tool is where teachers can view student work and give feedback to student work.
### C Rater ### ---
### Comments ### --- **Description** In the Grading Tool, the teacher can give comments to student work.

Important folders/files and the important functions/variables in them
vlewrapper/WebContent/vle/view/grading
The folder where all the grading js files are located.

vlewrapper/WebContent/vle/view/grading/gradingview_display.js
initiateGradingDisplay() - once all the necessary data is retrieved from the server (such as the project file, student work, annotations, etc.), this function is called and begins generating the HTML for the grading tool.
getScoringAndCommentingTdHtml() - this is where the comment textarea is generated. the teacher will type their comment in the textarea.

vlewrapper/WebContent/vle/view/grading/gradingview_annotations.js
saveComment() - called when the teacher gives a comment to a student work. this sends the comment to the server to be saved.

How the code works
When the teacher gives a comment to a student work, the textarea sends the comment back to the server onblur. This means after the textarea loses focus, such as when the teacher clicks on anything else in the Grading Tool, the comment will be saved back to the server. We also check to make sure the comment has actually changed before saving back to the server in order to prevent any unnecessary data transfer.

Example of a comment annotation
{"stepWorkId":"1438864","nodeId":"node_34.al","fromWorkgroup":"34640","value":"Good work! You are showing some good thinking.","runId":"823","type":"comment","toWorkgroup":"34646"}

The database tables for scores are automatically created by Hibernate.
The score data is saved in the vle_database.annotation and vle_database.annotation_score tables.


### Excel Export ### ---
### Flags ### --- **Description** In the Grading Tool, the teacher can flag specific student work if they would like to share it with the rest of the class.

Important folders/files and the important functions/variables in them
vlewrapper/WebContent/vle/view/grading
The folder where all the grading js files are located.

vlewrapper/WebContent/vle/view/grading/gradingview_display.js
initiateGradingDisplay() - once all the necessary data is retrieved from the server (such as the project file, student work, annotations, etc.), this function is called and begins generating the HTML for the grading tool.
getFlaggingTdHtml() - this is where the flagging checkbox is generated. the teacher will check this checkbox when they want to flag the associated student work.

vlewrapper/WebContent/vle/view/grading/gradingview_annotations.js
saveFlag() - called when the teacher flags or unflags a student work. this sends the flag or unflag to the server to be saved.

How the code works
When the teacher checks or unchecks the flag checkbox, we save the flag or unflag annotation back to the server. The JSON data that is sent back to the server has the “value” field set to “flagged”. A flag is an annotation and we never overwrite or delete annotations from the database, we only create new ones. This means that if a flag for a specific student work is created, it will forever exist in the database. If we want to unflag that specific student work, we need to create a new flag annotation with the JSON “value” field set to “unflagged” and save it back to the server.

Example of a flag annotation
{"stepWorkId":"1439530","nodeId":"node_163.al","fromWorkgroup":"34730","value":"flagged","runId":"858","type":"flag","toWorkgroup":"34742"}

Example of an unflag annotation
{"stepWorkId":"1375269","nodeId":"node_84.al","fromWorkgroup":"31790","value":"unflagged","runId":"773","type":"flag","toWorkgroup":"32402"}

The database tables for flags are automatically created by Hibernate.
The flag data is saved in the vle_database.annotation and vle_database.annotation_flag tables.


### Grade By Step/Grade By Team ### --- **Description** This tool allows the teacher to view all the work the students have submitted. Teachers can also give scores and comments to the student work. There are two views available for the grading tool, “Grade By Step” and “Grade By Team”. In “Grade By Step”, all the steps in the project are listed and when the teacher clicks on one of the steps, all of the student work for that step is displayed. In “Grade By Team”, all of the workgroups for the run are listed and when the teacher clicks on one of the workgroups, all of the work for that workgroup is displayed. There is also the option of loading only the “Latest Work” or “All Revisions”. The “Latest Work” option is used when the teacher only needs to view the latest work from the students. This reduces the wait time since only the latest work is retrieved from the server. The “All Revisions” option is used when the teacher wants to see all the work revisions from the students.

Important folders/files and the important functions/variables in them portal/src/main/webapp/WEB-INF/jsp/tels/teacher/grading/gradework.jsp
This portal page contains an iframe that we use to load the grading tool. The gradework.html page gets loaded into the iframe which starts the process of loading the grading tool.

vlewrapper/WebContent/vle/gradework.html
This HTML page gets loaded into the gradework.jsp iframe. When this HTML page is loaded, it begins the process of loading the grading tool.

vlewrapper/WebContent/vle/view/grading
The folder where all the grading .js files are located.

vlewrapper/WebContent/vle/view/grading/gradingview_display.js
initiateGradingDisplay() - once all the necessary data is retrieved from the server (such as the project file, student work, annotations, etc.), this function is called and begins generating the HTML for the grading tool.

How the code works
The grading tool is launched from the portal but all of the code and logic is actually in the vlewrapper. We do this because we use the portal for authentication. Once the user is authenticated through the portal, we hand off the logic to the vlewrapper.

The portal loads gradework.jsp and that file loads gradework.html into its iframe. When gradework.html is loaded, the following chain of events occur

“gradingConfigUrlReceived” event is fired and getGradingConfig() is called
“getGradingConfigComplete” event is fired and loadProject() is called
“loadingProjectComplete” event is fired and getStudentUserInfo() is called
“processUserAndClassInfoComplete” event is fired and getProjectMetaData() is called
“getProjectMetaDataComplete” event is fired and getAnnotations() is called
“getAnnotationsComplete” event is fired and getIdeaBaskets() is called
“getIdeaBasketsComplete” event is fired and initiateGradingDisplay() is called

When initiateGradingDisplay() is called, the HTML for the grading tool is generated and inserted into the popup.

If the teacher chose to load “Latest Work” then getRevisions=true.
If the teacher chose to load “All Revisions” then getRevisions=false


### Max Scores ### ---
### Premade Comments ### ---
### Scores ### --- **Description** In the Grading Tool, the teacher can give a score to student work.

Important folders/files and the important functions/variables in them
vlewrapper/WebContent/vle/view/grading
The folder where all the grading js files are located.

vlewrapper/WebContent/vle/view/grading/gradingview_display.js
initiateGradingDisplay() - once all the necessary data is retrieved from the server (such as the project file, student work, annotations, etc.), this function is called and begins generating the HTML for the grading tool.
getScoringAndCommentingTdHtml() - this is where the score input is generated. the teacher will type their score in the input.

vlewrapper/WebContent/vle/view/grading/gradingview_annotations.js
saveScore() - called when the teacher gives a score to a student work. this sends the score to the server to be saved.

How the code works
When the teacher gives a score to a student work, the input sends the score back to the server onblur. This means after the input loses focus, such as when the teacher clicks on anything else in the Grading Tool, the score will be saved back to the server. We also check to make sure the score has actually changed before saving back to the server in order to prevent any unnecessary data transfer.

Example of a score annotation
{"stepWorkId":"1440316","nodeId":"node_1.or","fromWorkgroup":"34784","value":"10","runId":"875","type":"score","toWorkgroup":"34785"}

The database tables for comments are automatically created by Hibernate.
The comment data is saved in the vle_database.annotation and vle_database.annotation_comment tables.


### Startup ### ---
### XMPP ### ---


## Authoring Tool ## The Authoring Tool is where researchers and teachers create projects and edit content.
### Activities ### --- **Description** The author can add, move, and delete activities from a project. There can be multiple activities in a project. Each activity can contain multiple steps.

Important folders/files and the important functions/variables in them
vlewrapper/WebContent/vle/view/authoring
The folder where all the authoring js files are located.

vlewrapper/WebContent/vle/view/authoring/authorview_dialog.js
initializeCreateSequenceDialog() - creates the popup to create a new activity and also contains the code that makes the request to the server to create the new activity

portal/src/main/java/org/telscenter/sail/webapp/presentation/web/controllers/author/project/AuthorProjectController.java
The file that receives the requests to the server when authoring
handleRequestInternal() - the main function that handles all the requests and calls the appropriate functions according to the arguments

vlewrapper/src/utils/FileManager.java
createSequence() - tries to add a new activity to the project
addSequenceToProject() - retrieves the JSON from the project file and adds the new activity to the sequences in the JSON project file

vlewrapper/WebContent/vle/view/coreview.js
loadProject() - loads the project into the Authoring Tool

vlewrapper/WebContent/vle/view/authoring/authorview_selection.js
moveSelected() - changes the UI to allow the user to move the selected item to a new location
moveCallback() - called when the user clicks on the new location to move the selected item. This performs the move of the selected node and saves the change within the project.
deleteSelected() - removes the selected nodes from the project

/vlewrapper/WebContent/vle/view/authoring/authorview_main.js
saveProject() - saves the project back to the server
generateAuthoring() - generates the HTML that will display the project in the Authoring Tool. this includes the elements that displays the project title, project id, “Add Activity” button, “Add Step” button, and the activities and steps within the project.

vlewrapper/WebContent/vle/view/authoring/authorview_dispatchers.js
Contains the dispatcher functions that are called when an authoring event is fired. These functions look at the name of the event that was fired and then run the appropriate code to handle the event. The appropriate code will usually be another function call.

How the code works
Add Activity - when the user wants to add an activity, they will click on the “Add Activity” button which fires the “createNewSequence” event. This displays the popup that allows the user to name the new activity. When the user clicks “Submit”, a request is sent back to the server to add an activity to the project.

The request to add a new activity to the project looks like this
http://wise4.berkeley.edu/webapp/author/authorproject.html?forward=filemanager&projectId=684&command=createSequence&projectFileName=/wise4.project.json&name=activity4&id=seq_4
The response will be the id of the sequence which will look like this
seq_4

Once we receive the response, the Authoring Tool will reload the project so that the new activity shows up. This is performed by calling loadProject().

Move Activity - the user can move activities around if they decide to change the order them. They first need to select an activity in the project by checking the checkbox for an activity. Then they need to click on the “Move” button which fires the “moveSelected” event. This calls moveSelected() which changes the UI to allow the user to move the selecteed item to a new location. The user clicks on the new location to move the selected item to. When they perform this click, moveCallback() is called and updates the project to reflect the move. saveProject() is called to save the project back to the server.

Delete Activity - the user can delete an activity from the project if they decide they no longer want it. They need to select an activity in the project by checking the checkbox for an activity. Then they need to click on the “Delete” button which fires the “deleteSelected” event. This calls deleteSelected() which removes the activity from the project. If the activity has any steps in it, the steps will be moved to the “Inactive Steps” section at the bottom of the Authoring Tool. saveProject() is called to save the project back to the server and generateAuthoring() is called to refresh the Authoring Tool to reflect the change in the project.


### Assets ### --- **Description** The author can add asset files, such as images and movies, to their project. These files will be saved into the /assets folder of the project. There is an assets folder size limitation we place on each project which is 10 MBs.

Important folders/files and the important functions/variables in them
vlewrapper/WebContent/vle/view/authoring
The folder where all the authoring js files are located.

vlewrapper/WebContent/vle/view/authoring/authorview_main.js
viewAssets() - retrieves the list of assets that are currently in the project and displays them in the popup
uploadAsset() - retrieves the size of the /assets folder in the project
submitUpload() -

vlewrapper/WebContent/vle/view/authoring/authorview_dispatchers.js
Contains the dispatcher functions that are called when an authoring event is fired. These functions look at the name of the event that was fired and then run the appropriate code to handle the event. The appropriate code will usually be another function call.

vlewrapper/WebContent/vle/view/authoring/authorview_dialog.js
initializeAssetEditorDialog() - creates the upload asset popup

vlewrapper/WebContent/vle/view/view_utils.js
assetUploaded() - the callback function that is run after an asset file is uploaded to the server

How the code works
View Assets - the user can click the “Manage Art/Files” button which will fire the “viewAssets” event. This calls viewAssets() which retrieves the list of asset files already in the project.

The request to retrieve the list of asset files will look like this
http://wise4.berkeley.edu/webapp/author/authorproject.html?command=assetList&forward=assetmanager&projectId=684

The response will look like this
["hotcold.jpg","thermal_energy.mov"]

Once the list of asset files is retrieved, the popup is displayed and the asset files are listed in the popup. The folder size of the /assets folder is then retrieved by calling uploadAsset().

The request to retrieve the /assets folder size looks like this
http://wise4.berkeley.edu/webapp/author/authorproject.html?command=getSize&forward=assetmanager&path=&projectId=684

The response will be the size of the folder in bytes and will look like this
8980559

This popup displays all the asset files that are in the project and allows the author to add or delete asset files.

Add Asset - the user can add an asset to their project by clicking the “Browse...” button in the asset files popup. This will display the user’s system file chooser popup so they can choose which file they want to upload to their project. Once they have chosen the file they want to upload, the “submitUpload” event will fire and submitUpload() is called. This sends the file to the server.

Once the file is uploaded, the response will look like this
energy_transfer.jpg was successfully uploaded!

The callback function that is called is assetUploaded(). This function fires the “viewAssets” event to retrieve the files in the assets folder so that the assets list is refreshed.

Delete Asset - the user can delete an asset from within the asset files popup. They will need to highlight one of the files in the popup and then click the “Remove Selected File” button. This calls remove() within the initializeAssetEditorDialog() function.

The request to delete the file will look like this
http://wise4.berkeley.edu/webapp/author/authorproject.html?asset=energy_transfer.jpg&command=remove&forward=assetmanager&path=&projectId=684

Once the file has been deleted on the server, the response will look like this
energy_transfer.jpg successfully deleted from server.

After the response is received, it retrieves the new size of the /assets folder.

The request to retrieve the /assets folder size looks like this
http://wise4.berkeley.edu/webapp/author/authorproject.html?command=getSize&forward=assetmanager&path=&projectId=684

The response will be the size of the folder in bytes and will look like this
8980559


### Project Information (aka Metadata) ### --- **Description** The author can view and edit the metadata for the project. The metadata contains fields such as subject, grade level, total time, computer time, language, project summary, keywords, technical needs, tech details, etc.

Important folders/files and the important functions/variables in them
vlewrapper/WebContent/vle/view/authoring
The folder where all the authoring js files are located.

How the code works
N/A

http://wise4.berkeley.edu/webapp/author/authorproject.html?projectId=684&command=getMetadata


### Projects ### --- **Description** The Authoring Tool can open existing projects, create new projects, copy projects, preview projects and update projects from their parent.

Important folders/files and the important functions/variables in them
vlewrapper/WebContent/vle/view/authoring
The folder where all the authoring js files are located.

vlewrapper/WebContent/vle/view/authoring/authorview_startup.js
startPortalMode() - loads the project into the Authoring Tool
createPortalProject() - registers a project with the portal

vlewrapper/WebContent/vle/view/coreview.js
loadProject() - retrieves and loads a project given the url for the project

vlewrapper/WebContent/vle/view/authoring/authorview_main.js
The file where a lot of the Authoring Tool logic is located.
generateAuthoring() - generates the HTML that will display the project in the Authoring Tool. this includes the elements that displays the project title, project id, “Add Activity” button, “Add Step” button, and the activities and steps within the project.
openProject() - retrieves the list of projects that the current user can author
populatePortalProjects() - loads the list of projects into the drop down box
projectOptionSelected() - loads the project that the user has selected from the “Open Project” popup
copyProject() - retrieves the list of projects that the current user can copy
previewProject() - allows the user to preview the project in the VLE
reviewUpdateProject() - generates the project comparison between child and parent project for the user to review.
onProjectLoaded() - called when the project is loaded. this calls generateAuthoring()
createNewProject() - displays the “createProjectDialog” popup
reviewUpdateProject() - makes a request to the server to calculate the difference between the parent project and the child project

vlewrapper/WebContent/vle/view/authoring/authorview_dialog.js
initializeCreateProjectDialog() - creates the popup that allows the user to enter the name of their new project. makes the request to the server to create the new project.
initializeCopyProjectDialog() - creates the popup that allows the user to copy a project. also makes the request to copy the project once a project is chosen.
initializeReviewUpdateProjectDialog() - creates the popup that allows the user to update the project from the parent project. makes the request to update the project if the user decides to do so.

portal/src/main/webapp/WEB-INF/jsp/tels/author/authorproject.jsp
The Portal page that is loaded when the user wants to launch the Authoring Tool. The authorproject.html page maps to this jsp page. This page contains an iframe which is loaded with author.html.

vlewrapper/WebContent/vle/author.html
This HTML page gets loaded into the authorproject.jsp iframe. When this HTML page is loaded, it begins the process of loading the Authoring Tool.

portal/src/main/java/org/telscenter/sail/webapp/presentation/web/controllers/author/project/AuthorProjectController.java
The controller that handles Authoring Tool requests.
handleRequestInternal() - the function that handles the requests on the server

porta/src/main/java/org/telscenter/sail/webapp/service/project/impl/LdProjectServiceImpl.java
The service that injects the parameters for automatically loading a project when the Authoring Tool is loaded.
authorProject() - the function that injects the parameters into the authorproject.jsp file if the user is automatically loading a project into the Authoring Tool

portal/src/main/webapp/WEB-INF/jsp/tels/vle/preview.jsp
The page that lets users preview a project in the VLE. The preview.html page maps to this jsp page.

portal/src/main/java/org/telscenter/sail/webapp/presentation/web/controllers/PreviewLDProjectController.java
The controller that loads variables into the preview.jsp page so that it can launch the project in preview mode.
handleRequestInternal() - function that injects variables into the preview.jsp page

vlewrapper/WebContent/vle/view/authoring/authorview_dispatchers.js
Contains the dispatcher functions that are called when an authoring event is fired. These functions look at the name of the event that was fired and then run the appropriate code to handle the event. The appropriate code will usually be another function call.

How the code works
Open Project - There are two ways to open a project in the authoring tool. One is to load a project automatically when the Authoring Tool opens (such as when a teacher clicks on the “Edit/Customize” or “Edit Content” link for a specific project from the Portal). The other way is to click the “Open Project” button within the Authoring Tool to choose which project you want to open.

Here is how the automatic project loading method works
The authorproject.jsp has these parameters injected into it from the server
portalAuthorUrl
command
relativeProjectUrl
projectId
projectTitle
The function authorProject() injects these parameters into the authorproject.jsp page. When the authorproject.jsp and author.html files are loaded, the “portalMode” event is fired. This event then calls startPortalMode() which reads all of the injected parameters and and uses them to call loadProject() to load the project. When the project is done loading, the “loadingProjectComplete” is fired and onProjectLoaded() is called which calls generateAuthoring() to display the project in the Authoring Tool.

Here is how the “Open Project” button method works
The user clicks on the “Open Project” button and “openProject” event is fired. This event then calls openProject() which retrieves the list of projects that the current user can author. Once the list of projects is received, populatePortalProjects() is called to load the projects into the drop down box for the user to choose. When the user chooses a project and clicks “Open”, the “projectSelected” event is fired which calls projectOptionSelected(). projectOptionSelected() then calls loadProject(). When the project is done loading, the “loadingProjectComplete” is fired and onProjectLoaded() is called which calls generateAuthoring() to display the project in the Authoring Tool.

Create New Project - The user can create a new project from the Authoring Tool. To do this, they need to click on the “Create Project” button which fires the “createNewProject” event. This calls createNewProject() which displays the “createProjectDialog” popup. This popup is created in initializeCreateProjectDialog(). When the user clicks the “Submit” button to create the new project, a request is sent to create the files for the new project on the server.

The request to create a new project looks like this
http://wise4.berkeley.edu/webapp/author/authorproject.html?forward=filemanager&projectId=none&command=createProject&projectName=CoolNewProject
This will create a new project folder and project file on the server inside the curriculum folder like this
http://wise4.berkeley.edu/curriculum/1230/wise4.project.json
The response to this request will be a string containing the relative project path like this /1230/wise4.project.json

When we receive the relative project path, the Authoring Tool will call createPortalProject() to make a request to register the project with the portal like this
http://wise4.berkeley.edu/webapp/author/authorproject.html?command=createProject&projectName=CoolNewProject&projectPath=/1230/wise4.project.json&parentProjectId=undefined
The response to this request will be the project id of the new project like this
1247

Once we retrieve the project id, the Authoring Tool calls loadProject() and the new project is then loaded into the VLE.

Copy Project - The user can copy a project that they have access to author. To do this they click on the “Copy Project” button which fires the “copyProject” event. This calls copyProject() which retrieves the list of projects the user has access to.

Th request to retrieve the list of projects looks like this
http://wise4.berkeley.edu/webapp/author/authorproject.html?command=projectList
The list of project names is placed in the drop down box in the “copyProjectDialog” popup. When the user chooses a project and clicks “Copy”, the submit() function inside initializeCopyProjectDialog() is called to copy the project on the server.

The request to copy the project looks like this
http://wise4.berkeley.edu/webapp/author/authorproject.html?forward=filemanager&projectId=684&command=copyProject&fileName=/wise4.project.json
The response is the name of the new project folder like this
1234

When we retrieve the project folder name, the Authoring Tool will call createPortalProject() to make a request to register the project with the portal like this
http://wise4.berkeley.edu/webapp/author/authorproject.html?command=createProject&projectName=MyProject2&projectPath=/1234/wise4.project.json&parentProjectId=684
The response to this request will be the project id of the new project like this
1251

Once we retrieve the project id, the Authoring Tool calls loadProject() and the new project is then loaded into the VLE.

Preview Project - The user can preview the whole project in the VLE. When they click on the “Preview Project” button, the “previewProject” event is fired. This calls previewProject() which opens a new window and loads the path to the preview project url like this
http://wise4.berkeley.edu/webapp/vle/preview.html?projectId=684

The preview.jsp page is backed by the PreviewLDProjectController. The PreviewLDProjectController loads the necessary variables into the preview.jsp page so that it can launch the project in preview mode.

Update Project - Here is an example of when a user might want to update their project. A user wants to use a WISE Library project but they would like to remove one of the activities to make the project shorter due to time constraints. The user can’t modify the WISE Library project because it is a public project available to everyone and only admins can modify it. What the user can do is copy the project. Once they copy it, they become the owner of the copied project and they can modify the project however they like, such as deleting an activity. Perhaps a year goes by and the admins have made some improvements to the WISE Library project that the user has copied. If the user would like to retrieve those changes, they can update their project. Performing update project will copy the parent project over the child project. Any previous changes to the child project will be removed (in this example, the deleted activity will re-appear). To update a project, a user can hover over the “Extras” button on the top right of the Authoring Tool and then choose “Update Project” from the menu.

When “Update Project” is clicked, the “reviewUpdateProject” event is fired which calls reviewUpdateProject(). This makes a request to the server to calculate the difference between the parent project and the child project. The request looks like this
http://wise4.berkeley.edu/webapp/author/authorproject.html?command=reviewUpdateProject&forward=filemanager&projectId=684
The response is a JSON array whose elements contains an object for every node in the project like this (I’m only going to display one of the elements in the array below)
[...,{"nodeId":"node_29.or","title":"step1or","status":"moved","nodeType":"OpenResponseNode","stepNumber":"1.2","modified":"false"},...]
Each element in the array contains data as to how a node has changed between the parent project and the child project. In the example above, the “step1or” step has been moved.

The Authoring Tool takes this JSON array and creates a visual UI for the user to review. The HTML is generated in the success() inside reviewUpdateProject(). This will allow the user to determine if they want to update their project or not. If they click on the “Update” button, the request will be made to update the child project with the content from the parent project. The request will look like this
http://wise4.berkeley.edu/webapp/author/authorproject.html?command=updateProject&forward=filemanager&projectId=1253&contentPath=

The server will copy the parent project content to the child project and will overwrite any previous changes in the child project.


### Startup ### --- **Description** The Authoring Tool allows users to create and author projects. They can add and author activities and steps within projects. Any project they create can then be used to set up a run.

Important folders/files and the important functions/variables in them portal/src/main/webapp/WEB-INF/jsp/tels/author/authorproject.jsp
The Portal page that is loaded when the user wants to launch the Authoring Tool. The authorproject.html page maps to this jsp page. This page contains an iframe which is loaded with author.html.

vlewrapper/WebContent/vle/author.html
This HTML page gets loaded into the authorproject.jsp iframe. When this HTML page is loaded, it begins the process of loading the Authoring Tool.

vlewrapper/WebContent/vle/view/authoring
The folder where all the authoring .js files are located.

vlewrapper/WebContent/vle/view/authoring/authorview_startup.js
startPortalMode() - loads the authoring tool. if the Authoring Tool is being loaded with a specific project, the parameters for that project will be passed into this function and that project will automatically be loaded into the Authoring Tool.

How the code works
The Authoring Tool is launched from the Portal but all of the code and logic is actually in the vlewrapper. We do this because we use the portal for authentication. Once the user is authenticated through the portal, we hand off the logic to the vlewrapper.


### Steps ### --- **Description** The author can add, edit, move, and delete steps in the project. There can be multiple steps in an activity.

Important folders/files and the important functions/variables in them
vlewrapper/WebContent/vle/view/authoring
The folder where all the authoring js files are located.

vlewrapper/WebContent/vle/view/authoring/authorview_dialog.js
initializeCreateNodeDialog() - creates the popup that allows the user to name their new step and choose the step type. Also contains the code that makes the request to the server to create the new step.

vlewrapper/WebContent/vle/view/authoring/authorview_dispatchers.js
Contains the dispatcher functions that are called when an authoring event is fired. These functions look at the name of the event that was fired and then run the appropriate code to handle the event. The appropriate code will usually be another function call.

vlewrapper/WebContent/vle/view/authoring/authorview_main.js
createNewNode() - opens the popup to create a new step
saveProject() - save the project to the server
author() - sets the activeNode to the step the user wants to author and then calls showAuthorStepDialog() to open up the step authoring popup

vlewrapper/WebContent/vle/view/coreview.js
loadProject() - loads the project into the Authoring Tool

vlewrapper/WebContent/vle/view/authoring/authorview_selection.js
moveSelected() - sets the Authoring Tool into the mode where the user needs to decide where to put the step by clicking somewhere on the project
moveCallback() - called when the user has clicked on where they want to put the new step

vlewrapper/WebContent/vle/view/authoring/authorview_authorstep.js
showAuthorStepDialog() - opens up the edit step popup that has the author window on the left and the preview step window on the right
setInitialAuthorStepState() - retrieves the step content when the author wants to edit a step
previewStep() - generates the step preview in the right window
saveStep() - saves the step content back to the server

How the code works
Add Step - the user can add a new step to their project by clicking the “Add Step” button. This will fire the “createNewNode” event which will call createNewNode(). This will display the popup that was created in initializeCreateNodeDialog(). When the user types in the step name, chooses the step type, and click “Submit”, the code within the submit() inside initializeCreateNodeDialog() will be run. When the user clicks “Submit” a request will be made to create the new step on the server.

The request to create the new step will look like this
http://wise4.berkeley.edu/webapp/author/authorproject.html?forward=filemanager&projectId=1235&command=createNode&nodeClass=openresponse&title=awesomestep&type=OpenResponseNode&nodeTemplateParams= [{"nodeTemplateFilePath":"node/openresponse/openResponseTemplate.or","nodeExtension":"or","nodeTemplateContent":"{...}"}]
The response will be the node id of the new step like this
node_12.or

When the response is received, the the new node id is set into the placeNodeId variable and the project is reloaded by calling loadProject(). When the project is loaded, it will check if the variable placeNodeId is set and if it is, it will ask the user to choose where to place the new step by calling moveSelected(). When the user clicks on the position to place the new node, moveCallback() is called. This inserts the step into the project and then calls saveProject().

The request to save the project looks like this
http://wise4.berkeley.edu/webapp/author/authorproject.html?command=updateFile&data=...&fileName=wise4.project.json&forward=filemanager&projectId=1233

Edit Step - authors can edit the content in steps by clicking on the “Edit” button or double clicking on the step. This will fire the “author” event which calls author(). author() will set the activeNode to the node the user wants to edit and then will call showAuthorStepDialog() to open up the edit step popup. showAuthorStepDialog() is called to display the edit step popup and setInitialAuthorStepState() is called to retrieve the step content.

The request to retrieve the step content looks like this
http://wise4.berkeley.edu/webapp/author/authorproject.html?forward=filemanager&projectId=1233&command=retrieveFile&fileName=/node_10.or

The user can edit the content of the step in the left window while viewing a preview of the step in the right window. previewStep() is called to generate the preview. The left window that contains the authoring tools for the step is populated by the step type. Each step type provides its own step authoring interface.

For example OpenResponse provides its authoring interface here
vlewrapper/WebContent/vle/node/openresponse/authorview_openresponse.js

Once the user is done editing the step, they will click “Save & Close” which will fire the “saveAndCloseStep” event which calls saveStep().

The request to save the step content looks like this
http://wise4.berkeley.edu/webapp/author/authorproject.html?command=updateFile&data=...&fileName=node_10.or&forward=filemanager&projectId=1233

Move Step - users can move steps around in the project. To move a step, the user needs to select a step by checking its checkbox. Multiple steps can be moved at the same time if multiple steps are checked. Then they need to click on the “Move” button which fires the “moveSelected” event. This calls moveSelected() which asks the user where they want to move the step to. When the user clicks on the position to put the step, moveCallback() is called. This inserts the step into the new position and then calls saveProject().

The request to save the project looks like this
http://wise4.berkeley.edu/webapp/author/authorproject.html?command=updateFile&data=...&fileName=wise4.project.json&forward=filemanager&projectId=1233

Delete Step - users can delete a step if the decide they no longer want it. To delete a step, the user needs to select a step by checking its checkbox. Multiple steps can be deleted at the same time if multiple steps are checked. Once the step is checked, the user needs to click the “Delete” button which fires the “deleteSelected” event. This calls deleteSelected() which removes the step from the project and saves the project.

The request to remove the step file from the server looks like this
http://wise4.berkeley.edu/webapp/author/authorproject.html?command=removeFile&fileName=node_8.al&forward=filemanager&projectId=1233&projectPath=

The request to save the project looks like this
http://wise4.berkeley.edu/webapp/author/authorproject.html?command=updateFile&data=...&fileName=wise4.project.json&forward=filemanager&projectId=1233




## Portal ## The Portal is where users log in to WISE4 and can launch the VLE, Grading Tool, or Authoring Tool.
### Accounts & Permissions ### ---
### Compatibility Checker ### ---
### Contact Us Form ### ---
### International Language Support ### ---
### Periods ### ---
### Portal Statistics ### ---
### Projects ### ---
### ReCaptcha ### ---
### Runs ### ---
### Teacher Guides ### ---
### Workgroups ### ---


## FAQ ## ### Frequently Asked Questions ### **Q: How does the VLE startup?** A: When the VLE starts up, the wise4.project.json file is retrieved and parsed, and the VLE parses the file to identify the nodes and sequences in the project.

Q: What are the files and functions involved in the VLE startup?

Q: How is a step rendered?

Q: How is student work saved? (talk about when it is saved)

Q: What is saved for the student work? (talk about revisions)

Q: Where is the student work saved?

Q: Where are the projects saved?

Q: How do events and dispatchers work?

Q: How are runs, projects, workgroups, and users related?

Q: How does the session timeout work?

Q: How can I make my Flash simulation into a WISE step and have it save data?
A: See here: https://groups.google.com/forum/?hl=en#!topic/wise4-dev/QD2hyd8hRPg

Q: How do I access previous student work for the current step they are on?

Q: How can I create a new step type?
A: See here: https://github.com/WISE-Community/WISE/wiki/How-to-Create-a-New-Step-Type-in-WISE4

Q: How do I display student work in the grading tool for my new step type?

Q: How do I display student work in the excel export for my new step type?

Q: How can I test if my instance of WISE4 is working properly?

Q: I'm working in Eclipse and my portal was working but now it doesn't, what can I try to fix it?

Q: How can I change how the Portal looks?

Q: How can I translate WISE4 into different languages?

Q: What is the difference between the webapp and vlewrapper context?

Q: What is the BridgeController used for?

Q: What are the server requirements for hosting WISE4?

Q: What skills and knowledge does one need to deploy a WISE4 instance and develop new features for the WISE environment?
A: The person who will be deploying and maintaining a WISE4 instance should be able to set up a server environment and install/update software on a server like Apache, MySQL, Java and Tomcat. They should be able to follow the instructions on this page http://code.google.com/p/wise4/wiki/StableWISEDeploymentModel. They should be able to respond to user and researchers’ needs in a timely matter. Experience working with an eXtensible Messaging and Presence Protocol (XMPP) or a similar technology is a plus.

Skills needed to develop new features for the WISE environment depends on what you are trying to develop. WISE4 is built using Java, SpringFramework, Hibernate and MySQL for server-side, and Javascript, libraries like jQuery, CSS, and HTML for client-side. It also uses technologies like Asynchronous Javascript and XML (AJAX), JSON for content representation, and event-driven behaviors. The developer must be able to read the developer documentation and understand how to start and complete the new feature and integrate it with WISE4, or ask appropriate questions on the WISE4 developer forum.

As an example, we’ve had people turn their existing flash animation into a WISE step type. In this case, the developer had to follow the steps to create a new WISE step type (requires running commands on the command line and changing javascript files), and make changes to the flash animation to enable saving/loading data with WISE.

As another example, we’ve had people write a new tool that would aggregate student’s work across the module run and display it in a present format, like a “student portfolio”. In this case, the person wrote most of the code in a separate codebase using PHP and MySQL and modified parts of WISE4 (mainly parts in javascript) to communicate with the tool.

Q: What is needed in order to run WISE4 in schools?

Q: How can I make backups of WISE4?

Q: How can I ask for help if I have more questions?

Add a custom footer
Add a custom sidebar
Clone this wiki locally