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" src="/wiki/images/thumb/3/3b/Swift-og.png/600px-Swift-og.png" />
         <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": {"swift": {}},
                         "sourceLanguage": {},
                         "sourceFiles": [{"path": "main.swift", "contents": codeEditor<!--{$exerciseID|validate:int}-->.getValue()}],
                         "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!")
}
}}