edx-platform/xmodule/capa/templates/matlabinput.html

<section id="textbox_{{ id }}" class="capa_inputtype cminput">
    <div class="script_placeholder" data-src="{{ matlab_editor_js }}"></div>
    <textarea rows="{{ rows }}"
              cols="{{ cols }}"
              name="input_{{ id }}"
              aria-describedby="answer_{{ id }}"
              id="input_{{ id }}"
              data-tabsize="{{ tabsize }}"
              data-mode="octave"
              {% if linenumbers %} data-linenums="true" {% endif %}
              {% if hidden %} style="display:none;" {% endif %}>{{ value }}</textarea>
    <div class="grader-status" tabindex="-1">
        {% include "status_span.html" with status=status status_id=id %}
        {% if status == 'queued' %}<span style="display:none;" class="xqueue" id="{{ id }}">{{ queue_len }}</span>{% endif %}
        {% if hidden %}<div style="display:none;" name="{{ hidden }}" inputid="input_{{ id }}" />{% endif %}
        <p class="debug">{{ status.display_name }}</p>
    </div>
    <span id="answer_{{ id }}"></span>
    <div class="external-grader-message" aria-live="polite">{{ msg|safe }}</div>
    <div class="ungraded-matlab-result" aria-live="polite">{{ queue_msg|safe }}</div>
    {% if button_enabled %}
        <div class="plot-button">
            <input type="button"
                   class="save"
                   name="plot-button"
                   id="plot_{{ id }}"
                   value="Run Code" />
        </div>
    {% endif %}
    <script type="text/javascript">
    $(function(){
      var gentle_alert = function (parent_elt, msg) {
          if($(parent_elt).find('.capa_alert').length) {
              $(parent_elt).find('.capa_alert').remove();
          }
          var alert_elem = $(edx.HtmlUtils.joinHtml(
            edx.HtmlUtils.HTML("<div>"),
            msg,
            edx.HtmlUtils.HTML("</div>")
          ).toString());
          alert_elem.addClass('capa_alert').addClass('is-fading-in');
          // xss-lint: disable=javascript-jquery-insertion
          $(parent_elt).find('.action').after(alert_elem);
      };

      // hook up the plot button
      var plot = function(event) {
          var problem_elt = $(event.target).closest('.problems-wrapper');
          url = $(event.target).closest('.problems-wrapper').data('url');
          input_id = "{{ id|safe }}";

          // save the codemirror text to the textarea
          // since there could be multiple codemirror instances on the page,
          // save all of them.
          $('.CodeMirror').each(function(i, el){
              el.CodeMirror.save();
          });
          var input = $("#input_{{ id|safe }}");

          // pull out the coded text
          submission = input.val();

          answer = input.serialize();

          // a chain of callbacks, each querying the server on success of the previous one
          var poll = function(prev_timeout) {
              $.postWithPrefix(url + "/problem_get", function(response) {
                   var new_result_elem = $(response.html).find(".ungraded-matlab-result").html();
                   var external_grader_msg = $(response.html).find(".external-grader-message").html();
                   var result_elem = $(problem_elt).find(".ungraded-matlab-result");
                   result_elem.addClass("is-fading-in");
                   edx.HtmlUtils.setHtml(result_elem, new_result_elem);
                   var external_grader_msg_elem = $(problem_elt).find(".external-grader-message");
                   external_grader_msg_elem.addClass("is-fading-in");
                   edx.HtmlUtils.setHtml(external_grader_msg_elem, external_grader_msg);
                   // If we have a message about waiting for the external grader.
                   if (external_grader_msg.trim()) {
                        result_elem.html('');
                        // Setup the polling for the next round
                        var next_timeout = prev_timeout * 2;
                        // The XML parsing that capa uses doesn't handle the greater-than symbol properly here, so we are forced to work around it.
                        // The backend MatlabInput code will also terminate after 35 seconds, so this is mostly a protective measure.
                        if (next_timeout === 64000) {
                            gentle_alert(problem_elt, gettext("Your code is still being run. Refresh the page to see updates."));
                        }
                        window.setTimeout(function(){ poll(next_timeout); }, next_timeout);
                   }
              });
          };

          var plot_callback = function(response) {
              if(response.success) {
                  // If successful, start polling.
                  // If we change the initial polling value, we will also need to change the check within poll (next_time === 64000) to match it.
                  poll(1000);
              } else {
                  // Used response.message because input_ajax is returning "message"
                  gentle_alert(problem_elt, response.message);
              }
          };

          var save_callback = function(response) {
              if(response.success) {
                  // send information to the problem's plot functionality
                  Problem.inputAjax(url, input_id, 'plot',
                      {'submission': submission}, plot_callback);
              }
              else {
                  // Used response.msg because problem_save is returning "msg" instead of "message"
                  gentle_alert(problem_elt, response.msg);
              }
          };

          // save the answer
          $.postWithPrefix(url + '/problem_save', answer, save_callback);
      };
      $('#plot_{{ id|safe }}').click(plot);

    });
    </script>
</section>