<?xml version="1.0" encoding="UTF-8"?>
<quiz>
<!-- question: 8020  -->
  <question type="coderunner">
    <name>
      <text>An HTML sandpit question</text>
    </name>
    <questiontext format="html">
      <text><![CDATA[<p dir="ltr" style="text-align: left;">A question that demonstrates use of the CodeRunner HTML UI. It asks the user to enter some html, css and javascript and displays the result in an iframe. [The idea is taken from https://github.com/tomhodgins/liveeditor.]</p><p dir="ltr" style="text-align: left;">When the user clicks check, the values of the three textareas are displayed as the 'Got' column of the result table. A regular expression grader might be used to (loosely) check the user's fields. It is set to .*, so all answers are marked right in this version.<br></p>]]></text>
    </questiontext>
    <generalfeedback format="html">
      <text></text>
    </generalfeedback>
    <defaultgrade>1</defaultgrade>
    <penalty>0</penalty>
    <hidden>0</hidden>
    <idnumber></idnumber>
    <coderunnertype>python3</coderunnertype>
    <prototypetype>0</prototypetype>
    <allornothing>1</allornothing>
    <penaltyregime>10, 20, ...</penaltyregime>
    <precheck>0</precheck>
    <hidecheck>0</hidecheck>
    <showsource>0</showsource>
    <answerboxlines>10</answerboxlines>
    <answerboxcolumns>100</answerboxcolumns>
    <answerpreload></answerpreload>
    <globalextra><![CDATA[<script>
// Based on https://github.com/tomhodgins/liveeditor.
$(document).ready(function() {
    var doc = $(document),
        html = $('#crui_html'),
        css = $('#crui_css'),
        js = $('#crui_js'),
        clear = $('#crui_clearall');

    // Display combined content from HTML, CSS, and JS textareas in the iframe.
    function show_preview() {
        var iframedoc = document.getElementById("preview").contentWindow.document;
        iframedoc.write("<head><style>" + css.val() + "<\/style><\/head><body>" + html.val() + "<script>" + js.val() + "</\script><\/body>");
        iframedoc.close();
    }

    function handle_tab(event) {
        var target, start, end, value;
        if (event.keyCode === 9) {
            target = event.target;
            start = target.selectionStart;
            end = target.selectionEnd;
            value = target.value;
            target.value = value.substring(0, start) + "  " + value.substring(end);
            target.selectionStart = target.selectionEnd = start + 2;
            event.preventDefault();
        }
    }

    function clearAll() {
        html.val('');
        css.val('');
        js.val('');
    }

    doc.keydown(handle_tab);
    doc.keyup(show_preview);
    clear.click(clearAll);
    show_preview();
});
</script>

<h1>HTML Demo question</h1>
<a id="crui_clearall" href="#" title="Click to clear all">Clear all</a>
<br>
<textarea id="crui_html" rows="5" cols="80" value="" class="coderunner-ui-element" name='crui_html' spellcheck="false" placeholder="HTML" autocapitalize="off" autofocus
style="font-family: monospace"></textarea>
<br>
<textarea id="crui_css" rows="3" cols="80" value="" placeholder="CSS" class="coderunner-ui-element" name='crui_css' spellcheck="false" autocapitalize="off"
style="font-family: monospace"></textarea>
<br>
<textarea id="crui_js" rows="3" cols="80" value="" class="coderunner-ui-element" name='crui_js' spellcheck="false" placeholder="JavaScript" autocapitalize="off" style="font-family: monospace"></textarea>
<br>
<iframe id="preview" width="700" height="200"></iframe>]]></globalextra>
    <useace></useace>
    <resultcolumns></resultcolumns>
    <template><![CDATA[import json
answer = json.loads("""{{ STUDENT_ANSWER | e('py') }}""")
for key, value in answer.items():
    print(key.replace('crui_', ''))
    print(value[0])
    print()

]]></template>
    <iscombinatortemplate></iscombinatortemplate>
    <allowmultiplestdins></allowmultiplestdins>
    <answer></answer>
    <validateonsave>1</validateonsave>
    <testsplitterre></testsplitterre>
    <language></language>
    <acelang></acelang>
    <sandbox></sandbox>
    <grader>RegexGrader</grader>
    <cputimelimitsecs></cputimelimitsecs>
    <memlimitmb></memlimitmb>
    <sandboxparams></sandboxparams>
    <templateparams></templateparams>
    <hoisttemplateparams>1</hoisttemplateparams>
    <templateparamslang>None</templateparamslang>
    <templateparamsevalpertry>1</templateparamsevalpertry>
    <templateparamsevald>{}</templateparamsevald>
    <twigall>0</twigall>
    <uiplugin>html</uiplugin>
    <uiparameters></uiparameters>
    <attachments>0</attachments>
    <attachmentsrequired>0</attachmentsrequired>
    <maxfilesize>10240</maxfilesize>
    <filenamesregex></filenamesregex>
    <filenamesexplain></filenamesexplain>
    <displayfeedback>1</displayfeedback>
    <testcases>
      <testcase testtype="0" useasexample="0" hiderestiffail="0" mark="1.0000000" >
      <testcode>
                <text></text>
      </testcode>
      <stdin>
                <text></text>
      </stdin>
      <expected>
                <text>.*</text>
      </expected>
      <extra>
                <text></text>
      </extra>
      <display>
                <text>SHOW</text>
      </display>
    </testcase>
    </testcases>
  </question>

</quiz>