Feat: Обновлён create.blade.php для вопросов
✅ TinyMCE WYSIWYG редактор (HTML + картинки) ✅ Поддержка ordering типа (сортировка) ✅ Картинки в ответах (загрузка файлов) ✅ Обновлён QuestionController (store/update) ✅ Валидация изображений (max 2MB) Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
parent
025b03c94b
commit
1c94812f7d
|
|
@ -7,6 +7,7 @@ use App\Models\Question;
|
|||
use App\Models\Test;
|
||||
use App\Models\Answer;
|
||||
use App\Models\QuestionMatchingPair;
|
||||
use App\Models\QuestionOrderingItem;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\Gate;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
|
|
@ -22,7 +23,7 @@ class QuestionController extends Controller
|
|||
{
|
||||
Gate::authorize('viewAny', Question::class);
|
||||
|
||||
$questions = $test->questions()->with('answers')->orderBy('sort_order')->get();
|
||||
$questions = $test->questions()->with(['answers', 'matchingPairs', 'orderingItems'])->orderBy('sort_order')->get();
|
||||
|
||||
return view('admin.questions.index', compact('test', 'questions'));
|
||||
}
|
||||
|
|
@ -39,14 +40,17 @@ class QuestionController extends Controller
|
|||
Gate::authorize('create', Question::class);
|
||||
|
||||
$validated = $request->validate([
|
||||
'type' => 'required|in:single_choice,multiple_choice,input,matching',
|
||||
'type' => 'required|in:multiple_choice,matching,ordering',
|
||||
'question_text' => 'required|string',
|
||||
'explanation' => 'nullable|string',
|
||||
'score' => 'nullable|integer|min:1',
|
||||
'sort_order' => 'nullable|integer',
|
||||
'is_required' => 'boolean',
|
||||
'answers' => 'nullable|array',
|
||||
'answers.*.text' => 'nullable|string',
|
||||
'answers.*.image' => 'nullable|image|max:2048',
|
||||
'matching_pairs' => 'nullable|array',
|
||||
'ordering_items' => 'nullable|array',
|
||||
]);
|
||||
|
||||
DB::transaction(function () use ($test, $validated) {
|
||||
|
|
@ -59,11 +63,17 @@ class QuestionController extends Controller
|
|||
'is_required' => $validated['is_required'] ?? true,
|
||||
]);
|
||||
|
||||
if (in_array($validated['type'], ['single_choice', 'multiple_choice']) && !empty($validated['answers'])) {
|
||||
// Ответы для multiple_choice
|
||||
if ($validated['type'] === 'multiple_choice' && !empty($validated['answers'])) {
|
||||
foreach ($validated['answers'] as $answer) {
|
||||
if (!empty($answer['text'])) {
|
||||
$imagePath = null;
|
||||
if (!empty($answer['image'])) {
|
||||
$imagePath = $answer['image']->store('questions/answers', 'public');
|
||||
}
|
||||
$question->answers()->create([
|
||||
'answer_text' => $answer['text'],
|
||||
'image' => $imagePath,
|
||||
'is_correct' => $answer['is_correct'] ?? false,
|
||||
'sort_order' => $answer['sort_order'] ?? 0,
|
||||
]);
|
||||
|
|
@ -71,6 +81,7 @@ class QuestionController extends Controller
|
|||
}
|
||||
}
|
||||
|
||||
// Пары для matching
|
||||
if ($validated['type'] === 'matching' && !empty($validated['matching_pairs'])) {
|
||||
foreach ($validated['matching_pairs'] as $pair) {
|
||||
if (!empty($pair['left_text']) && !empty($pair['right_text'])) {
|
||||
|
|
@ -83,6 +94,19 @@ class QuestionController extends Controller
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Элементы для ordering
|
||||
if ($validated['type'] === 'ordering' && !empty($validated['ordering_items'])) {
|
||||
foreach ($validated['ordering_items'] as $item) {
|
||||
if (!empty($item['item_text'])) {
|
||||
$question->orderingItems()->create([
|
||||
'item_text' => $item['item_text'],
|
||||
'correct_order' => $item['correct_order'] ?? 0,
|
||||
'sort_order' => $item['sort_order'] ?? 0,
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return redirect()->route('admin.tests.questions.index', $test)
|
||||
|
|
@ -92,13 +116,14 @@ class QuestionController extends Controller
|
|||
public function show(Test $test, Question $question)
|
||||
{
|
||||
Gate::authorize('view', $question);
|
||||
$question->load(['answers', 'matchingPairs', 'orderingItems']);
|
||||
return view('admin.questions.show', compact('test', 'question'));
|
||||
}
|
||||
|
||||
public function edit(Test $test, Question $question)
|
||||
{
|
||||
Gate::authorize('update', $question);
|
||||
$question->load(['answers', 'matchingPairs']);
|
||||
$question->load(['answers', 'matchingPairs', 'orderingItems']);
|
||||
return view('admin.questions.edit', compact('test', 'question'));
|
||||
}
|
||||
|
||||
|
|
@ -107,14 +132,17 @@ class QuestionController extends Controller
|
|||
Gate::authorize('update', $question);
|
||||
|
||||
$validated = $request->validate([
|
||||
'type' => 'required|in:single_choice,multiple_choice,input,matching',
|
||||
'type' => 'required|in:multiple_choice,matching,ordering',
|
||||
'question_text' => 'required|string',
|
||||
'explanation' => 'nullable|string',
|
||||
'score' => 'nullable|integer|min:1',
|
||||
'sort_order' => 'nullable|integer',
|
||||
'is_required' => 'boolean',
|
||||
'answers' => 'nullable|array',
|
||||
'answers.*.text' => 'nullable|string',
|
||||
'answers.*.image' => 'nullable|image|max:2048',
|
||||
'matching_pairs' => 'nullable|array',
|
||||
'ordering_items' => 'nullable|array',
|
||||
]);
|
||||
|
||||
DB::transaction(function () use ($question, $validated) {
|
||||
|
|
@ -127,12 +155,18 @@ class QuestionController extends Controller
|
|||
'is_required' => $validated['is_required'] ?? true,
|
||||
]);
|
||||
|
||||
if (in_array($validated['type'], ['single_choice', 'multiple_choice']) && !empty($validated['answers'])) {
|
||||
// Ответы
|
||||
if ($validated['type'] === 'multiple_choice' && !empty($validated['answers'])) {
|
||||
$question->answers()->delete();
|
||||
foreach ($validated['answers'] as $answer) {
|
||||
if (!empty($answer['text'])) {
|
||||
$imagePath = null;
|
||||
if (!empty($answer['image'])) {
|
||||
$imagePath = $answer['image']->store('questions/answers', 'public');
|
||||
}
|
||||
$question->answers()->create([
|
||||
'answer_text' => $answer['text'],
|
||||
'image' => $imagePath,
|
||||
'is_correct' => $answer['is_correct'] ?? false,
|
||||
'sort_order' => $answer['sort_order'] ?? 0,
|
||||
]);
|
||||
|
|
@ -140,6 +174,7 @@ class QuestionController extends Controller
|
|||
}
|
||||
}
|
||||
|
||||
// Пары
|
||||
if ($validated['type'] === 'matching' && !empty($validated['matching_pairs'])) {
|
||||
$question->matchingPairs()->delete();
|
||||
foreach ($validated['matching_pairs'] as $pair) {
|
||||
|
|
@ -153,6 +188,20 @@ class QuestionController extends Controller
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Элементы ordering
|
||||
if ($validated['type'] === 'ordering' && !empty($validated['ordering_items'])) {
|
||||
$question->orderingItems()->delete();
|
||||
foreach ($validated['ordering_items'] as $item) {
|
||||
if (!empty($item['item_text'])) {
|
||||
$question->orderingItems()->create([
|
||||
'item_text' => $item['item_text'],
|
||||
'correct_order' => $item['correct_order'] ?? 0,
|
||||
'sort_order' => $item['sort_order'] ?? 0,
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return redirect()->route('admin.tests.questions.index', $test)
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@
|
|||
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 main-content">
|
||||
<div class="d-flex justify-content-between align-items-center pt-3 pb-2 mb-3 border-bottom">
|
||||
<h1 class="h2">Добавить вопрос</h1>
|
||||
<a href="{{ route('admin.courses.tests.show', [$test->course, $test]) }}" class="btn btn-secondary btn-sm">Назад</a>
|
||||
<a href="{{ route('admin.tests.questions.index', $test) }}" class="btn btn-secondary btn-sm">Назад</a>
|
||||
</div>
|
||||
<form action="{{ route('admin.tests.questions.store', $test) }}" method="POST" id="questionForm">
|
||||
<form action="{{ route('admin.tests.questions.store', $test) }}" method="POST" id="questionForm" enctype="multipart/form-data">
|
||||
@csrf
|
||||
<input type="hidden" name="type" id="questionType" value="single_choice">
|
||||
<input type="hidden" name="type" id="questionType" value="multiple_choice">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="card shadow-sm mb-3">
|
||||
|
|
@ -19,28 +19,28 @@
|
|||
<div class="mb-3">
|
||||
<label class="form-label">Тип вопроса *</label>
|
||||
<select name="type_select" id="typeSelect" class="form-select" onchange="updateQuestionType()">
|
||||
<option value="single_choice">Один правильный ответ</option>
|
||||
<option value="multiple_choice">Несколько правильных ответов</option>
|
||||
<option value="input">Ввод текста</option>
|
||||
<option value="multiple_choice">Множественный выбор</option>
|
||||
<option value="matching">Соответствие</option>
|
||||
<option value="ordering">Правильный порядок</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Текст вопроса *</label>
|
||||
<textarea name="question_text" class="form-control" rows="3" required>{{ old('question_text') }}</textarea>
|
||||
<textarea name="question_text" id="questionText" class="form-control" rows="5">{{ old('question_text') }}</textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Пояснение</label>
|
||||
<textarea name="explanation" class="form-control" rows="2">{{ old('explanation') }}</textarea>
|
||||
<textarea name="explanation" id="questionExplanation" class="form-control" rows="3">{{ old('explanation') }}</textarea>
|
||||
<small class="text-muted">Отображается после ответа</small>
|
||||
</div>
|
||||
|
||||
<!-- Ответы для single/multiple choice -->
|
||||
<!-- Ответы для multiple_choice -->
|
||||
<div id="answersSection" class="mb-3">
|
||||
<label class="form-label">Ответы</label>
|
||||
<div id="answersContainer">
|
||||
<div class="input-group mb-2">
|
||||
<input type="text" name="answers[0][text]" class="form-control" placeholder="Текст ответа">
|
||||
<input type="file" name="answers[0][image]" class="form-control" accept="image/*">
|
||||
<input type="hidden" name="answers[0][is_correct]" value="0">
|
||||
<button type="button" class="btn btn-outline-success" onclick="toggleCorrect(this)"><i class="bi bi-circle"></i></button>
|
||||
<button type="button" class="btn btn-outline-danger" onclick="removeAnswer(this)"><i class="bi bi-trash"></i></button>
|
||||
|
|
@ -55,6 +55,13 @@
|
|||
<div id="matchingContainer"></div>
|
||||
<button type="button" class="btn btn-sm btn-secondary" onclick="addMatchingPair()">+ Добавить пару</button>
|
||||
</div>
|
||||
|
||||
<!-- Элементы для ordering -->
|
||||
<div id="orderingSection" class="mb-3" style="display:none;">
|
||||
<label class="form-label">Элементы для сортировки</label>
|
||||
<div id="orderingContainer"></div>
|
||||
<button type="button" class="btn btn-sm btn-secondary" onclick="addOrderingItem()">+ Добавить элемент</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -84,35 +91,77 @@
|
|||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TinyMCE -->
|
||||
<script src="https://cdn.tiny.mce.com/1/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
|
||||
<script>
|
||||
// Инициализация TinyMCE
|
||||
tinymce.init({
|
||||
selector: '#questionText, #questionExplanation',
|
||||
height: 300,
|
||||
plugins: 'image link table lists code',
|
||||
toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist | image link | code',
|
||||
image_title: true,
|
||||
automatic_uploads: true,
|
||||
file_picker_types: 'image',
|
||||
file_picker_callback: function(cb, value, meta) {
|
||||
const input = document.createElement('input');
|
||||
input.setAttribute('type', 'file');
|
||||
input.setAttribute('accept', 'image/*');
|
||||
input.addEventListener('change', function(e) {
|
||||
const file = e.target.files[0];
|
||||
const reader = new FileReader();
|
||||
reader.addEventListener('load', function() {
|
||||
const id = 'blobid' + (new Date()).getTime();
|
||||
const blobCache = tinymce.activeEditor.editorUpload.blobCache;
|
||||
const base64 = reader.result.split(',')[1];
|
||||
const blobInfo = blobCache.create(id, file, base64);
|
||||
blobCache.add(blobInfo);
|
||||
cb(blobInfo.blobUri(), { title: file.name });
|
||||
});
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
input.click();
|
||||
}
|
||||
});
|
||||
|
||||
function updateQuestionType() {
|
||||
const type = document.getElementById('typeSelect').value;
|
||||
document.getElementById('questionType').value = type;
|
||||
const answersSection = document.getElementById('answersSection');
|
||||
const matchingSection = document.getElementById('matchingSection');
|
||||
answersSection.style.display = (type === 'single_choice' || type === 'multiple_choice') ? 'block' : 'none';
|
||||
matchingSection.style.display = (type === 'matching') ? 'block' : 'none';
|
||||
document.getElementById('answersSection').style.display = (type === 'multiple_choice') ? 'block' : 'none';
|
||||
document.getElementById('matchingSection').style.display = (type === 'matching') ? 'block' : 'none';
|
||||
document.getElementById('orderingSection').style.display = (type === 'ordering') ? 'block' : 'none';
|
||||
}
|
||||
|
||||
function addAnswer() {
|
||||
const container = document.getElementById('answersContainer');
|
||||
const index = container.children.length;
|
||||
const div = document.createElement('div');
|
||||
div.className = 'input-group mb-2';
|
||||
div.innerHTML = `<input type="text" name="answers[${index}][text]" class="form-control" placeholder="Текст ответа"><input type="hidden" name="answers[${index}][is_correct]" value="0"><button type="button" class="btn btn-outline-success" onclick="toggleCorrect(this)"><i class="bi bi-circle"></i></button><button type="button" class="btn btn-outline-danger" onclick="removeAnswer(this)"><i class="bi bi-trash"></i></button>`;
|
||||
div.innerHTML = `<input type="text" name="answers[${index}][text]" class="form-control" placeholder="Текст ответа"><input type="file" name="answers[${index}][image]" class="form-control" accept="image/*"><input type="hidden" name="answers[${index}][is_correct]" value="0"><button type="button" class="btn btn-outline-success" onclick="toggleCorrect(this)"><i class="bi bi-circle"></i></button><button type="button" class="btn btn-outline-danger" onclick="removeAnswer(this)"><i class="bi bi-trash"></i></button>`;
|
||||
container.appendChild(div);
|
||||
}
|
||||
function removeAnswer(btn) { btn.parentElement.remove(); }
|
||||
function toggleCorrect(btn) {
|
||||
const hidden = btn.previousElementSibling;
|
||||
const hidden = btn.previousElementSibling.previousElementSibling;
|
||||
if (hidden.value === '0') { hidden.value = '1'; btn.innerHTML = '<i class="bi bi-check-circle-fill text-success"></i>'; }
|
||||
else { hidden.value = '0'; btn.innerHTML = '<i class="bi bi-circle"></i>'; }
|
||||
}
|
||||
|
||||
function addMatchingPair() {
|
||||
const container = document.getElementById('matchingContainer');
|
||||
const index = container.children.length;
|
||||
const div = document.createElement('div');
|
||||
div.className = 'input-group mb-2';
|
||||
div.innerHTML = `<input type="text" name="matching_pairs[${index}][left_text]" class="form-control" placeholder="Левая часть"><input type="text" name="matching_pairs[${index}][right_text]" class="form-control" placeholder="Правая часть"><input type="number" name="matching_pairs[${index}][match_score]" class="form-control" value="1" style="width:80px" title="Баллы"><button type="button" class="btn btn-outline-danger" onclick="this.parentElement.remove()"><i class="bi bi-trash"></i></button>`;
|
||||
div.innerHTML = `<input type="text" name="matching_pairs[${index}][left_text]" class="form-control" placeholder="Левая часть"><input type="text" name="matching_pairs[${index}][right_text]" class="form-control" placeholder="Правая часть"><input type="number" name="matching_pairs[${index}][match_score]" class="form-control" value="1" style="width:80px"><button type="button" class="btn btn-outline-danger" onclick="this.parentElement.remove()"><i class="bi bi-trash"></i></button>`;
|
||||
container.appendChild(div);
|
||||
}
|
||||
|
||||
function addOrderingItem() {
|
||||
const container = document.getElementById('orderingContainer');
|
||||
const index = container.children.length;
|
||||
const div = document.createElement('div');
|
||||
div.className = 'input-group mb-2';
|
||||
div.innerHTML = `<input type="text" name="ordering_items[${index}][item_text]" class="form-control" placeholder="Элемент"><input type="number" name="ordering_items[${index}][correct_order]" class="form-control" value="${index + 1}" style="width:80px" title="Правильный порядок"><button type="button" class="btn btn-outline-danger" onclick="this.parentElement.remove()"><i class="bi bi-trash"></i></button>`;
|
||||
container.appendChild(div);
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue