<?xml version="1.0" encoding="UTF-8"?>
<quiz>
<!-- question: 810  -->
  <question type="coderunner">
    <name>
      <text>html_question</text>
    </name>
    <questiontext format="markdown">
      <text>HTML Frage</text>
    </questiontext>
    <generalfeedback format="markdown">
      <text></text>
    </generalfeedback>
    <defaultgrade>1</defaultgrade>
    <penalty>0</penalty>
    <hidden>0</hidden>
    <idnumber></idnumber>
    <coderunnertype>html_question</coderunnertype>
    <prototypetype>2</prototypetype>
    <allornothing>1</allornothing>
    <penaltyregime>0</penaltyregime>
    <precheck>0</precheck>
    <showsource>1</showsource>
    <answerboxlines>18</answerboxlines>
    <answerboxcolumns>100</answerboxcolumns>
    <answerpreload><![CDATA[{"crui_html":["<h1>Hello World</h1>"]}]]></answerpreload>
    <globalextra><![CDATA[<div class="container">
  <div class="row">
    <div class="col-sm">
      <textarea id="html_area" name="crui_html" class="coderunner-ui-element" style="width:100%;"></textarea>
    </div>
    <div id="rendered_html" class="col-sm" style="border: 1px solid #444;">
      HTML Here
    </div>
  </div>
<script>

function render() {
 $("#rendered_html").html($("#html_area").val());
}

function check() {
$(".coderunnerexamples tbody tr").each(function() {
  var testresult;
  $(this).find(">:first-child").each(function () {
    testresult = new Function("html_area","rendered_html", $(this).text())($("#html_area").val(), $("#rendered_html"));
    if (testresult == true) {
      $(this).parent().children().each(function() {
        $(this).css("background-color", "#4c4");
      });
    }
    else {
      $(this).parent().children().each(function() {
        $(this).css("background", "#c44");
      });
    }
  });

});
}


$(window).on("load", function () {
 render();
 check();
});
$("#html_area").on('change keyup paste', function() {
  render();
  check();
});

</script>
</div>]]></globalextra>
    <useace>1</useace>
    <resultcolumns></resultcolumns>
    <template><![CDATA[var SEPARATOR = "#<ab@17943918#@>#";
var student_html = {{ STUDENT_ANSWER }}["crui_html"];

var cheerio = require('cheerio');
var checkHTML = function(html) {
  var doc = document.createElement('div');
  doc.innerHTML = html;
  return ( doc.innerHTML === html );
}

{% for TEST in TESTCASES %}
$ = cheerio.load('<div id="html_area">' + student_html + '</div>'+ '<div id="rendered_html"></div');

$("#rendered_html").html(student_html);
var testcode =  ' {{ TEST.testcode | e("js") }} ';
var testresult = new Function("html_area","rendered_html",  testcode)(student_html, $("#rendered_html"));
if (testresult == true) {
    testresult = '{{ TEST.expected }}';
}
console.log(testresult);
{% if not loop.last %}
console.log(SEPARATOR);
{% endif %}
{% endfor %}]]></template>
    <iscombinatortemplate>1</iscombinatortemplate>
    <allowmultiplestdins>0</allowmultiplestdins>
    <answer></answer>
    <validateonsave>0</validateonsave>
    <testsplitterre><![CDATA[|#<ab@17943918#@>#\n|ms]]></testsplitterre>
    <language>nodejs</language>
    <acelang></acelang>
    <sandbox></sandbox>
    <grader>EqualityGrader</grader>
    <cputimelimitsecs></cputimelimitsecs>
    <memlimitmb>1000</memlimitmb>
    <sandboxparams></sandboxparams>
    <templateparams><![CDATA[{"global_extra_preload": "<script src=\"https://ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js\" type=\"text/javascript\" charset=\"utf-8\"></script>\n\n<textarea id=\"html_area\" name=\"crui_html\" class=\"coderunner-ui-element\" style=\"width:100%;\"></textarea>\n<div id=\"ace_editor\" class=\"html_question\">\n    <script>\n        $( document ).ready(function() {\n        \tconsole.info(\"load\");\n\t\tvar textarea = $('textarea[name=\"crui_html\"]').hide();\n\t\tvar editor = ace.edit(\"ace_editor\");\n\t\tconsole.info(editor, $(\"#ace_editor\"));\n\t\teditor.setTheme(\"ace/theme/github\");\n\t\teditor.getSession().setMode(\"ace/mode/html\");\n\t\teditor.getSession().setValue(textarea.val());\n\t\teditor.getSession().on('change', function() {\n\t\t    textarea.val(editor.getSession().getValue());\n\t\t    textarea.change();\n\t\t});\n        });\n    </script>\n</div>\n<iframe id=\"rendered_html\" style=\"width: 100%; min-height: 400px; border: 1px solid black;\">HTML Here</iframe>\n    \n</div>\n<script>\n    function render() {\n        var html_area = new DOMParser().parseFromString($(\"#html_area\").val(), \"text/html\");\n        document.getElementById(\"rendered_html\").srcdoc = $(html_area).find(\"html\").clone().html();\n    }\n\n    function check() {\n        $(\".coderunnerexamples thead tr>:first-child\").hide();\n        $(\".coderunnerexamples tbody tr\").each(function() {\n            var testresult;\n            $(this).find(\">:first-child\").each(function() {\n                testresult = new Function(\"html_area\", \"rendered_html\", $(this).text())($(\"#html_area\").val(), $(\"#rendered_html\").contents().find(\"html\"));\n                $(this).hide();\n                if (testresult == true) {\n                    $(this).parent().children().each(function() {\n                        $(this).css(\"background-color\", \"#4c4\");\n                    });\n                } else {\n                    $(this).parent().children().each(function() {\n                        $(this).css(\"background\", \"#c44\");\n                    });\n                }\n            });\n\n        });\n    }\n    $(document).ready(function() {\n        render();\n        check();\n    });\n    $(\"#html_area\").on('change keyup paste', function() {\n        console.info(\"change\", $(this).val())\n        render();\n        check();\n\n    });\n</script>\n</div>\n\n<style>\n    .que.coderunner .ace_editor.html_question {\n        height: 400px;\n    }\n</style>\n"}
]]></templateparams>
    <hoisttemplateparams>1</hoisttemplateparams>
    <twigall>1</twigall>
    <uiplugin>html</uiplugin>
    <attachments>0</attachments>
    <attachmentsrequired>0</attachmentsrequired>
    <maxfilesize>10240</maxfilesize>
    <filenamesregex></filenamesregex>
    <filenamesexplain></filenamesexplain>
    <displayfeedback>1</displayfeedback>
    <testcases>
    </testcases>
  </question>

</quiz>