vault backup: 2025-12-26 02:09:22
All checks were successful
Deploy Quartz site to GitHub Pages / build (push) Successful in 2m29s
All checks were successful
Deploy Quartz site to GitHub Pages / build (push) Successful in 2m29s
This commit is contained in:
587
stroma/templates/quiz_mode.html
Normal file
587
stroma/templates/quiz_mode.html
Normal file
@@ -0,0 +1,587 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<style>
|
||||
body {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.quiz-mode-container {
|
||||
max-width: 900px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.quiz-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.quiz-card {
|
||||
background: white;
|
||||
border-radius: 1.5rem;
|
||||
padding: 3rem;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
min-height: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.question-text {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.6;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.options-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
padding: 1.25rem;
|
||||
border: 2px solid var(--border);
|
||||
border-radius: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.option-item:hover {
|
||||
border-color: var(--primary);
|
||||
background: #f8f9fb;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.option-letter {
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 2rem;
|
||||
font-weight: 700;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border: none;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background: var(--primary-hover);
|
||||
}
|
||||
|
||||
.nav-btn:disabled {
|
||||
background: #cbd5e1;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.question-navigator {
|
||||
background: white;
|
||||
border-radius: 1.5rem 1.5rem 0 0;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.navigator-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.navigator-label {
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.question-pills {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex: 1;
|
||||
overflow-x: auto;
|
||||
padding: 0.25rem 0.5rem;
|
||||
scroll-behavior: smooth;
|
||||
/* Hide scrollbar but keep functionality */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE/Edge */
|
||||
position: relative;
|
||||
max-width: calc(100vw - 400px); /* Leave space for label and buttons */
|
||||
}
|
||||
|
||||
.question-pills::-webkit-scrollbar {
|
||||
display: none; /* Chrome/Safari */
|
||||
}
|
||||
|
||||
/* Fade effect at edges */
|
||||
.question-pills::before,
|
||||
.question-pills::after {
|
||||
content: '⋯';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: var(--text-muted);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.question-pills::before {
|
||||
left: 0;
|
||||
background: linear-gradient(to right, white 20%, transparent);
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.question-pills::after {
|
||||
right: 0;
|
||||
background: linear-gradient(to left, white 20%, transparent);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.question-pills.show-left-ellipsis::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.question-pills.show-right-ellipsis::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.question-pill {
|
||||
min-width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0.5rem;
|
||||
border: 2px solid var(--border);
|
||||
background: white;
|
||||
color: var(--text-main);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.875rem;
|
||||
flex-shrink: 0; /* Prevent pills from shrinking */
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.question-pill:hover {
|
||||
border-color: var(--primary);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.question-pill.active {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.question-pill.answered {
|
||||
background: #f0f4ff;
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.question-pill.answered.active {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navigator-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="quiz-mode-container">
|
||||
<div class="quiz-header">
|
||||
<h1 style="margin: 0;">{{ session.course.name|default:"Quiz" }}</h1>
|
||||
<a href="{% url 'quiz:index' %}" class="btn btn-secondary">← Tillbaka till Dashboard</a>
|
||||
</div>
|
||||
|
||||
<div class="quiz-card" id="quiz-content">
|
||||
<!-- Content loaded via HTMX -->
|
||||
</div>
|
||||
|
||||
<div class="question-navigator">
|
||||
<div class="navigator-content">
|
||||
<span class="navigator-label">Frågor:</span>
|
||||
<div class="question-pills" id="question-pills">
|
||||
<!-- Pills will be generated by JavaScript -->
|
||||
</div>
|
||||
<div class="navigator-buttons">
|
||||
<button class="nav-btn" id="prev-btn" data-direction="previous" data-session="{{ session.id }}">
|
||||
← Föreg
|
||||
</button>
|
||||
<button class="nav-btn" id="next-btn" data-direction="next" data-session="{{ session.id }}">
|
||||
Nästa →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const SESSION_ID = parseInt("{{ session.id }}");
|
||||
const TOTAL_QUESTIONS = {{ total_questions|default:0 }};
|
||||
let questionIdToNumber = {}; // Maps question ID to its position number
|
||||
let questionNumberToId = {}; // Maps position number to question ID
|
||||
|
||||
function saveAnswer(questionId, selectedLetters) {
|
||||
const key = 'quiz_' + SESSION_ID + '_answers';
|
||||
const answers = JSON.parse(localStorage.getItem(key) || '{}');
|
||||
answers[questionId] = selectedLetters;
|
||||
localStorage.setItem(key, JSON.stringify(answers));
|
||||
updateQuestionPills();
|
||||
}
|
||||
|
||||
function loadAnswer(questionId) {
|
||||
const key = 'quiz_' + SESSION_ID + '_answers';
|
||||
const answers = JSON.parse(localStorage.getItem(key) || '{}');
|
||||
return answers[questionId] || [];
|
||||
}
|
||||
|
||||
function getAllAnswers() {
|
||||
const key = 'quiz_' + SESSION_ID + '_answers';
|
||||
return JSON.parse(localStorage.getItem(key) || '{}');
|
||||
}
|
||||
|
||||
function updateQuestionMapping() {
|
||||
// Update mapping when current question loads
|
||||
const currentQuestionId = document.getElementById('current-question-id')?.value;
|
||||
if (!currentQuestionId) return;
|
||||
|
||||
// If we don't have this question ID mapped yet, we need to map it
|
||||
// For now, we'll rely on the backend to give us all questions
|
||||
// This is a simplified approach - ideally backend would provide full question list
|
||||
}
|
||||
|
||||
function generateQuestionPills() {
|
||||
const pillsContainer = document.getElementById('question-pills');
|
||||
if (!pillsContainer) return;
|
||||
|
||||
pillsContainer.innerHTML = '';
|
||||
|
||||
for (let i = 1; i <= TOTAL_QUESTIONS; i++) {
|
||||
const pill = document.createElement('div');
|
||||
pill.className = 'question-pill';
|
||||
pill.textContent = i;
|
||||
pill.dataset.questionNumber = i;
|
||||
|
||||
pill.addEventListener('click', () => {
|
||||
// Navigate using the same previous/next system
|
||||
// Calculate direction and number of steps needed
|
||||
const currentNumber = getCurrentQuestionNumber();
|
||||
if (i > currentNumber) {
|
||||
// Click next multiple times
|
||||
navigateToQuestionNumber(i);
|
||||
} else if (i < currentNumber) {
|
||||
navigateToQuestionNumber(i);
|
||||
}
|
||||
});
|
||||
|
||||
pillsContainer.appendChild(pill);
|
||||
}
|
||||
|
||||
// Add scroll listener to show/hide ellipses
|
||||
pillsContainer.addEventListener('scroll', updateEllipsesVisibility);
|
||||
|
||||
updateQuestionPills();
|
||||
updateEllipsesVisibility();
|
||||
}
|
||||
|
||||
function updateEllipsesVisibility() {
|
||||
const container = document.getElementById('question-pills');
|
||||
if (!container) return;
|
||||
|
||||
const scrollLeft = container.scrollLeft;
|
||||
const maxScroll = container.scrollWidth - container.clientWidth;
|
||||
|
||||
// Show left ellipsis if scrolled right
|
||||
if (scrollLeft > 10) {
|
||||
container.classList.add('show-left-ellipsis');
|
||||
} else {
|
||||
container.classList.remove('show-left-ellipsis');
|
||||
}
|
||||
|
||||
// Show right ellipsis if not scrolled to end
|
||||
if (scrollLeft < maxScroll - 10) {
|
||||
container.classList.add('show-right-ellipsis');
|
||||
} else {
|
||||
container.classList.remove('show-right-ellipsis');
|
||||
}
|
||||
}
|
||||
|
||||
function scrollToActivePill() {
|
||||
const activePill = document.querySelector('.question-pill.active');
|
||||
if (!activePill) return;
|
||||
|
||||
const container = document.getElementById('question-pills');
|
||||
if (!container) return;
|
||||
|
||||
// Calculate position to center the active pill
|
||||
const pillLeft = activePill.offsetLeft;
|
||||
const pillWidth = activePill.offsetWidth;
|
||||
const containerWidth = container.clientWidth;
|
||||
|
||||
const scrollPosition = pillLeft - (containerWidth / 2) + (pillWidth / 2);
|
||||
|
||||
container.scrollTo({
|
||||
left: scrollPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
|
||||
// Update ellipses after scroll
|
||||
setTimeout(updateEllipsesVisibility, 300);
|
||||
}
|
||||
|
||||
function navigateToQuestionNumber(targetNumber) {
|
||||
const currentNumber = getCurrentQuestionNumber();
|
||||
const diff = targetNumber - currentNumber;
|
||||
|
||||
if (diff === 0) return;
|
||||
|
||||
const direction = diff > 0 ? 'next' : 'previous';
|
||||
const steps = Math.abs(diff);
|
||||
|
||||
// Navigate step by step
|
||||
let currentStep = 0;
|
||||
function doStep() {
|
||||
if (currentStep >= steps) {
|
||||
return;
|
||||
}
|
||||
navigateQuestion(direction, SESSION_ID);
|
||||
currentStep++;
|
||||
setTimeout(doStep, 100); // Small delay between navigations
|
||||
}
|
||||
doStep();
|
||||
}
|
||||
|
||||
function updateQuestionPills() {
|
||||
const currentQuestionId = document.getElementById('current-question-id')?.value;
|
||||
const currentQuestionNumber = getCurrentQuestionNumber();
|
||||
const answers = getAllAnswers();
|
||||
|
||||
const pills = document.querySelectorAll('.question-pill');
|
||||
pills.forEach((pill, index) => {
|
||||
const questionNum = index + 1;
|
||||
pill.classList.remove('active', 'answered');
|
||||
|
||||
// Mark current question as active
|
||||
if (questionNum === currentQuestionNumber) {
|
||||
pill.classList.add('active');
|
||||
}
|
||||
|
||||
// Mark answered questions (check if any question ID in answers)
|
||||
// Since we're tracking by question ID, check if this position has been answered
|
||||
if (currentQuestionId && answers[currentQuestionId] && answers[currentQuestionId].length > 0) {
|
||||
if (questionNum === currentQuestionNumber) {
|
||||
pill.classList.add('answered');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
updateNavigationButtons(currentQuestionNumber);
|
||||
scrollToActivePill();
|
||||
}
|
||||
|
||||
function updateNavigationButtons(currentQuestionNumber) {
|
||||
const prevBtn = document.getElementById('prev-btn');
|
||||
const nextBtn = document.getElementById('next-btn');
|
||||
|
||||
if (prevBtn) {
|
||||
prevBtn.disabled = currentQuestionNumber <= 1;
|
||||
}
|
||||
|
||||
if (nextBtn) {
|
||||
nextBtn.disabled = currentQuestionNumber >= TOTAL_QUESTIONS;
|
||||
}
|
||||
}
|
||||
|
||||
function getCurrentQuestionNumber() {
|
||||
const numberInput = document.getElementById('current-question-number');
|
||||
if (numberInput && numberInput.value) {
|
||||
return parseInt(numberInput.value);
|
||||
}
|
||||
return 1;
|
||||
}
|
||||
|
||||
function navigateToQuestion(questionNumber) {
|
||||
const url = '/quiz/' + SESSION_ID + '/question/' + questionNumber + '/';
|
||||
htmx.ajax('GET', url, {
|
||||
target: '#quiz-content',
|
||||
swap: 'innerHTML'
|
||||
});
|
||||
}
|
||||
|
||||
function toggleOption(letter) {
|
||||
const checkbox = document.getElementById('checkbox-' + letter);
|
||||
if (!checkbox) return;
|
||||
|
||||
checkbox.checked = !checkbox.checked;
|
||||
updateSelection(letter);
|
||||
}
|
||||
|
||||
function updateSelection(letter) {
|
||||
const checkbox = document.getElementById('checkbox-' + letter);
|
||||
const optionDiv = document.getElementById('option-' + letter);
|
||||
|
||||
if (!checkbox || !optionDiv) return;
|
||||
|
||||
|
||||
if (checkbox.checked) {
|
||||
optionDiv.style.borderColor = 'var(--primary)';
|
||||
optionDiv.style.background = '#f0f4ff';
|
||||
} else {
|
||||
optionDiv.style.borderColor = 'var(--border)';
|
||||
optionDiv.style.background = 'white';
|
||||
}
|
||||
|
||||
const questionId = document.getElementById('current-question-id').value;
|
||||
const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
|
||||
const selectedLetters = Array.from(checkboxes).map(cb => cb.value).sort();
|
||||
saveAnswer(questionId, selectedLetters);
|
||||
}
|
||||
|
||||
function restoreAnswers() {
|
||||
const questionId = document.getElementById('current-question-id')?.value;
|
||||
if (!questionId) return;
|
||||
|
||||
const saved = loadAnswer(questionId);
|
||||
saved.forEach(letter => {
|
||||
const checkbox = document.getElementById('checkbox-' + letter);
|
||||
const optionDiv = document.getElementById('option-' + letter);
|
||||
if (checkbox && optionDiv) {
|
||||
checkbox.checked = true;
|
||||
optionDiv.style.borderColor = 'var(--primary)';
|
||||
optionDiv.style.background = '#f0f4ff';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Event delegation for option items and checkboxes
|
||||
function setupEventListeners() {
|
||||
const quizContent = document.getElementById('quiz-content');
|
||||
|
||||
// Handle clicks on option divs
|
||||
quizContent.addEventListener('click', (e) => {
|
||||
const optionItem = e.target.closest('.option-item');
|
||||
if (!optionItem) return;
|
||||
|
||||
// Don't toggle if the click was directly on the checkbox
|
||||
if (e.target.type === 'checkbox') return;
|
||||
|
||||
const letter = optionItem.dataset.letter;
|
||||
if (letter) toggleOption(letter);
|
||||
});
|
||||
|
||||
// Handle checkbox changes
|
||||
quizContent.addEventListener('change', (e) => {
|
||||
if (e.target.type === 'checkbox' && e.target.dataset.letter) {
|
||||
updateSelection(e.target.dataset.letter);
|
||||
}
|
||||
});
|
||||
|
||||
// Handle navigation buttons
|
||||
quizContent.addEventListener('click', (e) => {
|
||||
const navBtn = e.target.closest('.nav-btn');
|
||||
if (!navBtn || navBtn.disabled) return;
|
||||
|
||||
const direction = navBtn.dataset.direction;
|
||||
const sessionId = navBtn.dataset.session;
|
||||
if (direction && sessionId) {
|
||||
navigateQuestion(direction, sessionId);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function navigateQuestion(direction, sessionId) {
|
||||
const currentQInput = document.getElementById('current-question-id');
|
||||
const currentQ = currentQInput ? currentQInput.value : null;
|
||||
const url = currentQ
|
||||
? '/quiz/' + sessionId + '/' + direction + '/?q=' + currentQ
|
||||
: '/quiz/' + sessionId + '/' + direction + '/';
|
||||
|
||||
htmx.ajax('GET', url, {
|
||||
target: '#quiz-content'
|
||||
});
|
||||
}
|
||||
|
||||
const observer = new MutationObserver(() => {
|
||||
restoreAnswers();
|
||||
updateQuestionPills();
|
||||
});
|
||||
observer.observe(document.getElementById('quiz-content'), {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
generateQuestionPills();
|
||||
setupEventListeners();
|
||||
|
||||
// Add event listeners for the navigator buttons
|
||||
const prevBtn = document.getElementById('prev-btn');
|
||||
const nextBtn = document.getElementById('next-btn');
|
||||
|
||||
if (prevBtn) {
|
||||
prevBtn.addEventListener('click', (e) => {
|
||||
if (!e.currentTarget.disabled) {
|
||||
navigateQuestion('previous', SESSION_ID);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (nextBtn) {
|
||||
nextBtn.addEventListener('click', (e) => {
|
||||
if (!e.currentTarget.disabled) {
|
||||
navigateQuestion('next', SESSION_ID);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
htmx.ajax('GET', '{% url 'quiz:quiz_question' session.id %}', { target: '#quiz-content' });
|
||||
setTimeout(() => {
|
||||
restoreAnswers();
|
||||
updateQuestionPills();
|
||||
}, 100);
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user