mirror of
https://github.com/sailor-sh/CK-X.git
synced 2026-07-11 00:29:20 +00:00
169 lines
7.8 KiB
HTML
169 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Exam Results - CK-X Simulator</title>
|
|
<link rel="stylesheet" href="/css/styles.css">
|
|
<link rel="stylesheet" href="/css/results.css">
|
|
<link rel="stylesheet" href="/css/feedback.css">
|
|
<!-- Font Awesome for icons -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
|
|
<!-- Action buttons moved to top -->
|
|
<div class="results-actions">
|
|
<button id="dashboardBtn" class="btn btn-secondary">
|
|
<i class="fas fa-home me-2"></i>Dashboard
|
|
</button>
|
|
<button id="currentExamBtn" class="btn btn-info">
|
|
<i class="fas fa-tasks me-2"></i>Current Exam
|
|
</button>
|
|
<button id="viewAnswersBtn" class="btn btn-success">
|
|
<i class="fas fa-check-square me-2"></i>View Answers
|
|
</button>
|
|
<button id="reEvaluateBtn" class="btn btn-primary">
|
|
<i class="fas fa-sync-alt me-2"></i>Re-evaluate Exam
|
|
</button>
|
|
<button id="terminateBtn" class="btn btn-danger">
|
|
<i class="fas fa-power-off me-2"></i>Terminate Session
|
|
</button>
|
|
<a href="https://forms.gle/Dac9ALQnQb2dH1mw8" target="_blank" class="btn btn-outline-primary" id="feedbackBtn">
|
|
<i class="fas fa-comment-dots me-2"></i>Give Feedback
|
|
</a>
|
|
</div>
|
|
|
|
<main class="results-container">
|
|
<!-- Loading state -->
|
|
<div id="pageLoader" class="page-loader">
|
|
<div class="spinner"></div>
|
|
<p id="loaderMessage">Loading exam results...</p>
|
|
</div>
|
|
|
|
<!-- Error message -->
|
|
<div id="errorMessage" class="error-message" style="display: none;">
|
|
<i class="fas fa-exclamation-circle"></i>
|
|
<p id="errorText">An error occurred while loading the results.</p>
|
|
<button id="retryButton" class="button">Retry</button>
|
|
</div>
|
|
|
|
<!-- Results content -->
|
|
<div id="resultsContent" class="results-content" style="display: none;">
|
|
<div class="results-header">
|
|
<h2>Exam Results</h2>
|
|
<div class="exam-info">
|
|
<p id="examId">Exam ID: Loading...</p>
|
|
<p id="completedAt">Completed: Loading...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="results-summary">
|
|
<div class="score-display">
|
|
<h3>Solved subtasks:</h3>
|
|
<div class="score-box">
|
|
<span id="totalScore">0</span> / <span id="totalPossibleScore">0</span>
|
|
</div>
|
|
</div>
|
|
<div class="rank-display">
|
|
<div id="rankBadge" class="rank-badge">
|
|
<span id="rankText">Score</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="questionsContainer" class="questions-container">
|
|
<!-- Questions will be added here dynamically -->
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="app-footer">
|
|
<p style="text-align: center;">© <span id="currentYear"></span> CK-X Simulator.</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="/js/results.js"></script>
|
|
<script src="/js/feedback.js"></script>
|
|
<script>
|
|
// Set the current year for copyright
|
|
document.getElementById('currentYear').textContent = new Date().getFullYear();
|
|
</script>
|
|
|
|
<!-- Terminate Session Confirmation Modal -->
|
|
<div id="terminateModal" class="modal-overlay" style="display: none;">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4>Terminate Session</h4>
|
|
<button id="closeModalBtn" class="modal-close-btn">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Are you sure you want to terminate this exam session?</p>
|
|
<p>This will <strong>clear all your progress</strong> and your <strong>environment will be cleaned up</strong> immediately.</p>
|
|
<p class="warning-text">This action cannot be undone.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="cancelTerminateBtn" class="btn btn-secondary">Cancel</button>
|
|
<button id="confirmTerminateBtn" class="btn btn-danger">
|
|
<i class="fas fa-power-off me-2"></i> Terminate Session
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feedback Modal -->
|
|
<div id="feedbackModal" class="modal-overlay" style="display: none;">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4>Your Feedback Matters</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="feedback-form">
|
|
<div class="rating-container">
|
|
<p>How would you rate your overall experience with CK-X?</p>
|
|
<div class="star-rating">
|
|
<input type="radio" id="star5" name="rating" value="5" />
|
|
<label for="star5" title="5 stars"><i class="fas fa-star"></i></label>
|
|
<input type="radio" id="star4" name="rating" value="4" />
|
|
<label for="star4" title="4 stars"><i class="fas fa-star"></i></label>
|
|
<input type="radio" id="star3" name="rating" value="3" />
|
|
<label for="star3" title="3 stars"><i class="fas fa-star"></i></label>
|
|
<input type="radio" id="star2" name="rating" value="2" />
|
|
<label for="star2" title="2 stars"><i class="fas fa-star"></i></label>
|
|
<input type="radio" id="star1" name="rating" value="1" />
|
|
<label for="star1" title="1 star"><i class="fas fa-star"></i></label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feedback-text">
|
|
<label for="feedbackComment">How was your overall experience?</label>
|
|
<textarea id="feedbackComment" rows="4" placeholder="Please share your thoughts..."></textarea>
|
|
</div>
|
|
|
|
<div class="testimonial-option">
|
|
<input type="checkbox" id="testimonialConsent" />
|
|
<label for="testimonialConsent">I'd like to be featured in testimonials</label>
|
|
</div>
|
|
|
|
<div id="testimonialFields" style="display: none;">
|
|
<div class="form-field">
|
|
<label for="testimonialName">Name <span class="required">*</span></label>
|
|
<input type="text" id="testimonialName" placeholder="Your name" required />
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="testimonialSocial">Social Handle (optional)</label>
|
|
<input type="text" id="testimonialSocial" placeholder="@yoursocialhandle" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="submitFeedbackBtn" class="btn btn-primary">
|
|
<i class="fas fa-paper-plane me-2"></i> Submit Feedback
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |