Refactoring, documenting, moving all HTML generation to template.

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

 .input-cloud {
   margin: 5px;
 }
+
+.result_cloud_section {
+    display: none;
+    width: 0px;
+    height: 0px;
+}
+
+.result_cloud_section.active {
+    display: block;
+    width: 635px;
+    height: auto;
+    margin-left: auto;
+    margin-right: auto;
+}

lms/templates/word_cloud.html

@@ -4,7 +4,7 @@
     data-ajax-url="${ajax_url}"
 >
 
-    <section id="input-cloud-section">
+    <section class="input_cloud_section">
         % for row in range(num_inputs):
             <input
                 class="input-cloud"
@@ -19,7 +19,10 @@
         </section>
     </section>
 
-    <section id="result-cloud-section" style="display: none;">
+    <section id="result_cloud_section_${element_id}" class="result_cloud_section">
+        <h3>Your words: <span class="your_words"></span></h3>
+        <h3>Total number of words: <span class="total_num_words"></span></h3>
+        <div class="word_cloud"></div>
     </section>
 
     <!-- Hidden field to read configuration JSON from. -->