CTFd/templates/challenge.html

<div :class="getStyles()" role="document" x-data="Challenge" x-init="id = {{ challenge.id }}">
  <div class="modal-content">
    <div class="modal-body py-4 px-4 px-sm-5">

      <div>
        <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="Close"></button>

        <ul class="nav nav-tabs">
          <li class="nav-item">
            <a class="nav-link active" data-bs-target="#challenge" @click="showChallenge()">
              {% trans %}Challenge{% endtrans %}
            </a>
          </li>

          {% block solves %}
            <li class="nav-item">
              <a class="nav-link challenge-solves" data-bs-target="#solves" @click="showSolves()">
                {% if solves != None %}
                  {{ ngettext("%(num)d Solve", "%(num)d Solves", solves) }}
                {% endif %}
              </a>
            </li>
          {% endblock %}
        </ul>
      </div>

      <div>
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane fade show active" id="challenge">
            <h2 class="challenge-name text-center pt-3">
              {{ challenge.name }}
            </h2>
            <h3 class="challenge-value text-center">
              {{ challenge.value }}
            </h3>


            {% if tags %}
              <div class="challenge-tags text-center pt-2 pb-3">
                {% block tags %}
                  {% for tag in tags %}
                    <span class="challenge-tag badge bg-info">{{ tag }}</span>
                  {% endfor %}
                {% endblock %}
              </div>
            {% endif %}

            <span class="challenge-desc">{% block description %}{{ challenge.html }}{% endblock %}</span>

            {% if challenge.connection_info %}
              <div class="mb-2">
                <span class="challenge-connection-info">
                  {% block connection_info %}
                    {% set conn = challenge.connection_info %}
                    {% if not conn %}
                    {% elif conn.startswith("http") %}
                      {{ conn | urlize(target="_blank") }}
                    {% else %}
                      <code>{{ conn }}</code>
                    {% endif %}
                  {% endblock %}
                </span>
              </div>
            {% endif %}

            {% if hints %}
              <div class="challenge-hints hint-row row">
                <div class="col-12 mb-3">
                {% for hint in hints | sort(attribute="cost") %}
                  <div x-data="Hint" x-init="id = {{ hint.id }}">
                    {% if hint.content %}
                    <details>
                      <summary>{% trans %}View Hint{% endtrans %}</summary>
                      <div>{{ hint.html | safe }}</div>
                    </details>
                    {% else %}
                    <details @toggle="showHint(event)">
                      <summary>Unlock Hint for {{ hint.cost }} point{{ hint.cost|pluralize }}</summary>
                      <div x-html="html"></div>
                    </details>
                    {% endif %}
                  </div>
                {% endfor %}
                </div>
              </div>
            {% endif %}

            {% if files %}
              <div class="row challenge-files text-center pb-3">
                {% for file in files %}
                  <div class="col-md-4 col-sm-4 col-xs-12 file-button-wrapper d-block">
                    {% set segments = file.split('/') %}
                    {% set token = file.split('?') | last %}
                    {% if token %}
                      {% set filename = segments | last | replace("?" + token, "") %}
                    {% else %}
                      {% set filename = segments | last %}
                    {% endif %}
                    <a
                        class="btn btn-info btn-file mb-1 d-inline-block px-2 w-100 text-truncate"
                        href="{{ file }}"
                        title="{{ filename }}"
                    >
                      <i class="fas fa-download"></i>
                      <small>
                        {{ filename }}
                      </small>
                    </a>
                  </div>
                {% endfor %}
              </div>
            {% endif %}

            {% if max_attempts > 0 %}
              <div class="row text-center">
                <div class="col-12">
                  <p>
                    {{ attempts }}/{{ max_attempts }} attempt{{ max_attempts|pluralize }}
                  </p>
                </div>
              </div>
            {% endif %}

            <div class="row submit-row">
              <div class="col-12 col-sm-8">
                {% block input %}
                  <input
                      id="challenge-id" class="challenge-id" type="hidden"
                      value="{{ challenge.id }}"
                  >
                  <input
                      id="challenge-input" class="challenge-input form-control"
                      type="text" name="submission"
                      @keyup.enter="submitChallenge()"
                      placeholder="{% trans %}Flag{% endtrans %}" x-model="submission"
                  >
                {% endblock %}
              </div>

              <div class="col-12 col-sm-4 mt-3 mt-sm-0 key-submit">
                {% block submit %}
                  <button
                      id="challenge-submit"
                      class="challenge-submit btn btn-outline-secondary w-100 h-100" type="submit"
                      @click.debounce.500ms="submitChallenge()"
                  >
                    {% trans %}Submit{% endtrans %}
                  </button>
                {% endblock %}
              </div>
            </div>

            <div class="row notification-row">
              <div class="col-12">
                <template x-if="response">
                  {# This alert is re-used for all alerts, so it's important not to make it dismissble #}
                  <div
                      :class="{
                        'alert text-center w-100 mt-3 alert-success': response.data.status == 'correct',
                        'alert text-center w-100 mt-3 alert-info': response.data.status == 'already_solved',
                        'alert text-center w-100 mt-3 alert-danger': response.data.status == 'incorrect',
                      }" role="alert"
                  >
                    <strong x-text="response.data.message"></strong>
                    <div x-show="(response.data.status == 'correct' || response.data.status == 'already_solved') && getNextId()">
                      <button @click="nextChallenge()" class="btn btn-info mt-3">
                        {% trans %}Next Challenge{% endtrans %}
                      </button>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>

          <div role="tabpanel" class="tab-pane fade" id="solves">
            <div class="row">
              <div class="col-md-12">
                <table class="table table-striped text-center">
                  <thead>
                  <tr>
                    <td>
                      <b>{% trans %}Name{% endtrans %}</b>
                    </td>
                    <td>
                      <b>{% trans %}Date{% endtrans %}</b>
                    </td>
                  </tr>
                  </thead>
                  <tbody id="challenge-solves-names">
                  <template x-for="solve in solves">
                    <tr>
                      <td>
                        <a :href="solve.account_url" x-text="solve.name"></a>
                      </td>
                      <td x-text="solve.date"></td>
                    </tr>
                  </template>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>