vault backup: 2025-12-22 16:06:48
All checks were successful
Deploy Quartz site to GitHub Pages / build (push) Successful in 1m58s
All checks were successful
Deploy Quartz site to GitHub Pages / build (push) Successful in 1m58s
This commit is contained in:
207
quiz/templates/partials/matching_question.html
Normal file
207
quiz/templates/partials/matching_question.html
Normal file
@@ -0,0 +1,207 @@
|
||||
{% 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;
|
||||
}
|
||||
|
||||
.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">
|
||||
{% 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 }}">
|
||||
{% else %}
|
||||
<!-- Diagonal - no radio button -->
|
||||
<span class="diagonal-block">—</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="top-items-legend">
|
||||
<h4>Kolumnalternativ:</h4>
|
||||
{% for top_item in question.matching_data.top_items %}
|
||||
<div class="top-item-label">
|
||||
<strong>{{ forloop.counter }}.</strong> {{ top_item }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
// Handle radio button changes
|
||||
const quizContent = document.getElementById('quiz-content');
|
||||
if (!quizContent) return;
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user