{% apply inline_css %}
<style>
    .correct
    {
        background-color: #9dff96;
    }
    .incorrect
    {
        background-color: #ff9696;
    }
</style>
<h1>A Quiz-taker has submitted the J.V. Safety Quiz <h1>
<h2> {{ submitterName }} has completed the quiz, scoring {{answersCorrect}}/{{totalQuestions}} correct.</h2>
<table>
    <thead>
    <tr>
        <td colspan="1">#</td>
        <td colspan="4">Question</td>
        <td colspan="2">Submitted Answer</td>
        <td colspan="2">Correct Answer</td>
        </tr>
    </thead>
    <tbody>
    {% for key,question in submission %}
        <tr>
            <td>
            {% if key != null %}
                {{key}}</td>
            {% else %}
                N/A
            {% endif %}
            <td>
            {% if question["Text"] != null %}
                {{question["Text"]}}
            {% else %}
                N/A
            {% endif %}
            </td>
            <td class="{{ (question['submittedAnswer']==true)? 'correct': 'incorrect' }}">
                    {{question['submittedAnswer']}}
            </td>
            <td>
            {% if question['answer']['Label'] != null %}
                {{question['answer']['Label']}}
            {% else %}
                N/A
            {% endif %}
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>
{% endapply %}