Vergrößere Textfelder in Quiz-Fragen-Formularen

- Ändere Eingabefelder zu Textareas für bessere Benutzerfreundlichkeit
- Fragen-Textfeld auf 4 Zeilen vergrößert
- Antwort-Optionen auf 2 Zeilen vergrößert
- Behebe Probleme mit der Anzeige bestehender Fragen
This commit is contained in:
juhnsa
2025-03-12 19:08:08 +01:00
parent 90d7a3ea94
commit 039e3ea0cb
3 changed files with 85 additions and 47 deletions

View File

@@ -18,9 +18,9 @@
<div>
<label for="question" class="block text-sm font-medium text-gray-700">Frage</label>
<div class="mt-1">
<input type="text" name="question" id="question"
<textarea name="question" id="question" rows="4"
class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
value="{{ question.data.question|default:'' }}" required>
required>{{ question.data.question|default:'' }}</textarea>
</div>
</div>
@@ -31,9 +31,9 @@
{% if question and question.data.options %}
{% for option in question.data.options %}
<div class="flex items-center space-x-3">
<input type="text" name="option_{{ forloop.counter }}"
<textarea name="option_{{ forloop.counter }}" rows="2"
class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
value="{{ option.value }}" required>
required>{{ option.value }}</textarea>
<label class="inline-flex items-center">
<input type="checkbox" name="correct_{{ forloop.counter }}" value="1"
class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"
@@ -50,9 +50,9 @@
{% endfor %}
{% else %}
<div class="flex items-center space-x-3">
<input type="text" name="option_1"
<textarea name="option_1" rows="2"
class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
required>
required></textarea>
<label class="inline-flex items-center">
<input type="checkbox" name="correct_1" value="1"
class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
@@ -66,9 +66,9 @@
</button>
</div>
<div class="flex items-center space-x-3">
<input type="text" name="option_2"
<textarea name="option_2" rows="2"
class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
required>
required></textarea>
<label class="inline-flex items-center">
<input type="checkbox" name="correct_2" value="1"
class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
@@ -119,9 +119,9 @@ function addOption() {
const div = document.createElement('div');
div.className = 'flex items-center space-x-3';
div.innerHTML = `
<input type="text" name="option_${optionCount}"
<textarea name="option_${optionCount}" rows="2"
class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
required>
required></textarea>
<label class="inline-flex items-center">
<input type="checkbox" name="correct_${optionCount}" value="1"
class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
@@ -153,7 +153,7 @@ function updateOptionNumbers() {
const options = container.children;
Array.from(options).forEach((option, index) => {
const number = index + 1;
const textInput = option.querySelector('input[type="text"]');
const textInput = option.querySelector('textarea');
const checkbox = option.querySelector('input[type="checkbox"]');
textInput.name = `option_${number}`;

View File

@@ -18,9 +18,9 @@
<div>
<label for="question" class="block text-sm font-medium text-gray-700">Frage</label>
<div class="mt-1">
<input type="text" name="question" id="question"
<textarea name="question" id="question" rows="4"
class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
value="{{ question.question|default:'' }}" required>
required>{{ question.data.question }}</textarea>
</div>
</div>
@@ -31,13 +31,13 @@
<label class="inline-flex items-center">
<input type="radio" name="correct_answer" value="true"
class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300"
{% if question.correct_answer %}checked{% endif %}>
{% if question.data.correct_answer %}checked{% endif %}>
<span class="ml-2 text-sm text-gray-600">Wahr</span>
</label>
<label class="inline-flex items-center">
<input type="radio" name="correct_answer" value="false"
class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300"
{% if not question.correct_answer %}checked{% endif %}>
{% if not question.data.correct_answer %}checked{% endif %}>
<span class="ml-2 text-sm text-gray-600">Falsch</span>
</label>
</div>