edx-platform/lms/templates/problem.html

<%page expression_filter="h"/>
<%!
from django.utils.translation import ungettext, ugettext as _
from openedx.core.djangolib.markup import HTML
%>

<%namespace name='static' file='static_content.html'/>
<h3 class="hd hd-3 problem-header" id="${ short_id }-problem-title" aria-describedby="${ id }-problem-progress" tabindex="-1">
  ${ problem['name'] }
</h3>

<div class="problem-progress" id="${ id }-problem-progress"></div>

<div class="problem">
  ${ HTML(problem['html']) }
  <div class="action">
    <input type="hidden" name="problem_id" value="${ problem['name'] }" />
    % if demand_hint_possible:
      <div class="problem-hint">
        <%include file="problem_notifications.html" args="
         notification_name='hint',
         notification_type='problem-hint',
         notification_icon='fa-question',
         notification_message=''"
       />
      </div>
    % endif

    <div class="submit-attempt-container">
      <button type="button" class="submit btn-brand" data-submitting="${ submit_button_submitting }" data-value="${ submit_button }" data-should-enable-submit-button="${ should_enable_submit_button }" aria-describedby="submission_feedback_${short_id}" ${'' if should_enable_submit_button else 'disabled'}>
          <span class="submit-label">${ submit_button }</span>
      </button>

      % if submit_disabled_cta:
        <form class="submit-cta" method="post" action="${submit_disabled_cta['link']}">
          <input type="hidden" id="csrf_token" name="csrfmiddlewaretoken" value="${csrf_token}">
          % for form_name, form_value in submit_disabled_cta['form_values'].items():
              <input type="hidden" name="${form_name}" value="${form_value}">
          % endfor
          <button class="submit-cta-link-button btn-brand">${submit_disabled_cta['link_name']}
            <span class="submit-cta-description" tabindex="0" role="note" aria-label="description">
              <span data-tooltip="${submit_disabled_cta['description']}" data-tooltip-show-on-click="true"
                  class="fa fa-info-circle fa-lg" aria-hidden="true">
              </span>
            </span>
            <span class="sr">(${submit_disabled_cta['description']})</span>
          </button>
        </form>
      % endif
      <div class="submission-feedback" id="submission_feedback_${short_id}">
        % if attempts_allowed:
          ${ungettext("You have used {num_used} of {num_total} attempt", "You have used {num_used} of {num_total} attempts", attempts_allowed).format(num_used=attempts_used, num_total=attempts_allowed)}
        % endif
        <span class="sr">${_("Some problems have options such as save, reset, hints, or show answer. These options follow the Submit button.")}</span>
      </div>
    </div>
    <div class="problem-action-buttons-wrapper">
      % if demand_hint_possible:
      <span class="problem-action-button-wrapper">
          <button type="button" class="hint-button problem-action-btn btn-default btn-small" data-value="${_('Hint')}" ${'' if should_enable_next_hint else 'disabled'}><span class="icon fa fa-question" aria-hidden="true"></span>${_('Hint')}</button>
      </span>
      % endif
      % if save_button:
      <span class="problem-action-button-wrapper">
          <button type="button" class="save problem-action-btn btn-default btn-small" data-value="${_('Save')}">
              <span class="icon fa fa-floppy-o" aria-hidden="true"></span>
              <span aria-hidden="true">${_('Save')}</span>
              <span class="sr">${_("Save your answer")}</span>
          </button>
      </span>
      % endif
      % if reset_button:
      <span class="problem-action-button-wrapper">
          <button type="button" class="reset problem-action-btn btn-default btn-small" data-value="${_('Reset')}"><span class="icon fa fa-refresh" aria-hidden="true"></span><span aria-hidden="true">${_('Reset')}</span><span class="sr">${_("Reset your answer")}</span></button>
      </span>
      % endif
      % if answer_available:
      <span class="problem-action-button-wrapper">
          <button type="button" class="show problem-action-btn btn-default btn-small" aria-describedby="${ short_id }-problem-title"><span class="icon fa fa-info-circle" aria-hidden="true"></span><span class="show-label">${_('Show Answer')}</span></button>
      </span>
      % endif
    </div>
  </div>
    <%include file="problem_notifications.html" args="
      notification_type='warning',
      notification_icon='fa-exclamation-circle',
      notification_name='gentle-alert',
      notification_message=''"
    />
    % if answer_notification_type:
        % if 'correct' == answer_notification_type:
            <%include file="problem_notifications.html" args="
                notification_type='success',
                notification_icon='fa-check',
                notification_name='submit',
                is_hidden=False,
                notification_message=answer_notification_message"
            />
        % endif
        % if 'incorrect' == answer_notification_type:
            <%include file="problem_notifications.html" args="
                notification_type='error',
                notification_icon='fa-close',
                notification_name='submit',
                is_hidden=False,
                notification_message=answer_notification_message"
            />
        % endif
        % if 'partially-correct' == answer_notification_type:
            <%include file="problem_notifications.html" args="
                notification_type='success',
                notification_icon='fa-asterisk',
                notification_name='submit',
                is_hidden=False,
                notification_message=answer_notification_message"
            />
        % endif
        % if 'submitted' == answer_notification_type:
            <%include file="problem_notifications.html" args="
                notification_type='general',
                notification_icon='fa-info-circle',
                notification_name='submit',
                is_hidden=False,
                notification_message=answer_notification_message"
            />
        % endif
    % endif
    <%include file="problem_notifications.html" args="
      notification_type='warning',
      notification_icon='fa-save',
      notification_name='save',
      notification_message=save_message,
      is_hidden=not has_saved_answers"
    />
    <%
        notification_message=_('Answers are displayed within the problem')
    %>
    <%include file="problem_notifications.html" args="
      notification_type='general',
      notification_icon='fa-info-circle',
      notification_name='show-answer',
      notification_message=notification_message,
      is_hidden=True"
    />
</div>