Working with Plugins

Plugins are the center piece of a study. They define the activity that is to be performed by participants during the study session. Some Plugins like Sudoku, Whack-A-Mole, Typing are available in the repository, further plugins can be coded as necessary.

POGS Plugin

A number of tasks can be found under src/resources/plugins. Can plugin consists of 5 main components.

Configuration

The TaskPlugin configuration has two parts. The Basic configuration, which is the same for all plugins and the Advanced configuration, which is unique per plugin. Basic configuration is already specified under src/resources/templates/taskplugin/taskpluginconfig-edit.html. The advanced configuration is rendered in this file under the div <div th:remove="tag" th:utext="${taskEditHtml}"></div>

Each plugin has a different advanced configuration. For example, the Sudoku plugin can be configured to set difficulty level and provide a correct solution to the puzzle. For more information on what configurations do visit Task Plugin Configuration section of the User Manual. This advanced configuration can be specified in the src/resources/plugins/PLUGIN_NAME/taskEdit.html/.js. TaskEdit.html file creates the UI for this configuration and TaskEdit.js contains the javascript behind the UI.

TaskEdit.js not only acts has a event handler for TaskEdit.html but also needs to save the configuration in POGS. For this purpose a script <script src="../../js/pogsTaskConfig.js" th:src="@{/js/pogsTaskConfig.js}"></script> is included in the taskpluginconfig-edit.html page.

All in all, your TaskEdit.js should have this structure:

class SudokuTaskEdit {

    init(taskConfigId, currentAttributes){

    }
    setupHtmlFromAttributeString(bluePrint, answerSheet){
        
    }
    setupAttributesFromHtml(){
        
        return  {bluePrint: bluePrintString, answerSheet: sudokuSolveString};
    }
    beforeSubmit(){
    }


}
pogsTaskConfigEditor.register(new SudokuTaskEdit());

Using the Plugin

Once a plugin is configured and is made part of a study session, it is used by users. This interaction also needs to be defined. Similar to configuration, it is done under the same plugin folder src/resources/plugins/PLUGIN_NAME/taskWork.html/.js.

The HTML defines the input options available to the users. The javascript defines eventhandlers for work HTML and eventually. It also creates an instance of the plugin:

class SudokuGame {
    constructor(pogsPlugin) {
        this.pogsPlugin = pogsPlugin;
    }
    setup(...){

    }
    handleKeydown(theEvent){
    
    }
    broadcastReceived(message){
        
    }
    
    handleOnClick(event){

    }
    handleOnBlur(event){

    }
    // any other event handles here 
}

var sudokuPlugin = pogs.createPlugin('sudokuTaskPlugin',function(){

    var sudokuGame = new SudokuGame(this);
    // get config attributes from task plugin
    sudokuGame.setupGrid(this.getStringAttribute("gridBluePrint"));
    this.subscribeTaskAttributeBroadcast(sudokuGame.broadcastReceived.bind(sudokuGame))

});

Scoring

Once a session is finished, POGS needs to score the result to determine the quality of the responses. This is done using a script under src/resources/plugins/PLUGIN_NAME/taskScore.js

To write this script, please follow the following guidelines:

• parse all Javascript variables that contain session and task information:

var _teammates = JSON.parse(teammates);
var _subject = JSON.parse(subject);
var _isSoloTask = isSoloTask;
var _taskConfigurationAttributes = JSON.parse(taskConfigurationAttributes);
var _completedTaskAttributes = JSON.parse(completedTaskAttributes);

• Loop through the completedTaskAttributes to collect the given responses, and compare then to correct responses from task configuration. Compile a score.

• set completedTaskScore to the final score

completedTaskScore = JSON.stringify(_completedTaskScore);