Difference between revisions of "Widget:CodeExplorer"

Revision as of 12:11, 31 December 2022

Parameters:

userName: string: The current user's username
sessionID: string: The ID of the current user's session
experienceID: string: The experienceID of the page from which the widget is invoked
codeExplorerGroupID: string: The code explorer group. If empty, the submit button will be disabled.
exerciseID: integer: exercise id for editor, must be unique per page
width: integer|string: percentage (as string, e.g. "100%" or integer size in pixels), null for no change (full width)
height: integer|string: percentage (as string, e.g. "100%" or integer size in pixels), null for no change (~10 lines)
lineNumbers: boolean: true to display line numbers
theme: string: name of theme (which must be loaded via css)
readOnly: boolean: true if editing should be disabled
mode: string: language for highlighting (which must be loaded via js)
initialCode: string: initial code to place in editor

Example:

{{#widget:CodeExplorer
|userName=john-williams
|sessionID=qh0ubrrme911kcg7db0i0ec6lct94h7f
|experienceID=W1020.23
|codeExplorerGroupID=WTRS-8527
|exerciseID=10
|width=null
|height=null
|lineNumbers=true
|theme=vibrant-ink
|readOnly=false
|mode=swift
|initialCode=func sayHello() {
    print("Hello, World!")
}
}}

@@ Line 58: / Line 58: @@
                              decoration = "merlin-code-explorer-combined-output-error";
                          }
+                        html += "<span class='" + decoration + "'>" + line + "</span><br/>";
+                    }
+                }
+                return html;
+            }
+            function markupRuntimeStandardOutput(string) {
+                let html = "";
+                let decoration = "merlin-code-explorer-combined-runtime-standard-output";
+                if (typeof string == "string") {
+                    let lines = string.split("<br/>");
+                    for (const line of lines) {
                          html += "<span class='" + decoration + "'>" + line + "</span><br/>";
                      }
@@ Line 188: / Line 200: @@
                                   }
                                   $("#codeEditorExecutionOutput<!--{$exerciseID|validate:int}-->").append(consoleToHTML(executionError));
-                                  $("#codeEditorExecutionOutput<!--{$exerciseID|validate:int}-->").append(consoleToHTML(executionOutput));
+                                  $("#codeEditorExecutionOutput<!--{$exerciseID|validate:int}-->").
+                                     append(markupRuntimeStandardOutput(consoleToHTML(executionOutput)));
                                   break;
                               case "submit":
@@ Line 208: / Line 221: @@
                        });
                   });
+                $("#codeEditorForm<!--{$exerciseID|validate:int}--> .merlin-code-explorer-show-compilation-button").click(function () {
+                    const $output = $(this).parent().siblings(".merlin-code-explorer-combined-output:first");
+                    if ($output.is(":visible")) {
+                        $output.slideUp();
+                        $(this).text("Show Compilation Output");
+                    } else {
+                        $output.slideDown();
+                        $(this).text("Hide Compilation Output");
+                    }
+                });
              });
-        </script>
+    </script>
      </div>
      <div id="codeEditorControlPanel<!--{$exerciseID|validate:int}-->" class="merlin-code-explorer-control-panel">
          <input id="codeEditorExecuteButton<!--{$exerciseID|validate:int}-->" class="merlin-code-explorer-execute-button" onclick="this.form.submitter = 'execute';" type="submit" value="Run" />
          <input id="codeEditorSubmitButton<!--{$exerciseID|validate:int}-->" class="merlin-code-explorer-submit-button" onclick="this.form.submitter = 'submit';" type="submit" value="Submit"/>
+        <button class="merlin-code-explorer-show-compilation-button" type="button">Show Compilation Output</button>
      </div>
      <div id="codeEditorCompilerOutput<!--{$exerciseID|validate:int}-->" class="merlin-code-explorer-combined-output"></div>