#P10003. 番外教程(1)题目难度-颜色显示

番外教程(1)题目难度-颜色显示

1.效果

题库显示难度为简单 , 中等 , 困难

2.做法

改priblem_list.html。学一点nunjacks语法即可

3.源码

以下是本站的priblem_list.html

{% import "components/paginator.html" as paginator with context %}
{% import "components/record.html" as record with context %}
{% import "components/problem.html" as problem with context %}
{% import "components/nothing.html" as nothing with context %}
<div data-fragment-id="problem_list">
{% if not pdocs.length %}
  {{ nothing.render('Sorry, there is no problem in the problem set') }}
{% else %}
  {{ paginator.render(page, ppcount, position='top', add_qs=('q=' + qs if qs else '')) }}
  <table class="data-table hide-problem-tag">
    <colgroup>
      <col class="col--checkbox display-mode-hide">
      <col class="col--pid display-mode-hide">
    {% if handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %}
      <col class="col--status edit-mode-hide">
    {% endif %}
      <col class="col--name">
      <col class="col--ac-tried">
      <col class="col--difficulty">
    </colgroup>
    <thead>
      <tr>
        <th class="col--checkbox display-mode-hide">
          <label class="compact checkbox">
            <input type="checkbox" name="select_all" data-checkbox-toggle="problem">
          </label>
        </th>
        <th class="col--pid display-mode-hide">{{ _('ID') }}</th>
        {% if handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %}
          <th class="col--status record-status--border edit-mode-hide">{{ _('Status') }}</th>
        {% endif %}
        <th class="col--name">{{ _('Problem') }}
          <span class="nojs--hide toggle-tag tag--hide">{{ _('Show tags') }}</span>
          <span class="nojs--hide toggle-tag notag--hide">{{ _('Hide tags') }}</span>
        </th>
        <th class="col--ac-tried">{{ _('AC') }} / {{ _('Tried') }}</th>
        <th class="col--difficulty">{{ _('Difficulty') }}</th>
      </tr>
    </thead>
    <tbody>
      {%- for pdoc in pdocs -%}
      {% set psdoc = psdict[pdoc.domainId + '#' + pdoc.docId] %}
      <tr data-pid="{{ pdoc.docId }}">
        <td class="col--checkbox display-mode-hide">
          <label class="compact checkbox">
            <input type="checkbox" data-checkbox-group="problem" data-checkbox-range>
          </label>
        </td>
        <td class="col--pid display-mode-hide">{{ pdoc.docId }}</td>
        {% if handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %}
          {% if psdoc['rid'] %}
            {{ record.render_status_td(psdoc, rid_key='rid', class="edit-mode-hide", allDomain=pdoc.domainId!==handler.args.domainId) }}
          {% else %}
            <td class="col--status record-status--border edit-mode-hide"></td>
          {% endif %}
        {% endif %}
        <td class="col--name col--problem-name">
          {% if handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %}
            <form class="form--inline" action="{{ url('problem_main', domainId = pdoc.domainId) }}" method="post">
              <input type="hidden" name="pid" value="{{ pdoc.docId }}">
              <input type="hidden" name="operation" value="{{ "star" if not psdoc.star else "unstar" }}">
              <button class="star{% if psdoc.star %} activated{% endif %}" type="submit">
                <span class="starred--hide"><span class="icon icon-star--outline" data-tooltip="{{ _('Star') }}"></span></span>
                <span class="starred--show"><span class="icon icon-star" data-tooltip="{{ _('Unstar') }}"></span></span>
              </button>
            </form>
          {% endif %}
          {{ problem.render_problem_title(pdoc) }}
        </td>
        <td class="col--ac-tried">{{ pdoc.nAccept }} / {{ pdoc.nSubmit }}</td>

        {% set dif = pdoc['difficulty'] or lib.difficulty(pdoc.nSubmit, pdoc.nAccept) %}
        {% set color = '#000000' %}
        {% set dif_tag = _('(None)') %}
        {% if dif %}
            {% if 1 <= dif and dif <= 3 %}
                {% set dif_tag = '简单' %}
                {% set color = '#00AF9B' %}
            {% elif 4 <= dif and dif <= 6 %}
                {% set dif_tag = '中等' %}
                {% set color = '#FFB800' %}
            {% else %}
                {% set dif_tag = '困难' %}
                {% set color = '#FF2D55' %}
            {% endif %}
        {% endif %}

        <td class="col--difficulty" style="color : {{color}};font-weight : bold;">{{ dif_tag }}</td>
      </tr>
    {%- endfor -%}
    </tbody>
  </table>
  {{ paginator.render(page, ppcount, add_qs=('q=' + qs if qs else '')) }}
{% endif %}
</div>