jdahlin/medical-notes
1
0
Fork 0
Code Actions Activity

vault backup: 2025-12-22 12:22:20
All checks were successful
Deploy Quartz site to GitHub Pages / build (push) Successful in 2m12s
Details

Browse Source
This commit is contained in:
Johan Dahlin
2025-12-22 12:22:20 +01:00
parent d1d89e5442
commit 5169a67966
23 changed files with 12058 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
quiz/templates/partials/complete.html
View File

@@ -1,6 +1,13 @@
<div class="question">
<h2>Quiz Completed!</h2>
<p>Du har besvarat alla frågor.</p>
<a href="{% url 'stats' %}">Se dina resultat</a>
</div>
<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 'stats' %}" class="btn btn-secondary">Se Statistik</a>
<form action="{% url 'close_quiz' session.id %}" method="post">
{% csrf_token %}
<button type="submit" class="btn btn-primary">Avsluta & Gå Tillbaka</button>
</form>
</div>
</div>

30
quiz/templates/partials/question.html
View File

@@ -1,14 +1,24 @@
<div class="question">
<h2>{{ question.text }}</h2>
<form hx-post="{% url 'submit_answer' %}" hx-target="#quiz-container">
<div class="quiz-content">
<h3 style="margin-bottom: 1.5rem;">{{ question.text }}</h3>
<form hx-post="{% url 'submit_answer' session.id %}" hx-target="#quiz-container-{{ session.id }}">
{% csrf_token %}
<input type="hidden" name="question_id" value="{{ question.id }}">
{% for option in question.options.all %}
<div class="option" onclick="this.querySelector('input').checked = true; this.closest('form').requestSubmit();">
<input type="radio" name="answer" value="{{ option.letter }}" id="opt_{{ option.letter }}" style="display:none;">
<label for="opt_{{ option.letter }}">{{ option.letter }}. {{ option.text }}</label>
<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>
{% endfor %}
</form>
</div>
</div>

106
quiz/templates/partials/quiz_question.html Normal file
View File

@@ -0,0 +1,106 @@
{% if show_answer %}
<div class="answer-feedback {{ 'correct' if is_correct else 'incorrect' }}">
{% if is_correct %}
✓ Rätt svar!
{% else %}
✗ Fel svar. Rätt svar är: {{ question.correct_answer }}
{% endif %}
</div>
{% endif %}
<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 }}"
onclick="selectOption('{{ option.letter }}', {{ question.id }}, {{ session.id }})">
<span class="option-letter">{{ option.letter }}</span>
<span>{{ option.text }}</span>
</div>
{% endfor %}
</div>
{% if show_answer %}
<div class="difficulty-section">
<div class="difficulty-label">Hur svårt var detta?</div>
<div class="difficulty-buttons">
<button class="difficulty-btn again" onclick="submitDifficulty('again', {{ question.id }}, {{ session.id }})">
<div>Igen</div>
<small style="font-size: 0.75rem; font-weight: 400;">&lt;1m</small>
</button>
<button class="difficulty-btn hard" onclick="submitDifficulty('hard', {{ question.id }}, {{ session.id }})">
<div>Svårt</div>
<small style="font-size: 0.75rem; font-weight: 400;">&lt;6m</small>
</button>
<button class="difficulty-btn good" onclick="submitDifficulty('good', {{ question.id }}, {{ session.id }})">
<div>Bra</div>
<small style="font-size: 0.75rem; font-weight: 400;">&lt;10m</small>
</button>
<button class="difficulty-btn easy" onclick="submitDifficulty('easy', {{ question.id }}, {{ session.id }})">
<div>Lätt</div>
<small style="font-size: 0.75rem; font-weight: 400;">4d</small>
</button>
</div>
</div>
{% endif %}
<div class="nav-buttons">
<button class="nav-btn" {% if not has_previous %}disabled{% endif %}
onclick="navigateQuestion('previous', {{ session.id }})">
← Föregående
</button>
<button class="nav-btn" {% if not has_next %}disabled{% endif %}
onclick="navigateQuestion('next', {{ session.id }})">
Nästa →
</button>
</div>
<script>
let selectedAnswer = null;
function selectOption(letter, questionId, sessionId) {
if ({{ 'true' if show_answer else 'false' }
}) return; // Don't allow changing answer after submission
selectedAnswer = letter;
// Visual feedback
document.querySelectorAll('.option-item').forEach(opt => {
opt.style.borderColor = 'var(--border)';
opt.style.background = 'white';
});
const selected = document.getElementById('option-' + letter);
selected.style.borderColor = 'var(--primary)';
selected.style.background = '#f0f4ff';
// Submit answer
htmx.ajax('POST', `/submit/${sessionId}/`, {
target: '#quiz-content',
values: {
question_id: questionId,
answer: letter
}
});
}
function submitDifficulty(difficulty, questionId, sessionId) {
htmx.ajax('POST', `/difficulty/${sessionId}/`, {
values: {
question_id: questionId,
difficulty: difficulty
}
});
// Move to next question after a brief delay
setTimeout(() => {
navigateQuestion('next', sessionId);
}, 300);
}
function navigateQuestion(direction, sessionId) {
htmx.ajax('GET', `/quiz/${sessionId}/${direction}/`, {
target: '#quiz-content'
});
}
</script>