Levelbuilder Clean Up: Code Area Editors

dashboard/app/views/levels/edit.html.haml

@@ -5,6 +5,10 @@
 
 = form_for [@level], method: @level.new_record? ? :post : :patch, remote: true do |f|
   = f.hidden_field :type, value: @type_class.to_s.presence || @level.type
+
+  Find documentation for levelbuilder and its processes
+  = link_to 'here', 'https://github.com/code-dot-org/code-dot-org/wiki/%5BLevelbuilder%5D-Welcome-to-Levelbuilder', target: '_blank'
+
   .field
     / dsl-defined levels specify a name directly in the DSL text
     - unless @level.is_a? DSLDefined
@@ -21,6 +25,8 @@
 
   / Only enter name to create new records of certain level types.
   - unless @level.new_record? && @level.is_a?(Blockly)
+    = render partial: 'levels/editors/instructions_area', locals: {f: f} unless @level.is_a? EvaluationMulti
+    = render partial: 'levels/editors/code_area', locals: {f: f} if @level.uses_droplet? || @level.is_a?(Blockly)
     = render partial: 'levels/editors/all', locals: {f: f} unless @level.is_a? EvaluationMulti
     = render partial: 'levels/editors/flappy', locals: {f: f} if @level.is_a? Flappy
     = render partial: 'levels/editors/bounce', locals: {f: f} if @level.is_a? Bounce
@@ -49,9 +55,7 @@
     = render partial: 'levels/editors/frequency_analysis', locals: {f: f} if @level.is_a? FrequencyAnalysis
     = render partial: 'levels/editors/public_key_cryptography', locals: {f: f} if @level.is_a? PublicKeyCryptography
     = render partial: 'levels/editors/curriculum_reference', locals: {f: f} if @level.is_a? CurriculumReference
-    = render partial: 'levels/editors/fields/mini_rubric', locals: {f: f} if (@level.uses_droplet?) || @level.is_a?(Blockly) || @level.is_a?(Weblab)
-    // Note that many DSL levels also use this partial. See _dsl.html.haml
-    = render partial: 'levels/editors/fields/teacher_only_markdown', locals: {f: f} if (@level.include_teacher_only_markdown_editor?)
+    = render partial: 'levels/editors/fields/audit_log', locals: {f: f} unless @level.is_a? EvaluationMulti
     = render partial: 'levels/editors/fields/deprecated', locals: {f: f} unless @level.is_a? EvaluationMulti
   .field
     = f.hidden_field :published

dashboard/app/views/levels/editors/_all.html.haml

@@ -10,25 +10,6 @@
   - script_data = { editorall: { video_infos: video_infos }.to_json }
   %script{src: webpack_asset_path('js/levels/editors/_all.js'), data: script_data}
 
-.field
-  = f.label 'Documentation'
-  Find documentation for levelbuilder and its processes
-  = link_to 'here', 'https://github.com/code-dot-org/code-dot-org/wiki/%5BLevelbuilder%5D-Welcome-to-Levelbuilder', target: '_blank'
-
-- unless @level.is_a?(DSLDefined) || @level.is_a?(Unplugged)
-  .field
-    = f.label 'notes'
-    %p
-      Notes for yourself or other Levelbuilders. Viewable here and here alone.
-    = f.text_area :notes, rows: 6, class: "input-block-level"
-
-.field
-  %legend.control-legend.collapsed{data: {toggle: "collapse", target: "#audit_log_info"}}
-    Audit Log
-  %p A log of the people who most recently edited this level (up to the last 10 people)
-  #audit_log_info.collapse
-    = render partial: 'levels/editors/fields/audit_log', locals: {f: f}
-
 - if !@level.is_a?(BubbleChoice)
   = render partial: 'levels/editors/fields/bubble_choice_sublevel', locals: {f: f}
 
@@ -42,25 +23,6 @@
   = f.select :video_key, options_for_select(video_key_choices, @level.video_key), {include_blank: true}, {class: 'video-dropdown'}
   .video-preview{style: 'display: block'}
 
