| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>{{annotation_task_name}} - Training Failed</title> |
|
|
| |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> |
|
|
| |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> |
|
|
| |
| <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"> |
|
|
| |
| <style> |
| .failed-header { |
| background: linear-gradient(135deg, var(--destructive) 0%, #c82333 100%); |
| color: white; |
| padding: 2rem 0; |
| margin-bottom: 2rem; |
| border-radius: 0.5rem; |
| } |
| |
| .failed-content { |
| background-color: #f8f9fa; |
| border: 2px solid #e9ecef; |
| border-radius: 0.5rem; |
| padding: 2rem; |
| margin-bottom: 1.5rem; |
| text-align: center; |
| } |
| |
| .failed-icon { |
| font-size: 4rem; |
| color: #dc3545; |
| margin-bottom: 1rem; |
| } |
| |
| .failed-message { |
| font-size: 1.25rem; |
| color: #495057; |
| margin-bottom: 1.5rem; |
| } |
| |
| .stats-box { |
| background-color: white; |
| border: 1px solid #dee2e6; |
| border-radius: 0.5rem; |
| padding: 1rem; |
| margin: 1rem auto; |
| max-width: 400px; |
| } |
| |
| .stats-row { |
| display: flex; |
| justify-content: space-between; |
| padding: 0.5rem 0; |
| border-bottom: 1px solid #eee; |
| } |
| |
| .stats-row:last-child { |
| border-bottom: none; |
| } |
| |
| .stats-label { |
| color: #6c757d; |
| } |
| |
| .stats-value { |
| font-weight: 600; |
| } |
| |
| .contact-info { |
| background-color: #e9ecef; |
| border-radius: 0.5rem; |
| padding: 1rem; |
| margin-top: 1.5rem; |
| } |
| </style> |
| </head> |
|
|
| <body> |
| |
| <nav class="potato-navbar" role="navigation" style="margin-bottom: 1.5rem;"> |
| <div class="navbar-inner"> |
| <div class="navbar-brand"> |
| <span class="task-name">{{annotation_task_name}}</span> |
| </div> |
| <div class="navbar-center"> |
| <span style="color: var(--light-color); font-size: 0.85rem;"> |
| <i class="fas fa-times-circle me-2"></i>Training Not Passed |
| </span> |
| </div> |
| <div class="navbar-end"> |
| <div class="user-pill"> |
| <span class="username">{{username}}</span> |
| <a href="/logout" class="logout-btn">Logout</a> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| <div class="container-fluid"> |
| |
| <div class="failed-header text-center"> |
| <h2><i class="fas fa-times-circle me-3"></i>Training Not Passed</h2> |
| <p class="mb-0">Unfortunately, you did not pass the training phase</p> |
| </div> |
|
|
| |
| <div class="failed-content"> |
| <div class="failed-icon"> |
| <i class="fas fa-user-times"></i> |
| </div> |
|
|
| <h3 class="mb-3">We're sorry</h3> |
|
|
| <p class="failed-message"> |
| {{ message }} |
| </p> |
|
|
| {% if explanation %} |
| <div class="alert alert-info" role="alert"> |
| <i class="fas fa-info-circle me-2"></i> |
| <strong>Explanation:</strong> {{ explanation }} |
| </div> |
| {% endif %} |
|
|
| |
| <div class="stats-box"> |
| <h6 class="mb-3"><i class="fas fa-chart-bar me-2"></i>Your Training Statistics</h6> |
|
|
| {% if correct_count is defined %} |
| <div class="stats-row"> |
| <span class="stats-label">Correct Answers:</span> |
| <span class="stats-value text-success">{{ correct_count }}</span> |
| </div> |
| {% endif %} |
|
|
| {% if total_mistakes is defined %} |
| <div class="stats-row"> |
| <span class="stats-label">Total Mistakes:</span> |
| <span class="stats-value text-danger">{{ total_mistakes }}</span> |
| </div> |
| {% endif %} |
|
|
| {% if max_mistakes is defined and max_mistakes > 0 %} |
| <div class="stats-row"> |
| <span class="stats-label">Maximum Allowed:</span> |
| <span class="stats-value">{{ max_mistakes }}</span> |
| </div> |
| {% endif %} |
|
|
| {% if question_mistakes is defined %} |
| <div class="stats-row"> |
| <span class="stats-label">Mistakes on Question:</span> |
| <span class="stats-value text-danger">{{ question_mistakes }}</span> |
| </div> |
| {% endif %} |
|
|
| {% if max_mistakes_per_question is defined and max_mistakes_per_question > 0 %} |
| <div class="stats-row"> |
| <span class="stats-label">Max Per Question:</span> |
| <span class="stats-value">{{ max_mistakes_per_question }}</span> |
| </div> |
| {% endif %} |
|
|
| {% if total_questions is defined %} |
| <div class="stats-row"> |
| <span class="stats-label">Total Questions:</span> |
| <span class="stats-value">{{ total_questions }}</span> |
| </div> |
| {% endif %} |
|
|
| {% if min_correct is defined %} |
| <div class="stats-row"> |
| <span class="stats-label">Required Correct:</span> |
| <span class="stats-value">{{ min_correct }}</span> |
| </div> |
| {% endif %} |
| </div> |
|
|
| |
| <div class="contact-info"> |
| <p class="mb-0"> |
| <i class="fas fa-envelope me-2"></i> |
| If you believe this is an error or have questions, please contact the study administrator. |
| </p> |
| </div> |
| </div> |
|
|
| |
| <footer class="potato-footer"> |
| © 2025 <a href="https://blablablab.si.umich.edu/">Blablablab</a> |
| <span class="footer-sep">·</span> |
| <a href="https://github.com/davidjurgens/potato">GitHub</a> |
| <span class="footer-sep">·</span> |
| <a href="https://github.com/davidjurgens/potato#cite-us">Cite Us</a> |
| </footer> |
| </div> |
|
|
| |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> |
| </body> |
| </html> |
|
|
