Adding Timed components

[flysaiah]

Looking forward at adding timed functionality to things like activecode and shortanswer, here is a summary of how adding timed functionality to a component currently works.

Currently, each component that can be inside a timed assessment has a separate prototype definition for the "timed version" of that component (ex: DragNDrop and TimedDragNDrop). There are 3 functions that a Timed version of a component must implement: checkCorrectTimed(), which returns true if the question was answered correctly, false if it was answered incorrectly, and null if it wasn't answered; hideFeedback(), which hides the div/section/container element that renders whatever feedback is associated with the component (used for when feedback is disabled on a timed assessment), and processTimedSubmission(), which is called when a timed assessment is submitted, so the function usually calls whatever eval function is defined to determine the correctness of the question. Some components do extra things in this function, such as disabling input fields, etc.

The other things a timed component must do are render a timed icon (the clock.png that displays on each question) and hide whatever submit/compare buttons would originally be displayed. Currently these are just additional functions defined for the timed component prototype that are called in its constructor (see timeddnd.js for an example with drag n drop), but how this is implemented isn't as mandatory.

Also--in the original JS files for the NON-TIMED version of the component, there must be an extra check when calling the constructor to make sure that it isn't called on an element inside a timed assessment--example from drag n drop:

$("[data-component=dragndrop]").each(function (index) {
        if ($(this.parentNode).data("component") !== "timedAssessment") { // If this element exists within a timed component, don't render it here
        ddList[this.id] = new DragNDrop({"orig": this});
        }
});

Rather, the rendering of a timed component happens in timed.js, in createRenderedQuestionArray():

else if ($(tmpChild).is("[data-component=dragndrop]")) {
            this.renderedQuestionArray.push(new TimedDragNDrop(opts));
}

The question is how to proceed with components that are hand-graded, such as activecode or shortanswer. One idea would be to add a 4th option to return for checkCorrectTimed, so that question wouldn't be counted as correct/incorrect/unanswered during grading. The main purpose of this issue is to demonstrate how adding timed functionality to a component currently works, so brainstorming about adding components like activecode/shortanswer and long-term thoughts is easier.

[ericsonga]

I am currently working on this for activecode and Parsons problems. I want people to be able to run the code and check their results on the Parsons problems still as they normally do. I only want the timed to stop them when the time is up.

[bnmnetp]

closed by #146 and #129