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:
172
stroma/templates/base.html
Normal file
172
stroma/templates/base.html
Normal file
@@ -0,0 +1,172 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sv">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Medical Quiz</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
||||
<style>
|
||||
:root {
|
||||
--primary: #6366f1;
|
||||
--primary-hover: #4f46e5;
|
||||
--bg: #f8fafc;
|
||||
--card-bg: rgba(255, 255, 255, 0.8);
|
||||
--text-main: #1e293b;
|
||||
--text-muted: #64748b;
|
||||
--border: #e2e8f0;
|
||||
--glass-bg: rgba(255, 255, 255, 0.7);
|
||||
--glass-border: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
background-color: var(--bg);
|
||||
color: var(--text-main);
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-weight: 700;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--primary-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: white;
|
||||
color: var(--text-main);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background-color: #dc2626;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
background: var(--border);
|
||||
height: 0.5rem;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
background: var(--primary);
|
||||
height: 100%;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
select, input, textarea {
|
||||
width: 100%;
|
||||
padding: 0.625rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--border);
|
||||
background-color: white;
|
||||
font-family: inherit;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Grid */
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.session-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.session-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.session-title {
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.session-meta {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
368
stroma/templates/index.html
Normal file
368
stroma/templates/index.html
Normal file
@@ -0,0 +1,368 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<style>
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.stat-card.green {
|
||||
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
|
||||
}
|
||||
|
||||
.stat-card.orange {
|
||||
background: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.875rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.quick-start-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.quick-start-card {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.quick-start-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.quick-start-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--primary), #764ba2);
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.card-description {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card-count {
|
||||
display: inline-block;
|
||||
background: #f0f4ff;
|
||||
color: var(--primary);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.active-session-card {
|
||||
background: white;
|
||||
border: 2px solid var(--primary);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.active-session-card:hover {
|
||||
box-shadow: 0 8px 24px rgba(99, 102, 241, 0.2);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.session-badge {
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 2rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.custom-quiz-section {
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.filter-chips {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.filter-chip {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
padding: 0.375rem 0.875rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.875rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-gradient {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 0.875rem 2rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.btn-gradient:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Stats Overview -->
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ total_questions }}</div>
|
||||
<div class="stat-label">Totalt frågor</div>
|
||||
</div>
|
||||
<div class="stat-card green">
|
||||
<div class="stat-value">{{ answered_count }}</div>
|
||||
<div class="stat-label">Besvarade</div>
|
||||
</div>
|
||||
<div class="stat-card orange">
|
||||
<div class="stat-value">{{ total_questions|add:answered_count|floatformat:0|add:"-" }}{{ answered_count }}</div>
|
||||
<div class="stat-label">Återstående</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active Sessions -->
|
||||
{% if active_sessions %}
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">🎯 Aktiva Quiz</h2>
|
||||
</div>
|
||||
|
||||
{% for session in active_sessions %}
|
||||
<div class="active-session-card" id="session-{{ session.id }}">
|
||||
<div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 1rem;">
|
||||
<div>
|
||||
<span class="session-badge">
|
||||
{% if session.course %}{{ session.course.name }}{% else %}Blandat{% endif %}
|
||||
</span>
|
||||
<div style="font-size: 0.875rem; color: var(--text-muted); margin-top: 0.25rem;">
|
||||
Startat {{ session.created_at|date:"Y-m-d H:i" }}
|
||||
</div>
|
||||
</div>
|
||||
<form action="{% url 'quiz:close_quiz' session.id %}" method="post" hx-post="{% url 'quiz:close_quiz' session.id %}"
|
||||
hx-target="#session-{{ session.id }}" hx-swap="outerHTML">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="btn btn-secondary" style="padding: 0.5rem 1rem; font-size: 0.875rem;">
|
||||
✕ Stäng
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{% if session.tags.exists %}
|
||||
<div class="filter-chips" style="margin-bottom: 1rem;">
|
||||
{% for tag in session.tags.all %}
|
||||
<span class="filter-chip">🏷️ {{ tag.name }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<a href="{% url 'quiz:quiz_mode' session.id %}" class="btn btn-primary" style="width: 100%; text-align: center; padding: 0.875rem;">
|
||||
▶️ Fortsätt Quiz
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Quick Start Options -->
|
||||
<div class="section-header" style="margin-top: 3rem;">
|
||||
<h2 class="section-title">🚀 Snabbstart</h2>
|
||||
</div>
|
||||
|
||||
<div class="quick-start-grid">
|
||||
<!-- Tag-based quick starts -->
|
||||
<div class="quick-start-card" onclick="startTagQuiz('anatomi')">
|
||||
<div class="card-icon">🦴</div>
|
||||
<div class="card-title">Anatomi</div>
|
||||
<div class="card-description">Fokusera på anatomifrågor</div>
|
||||
<span class="card-count" id="tag-anatomi-count">...</span>
|
||||
</div>
|
||||
|
||||
<div class="quick-start-card" onclick="startTagQuiz('histologi')">
|
||||
<div class="card-icon">🔬</div>
|
||||
<div class="card-title">Histologi</div>
|
||||
<div class="card-description">Fokusera på histologifrågor</div>
|
||||
<span class="card-count" id="tag-histologi-count">...</span>
|
||||
</div>
|
||||
|
||||
<div class="quick-start-card" onclick="startTagQuiz('cerebrum')">
|
||||
<div class="card-icon">🧠</div>
|
||||
<div class="card-title">Cerebrum</div>
|
||||
<div class="card-description">Hjärnans frågor</div>
|
||||
<span class="card-count" id="tag-cerebrum-count">...</span>
|
||||
</div>
|
||||
|
||||
<div class="quick-start-card" onclick="startTagQuiz('oga')">
|
||||
<div class="card-icon">👁️</div>
|
||||
<div class="card-title">Öga</div>
|
||||
<div class="card-description">Ögats anatomi & histologi</div>
|
||||
<span class="card-count" id="tag-oga-count">...</span>
|
||||
</div>
|
||||
|
||||
<div class="quick-start-card" onclick="startTagQuiz('ora')">
|
||||
<div class="card-icon">👂</div>
|
||||
<div class="card-title">Öra</div>
|
||||
<div class="card-description">Örats anatomi & histologi</div>
|
||||
<span class="card-count" id="tag-ora-count">...</span>
|
||||
</div>
|
||||
|
||||
<div class="quick-start-card" onclick="startAllQuiz()">
|
||||
<div class="card-icon">🎲</div>
|
||||
<div class="card-title">Alla Frågor</div>
|
||||
<div class="card-description">Blandat från hela kursen</div>
|
||||
<span class="card-count">{{ total_questions }} frågor</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom Quiz Builder -->
|
||||
<div class="custom-quiz-section">
|
||||
<h2 style="margin-bottom: 1rem; color: var(--text-main);">🎨 Anpassat Quiz</h2>
|
||||
<p style="color: var(--text-muted); margin-bottom: 1.5rem;">Skapa ett quiz med dina egna filter</p>
|
||||
|
||||
<form method="post" action="{% url 'quiz:create_quiz' %}" id="custom-quiz-form">
|
||||
{% csrf_token %}
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem;">
|
||||
<div class="form-group">
|
||||
<label for="{{ form.course.id_for_label }}" style="font-weight: 600; margin-bottom: 0.5rem;">Kurs</label>
|
||||
{{ form.course }}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="{{ form.tags.id_for_label }}" style="font-weight: 600; margin-bottom: 0.5rem;">Taggar</label>
|
||||
{{ form.tags }}
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn-gradient">
|
||||
✨ Skapa Anpassat Quiz
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Fetch tag counts on load
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
const tags = ['anatomi', 'histologi', 'cerebrum', 'oga', 'ora'];
|
||||
|
||||
for (const tag of tags) {
|
||||
try {
|
||||
const response = await fetch(`/api/tag-count/${tag}/`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
const el = document.getElementById(`tag-${tag}-count`);
|
||||
if (el) el.textContent = `${data.count} frågor`;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to fetch count for', tag);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function startTagQuiz(tagSlug) {
|
||||
const form = document.createElement('form');
|
||||
form.method = 'POST';
|
||||
form.action = '{% url "quiz:create_quiz" %}';
|
||||
|
||||
const csrf = document.createElement('input');
|
||||
csrf.type = 'hidden';
|
||||
csrf.name = 'csrfmiddlewaretoken';
|
||||
csrf.value = '{{ csrf_token }}';
|
||||
form.appendChild(csrf);
|
||||
|
||||
const tagInput = document.createElement('input');
|
||||
tagInput.type = 'hidden';
|
||||
tagInput.name = 'tag_slug';
|
||||
tagInput.value = tagSlug;
|
||||
form.appendChild(tagInput);
|
||||
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
}
|
||||
|
||||
function startAllQuiz() {
|
||||
const form = document.createElement('form');
|
||||
form.method = 'POST';
|
||||
form.action = '{% url "quiz:create_quiz" %}';
|
||||
|
||||
const csrf = document.createElement('input');
|
||||
csrf.type = 'hidden';
|
||||
csrf.name = 'csrfmiddlewaretoken';
|
||||
csrf.value = '{{ csrf_token }}';
|
||||
form.appendChild(csrf);
|
||||
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
13
stroma/templates/partials/complete.html
Normal file
13
stroma/templates/partials/complete.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<div style="text-align: center; padding: 2rem;">
|
||||
<div style="font-size: 3rem; margin-bottom: 1rem;">🎉</div>
|
||||
<h2 style="margin-bottom: 1rem;">Quiz Slutfört!</h2>
|
||||
<p style="color: var(--text-muted); margin-bottom: 2rem;">Bra jobbat! Du har besvarat alla tillgängliga frågor i
|
||||
detta urval.</p>
|
||||
<div style="display: flex; gap: 1rem; justify-content: center;">
|
||||
<a href="{% url 'quiz:stats' %}" class="btn btn-secondary">Se Statistik</a>
|
||||
<form action="{% url 'quiz:close_quiz' session.id %}" method="post">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="btn btn-primary">Avsluta & Gå Tillbaka</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
226
stroma/templates/partials/matching_question.html
Normal file
226
stroma/templates/partials/matching_question.html
Normal file
@@ -0,0 +1,226 @@
|
||||
{% csrf_token %}
|
||||
<input type="hidden" id="current-question-id" value="{{ question.id }}">
|
||||
<input type="hidden" id="current-question-number" value="{{ current_number }}">
|
||||
|
||||
<div class="question-text">{{ question.text }}</div>
|
||||
|
||||
<style>
|
||||
.matching-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.matching-table th,
|
||||
.matching-table td {
|
||||
border: 2px solid var(--border);
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.matching-table .corner-cell {
|
||||
background: #f8f9fb;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.matching-table th.rotated-header {
|
||||
background: #f8f9fb;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
height: 150px;
|
||||
white-space: nowrap;
|
||||
vertical-align: bottom;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.matching-table th.rotated-header>div {
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: bottom left;
|
||||
width: 30px;
|
||||
position: relative;
|
||||
left: 15px;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.matching-table .left-item {
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
background: #f8f9fb;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.matching-table .radio-cell {
|
||||
width: 60px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.matching-table .radio-cell:hover:not(.diagonal-block) {
|
||||
background: #f0f4ff;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.matching-table .diagonal-block {
|
||||
background: #e5e7eb;
|
||||
color: #9ca3af;
|
||||
font-size: 1.5rem;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.matching-table input[type="radio"] {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.matching-table input[type="radio"]:checked {
|
||||
accent-color: var(--primary);
|
||||
}
|
||||
|
||||
.top-items-legend {
|
||||
background: #f0f4ff;
|
||||
border: 2px solid var(--primary);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.top-items-legend h4 {
|
||||
margin: 0 0 1rem 0;
|
||||
color: var(--primary);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.top-item-label {
|
||||
margin: 0.5rem 0;
|
||||
padding: 0.5rem;
|
||||
background: white;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="matching-question">
|
||||
<table class="matching-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="corner-cell"></th>
|
||||
{% for top_item in question.matching_data.top_items %}
|
||||
<th class="rotated-header">
|
||||
<div>{{ forloop.counter }}. {{ top_item|truncatewords:4 }}</div>
|
||||
</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for left_item in question.matching_data.left_items %}
|
||||
<tr>
|
||||
<td class="left-item">
|
||||
<strong>{{ forloop.counter }}.</strong> {{ left_item }}
|
||||
</td>
|
||||
{% for top_item in question.matching_data.top_items %}
|
||||
<td class="radio-cell" data-left="{{ forloop.parentloop.counter0 }}" data-top="{{ forloop.counter0 }}">
|
||||
{% if forloop.parentloop.counter0 != forloop.counter0 %}
|
||||
<input type="radio" name="match-{{ forloop.parentloop.counter0 }}" value="{{ forloop.counter0 }}"
|
||||
data-left="{{ forloop.parentloop.counter0 }}" data-top="{{ forloop.counter0 }}"
|
||||
id="radio-{{ forloop.parentloop.counter0 }}-{{ forloop.counter0 }}"
|
||||
style="pointer-events: none;">
|
||||
{% else %}
|
||||
<!-- Diagonal - no radio button -->
|
||||
<span class="diagonal-block">—</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
// Handle radio button changes
|
||||
const quizContent = document.getElementById('quiz-content');
|
||||
if (!quizContent) return;
|
||||
|
||||
// Handle clicks on table cells to select radio buttons
|
||||
quizContent.addEventListener('click', (e) => {
|
||||
const cell = e.target.closest('.radio-cell');
|
||||
if (!cell) return;
|
||||
|
||||
// Don't do anything for diagonal cells
|
||||
if (cell.querySelector('.diagonal-block')) return;
|
||||
|
||||
const leftIdx = cell.dataset.left;
|
||||
const topIdx = cell.dataset.top;
|
||||
|
||||
if (leftIdx !== undefined && topIdx !== undefined) {
|
||||
const radio = document.getElementById('radio-' + leftIdx + '-' + topIdx);
|
||||
if (radio) {
|
||||
radio.checked = true;
|
||||
saveMatchingAnswer();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
quizContent.addEventListener('change', (e) => {
|
||||
if (e.target.type === 'radio' && e.target.dataset.left) {
|
||||
saveMatchingAnswer();
|
||||
}
|
||||
});
|
||||
|
||||
function saveMatchingAnswer() {
|
||||
const questionId = document.getElementById('current-question-id').value;
|
||||
const selected = [];
|
||||
|
||||
// Collect all selected radio buttons
|
||||
const radios = document.querySelectorAll('input[type="radio"]:checked[data-left]');
|
||||
radios.forEach(radio => {
|
||||
const leftIdx = parseInt(radio.dataset.left);
|
||||
const topIdx = parseInt(radio.dataset.top);
|
||||
selected.push([leftIdx, topIdx]);
|
||||
});
|
||||
|
||||
// Save to localStorage
|
||||
const sessionId = SESSION_ID;
|
||||
const key = 'quiz_' + sessionId + '_answers';
|
||||
const answers = JSON.parse(localStorage.getItem(key) || '{}');
|
||||
answers[questionId] = JSON.stringify(selected); // Store as JSON string
|
||||
localStorage.setItem(key, JSON.stringify(answers));
|
||||
|
||||
if (typeof updateQuestionPills === 'function') {
|
||||
updateQuestionPills();
|
||||
}
|
||||
}
|
||||
|
||||
function restoreMatchingAnswers() {
|
||||
const questionId = document.getElementById('current-question-id')?.value;
|
||||
if (!questionId) return;
|
||||
|
||||
const sessionId = SESSION_ID;
|
||||
const key = 'quiz_' + sessionId + '_answers';
|
||||
const answers = JSON.parse(localStorage.getItem(key) || '{}');
|
||||
const saved = answers[questionId];
|
||||
|
||||
if (saved) {
|
||||
try {
|
||||
const selected = JSON.parse(saved);
|
||||
selected.forEach(pair => {
|
||||
const [leftIdx, topIdx] = pair;
|
||||
const radio = document.getElementById('radio-' + leftIdx + '-' + topIdx);
|
||||
if (radio) {
|
||||
radio.checked = true;
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('Error restoring matching answers:', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Restore on load
|
||||
setTimeout(restoreMatchingAnswers, 50);
|
||||
})();
|
||||
</script>
|
||||
24
stroma/templates/partials/question.html
Normal file
24
stroma/templates/partials/question.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<div class="quiz-content">
|
||||
<h3 style="margin-bottom: 1.5rem;">{{ question.text }}</h3>
|
||||
<form hx-post="{% url 'quiz:submit_answer' session.id %}" hx-target="#quiz-container-{{ session.id }}">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="question_id" value="{{ question.id }}">
|
||||
<div style="display: flex; flex-direction: column; gap: 0.75rem;">
|
||||
{% for option in question.options.all %}
|
||||
<div class="option"
|
||||
style="padding: 1rem; border: 1px solid var(--border); border-radius: 0.5rem; cursor: pointer; transition: all 0.2s;"
|
||||
onmouseover="this.style.backgroundColor='#f1f5f9'" onmouseout="this.style.backgroundColor='transparent'"
|
||||
onclick="this.querySelector('input').checked = true; this.closest('form').requestSubmit();">
|
||||
<input type="radio" name="answer" value="{{ option.letter }}"
|
||||
id="opt_{{ session.id }}_{{ question.id }}_{{ option.letter }}" style="display:none;">
|
||||
<label style="cursor: pointer; font-weight: 500; color: var(--text-main);"
|
||||
for="opt_{{ session.id }}_{{ question.id }}_{{ option.letter }}">
|
||||
<span style="display: inline-block; width: 1.5rem; color: var(--primary); font-weight: 700;">{{
|
||||
option.letter }}</span>
|
||||
{{ option.text }}
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
48
stroma/templates/partials/quiz_question.html
Normal file
48
stroma/templates/partials/quiz_question.html
Normal file
@@ -0,0 +1,48 @@
|
||||
{% if question.question_type == 'matching' %}
|
||||
{% include 'partials/matching_question.html' %}
|
||||
{% else %}
|
||||
{# Regular MCQ/SCQ template #}
|
||||
{% csrf_token %}
|
||||
<input type="hidden" id="current-question-id" value="{{ question.id }}">
|
||||
<input type="hidden" id="current-question-number" value="{{ current_number }}">
|
||||
|
||||
<div class="question-text">{{ question.text }}</div>
|
||||
|
||||
<div class="options-container">
|
||||
{% for option in question.options.all %}
|
||||
<div class="option-item" id="option-{{ option.letter }}" data-letter="{{ option.letter }}" style="cursor: pointer;">
|
||||
<input type="checkbox" id="checkbox-{{ option.letter }}" value="{{ option.letter }}"
|
||||
data-letter="{{ option.letter }}"
|
||||
style="margin-right: 0.5rem; width: 1.2rem; height: 1.2rem; cursor: pointer; pointer-events: auto;">
|
||||
<span class="option-letter" style="pointer-events: none;">{{ option.letter }}</span>
|
||||
<span style="pointer-events: none;">{{ option.text }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const container = document.querySelector('.options-container');
|
||||
|
||||
// Handle option item clicks (clicking anywhere on the div except checkbox)
|
||||
container?.addEventListener('click', (e) => {
|
||||
// If click was directly on checkbox, let it handle itself
|
||||
if (e.target.type === 'checkbox') return;
|
||||
|
||||
const optionItem = e.target.closest('.option-item');
|
||||
if (!optionItem) return;
|
||||
|
||||
const letter = optionItem.dataset.letter;
|
||||
if (letter) toggleOption(letter);
|
||||
});
|
||||
|
||||
// Handle checkbox changes (direct checkbox clicks or programmatic changes)
|
||||
container?.addEventListener('change', (e) => {
|
||||
if (e.target.type === 'checkbox') {
|
||||
const { letter } = e.target.dataset;
|
||||
if (letter) updateSelection(letter);
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
{% endif %}
|
||||
64
stroma/templates/quiz_create.html
Normal file
64
stroma/templates/quiz_create.html
Normal file
@@ -0,0 +1,64 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<style>
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #45a049;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Create New Quiz</h1>
|
||||
|
||||
<form method="post">
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="form-group">
|
||||
<label for="{{ form.course.id_for_label }}">Course:</label>
|
||||
{{ form.course }}
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="{{ form.tags.id_for_label }}">Tags:</label>
|
||||
{{ form.tags }}
|
||||
<small style="color: grey; display: block; margin-top: 5px;">Hold Ctrl (or Cmd) to select multiple tags.</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="{{ form.question_type.id_for_label }}">Question Type:</label>
|
||||
{{ form.question_type }}
|
||||
<small style="color: grey; display: block; margin-top: 5px;">Hold Ctrl (or Cmd) to select multiple
|
||||
types.</small>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn">Start Quiz</button>
|
||||
</form>
|
||||
|
||||
<p><a href="{% url 'quiz:index' %}">Back to Dashboard</a></p>
|
||||
{% endblock %}
|
||||
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 %}
|
||||
11
stroma/templates/stats.html
Normal file
11
stroma/templates/stats.html
Normal file
@@ -0,0 +1,11 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<h1>Dina Resultat</h1>
|
||||
<div class="question">
|
||||
<p>Totalt besvarade: {{ total }}</p>
|
||||
<p>Rätt svar: {{ correct }}</p>
|
||||
<p>Procent: {{ percentage }}%</p>
|
||||
</div>
|
||||
<a href="{% url 'quiz:index' %}">Tillbaka till quiz</a>
|
||||
{% endblock %}
|
||||
|
||||
455
stroma/templates/upload_files.html
Normal file
455
stroma/templates/upload_files.html
Normal file
@@ -0,0 +1,455 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Upload Files</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #2d3748;
|
||||
margin-bottom: 10px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #718096;
|
||||
margin-bottom: 30px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.upload-section {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.upload-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.upload-btn-select {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 24px;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.upload-btn-select:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.upload-zone {
|
||||
border: 2px dashed #cbd5e0;
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: #f7fafc;
|
||||
}
|
||||
|
||||
.upload-zone:hover {
|
||||
border-color: #667eea;
|
||||
background: #edf2f7;
|
||||
}
|
||||
|
||||
.upload-zone.dragover {
|
||||
border-color: #667eea;
|
||||
background: #e6f2ff;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 15px;
|
||||
color: #a0aec0;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
color: #4a5568;
|
||||
font-size: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
color: #a0aec0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-list {
|
||||
margin-top: 20px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
background: #f7fafc;
|
||||
padding: 12px 15px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
animation: slideIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.file-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
color: #2d3748;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.file-path {
|
||||
color: #a0aec0;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
color: #718096;
|
||||
font-size: 12px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 15px 30px;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.upload-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.upload-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.upload-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
margin-top: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 8px;
|
||||
background: #e2e8f0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
||||
width: 0%;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
color: #4a5568;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
background: #c6f6d5;
|
||||
color: #22543d;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
margin-top: 20px;
|
||||
display: none;
|
||||
animation: slideIn 0.3s ease;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: #fed7d7;
|
||||
color: #742a2a;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
margin-top: 20px;
|
||||
display: none;
|
||||
animation: slideIn 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>📁 Upload Content</h1>
|
||||
<p class="subtitle">Drag & drop files or folders, or use the buttons below</p>
|
||||
|
||||
<div class="upload-section">
|
||||
<div class="upload-zone" id="uploadZone">
|
||||
<div class="upload-icon">📤</div>
|
||||
<div class="upload-text">Drag & drop here</div>
|
||||
<div class="upload-hint">or click to browse:</div>
|
||||
<div class="upload-actions">
|
||||
<button type="button" class="upload-btn-select" id="selectFilesBtn">Select Files</button>
|
||||
<button type="button" class="upload-btn-select" id="selectFolderBtn">Select Folder</button>
|
||||
</div>
|
||||
</div>
|
||||
<input type="file" id="fileInput" multiple>
|
||||
<input type="file" id="folderInput" webkitdirectory directory>
|
||||
</div>
|
||||
|
||||
<div class="file-list" id="fileList"></div>
|
||||
|
||||
<div class="progress-container" id="progressContainer">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" id="progressFill"></div>
|
||||
</div>
|
||||
<div class="progress-text" id="progressText">Uploading...</div>
|
||||
</div>
|
||||
|
||||
<div class="success-message" id="successMessage">
|
||||
✓ Files uploaded successfully!
|
||||
</div>
|
||||
|
||||
<div class="error-message" id="errorMessage"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const folderInput = document.getElementById('folderInput');
|
||||
const uploadZone = document.getElementById('uploadZone');
|
||||
const selectFilesBtn = document.getElementById('selectFilesBtn');
|
||||
const selectFolderBtn = document.getElementById('selectFolderBtn');
|
||||
const fileList = document.getElementById('fileList');
|
||||
const fileCount = document.getElementById('fileCount');
|
||||
const progressContainer = document.getElementById('progressContainer');
|
||||
const progressFill = document.getElementById('progressFill');
|
||||
const progressText = document.getElementById('progressText');
|
||||
const successMessage = document.getElementById('successMessage');
|
||||
const errorMessage = document.getElementById('errorMessage');
|
||||
|
||||
let selectedFiles = [];
|
||||
|
||||
// Manual selection buttons
|
||||
selectFilesBtn.addEventListener('click', () => fileInput.click());
|
||||
selectFolderBtn.addEventListener('click', () => folderInput.click());
|
||||
|
||||
// Upload zone click (default to file selection)
|
||||
uploadZone.addEventListener('click', (e) => {
|
||||
// Only trigger if clicking the zone itself, not the buttons
|
||||
if (e.target.tagName !== 'BUTTON') {
|
||||
fileInput.click();
|
||||
}
|
||||
});
|
||||
|
||||
// File selection
|
||||
fileInput.addEventListener('change', (e) => {
|
||||
addFiles(Array.from(e.target.files));
|
||||
});
|
||||
|
||||
folderInput.addEventListener('change', (e) => {
|
||||
addFiles(Array.from(e.target.files));
|
||||
});
|
||||
|
||||
// Drag and drop
|
||||
uploadZone.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
uploadZone.classList.add('dragover');
|
||||
});
|
||||
|
||||
uploadZone.addEventListener('dragleave', () => {
|
||||
uploadZone.classList.remove('dragover');
|
||||
});
|
||||
|
||||
uploadZone.addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
uploadZone.classList.remove('dragover');
|
||||
|
||||
const files = Array.from(e.dataTransfer.files);
|
||||
addFiles(files);
|
||||
});
|
||||
|
||||
function addFiles(files) {
|
||||
selectedFiles = [...selectedFiles, ...files];
|
||||
renderFileList();
|
||||
if (selectedFiles.length > 0) {
|
||||
startUpload();
|
||||
}
|
||||
}
|
||||
|
||||
function renderFileList() {
|
||||
fileList.innerHTML = '';
|
||||
selectedFiles.forEach((file, index) => {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'file-item';
|
||||
|
||||
const info = document.createElement('div');
|
||||
info.className = 'file-info';
|
||||
|
||||
const name = document.createElement('div');
|
||||
name.className = 'file-name';
|
||||
name.textContent = file.name;
|
||||
|
||||
const path = document.createElement('div');
|
||||
path.className = 'file-path';
|
||||
path.textContent = file.webkitRelativePath || file.name;
|
||||
|
||||
info.appendChild(name);
|
||||
if (file.webkitRelativePath) {
|
||||
info.appendChild(path);
|
||||
}
|
||||
|
||||
const size = document.createElement('div');
|
||||
size.className = 'file-size';
|
||||
size.textContent = formatFileSize(file.size);
|
||||
|
||||
item.appendChild(info);
|
||||
item.appendChild(size);
|
||||
fileList.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
function formatFileSize(bytes) {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
async function startUpload() {
|
||||
if (selectedFiles.length === 0) return;
|
||||
|
||||
progressContainer.style.display = 'block';
|
||||
successMessage.style.display = 'none';
|
||||
errorMessage.style.display = 'none';
|
||||
|
||||
const formData = new FormData();
|
||||
|
||||
selectedFiles.forEach((file, index) => {
|
||||
formData.append('files', file);
|
||||
if (file.webkitRelativePath) {
|
||||
formData.append(`path_${index}`, file.webkitRelativePath);
|
||||
}
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/upload/', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: {
|
||||
'X-CSRFToken': getCookie('csrftoken')
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
progressFill.style.width = '100%';
|
||||
progressText.textContent = `Uploaded ${result.count} file(s) successfully!`;
|
||||
|
||||
setTimeout(() => {
|
||||
successMessage.style.display = 'block';
|
||||
progressContainer.style.display = 'none';
|
||||
selectedFiles = [];
|
||||
renderFileList();
|
||||
progressFill.style.width = '0%';
|
||||
}, 500);
|
||||
} else {
|
||||
throw new Error('Upload failed');
|
||||
}
|
||||
} catch (error) {
|
||||
errorMessage.textContent = '✗ Upload failed: ' + error.message;
|
||||
errorMessage.style.display = 'block';
|
||||
progressContainer.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function getCookie(name) {
|
||||
let cookieValue = null;
|
||||
if (document.cookie && document.cookie !== '') {
|
||||
const cookies = document.cookie.split(';');
|
||||
for (let i = 0; i < cookies.length; i++) {
|
||||
const cookie = cookies[i].trim();
|
||||
if (cookie.substring(0, name.length + 1) === (name + '=')) {
|
||||
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return cookieValue;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user