--# Deprecated for Sprite Lab and Dance
-- if !(@level.is_a?(GamelabJr) || @level.is_a?(Dancelab) || @level.is_a?(BubbleChoice))
-  .field
-    = f.label :map_reference, 'Map Reference'
-    %p If there is a key resource you want to reference in the instructions, add the link here. It will show up under the 'Help & Tips' tab.
-    %p This should be a string representing the URL on studio.code.org/docs you want to embed, i.e. '/docs/csd/maker_leds/index.html'.
-    = f.text_field :map_reference, placeholder: 'Map Reference'
-
-
-  .field
-    = f.label :reference_link, 'Reference Links'
-    %p Add links to pages on Curriculum Builder below. They will show up in the 'Help & Tips' tab below any videos and the map reference.
-    %p These should be strings representing the URL on [docs|curriculum].code.org you want to embed, i.e. '/docs/csd/maker_leds/index.html' or '/curriculum/path/to/file'.
-    %p Put each link on a new line
-    .row
-      .span8
-        - @level.reference_links = [''] unless @level.reference_links.try(:present?)
-        = text_area_tag 'level[reference_links]', @level.reference_links.join("\r\n"), rows: 6, class: "input-block-level", placeholder: 'Additional Reference Link'
-
 =render partial: 'levels/editors/fields/callouts', locals: {f: f}
 - if @level.respond_to? :free_play
   .field
@@ -86,7 +48,4 @@
     %p If specified, users with this experiment on the levelbuilder machine will be able to edit this level.
     = f.text_field :editor_experiment, placeholder: 'Editor Experiment'
 
-= render partial: 'levels/editors/fields/instructions', locals: {f: f} unless @level.is_a?(DSLDefined) || @level.is_a?(Unplugged)
-= render partial: 'levels/editors/droplet', locals: {f: f} if @level.uses_droplet?
 = render partial: 'levels/editors/fields/curriculum_specific', locals: {f: f} if (@level.uses_droplet?) || @level.is_a?(Blockly)
-= render partial: 'levels/editors/blockly', locals: {f: f} if !(@level.uses_droplet?) && @level.is_a?(Blockly)

dashboard/app/views/levels/editors/_applab.html.haml

@@ -1,48 +1,23 @@
 - content_for(:head) do
   %script{src: webpack_asset_path('js/levels/editors/_applab.js')}
 
+= render partial: 'levels/editors/fields/debugger', locals: {f: f}
+
 .field
   = f.label :slider_speed, 'Slider speed'
   %p Number from 0.0 to 1.0 for how fast Applab runs by default while in the IDE. If not set, default is 1.0
   = f.number_field :slider_speed, :step => 0.1
+
 .field
   = render partial: 'levels/editors/fields/checkboxes', locals: {f: f, field_name: :show_turtle_before_run, description: "Show turtle before Run is pressed"}
-.field
-  = render partial: 'levels/editors/fields/checkboxes', locals: {f: f, field_name: :design_mode_at_start, description: "Start in Design Mode"}
 .field
   = render partial: 'levels/editors/fields/checkboxes', locals: {f: f, field_name: :widget_mode, description: "Enable Widget Mode: Creates an embeded level with a double-width app screen that auto-runs on page load. The coding workspace, design mode, data mode, the reset button, and sharing are all disabled in widget mode."}
-.field
-  = render partial: 'levels/editors/fields/checkboxes', locals: {f: f, field_name: :hide_design_mode, description: "Hide Design Mode"}
-.field
-  = render partial: 'levels/editors/fields/checkboxes', locals: {f: f, field_name: :makerlab_enabled, description: "Enable Maker APIs"}
-.field
-  = render partial: 'levels/editors/fields/checkboxes', locals: {f: f, field_name: :expand_debugger, description: "Expand Debugger by Default"}
-
-= render partial: 'levels/editors/fields/watchers_ui', locals: {f: f}
-.field
-  = render partial: 'levels/editors/fields/checkboxes', locals: {f: f, field_name: :autocomplete_palette_apis_only, description: "Autocomplete palette APIs only"}
-.field
-  = render partial: 'levels/editors/fields/checkboxes', locals: {f: f, field_name: :execute_palette_apis_only, description: "Execute palette APIs only"}
-.field
-  = render partial: 'levels/editors/fields/checkboxes', locals: {f: f, field_name: :beginner_mode, description: "Beginner mode for loops"}
 
 = render partial: 'levels/editors/fields/submittable', locals: {f: f}
 
-.field
-  = f.label :start_html, 'Starting design mode html'
-  %p
-    This should be equivalent to the level html created by design mode. Learn how to how to make them
-    =link_to 'here', 'https://github.com/code-dot-org/code-dot-org/wiki/%5BLevelbuilder%5D-Adding-Preloaded-Design-Elements-in-App-Lab', target: '_blank'
+= render partial: 'levels/editors/fields/applab_design_mode', locals: {f: f}
 
