Word Cloud: add full cycle Python + HTML + JS

common/lib/xmodule/xmodule/css/word_cloud/display.scss

+.input-cloud {
+  margin: 5px;
+}
\ No newline at end of file

common/lib/xmodule/xmodule/js/src/word_cloud/word_cloud_main.js

@@ -3,33 +3,49 @@ define('WordCloudMain', ['logme'], function (logme) {
 
 WordCloudMain.prototype = {
 
-'submitAnswer': function (answer, answerObj) {
-    var _this;
+'submitAnswer': function () {
+    var _this, sendData;
+
+    sendData = {
+        'data': []
+    };
 
     _this = this;
 
     console.log('submit answer');
-
-    answerObj.buttonEl.addClass('answered');
+    this.wordCloudEl.find('input.input-cloud').each(function(index, value){
+        sendData.data.push($(value).val());
+    });
 
     // Send the data to the server as an AJAX request. Attach a callback that will
     // be fired on server's response.
     $.postWithPrefix(
-        _this.ajax_url + '/' + answer,  {},
+        _this.ajax_url + '/' + 'submit', JSON.stringify(sendData),
         function (response) {
+            if (
+                (response.hasOwnProperty('status') !== true) ||
+                (typeof response.status !== 'string') ||
+                (response.status.toLowerCase() !== 'success')) {
+                    console.log('Bad response!');
+                    return;
+            }
             console.log('success! response = ');
             console.log(response);
-
-
-            _this.showWordCloud(response.poll_answers, response.total);
-
+            _this.showWordCloud();
         }
     );
 
 }, // End-of: 'submitAnswer': function (answer, answerEl) {
 
 'showWordCloud': function(){
-    console.log('TADAM!!!')
+    console.log('Show word cloud.');
+    
+    inputSection = this.wordCloudEl.find('#input-cloud-section');
+    resultSection = this.wordCloudEl.find('#result-cloud-section');
+    
+    resultSection.text('TODO: Word cloud canvas');
+    inputSection.hide();
+    resultSection.show();
 },
 
 }; // End-of: WordCloudMain.prototype = {
@@ -38,19 +54,24 @@ return WordCloudMain;
 
 function WordCloudMain(el) {
     var _this;
-
-    this.questionEl = $(el).find('.poll_question');
-    if (this.questionEl.length !== 1) {
+    this.wordCloudEl = $(el).find('.word_cloud');
+    if (this.wordCloudEl.length !== 1) {
         // We require one question DOM element.
-        logme('ERROR: WordCloudMain constructor requires one question DOM element.');
+        logme('ERROR: WordCloudMain constructor requires one word cloud DOM element.');
 
         return;
     }
 
-    // Access this object inside inner functions.
+    this.inputSaveEl = $(el).find('input.save');
+
+    // Get the URL to which we will post the users words.
+    this.ajax_url = this.wordCloudEl.data('ajax-url');
+
     _this = this;
+    this.inputSaveEl.on('click', function () {
+        _this.submitAnswer();
+    });
 
-    this.submitAnswer(this.questionEl)
 } // End-of: function WordCloudMain(el) {
 
 }); // End-of: define('WordCloudMain', ['logme'], function (logme) {

common/lib/xmodule/xmodule/tests/test_import.py

@@ -437,7 +437,7 @@ class ImportTestCase(BaseCourseTestCase):
         location = Location(location.tag, location.org, location.course,
             'sequential', 'Problem_Demos')
         module = modulestore.get_instance(course.id, location)
-        self.assertEqual(len(module.children), 2)
+        self.assertEqual(len(module.children), 1)
 
     def test_cohort_config(self):
         """

common/lib/xmodule/xmodule/word_cloud_module.py

@@ -31,8 +31,9 @@ class WordCloudFields(object):
     display_name = String(help="Display name for this module", scope=Scope.settings)
     num_inputs = Integer(help="Number of inputs", scope=Scope.settings)
 
-    submitted = Boolean(help="Whether this student has voted on the poll", scope=Scope.student_state, default=False)
+    submitted = Boolean(help="Whether this student has posted words to the cloud", scope=Scope.student_state, default=False)
     student_words= List(help="Student answer", scope=Scope.student_state, default=[])
+
     all_words = Object(help="All possible words from other students", scope=Scope.content)
     top_words = Object(help="Top N words for word cloud", scope=Scope.content)
     top_low_border = Integer(help="Number to distinguish top from all words", scope=Scope.content)
@@ -45,10 +46,10 @@ class WordCloudModule(WordCloudFields, XModule):
              resource_string(__name__, 'js/src/word_cloud/word_cloud.js'),
              resource_string(__name__, 'js/src/word_cloud/word_cloud_main.js')]
          }
-    # css = {'scss': [resource_string(__name__, 'css/word_cloud/display.scss')]}
+    css = {'scss': [resource_string(__name__, 'css/word_cloud/display.scss')]}
     js_module_name = "WordCloud"
 
-    Number_of_top_words = 250
+    number_of_top_words = 250
 
     def handle_ajax(self, dispatch, get):
         """Ajax handler.
@@ -61,6 +62,7 @@ class WordCloudModule(WordCloudFields, XModule):
             json string
         """
         if dispatch == 'submit':
+            student_words_from_client = json.loads(get.lists()[0][0])['data']
 
             # self.all_words[word] -= 1
             # FIXME: fix this, when xblock will support mutable types.
@@ -69,42 +71,44 @@ class WordCloudModule(WordCloudFields, XModule):
             temp_all_words = self.all_words
             temp_top_words = self.top_words
 
-            if self.submitted:
+            # if self.submitted:
 
-                for word in self.student_words:
-                    temp_all_words[word] -= 1
+            #     for word in self.student_words:
+            #         temp_all_words[word] -= 1
 
-                    if word in temp_top_words:
-                        temp_top_words -= 1
+            #         if word in temp_top_words:
+            #             temp_top_words -= 1
 
-            else:
-                self.submitted = True
+            # else:
+            #     self.submitted = True
 
-            self.student_words = get['student_words']
+            # self.student_words = student_words_from_client
 
-            question_words = {}
+            # question_words = {}
 
-            for word in self.student_words:
-                temp_all_words[word] += 1
+            # for word in self.student_words:
+            #     temp_all_words[word] += 1
 
-                if word in temp_top_words:
-                    temp_top_words += 1
-                else:
-                    if temp_all_words[word] > top_low_border:
-                        question_words[word] = temp_all_words[word]
+            #     if word in temp_top_words:
+            #         temp_top_words += 1
+            #     else:
+            #         if temp_all_words[word] > top_low_border:
+            #             question_words[word] = temp_all_words[word]
 
 
-            self.all_words = temp_all_words
+            # self.all_words = temp_all_words
+            # self.top_words = self.update_top_words(question_words, temp_top_words)
 
-            self.top_words = self.update_top_words(question_words, temp_top_words)
 
+            # return json.dumps({'student_words': self.student_words,
+            #                    'top_words': self.top_words,
+            #                    })
 
-            return json.dumps({'student_words': self.student_words,
-                               'top_words': self.top_words,
-                               })
+            return json.dumps({'student_words': ['aa', 'bb'], 'top_words': ['aa', 'bb', 'RRR'], 'status': 'success'})
         elif dispatch == 'get_state':
             return json.dumps({'student_answers': self.student_answers,
-                               'top_words': self.top_words
+                               'top_words': self.top_words,
+                               'status': 'success'
                                })
         else:  # return error message
             return json.dumps({'error': 'Unknown Command!'})
@@ -128,6 +132,7 @@ class WordCloudModule(WordCloudFields, XModule):
                   'element_class': self.location.category,
                   'ajax_url': self.system.ajax_url,
                   'configuration_json': json.dumps({}),
+                  'num_inputs': int(self.num_inputs),
                   }
         self.content = self.system.render_template('word_cloud.html', params)
         return self.content

common/test/data/word_cloud/sequential/Problem_Demos.xml

 <sequential>
     <vertical>
-        <word_cloud display_name="cloud" num_inputs="5">
-            <html>
-                Some text
-            </html>
-        </word_cloud>
+        <word_cloud display_name="cloud" num_inputs="5" />
     </vertical>
 </sequential>

lms/templates/word_cloud.html

@@ -3,6 +3,20 @@
     class="${element_class}"
     data-ajax-url="${ajax_url}"
 >
+
+    <section id="input-cloud-section">
+        % for row in range(num_inputs):
+            <input class="input-cloud" type="text" size="40" />
+        % endfor
+
+        <section class="action">
+            <input class="save" type="button" value="Save" />
+        </section>
+    </section>
+
+    <section id="result-cloud-section" style="display: none;">
+    </section>
+
     <!-- Hidden field to read configuration JSON from. -->
     <div class="${element_class}_div" id="${element_id}_json" style="display: none;">${configuration_json}</div>
 </section>