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:
@@ -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}`;
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user