penracourses/generic/templates/generic/exam_cids.html

<div id="history-modal"
     class="modal modal-blur fade"
     style="display: none"
     aria-hidden="false"
     tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <h2>Exam user history:
            <span id="history-user"></span>
        </h2>
        <div class="modal-content"></div>
    </div>
</div>

<div class="card text-white bg-dark">
    <h3>CID candidates</h3>
    {% if cid_users %}
        <p>{{cid_user_count}} CID candidates.</p>

        <div id="htmx-info"></div>

        <ol class="cid-candidate-list">
            {% for cid in cid_users %}

                <li class="cid-user" data-cid={{cid.cid}}><div class="cid-data">
                    <i class="bi bi-clock-history"
                       title="View user exam history"
                       hx-get="{% url exam.app_name|add:':exam_user_status_cid' exam.id cid.cid %}"
                       hx-target=".modal-content"
                       data-bs-toggle="modal"
                       data-bs-target="#history-modal"
                       _="on htmx:afterOnLoad put {{cid.cid}} into #history-user.innerHTML "
                    ></i>
                    <a href="{% url 'generic:update_cid' cid.pk %}">{{cid.cid}}</a> [{{cid.passcode}}]</div><div class="cid-name">{{cid.name}}</div> <div class="cid-email">Email: {{cid.email}}</div>
                </li>

            {% endfor %}
        </ol>
    {% else %}
        <p>This exam has no CID candidates. Add some with the below link.</p>
    {% endif %}


    <a href="{% url exam.app_name|add:':exam_cids_edit' exam.pk %}">Edit Exam CIDs</a>
</div>
<br/>

<div class="card text-white bg-dark">
    <h3>User candidates</h3>
    {% if user_users %}
        <p>{{user_user_count}} User candidates.</p>

        <ol class="user-candidate-list">
            {% for user in user_users %}

                <li class="user-user" data-user="{{user.username}}">

                    <div>
                        <i class="bi bi-clock-history"
                           title="View user exam history"
                           hx-get="{% url exam.app_name|add:':exam_user_status_user' exam.id user.id %}"
                           hx-target=".modal-content"
                           data-bs-toggle="modal"
                           data-bs-target="#history-modal"
                           _="on htmx:afterOnLoad put {{cid.cid}} into #history-user.innerHTML "
                        ></i>
                        {% if request.user.is_superuser %}
                            <a href='{% url "account_profile" user.username %}'><i class="bi bi-link"></i></a>
                        {% endif %}
                        {{user.username}}</div>
                    <div>Email: {{user.email}}</div>
                </li>

            {% endfor %}
        </ol>
    {% else %}
        <p>This exam has no User candidates. Add some with the below link.</p>
    {% endif %}
    <a href="{% url exam.app_name|add:':exam_users_edit' exam.pk %}">Edit Exam Users</a>

</div>

<br/>

{% if user_exam_data %}
    <div class="card text-white bg-dark">
        <details>
            <summary>
                <h3>Submitted candidates</h3>
            </summary>
            The following candidate submissions have been received. Candidates with submissions will be shown in green above.
            <ul id="submitted-candidates">
                {% for user_data in user_exam_data %}
                    <li data-cid="{{user_data.cid_user}}" data-user="{{user_data.user_user}}">
                        CID: {{user_data.cid_user}} /
                        User: {{user_data.user_user}} /
                        Start time: {{user_data.start_time}} /
                        End time: {{user_data.end_time}} /

                    </li>
                {% endfor %}
            </ul>
        </details>
    </div>
    <br/>
{% endif %}
<span
    title="View all user exam history"
    hx-get="{% url exam.app_name|add:':exam_user_status' exam.id %}"
    hx-target=".modal-content"
    data-bs-toggle="modal"
    data-bs-target="#history-modal"
    _="on htmx:afterOnLoad put {{cid.cid}} into #history-user.innerHTML "
>
    Exam history <i class="bi bi-clock-history"></i>
</span>



{% block js %}
    <script>
        $(document).ready(function() {
    // Highlight users that have submitted answers
            $("#submitted-candidates li").each(function(n, el) {
                console.log(el);
                if (el.dataset.cid != "None") {
                    $(`.cid-user[data-cid=${el.dataset.cid}]`).addClass("submitted")
                }
                if (el.dataset.user != "None") {
                    $(`.user-user[data-user="${el.dataset.user}"]`).addClass("submitted")
                }
            });

        })
    </script>
{% endblock js %}


{% block css %}
    <style>
        .submitted {
            color: green;
        }
    </style>
{% endblock css %}