Difference between revisions of "Widget:CodeExplorer"
From Coder Merlin
| Line 104: | Line 104: | ||
submitButton.attr("disabled", true); | submitButton.attr("disabled", true); | ||
submitButton.css("background-color", "gray"); | submitButton.css("background-color", "gray"); | ||
// Enable animation | |||
let controlPanel = document.querySelector("#codeEditorControlPanel<!--{$exerciseID|validate:int}-->"); | |||
controlPanel.className = "merlin-code-explorer-control-panel-active shimmer"; | |||
// Clear output | // Clear output | ||
| Line 155: | Line 159: | ||
submitButton.css("background-color", submitButtonBackgroundColor); | submitButton.css("background-color", submitButtonBackgroundColor); | ||
} | } | ||
// Disable animation | |||
controlPanel.className = "merlin-code-explorer-control-panel"; | |||
} | } | ||
}); | }); | ||
| Line 196: | Line 203: | ||
submitButton.css("background-color", submitButtonBackgroundColor); | submitButton.css("background-color", submitButtonBackgroundColor); | ||
} | } | ||
// Disable animation | |||
controlPanel.className = "merlin-code-explorer-control-panel"; | |||
}); | }); | ||
}); | }); | ||
| Line 201: | Line 211: | ||
</script> | </script> | ||
</div> | </div> | ||
<div class="merlin-code-explorer-control-panel"> | <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="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"/> | <input id="codeEditorSubmitButton<!--{$exerciseID|validate:int}-->" class="merlin-code-explorer-submit-button" onclick="this.form.submitter = 'submit';" type="submit" value="Submit"/> | ||
Revision as of 09:00, 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!")
}
}}
