Studio editor can edit multiple prompts.

TNL-708

openassessment/xblock/static/js/src/oa_server.js

@@ -445,7 +445,7 @@ if (typeof OpenAssessment.Server == "undefined" || !OpenAssessment.Server) {
         updateEditorContext: function(kwargs) {
             var url = this.url('update_editor_context');
             var payload = JSON.stringify({
-                prompt: kwargs.prompt,
+                prompts: kwargs.prompts,
                 feedback_prompt: kwargs.feedbackPrompt,
                 feedback_default_text: kwargs.feedback_default_text,
                 title: kwargs.title,

openassessment/xblock/static/js/src/studio/oa_container_item.js

@@ -65,6 +65,98 @@ OpenAssessment.ItemUtilities = {
 };
 
 /**
+The Prompt Class is used to construct and maintain references to prompts from within a prompts
+container object. Constructs a new Prompt element.
+
+Args:
+    element (OpenAssessment.Container): The container that the prompt is a member of.
+    notifier (OpenAssessment.Notifier): Used to send notifications of updates to prompts.
+
+Returns:
+    OpenAssessment.Prompt
+**/
+OpenAssessment.Prompt = function(element, notifier) {
+    this.element = element;
+    this.notifier = notifier;
+};
+
+OpenAssessment.Prompt.prototype = {
+    /**
+    Finds the values currently entered in the Prompts's fields, and returns them.
+
+    Returns:
+        object literal of the form:
+        {
+            'uuid': 'djn98jr4inu',
+            'description': 'Write a nice long essay about anything.'
+        }
+    **/
+    getFieldValues: function () {
+        var fields = {
+            description: this.description()
+        };
+
+        // New prompts won't have unique uuids assigned.
+        // By convention, we exclude the "uuid" key from the JSON dict
+        // sent to the server, and the server will assign a unique uuid.
+        var uuid = OpenAssessment.Fields.stringField(
+            $('.openassessment_prompt_uuid', this.element)
+        );
+        if (uuid !== "") { fields.uuid = uuid; }
+
+        return fields;
+    },
+
+    /**
+    Get or set the description of the prompt.
+
+    Args:
+        text (string, optional): If provided, set the description of the prompt.
+
+    Returns:
+        string
+
+    **/
+    description: function(text) {
+        var sel = $('.openassessment_prompt_description', this.element);
+        return OpenAssessment.Fields.stringField(sel, text);
+    },
+
+    addHandler: function (){},
+    addEventListeners: function() {},
+    removeHandler: function() {},
+    updateHandler: function() {},
+
+    /**
+    Mark validation errors.
+
+    Returns:
+        Boolean indicating whether the option is valid.
+
+    **/
+    validate: function() {
+        return true;
+    },
+
+    /**
+    Return a list of validation errors visible in the UI.
+    Mainly useful for testing.
+
+    Returns:
+        list of strings
+
+    **/
+    validationErrors: function() {
+        return [];
+    },
+
+    /**
+    Clear all validation errors from the UI.
+    **/
+    clearValidationErrors: function() {}
+};
+
+/**
 The RubricOption Class used to construct and maintain references to rubric options from within an options
 container object. Constructs a new RubricOption element.
 

openassessment/xblock/static/js/src/studio/oa_edit.js

@@ -26,8 +26,8 @@ OpenAssessment.StudioView = function(runtime, element, server) {
     this.alert = new OpenAssessment.ValidationAlert().install();
 
     // Initialize the prompt tab view
-    this.promptView = new OpenAssessment.EditPromptView(
-        $("#oa_prompt_editor_wrapper", this.element).get(0)
+    this.promptsView = new OpenAssessment.EditPromptsView(
+        $("#oa_prompts_editor_wrapper", this.element).get(0)
     );
 
     // Initialize the settings tab view
@@ -185,7 +185,7 @@ OpenAssessment.StudioView.prototype = {
 
         var view = this;
         this.server.updateEditorContext({
-            prompt: view.promptView.promptText(),
+            prompts: view.promptsView.promptsDefinition(),
             feedbackPrompt: view.rubricView.feedbackPrompt(),
             feedback_default_text: view.rubricView.feedback_default_text(),
             criteria: view.rubricView.criteriaDefinition(),
@@ -236,7 +236,8 @@ OpenAssessment.StudioView.prototype = {
     validate: function() {
         var settingsValid = this.settingsView.validate();
         var rubricValid = this.rubricView.validate();
-        return settingsValid && rubricValid;
+        var promptsValid = this.promptsView.validate();
+        return settingsValid && rubricValid && promptsValid;
     },
 
    /**
@@ -249,7 +250,9 @@ OpenAssessment.StudioView.prototype = {
     **/
     validationErrors: function() {
         return this.settingsView.validationErrors().concat(
-            this.rubricView.validationErrors()
+            this.rubricView.validationErrors().concat(
+                this.promptsView.validationErrors()
+            )
         );
     },
 
@@ -259,6 +262,7 @@ OpenAssessment.StudioView.prototype = {
     clearValidationErrors: function() {
         this.settingsView.clearValidationErrors();
         this.rubricView.clearValidationErrors();
+        this.promptsView.clearValidationErrors();
     },
 };
 

openassessment/xblock/static/js/src/studio/oa_edit_prompt.js

-/**
-Editing interface for the rubric prompt.
-
-Args:
-    element (DOM element): The DOM element representing this view.
-
-Returns:
-    OpenAssessment.EditPromptView
-
-**/
-OpenAssessment.EditPromptView = function(element) {
-    this.element = element;
-};
-
-
-OpenAssessment.EditPromptView.prototype = {
-
-    /**
-    Get or set the text of the prompt.
-
-    Args:
-        text (string, optional): If provided, set the text of the prompt.
-
-    Returns:
-        string
-
-    **/
-    promptText: function(text) {
-        var sel = $('#openassessment_prompt_editor', this.element);
-        return OpenAssessment.Fields.stringField(sel, text);
-    },
-
-};
\ No newline at end of file

openassessment/xblock/static/js/src/studio/oa_edit_prompts.js

+/**
+Editing interface for the prompts.
+
+Args:
+    element (DOM element): The DOM element representing this view.
+
+Returns:
+    OpenAssessment.EditPromptsView
+
+**/
+OpenAssessment.EditPromptsView = function(element) {
+    this.element = element;
+
+    this.promptsContainer = new OpenAssessment.Container(
+        OpenAssessment.Prompt, {
+            containerElement: $("#openassessment_prompts_list", this.element).get(0),
+            templateElement: $("#openassessment_prompt_template", this.element).get(0),
+            addButtonElement: $("#openassessment_prompts_add_prompt", this.element).get(0),
+            removeButtonClass: "openassessment_prompt_remove_button",
+            containerItemClass: "openassessment_prompt"
+        }
+    );
+    this.promptsContainer.addEventListeners();
+};
+
+
+OpenAssessment.EditPromptsView.prototype = {
+
+    /**
+    Construct a list of prompts definitions from the editor UI.
+
+    Returns:
+        list of prompt objects
+
+    Example usage:
+    >>> editPromptsView.promptsDefinition();
+    [
+        {
+            uuid: "cfvgbh657",
+            description: "Description",
+            order_num: 0,
+        },
+        ...
+    ]
+
+    **/
+    promptsDefinition: function() {
+        var prompts = this.promptsContainer.getItemValues();
+
+        // Add order_num fields for prompts
+        for (var prompt_idx = 0; prompt_idx < prompts.length; prompt_idx++) {
+            var prompt = prompts[prompt_idx];
+            prompt.order_num = prompt_idx;
+        }
+
+        return prompts;
+    },
+
+    /**
+    Add a new prompt.
+    Uses a client-side template to create the new prompt.
+    **/
+    addPrompt: function() {
+        this.promptsContainer.add();
+    },
+
+    /**
+    Remove a prompt.
+
+    Args:
+        item (OpenAssessment.RubricCriterion): The criterion item to remove.
+    **/
+    removePrompt: function(item) {
+        this.promptsContainer.remove(item);
+    },
+
+    /**
+    Retrieve all prompts.
+
+    Returns:
+        Array of OpenAssessment.Prompt objects.
+
+    **/
+    getAllPrompts: function() {
+        return this.promptsContainer.getAllItems();
+    },
+
+    /**
+    Retrieve a prompt item from the prompts.
+
+    Args:
+        index (int): The index of the prompt, starting from 0.
+
+    Returns:
+        OpenAssessment.Prompt or null
+
+    **/
+    getPromptItem: function(index) {
+        return this.promptsContainer.getItem(index);
+    },
+
+    /**
+    Mark validation errors.
+
+    Returns:
+        Boolean indicating whether the view is valid.
+
+    **/
+    validate: function() {
+        return true;
+    },
+
+   /**
+    Return a list of validation errors visible in the UI.
+    Mainly useful for testing.
+
+    Returns:
+        list of string
+
+    **/
+    validationErrors: function() {
+        var errors = [];
+        return errors;
+    },
+
+    /**
+    Clear all validation errors from the UI.
+    **/
+    clearValidationErrors: function() {}
+};
\ No newline at end of file