[BB-10108] Refactor Branching XBlock to include Ren'Py like features

branching_xblock/static/handlebars/choice-row.handlebars

@@ -1,9 +1,35 @@
 <div class="choice-row" data-choice-idx="{{i}}">
-  <input class="choice-text" value="{{choice.text}}" placeholder="Choice text"/>
-  <select class="choice-target">
-    {{#each options}}
-      <option value="{{this.id}}" {{#if (eq this.id ../choice.target_node_id)}}selected{{/if}}>{{this.label}}</option>
-    {{/each}}
-  </select>
-  <button type="button" class="btn-delete-choice">x</button>
+  <div class="choice-col choice-col--text">
+    <label class="choice-col__label">Choice text</label>
+    <input class="choice-text" value="{{choice.text}}" placeholder="Choice text"/>
+  </div>
+  <div class="choice-col choice-col--score">
+    <label class="choice-col__label">Score</label>
+    <input
+      class="choice-score {{#if score_error}}is-error{{/if}}"
+      type="number"
+      min="0"
+      max="100"
+      step="1"
+      value="{{choice.score}}"
+      placeholder="0"
+      aria-label="Choice score"
+    />
+    {{#if score_error}}
+      <div class="choice-field-error">{{score_error}}</div>
+    {{/if}}
+  </div>
+  <div class="choice-col choice-col--target">
+    <label class="choice-col__label">Destination*</label>
+    <select class="choice-target {{#if destination_error}}is-error{{/if}}">
+      <option value="" {{#unless choice.target_node_id}}selected{{/unless}}>Select node</option>
+      {{#each options}}
+        <option value="{{this.id}}" {{#if (eq this.id ../choice.target_node_id)}}selected{{/if}}>{{this.label}}</option>
+      {{/each}}
+    </select>
+    {{#if destination_error}}
+      <div class="choice-field-error">{{destination_error}}</div>
+    {{/if}}
+  </div>
+  <button type="button" class="btn-delete-choice" aria-label="Delete choice">×</button>
 </div>

branching_xblock/static/handlebars/node-block.handlebars

@@ -22,6 +22,13 @@
       </label>
     </div>
   </label>
+  <div class="overlay-text-control {{#unless (eq node.media.type 'image')}}is-hidden{{/unless}}">
+    <label class="overlay-text-toggle">
+      <input type="checkbox" class="overlay-text-checkbox" {{#if node.overlay_text}}checked{{/if}}>
+      Overlay text on image
+    </label>
+    <p class="overlay-text-help">If left unchecked, text will appear outside the image.</p>
+  </div>
   <label>Hint:<br/>
     <textarea class="node-hint">{{node.hint}}</textarea>
   </label>

branching_xblock/static/handlebars/node-editor.handlebars

@@ -0,0 +1,85 @@
+<div class="bx-node-editor-inner" data-node-id="{{id}}">
+  {{#if node_error_detail}}
+    <div class="bx-node-error-banner" role="alert">
+      <span class="fa fa-exclamation-circle bx-node-error-banner__icon" aria-hidden="true"></span>
+      <div class="bx-node-error-banner__content">
+        <div class="bx-node-error-banner__title">
+          {{#if node_error_title}}{{node_error_title}}{{else}}You can't delete this node{{/if}}
+        </div>
+        <div class="bx-node-error-banner__detail">{{node_error_detail}}</div>
+      </div>
+    </div>
+  {{/if}}
+
+  <div class="bx-node-editor-header">
+    <h2 class="bx-step-title">Node {{number}}</h2>
+    {{#if is_pending_delete}}
+      <span class="bx-pending-delete-badge">Pending deletion</span>
+    {{/if}}
+  </div>
+
+  <label class="bx-field">
+    <div class="bx-field__label">Content</div>
+    <textarea class="bx-textarea" data-role="node-content">{{content}}</textarea>
+  </label>
+
+  <label class="bx-field">
+    <div class="bx-field__label">Media</div>
+    <select class="bx-select" data-role="media-type">
+      <option value="" {{#unless media.type}}selected{{/unless}}>None</option>
+      <option value="image" {{#if (eq media.type 'image')}}selected{{/if}}>Image</option>
+      <option value="video" {{#if (eq media.type 'video')}}selected{{/if}}>Video</option>
+      <option value="audio" {{#if (eq media.type 'audio')}}selected{{/if}}>Audio</option>
+    </select>
+  </label>
+
+  <div class="{{#unless is_image}}is-hidden{{/unless}}" data-role="image-url-fields">
+    <label class="bx-field">
+      <div class="bx-field__label">Left image URL</div>
+      <input type="text" class="bx-input {{#if left_image_url_error}}is-error{{/if}}" data-role="left-image-url" placeholder="URL" value="{{left_image_url}}" />
+      {{#if left_image_url_error}}
+        <div class="bx-field-error">{{left_image_url_error}}</div>
+      {{/if}}
+    </label>
+    <label class="bx-field">
+      <div class="bx-field__label">Right image URL</div>
+      <input type="text" class="bx-input" data-role="right-image-url" placeholder="URL" value="{{right_image_url}}" />
+    </label>
+  </div>
+
+  <label class="bx-field {{#unless show_media_url}}is-hidden{{/unless}}" data-role="media-url-field">
+    <div class="bx-field__label">URL</div>
+    <input type="text" class="bx-input" data-role="media-url" placeholder="URL" value="{{media.url}}" />
+    <div class="bx-help">Supports direct media files (.mp4/.webm/.mp3) or links from YouTube, Vimeo, Panopto.</div>
+  </label>
+
+  <label class="bx-field {{#unless show_transcript}}is-hidden{{/unless}}" data-role="transcript-url-field">
+    <div class="bx-field__label">Transcript URL</div>
+    <input type="text" class="bx-input" data-role="transcript-url" placeholder="https://..." value="{{transcript_url}}" />
+  </label>
+
+  <div class="overlay-text-control {{#unless show_overlay}}is-hidden{{/unless}}" data-role="overlay-text-control">
+    <label class="overlay-text-toggle">
+      <input type="checkbox" class="overlay-text-checkbox" data-role="overlay-text" {{#if overlay_text}}checked{{/if}}>
+      Overlay text on image
+    </label>
+    <p class="overlay-text-help">If left unchecked, text will appear outside the image.</p>
+  </div>
+
+  <label class="bx-checkbox">
+    <input type="checkbox" data-role="no-branches" {{#if no_branches}}checked{{/if}} {{#if has_choices}}disabled{{/if}} />
+    <span>This node has no branches</span>
+  </label>
+
+  <label class="bx-field">
+    <div class="bx-field__label">Hint</div>
+    <textarea class="bx-textarea" data-role="node-hint">{{hint}}</textarea>
+  </label>
+
+  <div class="bx-choices {{#if no_branches}}is-hidden{{/if}}" data-role="choices-section">
+    <h3 class="bx-section-title">Choices</h3>
+    <div class="bx-help bx-choices-help">When a learner selects a choice, the score assigned to that choice is added to the total score.</div>
+    <div class="choices-container" data-role="choices-container"></div>
+    <button type="button" class="bx-btn bx-btn--secondary" data-role="add-choice">Add Choice</button>
+  </div>
+</div>

branching_xblock/static/handlebars/node-list-item.handlebars

@@ -0,0 +1,21 @@
+<div class="bx-node-list-item {{#if is_selected}}is-selected{{/if}} {{#if is_pending_delete}}is-pending-delete{{/if}} {{#if has_errors}}has-errors{{/if}}" data-node-id="{{id}}">
+  <button type="button" class="bx-node-list-item__select" data-role="select-node" data-node-id="{{id}}">
+    Node {{number}}{{#if is_unlinked}} <span class="bx-node-list-item__meta">(unlinked node)</span>{{/if}}
+  </button>
+  {{#if has_errors}}
+    <span class="bx-node-list-item__error" aria-label="Node has errors">!</span>
+  {{/if}}
+  <button
+    type="button"
+    class="bx-node-list-item__delete {{#if is_pending_delete}}is-restore{{/if}}"
+    data-role="toggle-delete-node"
+    data-node-id="{{id}}"
+    aria-label="{{#if is_pending_delete}}Restore node{{else}}Delete node{{/if}}"
+  >
+    {{#if is_pending_delete}}
+      <span class="fa fa-undo" aria-hidden="true"></span>
+    {{else}}
+      <span class="fa fa-trash-o" aria-hidden="true"></span>
+    {{/if}}
+  </button>
+</div>

branching_xblock/static/handlebars/nodes-step.handlebars

@@ -0,0 +1,12 @@
+<div class="bx-wizard bx-nodes-step">
+  <div class="bx-nodes-sidebar">
+    <button type="button" class="bx-btn bx-btn--primary" data-role="add-node">+ Add node</button>
+    <div class="bx-node-limit">Max 30 nodes</div>
+    <div class="bx-node-list" data-role="node-list"></div>
+  </div>
+
+  <div class="bx-nodes-main">
+    <div class="bx-node-editor" data-role="node-editor"></div>
+  </div>
+</div>
+

branching_xblock/static/handlebars/settings-step.handlebars

@@ -0,0 +1,70 @@
+<div class="bx-wizard bx-settings-step">
+  <h2 class="bx-step-title">Settings</h2>
+
+  <label class="bx-field">
+    <div class="bx-field__label">Display Name</div>
+    <input type="text" name="display_name" value="{{display_name}}" class="bx-input" />
+  </label>
+
+  <label class="bx-checkbox">
+    <input type="checkbox" name="enable_undo" {{#if enable_undo}}checked{{/if}} />
+    <span>Let learners try the previous node again</span>
+  </label>
+
+  <label class="bx-checkbox">
+    <input type="checkbox" name="enable_reset_activity" {{#if enable_reset_activity}}checked{{/if}} />
+    <span>Let learners reset the activity</span>
+  </label>
+
+  <label class="bx-checkbox">
+    <input type="checkbox" name="enable_scoring" {{#if enable_scoring}}checked{{/if}} />
+    <span>Include a grade report at the end of the activity</span>
+  </label>
+
+  <div class="bx-grade-range {{#unless enable_scoring}}is-hidden{{/unless}}" data-role="grade-range-section">
+    <h3 class="bx-section-title bx-grade-range__title">Specify Grade Range</h3>
+    <p class="bx-help bx-grade-range__help">Adjust the scale to set percentage ranges for each grade.</p>
+    <div class="bx-grade-range__slider" data-role="grade-range-slider"></div>
+    {{#if grade_ranges_error}}
+      <div class="bx-field-error">{{grade_ranges_error}}</div>
+    {{/if}}
+  </div>
+
+  <h3 class="bx-section-title">Background image</h3>
+  <p class="bx-help">
+    This image will appear in the background of any nodes with “Image” as the media type.
+  </p>
+
+  <label class="bx-field">
+    <div class="bx-field__label">Image URL</div>
+    <input
+      type="text"
+      name="background_image_url"
+      class="bx-input {{#if background_image_url_error}}is-error{{/if}}"
+      placeholder="URL"
+      value="{{background_image_url}}"
+    />
+    {{#if background_image_url_error}}
+      <div class="bx-field-error">{{background_image_url_error}}</div>
+    {{/if}}
+  </label>
+
+  <div class="bx-field">
+    <div class="bx-field__label">Alt text</div>
+    <label class="bx-checkbox bx-checkbox--nested">
+      <input type="checkbox" name="background_image_is_decorative" {{#if background_image_is_decorative}}checked{{/if}} />
+      <span>Decorative image</span>
+    </label>
+    <input
+      type="text"
+      name="background_image_alt_text"
+      class="bx-input {{#if background_image_alt_text_error}}is-error{{/if}}"
+      placeholder="Alt text"
+      value="{{background_image_alt_text}}"
+      {{#if background_image_is_decorative}}disabled{{/if}}
+    />
+    {{#if background_image_alt_text_error}}
+      <div class="bx-field-error">{{background_image_alt_text_error}}</div>
+    {{/if}}
+  </div>
+</div>

branching_xblock/static/html/branching_xblock.html

@@ -11,17 +11,87 @@
                 <div data-role="hint" class="node-hint px-2 py-3"></div>
             </details>
         </div>
-        <div class="choices" data-role="choices"></div>
-
-        <div class="action-row">
-            <button class="undo-button action-secondary btn-secondary" data-role="undo" style="display: none;">
-                Go Back
-            </button>
-            <button type="button" class="reset-button action-secondary btn-secondary" data-role="reset-activity" style="display: none;">
-                Reset
-            </button>
+        <div class="choices" data-role="choices">
+            <h3 class="choices-heading" data-role="choice-heading">Choose Next Step:</h3>
+            <form class="choices-form" data-role="choice-form">
+                <div class="choices-list" data-role="choice-list"></div>
+                <div class="choice-actions">
+                    <div class="choice-actions__secondary">
+                        <button type="button" class="undo-button action-secondary btn-secondary" data-role="undo">
+                            Go Back
+                        </button>
+                        <button type="button" class="reset-button action-secondary btn-secondary" data-role="reset-activity" style="display: none;">
+                            Reset
+                        </button>
+                    </div>
+                    <div class="choice-actions__primary">
+                        <button type="button" class="show-report-button action-primary btn-primary" data-role="show-report" style="display: none;">
+                            Show Report
+                        </button>
+                        <button type="submit" class="choice-submit-button action-primary btn-primary" data-role="submit-choice" disabled>
+                            Submit
+                        </button>
+                    </div>
+                </div>
+            </form>
         </div>
 
         <div class="score-display" data-role="score" style="display: none;"></div>
+        <div class="grade-report" data-role="grade-report" hidden>
+            <h3 class="grade-report__title">Activity Complete!</h3>
+            <p class="grade-report__subtitle">Let's take a look at this report below to see how you performed.</p>
+
+            <div class="grade-report__summary-card">
+                <h4 class="grade-report__section-title">
+                    <span class="grade-report__section-icon" aria-hidden="true">
+                        <span class="fa fa-graduation-cap" aria-hidden="true"></span>
+                    </span>
+                    Your Grade
+                </h4>
+                <div class="grade-report__summary">
+                    <div class="grade-report__metric grade-report__metric--score">
+                        <div class="grade-report__metric-label">
+                            <span class="grade-report__metric-label-icon" aria-hidden="true">
+                                <span class="fa fa-trophy" data-role="report-score-icon" aria-hidden="true"></span>
+                            </span>
+                            Your Score
+                        </div>
+                        <div class="grade-report__metric-value" data-role="report-score">0</div>
+                    </div>
+                    <div class="grade-report__metric grade-report__metric--max">
+                        <div class="grade-report__metric-label">Highest Possible Score</div>
+                        <div class="grade-report__metric-value" data-role="report-max-score">0</div>
+                    </div>
+                    <div class="grade-report__percent" data-role="report-percent-pill">
+                        <svg class="grade-report__percent-ring" viewBox="0 0 120 120" aria-hidden="true" focusable="false">
+                            <circle class="grade-report__percent-track" cx="60" cy="60" r="48"></circle>
+                            <circle class="grade-report__percent-progress" data-role="report-percent-circle" cx="60" cy="60" r="48"></circle>
+                        </svg>
+                        <div class="grade-report__percent-content">
+                            <div class="grade-report__percent-value" data-role="report-percent">0%</div>
+                            <div class="grade-report__percent-label" data-role="report-grade-label"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grade-report__details">
+                <h4 class="grade-report__details-title">
+                    <span class="grade-report__section-icon" aria-hidden="true">
+                        <span class="fa fa-line-chart" aria-hidden="true"></span>
+                    </span>
+                    Detailed Score
+                </h4>
+                <div class="grade-report__details-header">
+                    <span>Your Selections</span>
+                    <span>Score</span>
+                </div>
+                <div class="grade-report__details-rows" data-role="report-details"></div>
+            </div>
+
+            <button type="button" class="action-primary btn-primary" data-role="reset-activity-report" style="display: none;">
+                Reset Activity
+            </button>
+        </div>
     </div>
 </div>

branching_xblock/static/html/branching_xblock_edit.html

@@ -1,12 +1,16 @@
 <div class="wrapper-comp-settings is-active editor-with-buttons">
-  <!-- Editor UI placeholder -->
-  <div class="branching-scenario-editor"></div>
+  <div class="branching-editor-step" data-role="step-settings"></div>
+  <div class="branching-editor-step" data-role="step-nodes" hidden></div>
 
   <!-- Error messages get injected here -->
   <div class="errors" style="color:red;"></div>
 </div>
 
 <div class="xblock-actions">
-  <button type="button" class="action-primary save-button">Save</button>
-  <button type="button" class="action-secondary cancel-button">Cancel</button>
+  <button type="button" class="action-primary" data-role="continue">Continue</button>
+  <button type="button" class="action-primary" data-role="save" hidden>Save</button>
+  <button type="button" class="action-secondary" data-role="back" hidden>Back</button>
+  <button type="button" class="action-secondary" data-role="cancel">Cancel</button>
+  <div class="xblock-actions__error" data-role="save-validation-summary" hidden></div>
+  <div class="xblock-actions__warning" data-role="pending-delete-summary" hidden></div>
 </div>