Skip to content
/ BijbelQuiz Public

Commit c42decd

Browse files
thomasboomthomasboom
committed
Updated add questions page
1 parent e6da0c3 commit c42decd

3 files changed

Lines changed: 123 additions & 13 deletions

File tree

‎websites/bijbelquiz.app/pages/tools/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>BijbelQuiz Vraag Editor</title>
7-
<link rel="stylesheet" href="https://backend.bijbelquiz.app/question-editor/style.css">
7+
<link rel="stylesheet" href="style.css">
88
</head>
99
<body>
1010
<div class="container">
@@ -42,7 +42,7 @@ <h1>BijbelQuiz Vraag Editor</h1>
4242
<button id="downloadBtn">Download JSON</button>
4343
</div>
4444
<div id="toast-region" aria-live="polite" style="position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:9999;"></div>
45-
<script src="https://backend.bijbelquiz.app/question-editor/script.js"></script>
45+
<script src="script.js"></script>
4646
<!--Start of Tawk.to Script-->
4747
<script type="text/javascript">
4848
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();

‎websites/bijbelquiz.app/pages/tools/script.js‎

Lines changed: 72 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,26 @@ const downloadBtn = document.getElementById('downloadBtn');
55
// Declare questions array for use throughout the script
66
let questions = [];
77

8+
// Categories list from categories.json
9+
const categoriesList = [
10+
"Genesis", "Exodus", "Leviticus", "Numeri", "Deuteronomium",
11+
"Jozua", "Richteren", "Ruth", "1 Samuël", "2 Samuël",
12+
"1 Koningen", "2 Koningen", "1 Kronieken", "2 Kronieken",
13+
"Ezra", "Nehemia", "Esther", "Job", "Psalmen", "Spreuken",
14+
"Prediker", "Hooglied", "Jesaja", "Jeremia", "Klaagliederen",
15+
"Ezechiël", "Daniël", "Hosea", "Joël", "Amos", "Obadja",
16+
"Jona", "Micha", "Nahum", "Habakuk", "Zefanja", "Haggai",
17+
"Zacharia", "Maleachi", "Matteüs", "Marcus", "Lucas",
18+
"Johannes", "Handelingen", "Romeinen", "1 Korintiërs",
19+
"2 Korintiërs", "Galaten", "Efeziërs", "Filippenzen",
20+
"Kolossenzen", "1 Tessalonicenzen", "2 Tessalonicenzen",
21+
"1 Timoteüs", "2 Timoteüs", "Titus", "Filemon", "Hebreeën",
22+
"Jakobus", "1 Petrus", "2 Petrus", "1 Johannes", "2 Johannes",
23+
"3 Johannes", "Judas", "Openbaring", "Kerst", "Pasen",
24+
"Pinksteren", "Hemelvaart", "Goede Vrijdag", "Stille Zaterdag",
25+
"Paasmaandag", "Pinkstermaandag"
26+
];
27+
828
// Toast utility
929
function showToast(message, isError = false) {
1030
let toast = document.createElement('div');
@@ -36,6 +56,41 @@ function saveLastQuestionType(type) {
3656
localStorage.setItem('bijbelquiz_last_type', type);
3757
}
3858

59+
// Generate the next question ID based on existing questions
60+
function getNextQuestionId() {
61+
if (questions.length === 0) {
62+
return '000001';
63+
}
64+
// Find the highest ID number
65+
let maxId = 0;
66+
questions.forEach(q => {
67+
if (q.id) {
68+
const idNum = parseInt(q.id, 10);
69+
if (!isNaN(idNum) && idNum > maxId) {
70+
maxId = idNum;
71+
}
72+
}
73+
});
74+
// Generate next ID with leading zeros
75+
const nextId = (maxId + 1).toString().padStart(6, '0');
76+
return nextId;
77+
}
78+
79+
// Render category checkboxes
80+
function renderCategories() {
81+
let html = '<label>Categorieën (optioneel):</label>';
82+
html += '<div class="categories-container">';
83+
categoriesList.forEach(cat => {
84+
const catId = 'cat_' + cat.replace(/\s+/g, '_').replace(/[^a-zA-Z0-9_]/g, '');
85+
html += `<div class="category-item">`;
86+
html += `<input type="checkbox" id="${catId}" name="categories" value="${cat}">`;
87+
html += `<label for="${catId}">${cat}</label>`;
88+
html += `</div>`;
89+
});
90+
html += '</div>';
91+
return html;
92+
}
93+
3994
window.addEventListener('DOMContentLoaded', () => {
4095
// Restore last selected question type
4196
const lastType = localStorage.getItem('bijbelquiz_last_type');
@@ -78,6 +133,7 @@ function renderFields(type) {
78133
`;
79134
html += `<input type="text" id="biblicalReference" name="biblicalReference" placeholder="Bijv. Genesis 1:1">
80135
`;
136+
html += renderCategories();
81137
} else if (type === 'fitb') {
82138
html += `<label for="vraag">Vraag (gebruik _____ voor het invulveld):</label>
83139
`;
@@ -99,6 +155,7 @@ function renderFields(type) {
99155
`;
100156
html += `<input type="text" id="biblicalReference" name="biblicalReference" placeholder="Bijv. Exodus 3:14">
101157
`;
158+
html += renderCategories();
102159
} else if (type === 'tf') {
103160
html += `<label for="vraag">Stelling:</label>
104161
`;
@@ -112,6 +169,7 @@ function renderFields(type) {
112169
`;
113170
html += `<input type="text" id="biblicalReference" name="biblicalReference" placeholder="Bijv. Johannes 3:16">
114171
`;
172+
html += renderCategories();
115173
}
116174
dynamicFields.innerHTML = html;
117175
}
@@ -126,6 +184,12 @@ form.type.addEventListener('change', e => {
126184
// Initial render
127185
renderFields(form.type.value);
128186

187+
// Collect selected categories from checkboxes
188+
function getSelectedCategories() {
189+
const checkboxes = form.querySelectorAll('input[name="categories"]:checked');
190+
return Array.from(checkboxes).map(cb => cb.value);
191+
}
192+
129193
// In form submit, use checked checkboxes for categories
130194
form.addEventListener('submit', function(e) {
131195
e.preventDefault();
@@ -134,8 +198,10 @@ form.addEventListener('submit', function(e) {
134198
const juisteAntwoord = form.querySelector('#juisteAntwoord') ? form.querySelector('#juisteAntwoord').value.trim() : '';
135199
const moeilijkheidsgraad = Number(form.difficulty.value);
136200
const biblicalReference = form.querySelector('#biblicalReference') ? form.querySelector('#biblicalReference').value.trim() : '';
137-
// Always set categories to empty array to match guidelines
138-
const categories = [];
201+
// Get selected categories from checkboxes
202+
const categories = getSelectedCategories();
203+
// Generate unique ID
204+
const id = getNextQuestionId();
139205

140206
let questionObj = {
141207
vraag,
@@ -144,7 +210,8 @@ form.addEventListener('submit', function(e) {
144210
type,
145211
categories,
146212
biblicalReference: biblicalReference || null, // Set to null if empty
147-
fouteAntwoorden: [] // Always present for all types
213+
fouteAntwoorden: [], // Always present for all types
214+
id
148215
};
149216

150217
if (type === 'mc' || type === 'fitb') {
@@ -172,7 +239,7 @@ form.addEventListener('submit', function(e) {
172239
questions.push(questionObj);
173240
saveBackup();
174241
updatePreview();
175-
showToast('Vraag toegevoegd!');
242+
showToast('Vraag toegevoegd! ID: ' + id);
176243
form.reset();
177244
form.type.value = type; // Keep the same question type selected
178245
saveLastQuestionType(type); // Save the type
@@ -231,4 +298,4 @@ downloadBtn.addEventListener('click', function() {
231298
updatePreview(true);
232299
});
233300

234-
document.getElementById('restoreBtn').addEventListener('click', restoreBackup);
301+
document.getElementById('restoreBtn').addEventListener('click', restoreBackup);

‎websites/bijbelquiz.app/pages/tools/style.css‎

Lines changed: 49 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,47 @@ input[type="checkbox"] {
6565
transform: scale(1.2);
6666
vertical-align: middle;
6767
}
68+
69+
/* Categories styling */
70+
.categories-container {
71+
max-height: 250px;
72+
overflow-y: auto;
73+
border: 1.5px solid #E2E8F0;
74+
border-radius: 12px;
75+
padding: 12px;
76+
background: #F8FAFC;
77+
margin-top: 8px;
78+
display: grid;
79+
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
80+
gap: 8px;
81+
}
82+
83+
.category-item {
84+
display: flex;
85+
align-items: center;
86+
gap: 8px;
87+
padding: 4px 8px;
88+
border-radius: 8px;
89+
transition: background 0.15s;
90+
}
91+
92+
.category-item:hover {
93+
background: #E0E7FF;
94+
}
95+
96+
.category-item input[type="checkbox"] {
97+
margin: 0;
98+
flex-shrink: 0;
99+
}
100+
101+
.category-item label {
102+
margin: 0;
103+
font-weight: 500;
104+
font-size: 0.95rem;
105+
cursor: pointer;
106+
user-select: none;
107+
}
108+
68109
.categories-list div {
69110
display: flex;
70111
align-items: center;
@@ -144,20 +185,22 @@ input[type="text"]:invalid {
144185
background: #DC2626;
145186
}
146187
#restoreBtn, #clearBtn {
147-
background: #F59E42;
188+
background: #2563EB;
148189
color: #fff;
149190
border: none;
150-
border-radius: 12px;
151-
padding: 12px 18px;
152-
font-size: 1rem;
191+
border-radius: 16px;
192+
padding: 16px 0;
193+
font-size: 1.1rem;
153194
font-weight: 600;
154195
font-family: 'Quicksand', Arial, sans-serif;
155196
cursor: pointer;
156-
box-shadow: 0 2px 8px rgba(245, 158, 66, 0.08);
197+
flex: 1;
198+
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
157199
transition: background 0.2s, box-shadow 0.2s;
158200
}
159201
#restoreBtn:hover, #clearBtn:hover {
160-
background: #D97706;
202+
background: #1746A2;
203+
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.13);
161204
}
162205
#preview.flash {
163206
animation: flash-bg 0.7s;

0 commit comments

Comments
 (0)