247 lines
9.0 KiB
PHP
247 lines
9.0 KiB
PHP
<style>
|
|
.ql-snow .ql-editor pre.ql-syntax {
|
|
background-color: #f3f3f3;
|
|
color: #1f1f1f;
|
|
overflow: visible;
|
|
}
|
|
</style>
|
|
|
|
<!-- Content Id Field -->
|
|
<div class="form-group col-sm-12">
|
|
{!! Form::label('content_id', 'Content Id:') !!}
|
|
{!! Form::select('content_id', $contents, null, ['class' => 'form-control']) !!}
|
|
</div>
|
|
|
|
<div class="form-group col-sm-6">
|
|
{!! Form::label('question_name', 'Question Name:') !!}
|
|
{!! Form::text('question_name', null, ['class' => 'form-control']) !!}
|
|
</div>
|
|
|
|
<!-- Question Field -->
|
|
<div class="form-group col-sm-12">
|
|
{!! Form::label('question', 'Code Question:') !!}
|
|
{!! Form::hidden('question', null, ['class' => 'form-control', 'id' => 'res']) !!}
|
|
|
|
<div>
|
|
<div id="toolbar">
|
|
<!-- Add font size dropdown -->
|
|
<select class="ql-size">
|
|
<option value="small"></option>
|
|
<!-- Note a missing, thus falsy value, is used to reset to default -->
|
|
<option selected></option>
|
|
<option value="large"></option>
|
|
<option value="huge"></option>
|
|
</select>
|
|
<!-- Add a bold button -->
|
|
<button class="ql-bold"></button>
|
|
<button class="ql-italic"></button>
|
|
<button class="ql-list" value="ordered"></button>
|
|
<button class="ql-list" value="bullet"></button>
|
|
|
|
<!-- Add subscript and superscript buttons -->
|
|
<button class="ql-script" value="sub"></button>
|
|
<button class="ql-script" value="super"></button>
|
|
<button class="ql-image"></button>
|
|
<button class="ql-code-block"></button>
|
|
|
|
</div>
|
|
<div id="editor">
|
|
{!! @$question->question !!}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Hint Field -->
|
|
{{--<div class="form-group col-sm-12 col-lg-12">
|
|
{!! Form::label('hint', 'Hint:') !!}
|
|
{!! Form::textarea('hint', null, ['class' => 'form-control']) !!}
|
|
</div>--}}
|
|
|
|
<div class="col-sm-12 col-lg-12 p-0" id="inputFieldsContainer">
|
|
@if($title == "edit")
|
|
@foreach($essay as $key => $data)
|
|
<div class="custom-group">
|
|
<div class="d-flex flex-row">
|
|
<div class="col-sm-10">
|
|
<label for="essay_question1">Essay Question :</label>
|
|
<textarea type="text" name="essay_question[]" class="form-control" style="height: 200px;" value="{{$data->question}}">{{$data->question}}</textarea>
|
|
<label for="answer_key1">Answer Key 1:</label>
|
|
<textarea type="text" name="answer_key[]" value="{{$data->answer}}" style="height: 200px;" class="form-control">{{$data->answer}}</textarea>
|
|
<label for="answer_key2">Answer Key 2:</label>
|
|
<textarea type="text" name="answer_key2[]" value="{{$data->answer2}}" style="height: 200px;" class="form-control">{{$data->answer2}}</textarea>
|
|
<label for="answer_key3">Answer Key 3:</label>
|
|
<textarea type="text" name="answer_key3[]" value="{{$data->answer3}}" style="height: 200px;" class="form-control">{{$data->answer3}}</textarea>
|
|
<label for="answer_key4">Answer Key 4:</label>
|
|
<textarea type="text" name="answer_key4[]" value="{{$data->answer4}}" style="height: 200px;" class="form-control">{{$data->answer4}}</textarea>
|
|
<input type="hidden" value="{{$data->id}}" name="essay_id[]">
|
|
</div>
|
|
<div class="col-sm-2 pt-3">
|
|
<a href="#" id="removeButton" class="removeButton btn btn-danger mt-3">Remove <b>-</b></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
@else
|
|
<div class="custom-group">
|
|
<div class="d-flex flex-row">
|
|
<div class="col-sm-10">
|
|
<label for="essay_question1">Essay Question :</label>
|
|
<textarea type="text" name="essay_question[]" style="height: 200px;" class="form-control"></textarea>
|
|
<label for="answer_key1">Answer Key 1:</label>
|
|
<textarea type="text" name="answer_key[]" style="height: 200px;" class="form-control"></textarea>
|
|
<label for="answer_key2">Answer Key 2:</label>
|
|
<textarea type="text" name="answer_key2[]" style="height: 200px;" class="form-control"></textarea>
|
|
<label for="answer_key3">Answer Key 3:</label>
|
|
<textarea type="text" name="answer_key3[]" style="height: 200px;" class="form-control"></textarea>
|
|
<label for="answer_key4">Answer Key 4:</label>
|
|
<textarea type="text" name="answer_key4[]" style="height: 200px;" class="form-control"></textarea>
|
|
<input type="hidden" value="0" name="essay_id[]">
|
|
</div>
|
|
<div class="col-sm-2 pt-3">
|
|
<a href="#" id="removeButton" class="removeButton btn btn-danger mt-3">Remove <b>-</b></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
<div class="form-group col-sm-12 pt-3">
|
|
<a href="#" id="expandButton" class="btn btn-success">Expand <b>+</b></a>
|
|
|
|
</div>
|
|
|
|
<!-- Image Field -->
|
|
<div class="form-group col-sm-3">
|
|
{!! Form::label('image', 'Image:') !!}
|
|
{!! Form::file('image') !!}
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
|
|
<!-- Score Field -->
|
|
<div class="form-group col-sm-3">
|
|
{!! Form::label('score', 'Score:') !!}
|
|
{!! Form::number('score', null, ['class' => 'form-control']) !!}
|
|
</div>
|
|
|
|
<div class="form-group col-sm-3">
|
|
{!! Form::label('is_essay', 'Code:') !!}
|
|
{!! Form::checkbox('is_essay', '1') !!}
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{{--<div class="form-group col-sm-3">
|
|
{!! Form::label('timer', 'Timer: (minutes)') !!}
|
|
{!! Form::number('timer', null, ['class' => 'form-control']) !!}
|
|
</div>
|
|
|
|
<div class="form-divider" />
|
|
|
|
<div class="col-sm-12" id="answer_list">
|
|
<div class="card-title">Answers</div>
|
|
<div class="row">
|
|
@for ($i = 0; $i < 4; $i++)
|
|
<div class="col-sm-10">
|
|
<textarea class="form-control" rows="3" name="answers_{{ $i }}"
|
|
placeholder="Answer {{ $i + 1 }}">{{ @$answers[$i]->answer }}</textarea>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<input type="hidden" name="answer_id_{{ $i }}" value="{{ @$answers[$i]->id }}">
|
|
<input type="checkbox" value="true" name="is_right_{{ $i }}"
|
|
{{ @$answers[$i]->is_right == 'true' ? 'checked' : '' }}> is right?
|
|
</div>
|
|
<div class="form-divider"></div>
|
|
@endfor
|
|
</div>
|
|
|
|
</div>--}}
|
|
|
|
|
|
<!-- Submit Field -->
|
|
<div class="form-group col-sm-12">
|
|
<button type="submit" class="btn btn-primary" id="submitButton">Save</button>
|
|
<a href="{{ route('admin.questions.index') }}" class="btn btn-light">Cancel</a>
|
|
</div>
|
|
|
|
@section('scripts')
|
|
<script>
|
|
$(document).ready(function() {
|
|
var counter = 1;
|
|
|
|
$('#expandButton').click(function() {
|
|
|
|
counter++;
|
|
|
|
var inputField =
|
|
'<div class="custom-group">' +
|
|
'<div class="d-flex flex-row">' +
|
|
'<div class="col-sm-10">' +
|
|
'<label for="essay_question' + counter + '">Essay Question :</label>' +
|
|
'<textarea type="text" name="essay_question[]" style="height: 200px;" class="form-control"></textarea>' +
|
|
'<label for="answer_key1' + counter + '">Answer Key 1:</label>' +
|
|
'<textarea type="text" name="answer_key[]" style="height: 200px;" class="form-control"></textarea>' +
|
|
'<label for="answer_key2' + counter + '">Answer Key 2:</label>' +
|
|
'<textarea type="text" name="answer_key2[]" style="height: 200px;" class="form-control"></textarea>' +
|
|
'<label for="answer_key3' + counter + '">Answer Key 3:</label>' +
|
|
'<textarea type="text" name="answer_key3[]" style="height: 200px;" class="form-control"></textarea>' +
|
|
'<label for="answer_key4' + counter + '">Answer Key 4:</label>' +
|
|
'<textarea type="text" name="answer_key4[]" style="height: 200px;" class="form-control"></textarea>' +
|
|
'<input type="hidden" value="0" name="essay_id[]">'+
|
|
'</div>' +
|
|
'<div class="col-sm-2 pt-3">' +
|
|
'<a href="#" id="removeButton" class="removeButton btn btn-danger mt-3">Remove <b>-</b></a>' +
|
|
'</div>' +
|
|
'</div>';
|
|
|
|
$('#inputFieldsContainer').append(inputField);
|
|
});
|
|
|
|
$(document).on('click', '.removeButton', function(event) {
|
|
event.preventDefault();
|
|
|
|
var fieldGroup = $(this).closest('.custom-group');
|
|
|
|
// Hapus 2 field inputan sekaligus
|
|
fieldGroup.next('.custom-group').remove();
|
|
fieldGroup.remove();
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
if ($("#is_essay").is(":checked")) {
|
|
$("#answer_list").hide();
|
|
}
|
|
|
|
$("#is_essay").change(function() {
|
|
let is_checked = $("#is_essay").is(":checked");
|
|
if (is_checked) {
|
|
$("#answer_list").hide();
|
|
} else {
|
|
$("#answer_list").show();
|
|
}
|
|
})
|
|
|
|
hljs.configure({ // optionally configure hljs
|
|
languages: ['javascript', 'ruby', 'python', 'java']
|
|
});
|
|
|
|
var quill = new Quill('#editor', {
|
|
modules: {
|
|
syntax: true,
|
|
toolbar: "#toolbar"
|
|
},
|
|
theme: 'snow',
|
|
onChange: (value) => {
|
|
console.log(value)
|
|
}
|
|
});
|
|
|
|
quill.on('editor-change', function() {
|
|
document.getElementById("res").value = quill.root.innerHTML;
|
|
});
|
|
</script>
|
|
@endsection
|