mirivlad/LMS
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Feat: Обновлён create.blade.php для вопросов

Browse Source 
✅ TinyMCE WYSIWYG редактор (HTML + картинки)
✅ Поддержка ordering типа (сортировка)
✅ Картинки в ответах (загрузка файлов)
✅ Обновлён QuestionController (store/update)
✅ Валидация изображений (max 2MB)

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
mirivlad
2026-03-27 09:58:35 +08:00
co-authored by Qwen-Coder
parent 025b03c94b
commit 1c94812f7d
2 changed files with 120 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/admin/questions/create.blade.php
+65 -16
View File
@@ -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>