Difference between revisions of "Widget:CodeExplorer"
From Coder Merlin
Line 40: | Line 40: | ||
<div class="merlin-code-explorer-banner"> | <div class="merlin-code-explorer-banner"> | ||
<img class="merlin-code-explorer-banner-merlin-icon" src="/wiki/resources/assets/MerlinRoundIcon.png" /> | <img class="merlin-code-explorer-banner-merlin-icon" src="/wiki/resources/assets/MerlinRoundIcon.png" /> | ||
<span class="merlin-code-explorer-banner-text">CoderMerlin™ Code Explorer: <!--{$experienceID}--> (<!--{$exerciseID}-->)</span> | <span class="merlin-code-explorer-banner-text">CoderMerlin™ Code Explorer: <!--{$experienceID}--> (<!--{$exerciseID}-->)</span> | ||
<img class="merlin-code-explorer-banner-language-icon" | <div class="dropdown"> | ||
<button class="btn text-light dropdown-toggle py-0" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> | |||
<img class="merlin-code-explorer-banner-language-icon" id="codeExplorerIcon<!--{$exerciseID|validate:int}-->" /> | |||
</button> | |||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> | |||
<div class="dropdown-item" onclick="setCurrentLanguage<!--{$exerciseID|validate:int}-->('c');">C</div> | |||
<div class="dropdown-item" onclick="setCurrentLanguage<!--{$exerciseID|validate:int}-->('java');">Java</div> | |||
<div class="dropdown-item" onclick="setCurrentLanguage<!--{$exerciseID|validate:int}-->('python');">Python</div> | |||
<div class="dropdown-item" onclick="setCurrentLanguage<!--{$exerciseID|validate:int}-->('swift');">Swift</div> | |||
</div> | |||
</div> | |||
</div> | </div> | ||
<div class="merlin-code-explorer-code-panel"> | <div class="merlin-code-explorer-code-panel"> | ||
<textarea id="codeEditorTextArea<!--{$exerciseID|validate:int}-->"><!--{$initialCode}--></textarea> | <textarea id="codeEditorTextArea<!--{$exerciseID|validate:int}-->"><!--{$initialCode}--></textarea> | ||
<script> | <script> | ||
let currentLanguageData<!--{$exerciseID|validate:int}--> = ""; | |||
function setCurrentLanguage<!--{$exerciseID|validate:int}-->(language) { | |||
let languageData = dataFromLanguage(language); | |||
let mode = languageData[0]; | |||
let sourceLanguage = languageData[1]; | |||
let sourceFileSuffix = languageData[2]; | |||
let iconURL = languageData[3]; | |||
currentLanguageData<!--{$exerciseID|validate:int}--> = languageData; | |||
codeEditor<!--{$exerciseID|validate:int}-->.setOption("mode", mode); | |||
document.getElementById("codeExplorerIcon<!--{$exerciseID|validate:int}-->").src = iconURL; | |||
} | |||
function markupWarningsAndErrorsHTML(string) { | function markupWarningsAndErrorsHTML(string) { | ||
let html = ""; | let html = ""; | ||
Line 89: | Line 112: | ||
// Set size | // Set size | ||
codeEditor<!--{$exerciseID|validate:int}-->.setSize("<!--{$width}-->", "<!--{$height}-->"); | codeEditor<!--{$exerciseID|validate:int}-->.setSize("<!--{$width}-->", "<!--{$height}-->"); | ||
// Set language | |||
setCurrentLanguage<!--{$exerciseID|validate:int}-->("swift"); | |||
// Determine if submit button is enabled, if not, disable | // Determine if submit button is enabled, if not, disable | ||
Line 140: | Line 165: | ||
} | } | ||
let sourceLanguage = currentLanguageData<!--{$exerciseID|validate:int}-->[1]; | |||
let sourceFileSuffix = currentLanguageData<!--{$exerciseID|validate:int}-->[2]; | |||
let requestObject = { | let requestObject = { | ||
"sourceLanguage": { | "sourceLanguage": {}, | ||
"sourceFiles": [ | "sourceFiles": [], | ||
"executionMode": {"compileAndExecute": {}} | "executionMode": {"compileAndExecute": {}} | ||
}; | }; | ||
requestObject["sourceLanguage"][sourceLanguage] = {}; | |||
requestObject["sourceFiles"] = [{"path": "main" + "." + sourceFileSuffix, | |||
"contents": codeEditor<!--{$exerciseID|validate:int}-->.getValue()}]; | |||
let requestString = JSON.stringify(requestObject); | let requestString = JSON.stringify(requestObject); | ||
Revision as of 14:37, 8 January 2023
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!") } }}