When reviewing a quiz, the answer text areas are readonly. So the JavaScript should check the original textarea and, if it's readonly, mark its own new textarea readonly too. It should also turn off event handling.
Finding the original text area is slightly tricky in the current master branch of CodeRunner. The development version has a ___textareaId___ macro (see here) which makes it easier. This should be pushed to master by the end of this month.
Using that macro, a modified version of your globalextra HTML would be something like the following (which seems to work OK, though with minimal testing:
<script>
// Based on https://github.com/tomhodgins/liveeditor.
$(document).ready(function() {
var doc = $(document),
html = $(document.getElementById('crui_html___textareaId___')),
ta = $(document.getElementById("___textareaId___")),
iframedoc = document.getElementById("preview___textareaId___").contentWindow.document;
function show_preview() {
iframedoc.write("<head><\/head><body>" + html.val() + "<\/body>");
iframedoc.close();
}
show_preview();
if (ta.is('[readonly]')) {
html.prop('readonly', true);
} else {
doc.keyup(show_preview);
}
});
</script>
<textarea id="crui_html___textareaId___" rows="5" style="width: 100%; max-width: 100%;" value="" class="coderunner-ui-element" name='crui_html' spellcheck="false" placeholder="HTML" autocapitalize="off" autofocus
style="font-family: monospace"></textarea>
<br>
<iframe id="preview___textareaId___" style="width: 100%; max-width: 100%;" height="200"></iframe>
In case you're wondering: I've had to use document.getElementById rather than a simple JQuery $("#...") syntax because the full textareaId has characters (I think colons) that are interpreted by jquery as selector syntax, not part of the ID.