Can the ACE editor be used in the HTML UI?

Can the ACE editor be used in the HTML UI?

by M. César Rodríguez -
Number of replies: 2

Hi,

I'm using the HTML UI for my questionnaires. I've added HTML <textarea> tags in order for the students to enter small pieces of code. Wanting to have syntax highlighting in such forms, I'm wondering if the <textarea> tags can be replaced with instances of the ACE editor.

If yes ¿how is it done?

Thanks and regards.

In reply to M. César Rodríguez

Re: Can the ACE editor be used in the HTML UI?

by Richard Lobb -

[I've moved this to the question author's forum, where I think it's more likely to be found by other question authors]

I haven't ever done this myself, but Marcus Gafner's thread shows the way. The following seems to work for me, though with minimal testing. Also be warned that due to the vagaries of the Ace UI plugin you will quite likely get the familiar "Ace editor not ready, perhaps reload page" on the first try.

Here's my proof of concept:

Screen shot

And here's the global extra I used for the above (and of course you'll need to replace http://localhost with your Moodle host URL):

<h2>Type Python code here</h2>
<textarea class="coderunner-ui-element"
     id="ace_field1____textareaId___" name="python_code"
     spellcheck="false" rows="10" data-params="" data-lang="python">
</textarea>
<br>
<h2>Type C code here</h2>
<textarea class="coderunner-ui-element"
     id="ace_field2____textareaId___" name="c_code"
     spellcheck="false" rows="10" data-params="" data-lang="c">
</textarea>

<script src="http://localhost/moodle/lib/javascript.php/-1/question/type/coderunner/ace/ace.js"></script>
<script src="http://localhost/moodle/lib/javascript.php/-1/question/type/coderunner/ace/ext-language_tools.js"></script>
<script src="http://localhost/moodle/lib/javascript.php/-1/question/type/coderunner/ace/ext-modelist.js"></script>
<script>

M.util.js_pending('qtype_coderunner/userinterfacewrapper');
require(['qtype_coderunner/userinterfacewrapper'], function(amd) {
    amd.newUiWrapper("ace", "ace_field1____textareaId___");
    M.util.js_complete('qtype_coderunner/userinterfacewrapper');
});

M.util.js_pending('qtype_coderunner/userinterfacewrapper');
require(['qtype_coderunner/userinterfacewrapper'], function(amd) {
    amd.newUiWrapper("ace", "ace_field2____textareaId___");
    M.util.js_complete('qtype_coderunner/userinterfacewrapper');
});
</script>

The above makes use of the ___textareaId___ macro in the latest (4.0) version, but I think it will work OK in earlier versions without that macro, except when a student reviews their submission and you've enabled display of the sample answer.

In reply to Richard Lobb

Re: Can the ACE editor be used in the HTML UI?

by M. César Rodríguez -

Hi,

Thanks Richard, I copied it and seems to work, although I'm not knowing what I'm doing ;-) Maybe it is time for me to start studying how Javascript works inside Moodle.

Thanks & regards.