-  %p
-    IMPORTANT WARNING: If you have referenced images in the HTML and/or  CODE, then you need to get fully-qualified
-    code.org https URLS for these assets and update the HTML and the code to reflect these. You can quickly get full
-    image urls by drag-dropping the image into the markdown section of a dummy level in levelbuilder.
-    Copy the result and paste it here (it should start with something like
-    #{html_escape("<div xmlns='http://www.w3.org/1999/xhtml' id='divApplab'")}...)
-  = f.text_area :start_html, placeholder: 'Start html', rows: 4, value: @level.start_html
-  :javascript
-    levelbuilder.initializeCodeMirror('level_start_html', 'html');
+= render partial: 'levels/editors/fields/applab_data', locals: {f: f}
 
 = render partial: 'levels/editors/fields/encrypted_examples', locals: {f: f, level_type: 'applab'}
 
@@ -66,33 +41,6 @@
   %p
     Lint warnings and errors (in the editor's gutter area) will prevent the student from continuing when the Finish button is pressed.
 
-.field
-  = f.label 'Table Data'
-  Step 1: Create a project at studio.code.org/p/applab and edit the data for a table in the data browser. Step 2: Copy the data via the debug area at the bottom of the table. Step 3: Paste the data below in the format { "tablename": <paste> }
-  %pre
-    = preserve do
-      :escaped
-        Example:
-        {
-          "table_name": [{ "name": "Trevor", "age": 30 }, { "name": "Hadi", "age": 72}],
-          "table_name2": [{ "city": "Seattle", "state": "WA" }, { "city": "Chicago", "state": "IL"}]
-        }
-  = f.text_area 'data_tables', placeholder: 'Insert JSON Data', rows: 4, value: @level.data_tables or ''
-  :javascript
-    levelbuilder.initializeCodeMirror('level_data_tables', 'javascript');
-
-= render partial: 'levels/editors/fields/key_value_data', locals: {f: f}
-
-.field
-  = f.label :data_library_tables,'Dataset Libraries'
-  = f.text_area :data_library_tables, value: @level.data_library_tables, readonly: true
-
-.field
-  = render partial: 'levels/editors/fields/checkboxes', locals: {f: f, field_name: :hide_view_data_button, description: "Hide Data Button"}
-
-.field
-  = render partial: 'levels/editors/fields/checkboxes', locals: {f: f, field_name: :debugger_disabled, description: "Disable code debugger (Console is still enabled)"}
-
 = render partial: 'levels/editors/fields/helper_libraries', locals: {f: f}
 
 :ruby

dashboard/app/views/levels/editors/_code_area.html.haml

@@ -0,0 +1,6 @@
+%legend.control-legend.collapsed{data: {toggle: "collapse", target: "#instructions_area"}}
+  Code Area
+
+#instructions_area.in.collapse
+  = render partial: 'levels/editors/droplet', locals: {f: f} if @level.uses_droplet?
+  = render partial: 'levels/editors/blockly', locals: {f: f} if !(@level.uses_droplet?) && @level.is_a?(Blockly)

dashboard/app/views/levels/editors/_droplet.html.haml

@@ -1,23 +1,36 @@
-.field
-  = f.label :edit_code,'Droplet level'
-.field
-  = f.label :code_functions, 'Edit Droplet Palette'
-  = f.text_area :code_functions, placeholder: 'Droplet Palette', rows: 4, value: @level.code_functions ? JSON.pretty_generate(@level.code_functions) : ''
-
-.field
-  = f.label :start_blocks, 'Edit Starting JavaScript Program'
-  .row
-    .span8
-      ~ f.text_area :start_blocks, placeholder: 'Start Blocks', rows: 4, value: @level.uses_droplet? ? @level.start_blocks : @level.pretty_block('start')
-    #start-preview.span4
-.field
-  = f.label :palette_category_at_start
-  = f.select :palette_category_at_start, options_for_select(@level.class.palette_categories, @level.palette_category_at_start), {include_blank: true}
-.field
+%legend.control-legend.collapsed{data: {toggle: "collapse", target: "#toolbox"}}
+  Toolbox
+
+#toolbox.in.collapse
   = render partial: 'levels/editors/fields/checkboxes', locals: {f: f, field_name: :droplet_tooltips_disabled, description: "Hide droplet documentation tooltips"}
-.field
   = render partial: 'levels/editors/fields/checkboxes', locals: {f: f, field_name: :lock_zero_param_functions, description: "Don't allow parameters to be added to user-defined functions with no parameters"}
-.field
+
+  - if @level.is_a? Applab
+    = render partial: 'levels/editors/fields/checkboxes', locals: {f: f, field_name: :makerlab_enabled, description: "Enable Maker APIs"}
+    = render partial: 'levels/editors/fields/checkboxes', locals: {f: f, field_name: :autocomplete_palette_apis_only, description: "Autocomplete palette APIs only"}
+    = render partial: 'levels/editors/fields/checkboxes', locals: {f: f, field_name: :execute_palette_apis_only, description: "Execute palette APIs only"}
+    = render partial: 'levels/editors/fields/checkboxes', locals: {f: f, field_name: :beginner_mode, description: "Beginner mode for loops"}
+
+  .field
+    = f.label :palette_category_at_start
+    = f.select :palette_category_at_start, options_for_select(@level.class.palette_categories, @level.palette_category_at_start), {include_blank: true}
+
+  .field
+    = f.label :code_functions, 'Edit Droplet Palette'
+    = f.text_area :code_functions, placeholder: 'Droplet Palette', rows: 4, value: @level.code_functions ? JSON.pretty_generate(@level.code_functions) : ''
+
+  %legend.control-legend.collapsed{data: {toggle: "collapse", target: "#libraries"}}
+    Libraries
+
+  #libraries.in.collapse
+    = render partial: 'levels/editors/fields/checkboxes', locals: {f: f, field_name: :libraries_enabled, description: "Enable Libraries"}
+    = f.label :start_libraries,'User-Created Toolbox Libraries (make sure that Enable Libraries ^ is checked)'
+    = f.text_area :start_libraries, value: @level.start_libraries
+
+%legend.control-legend.collapsed{data: {toggle: "collapse", target: "#starter-code"}}
+  Starter Code
+
+#starter-code.in.collapse
   = f.label :text_mode_at_start, 'Code View When Level Starts'
   %p What mode the code is presented as when the level loads
   .aligned-input-group
@@ -29,11 +42,13 @@
   .aligned-input-group
     = f.radio_button :text_mode_at_start, 'true'
     = f.label :text_mode_at_start, 'Always start with text', :value => 'true'
-.field
-  = render partial: 'levels/editors/fields/checkboxes', locals: {f: f, field_name: :libraries_enabled, description: "Enable Libraries"}
-.field
-  = f.label :start_libraries,'User-Created Toolbox Libraries (make sure that Enable Libraries ^ is checked)'
-  = f.text_area :start_libraries, value: @level.start_libraries
+  .field
+    = f.label :start_blocks, 'Edit Starting JavaScript Program'
+    .row
+      .span8
+        ~ f.text_area :start_blocks, placeholder: 'Start Blocks', rows: 4, value: @level.uses_droplet? ? @level.start_blocks : @level.pretty_block('start')
+      #start-preview.span4
+
 :ruby
   script_data = {
     pageOptions: {

dashboard/app/views/levels/editors/_instructions_area.html.haml

@@ -0,0 +1,9 @@
+%legend.control-legend.collapsed{data: {toggle: "collapse", target: "#instructions_area"}}
+  Instructions Area
+
+#instructions_area.in.collapse
+  = render partial: 'levels/editors/fields/instructions', locals: {f: f} unless @level.is_a?(DSLDefined) || @level.is_a?(Unplugged)
+  = render partial: 'levels/editors/fields/help_and_tips', locals: {f: f}
+  // Note that many DSL levels also use this partial. See _dsl.html.haml
+  = render partial: 'levels/editors/fields/teacher_only_markdown', locals: {f: f} if (@level.include_teacher_only_markdown_editor?)
+  = render partial: 'levels/editors/fields/mini_rubric', locals: {f: f} if (@level.uses_droplet?) || @level.is_a?(Blockly) || @level.is_a?(Weblab)

dashboard/app/views/levels/editors/fields/_applab_data.html.haml

@@ -0,0 +1,26 @@
+%legend.control-legend{data: {toggle: "collapse", target: "#data"}}
+  Data
+#data.in.collapse
+  .field
+    = f.label 'Table Data'
+    Step 1: Create a project at studio.code.org/p/applab and edit the data for a table in the data browser. Step 2: Copy the data via the debug area at the bottom of the table. Step 3: Paste the data below in the format { "tablename": <paste> }
+    %pre
+      = preserve do
+        :escaped
+          Example:
+          {
+            "table_name": [{ "name": "Trevor", "age": 30 }, { "name": "Hadi", "age": 72}],
+            "table_name2": [{ "city": "Seattle", "state": "WA" }, { "city": "Chicago", "state": "IL"}]
+          }
+    = f.text_area 'data_tables', placeholder: 'Insert JSON Data', rows: 4, value: @level.data_tables or ''
+    :javascript
+      levelbuilder.initializeCodeMirror('level_data_tables', 'javascript');
+
+  = render partial: 'levels/editors/fields/key_value_data', locals: {f: f}
+
+  .field
+    = f.label :data_library_tables,'Dataset Libraries'
+    = f.text_area :data_library_tables, value: @level.data_library_tables, readonly: true
+
+  .field
+    = render partial: 'levels/editors/fields/checkboxes', locals: {f: f, field_name: :hide_view_data_button, description: "Hide Data Button"}

dashboard/app/views/levels/editors/fields/_applab_design_mode.html.haml

@@ -0,0 +1,22 @@
+%legend.control-legend{data: {toggle: "collapse", target: "#design_mode"}}
+  Design Mode
+#design_mode.in.collapse
+
+  = render partial: 'levels/editors/fields/checkboxes', locals: {f: f, field_name: :design_mode_at_start, description: "Start in Design Mode"}
+  = render partial: 'levels/editors/fields/checkboxes', locals: {f: f, field_name: :hide_design_mode, description: "Hide Design Mode"}
+
+  .field
+    = f.label :start_html, 'Starting design mode html'
+    %p
+      This should be equivalent to the level html created by design mode. Learn how to how to make them
+      =link_to 'here', 'https://github.com/code-dot-org/code-dot-org/wiki/%5BLevelbuilder%5D-Adding-Preloaded-Design-Elements-in-App-Lab', target: '_blank'
+
+    %p
+      IMPORTANT WARNING: If you have referenced images in the HTML and/or  CODE, then you need to get fully-qualified
+      code.org https URLS for these assets and update the HTML and the code to reflect these. You can quickly get full
+      image urls by drag-dropping the image into the markdown section of a dummy level in levelbuilder.
+      Copy the result and paste it here (it should start with something like
+      #{html_escape("<div xmlns='http://www.w3.org/1999/xhtml' id='divApplab'")}...)
+    = f.text_area :start_html, placeholder: 'Start html', rows: 4, value: @level.start_html
+    :javascript
+      levelbuilder.initializeCodeMirror('level_start_html', 'html');

dashboard/app/views/levels/editors/fields/_audit_log.html.haml

@@ -1,15 +1,19 @@
-%table.audit_log
-  %tr
-    %th Date
-    %th What Was Changed
-    %th Who Changed It
-  - if(@level.audit_log != nil)
-    - aud_log = JSON.parse(@level.audit_log)
-    - aud_log.last(10).reverse_each do |log|
-      %tr
-        %td.aud_date= DateTime.parse(log["changed_at"]).strftime("%v at: %r")
-        %td.aud_changes
-          %ul
-            -log["changed"].each_with_index do |change, i|
-              %li= change
-        %td.aud_person= log["changed_by_email"]
+%legend.control-legend.collapsed{data: {toggle: "collapse", target: "#audit_log_info"}}
+  Audit Log
+%p A log of the people who most recently edited this level (up to the last 10 people)
+#audit_log_info.collapse
+  %table.audit_log
+    %tr
+      %th Date
+      %th What Was Changed
+      %th Who Changed It
+    - if(@level.audit_log != nil)
+      - aud_log = JSON.parse(@level.audit_log)
+      - aud_log.last(10).reverse_each do |log|
+        %tr
+          %td.aud_date= DateTime.parse(log["changed_at"]).strftime("%v at: %r")
+          %td.aud_changes
+            %ul
+              -log["changed"].each_with_index do |change, i|
+                %li= change
+          %td.aud_person= log["changed_by_email"]

dashboard/app/views/levels/editors/fields/_debugger.html.haml

@@ -1,11 +1,7 @@
 %legend.control-legend.collapsed{data: {toggle: "collapse", target: "#debuggingTools"}}
-  Debugging
+  Debugger
 
-#debuggingTools.collapse
+#debuggingTools.in.collapse
   = render partial: 'levels/editors/fields/checkboxes', locals: {f: f, field_name: :expand_debugger, description: "Expand Debugger by Default"}
-
+  = render partial: 'levels/editors/fields/checkboxes', locals: {f: f, field_name: :debugger_disabled, description: "Disable code debugger (Console is still enabled)"}
   = render partial: 'levels/editors/fields/watchers_ui', locals: {f: f}
-
-  .field.aligned-input-group
-    = boolean_check_box f, :debugger_disabled
-    =f.label 'Disable code debugger (Console is still enabled)'

dashboard/app/views/levels/editors/fields/_deprecated.html.haml

@@ -3,6 +3,13 @@
 
 #deprecated.collapse
 
+  - unless @level.is_a?(DSLDefined) || @level.is_a?(Unplugged)
+    .field
+      = f.label 'notes'
+      %p
+        Notes for yourself or other Levelbuilders. Viewable here and here alone.
+      = f.text_area :notes, rows: 6, class: "input-block-level"
+
   .field
     = f.label 'concepts'
     %p