in the extension part type's Testing tab, render the prompt

fixes #776.

An unintuitive side-effect of rendering the prompt in the testing tab is
that any HTML-valued variables, such as JSXGraph diagrams, disappear
from the preview in the Variables tab because they've been moved to the
part's Testing tab.

It might make sense to use a restored copy of the question's variables
in the part marking script, if that doesn't make everything too slow.

editor/static/css/question/edit.css

@@ -115,6 +115,10 @@
     display: inline;
 }
 
+.part .form-group .label-block > :nth-child(2) {
+    font-weight: normal;
+}
+
 table.variable-list > tbody > tr > td {
     padding: 8px 0;
 }

editor/static/js/editor.js

@@ -2214,6 +2214,33 @@ $(document).ready(function() {
         }
     };
 
+    ko.bindingHandlers.DOMsubvars = {
+        update: function(element,valueAccessor) {
+            const html_string = ko.unwrap(valueAccessor());
+            var d = document.createElement('div');
+            d.innerHTML = html_string;
+            let html = d.firstElementChild;
+            element.appendChild(d);
+            const scope = find_jme_scope(d).scope;
+            html = Numbas.jme.variables.DOMcontentsubvars(d,scope);
+            element.innerHTML = '';
+            element.appendChild(html);
+            $(element).mathjax();
+        }
+    }
+
+    ko.bindingHandlers.jme_scope = {
+        update: function(element, valueAccessor) {
+            const scope = ko.unwrap(valueAccessor());
+            if(scope) {
+                element.classList.add('jme-scope');
+                $(element).data('jme-scope',scope);
+            } else {
+                element.classList.remove('jme-scope');
+            }
+        }
+    }
+
     ko.bindingHandlers.latex = {
         update: function(element,valueAccessor) {
             ko.bindingHandlers.html.update.apply(this,arguments);

editor/static/js/question/edit.js

@@ -3963,7 +3963,7 @@ $(document).ready(function() {
                 if(!answer) {
                     throw(new Numbas.Error("Student's answer not set. There may be an error in the input widget."));
                 }
-                if(!answer.valid) {
+                if(part.type !='extension' && !answer.valid) {
                     if(answer.empty) {
                         mt.last_run({error: ''})
                     } else {

editor/templates/question/edit_part.html

@@ -164,6 +164,36 @@ <h5>Feedback</h5>
                         </section>
                     </form>
                 <!-- /ko -->
+                <!-- ko if: $parent.type().name=='extension' -->
+                    <div class="help-block">
+                        <p>This is an <em>extension</em> type part. There is no expected answer, and it's assumed that the marking depends on interactions within the part's prompt.</p>
+                        <p>You can test this part's marking algorithm by interacting with the rendering of the part's prompt below.</p>
+                    </div>
+                    <form class="form-horizontal answer-input" data-bind="submit: run">
+                        <div class="form-group">
+                            <label class="label-block">
+                                <div class="col-sm-12 col-md-3">
+                                    Student's answer
+                                </div>
+                                <div class="col-sm-12 col-md-9" data-bind="jme_scope: $root.questionScope, DOMsubvars: $parent.prompt">
+                                </div>
+                            </label>
+                        </div>
+                        <div class="form-group">
+                            <div class="col-md-offset-3">
+                                <button type="submit" class="btn btn-primary" data-bind="disabled: waiting_for_pre_submit">Submit this answer</button>
+                                <span class="text-info" data-bind="visible: waiting_for_pre_submit">Your answer is being marked.</span>
+                            </div>
+                        </div>
+                        <section class="last-run-feedback" data-bind="if: last_run() && last_run().message_displays">
+                            <h5>Feedback</h5>
+                            <ul class="list-unstyled" data-bind="foreach: last_run().message_displays">
+                                <li class="feedbackMessage" data-bind="attr: {'data-credit-change': credit_change}"><span data-bind="css: 'feedback-icon glyphicon '+icon" aria-hidden="true"></span> <!-- ko if: format=='html' --><span data-bind="dom: message"></span><!-- /ko --><!-- ko if: format=='string' --><span class="message" data-bind="html: message"></span><!-- /ko --></li>
+                            </ul>
+                            <p><strong>Score:</strong> <span data-bind="text: last_run().score"></span></p>
+                        </section>
+                    </form>
+                <!-- /ko -->
                 <!-- ko if: $parent.type().name=='gapfill' -->
                 <form class="form-horizontal answer-input" data-bind="submit: run">
                     <table class="table">