Finished designing the editor console
This commit is contained in:
parent
f314566591
commit
ed53b771ef
@ -17,18 +17,32 @@
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.accordion-button div {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
.editor-controls a i {
|
||||
font-size: larger;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.accordion-button a {
|
||||
transform: translate(-50%, -50%);
|
||||
.option-controls, .block-controls {
|
||||
width: fit-content;
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.option-controls a, .block-controls a {
|
||||
margin: 0 10px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.option-controls a i, .block-controls a i {
|
||||
font-size: larger;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.accordion-button div {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
right: 0%;
|
||||
position: absolute;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
.accordion-button::after {
|
||||
@ -44,3 +58,12 @@
|
||||
background-color: #bb2d3b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.panel-button {
|
||||
padding: 6px;
|
||||
margin: 0px 2px;
|
||||
}
|
||||
|
||||
.panel-button i {
|
||||
font-size: larger;
|
||||
}
|
||||
@ -1,68 +1,359 @@
|
||||
const root = $('#editor-root')
|
||||
Sortable.create(root.get(0), {handle: '.move-handle', onEnd: function(evt) {renumber_blocks()}})
|
||||
|
||||
var data = [
|
||||
{
|
||||
"type": "question",
|
||||
"q_no": 3,
|
||||
"text": "The ball is gathered by the defensive division and a player throws it forward, hitting the korf in the other division.",
|
||||
"options": [
|
||||
"Play on",
|
||||
"Opposite team restart under their defensive post",
|
||||
"Opposite team restart where the ball was thrown from"
|
||||
],
|
||||
"correct": 0,
|
||||
"q_type": "Multiple Choice",
|
||||
"tags": [
|
||||
"scoring from the defence zone"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "question",
|
||||
"q_no": 4,
|
||||
"text": "At the end of the game, after the final whistle, a coach loudly confronts the referee. What can the referee do?",
|
||||
"options": [
|
||||
"Ignore the coach as the match has ended",
|
||||
"Ignore the coach or inform the coach they will be reported",
|
||||
"Ignore the coach, inform the coach they will be reported and/or show the coach a card"
|
||||
],
|
||||
"correct": 2,
|
||||
"q_type": "List",
|
||||
"tags": [
|
||||
"discipline"
|
||||
]
|
||||
},
|
||||
]
|
||||
var element_index = 0
|
||||
var question_index = 0
|
||||
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (data[i]['type'] == 'question') {
|
||||
var obj = `
|
||||
<div class="accordion-item" id="i${i}">
|
||||
<h2 class="accordion-header" id="h${i}">
|
||||
<div class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c${i}" aria-expanded="true" aria-controls="c${i}">
|
||||
<div class="float-start">Question ${i+1}</div>
|
||||
<a href="javascript:void(0)" class="btn btn-success panel-control" data-id="${i}" data-action="remove">X</a>
|
||||
root.on('click', '.panel-controls > a', function(event) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
var action = $(this).data('action')
|
||||
var element = $(this).closest('.accordion-item')
|
||||
var root_container = $(this).closest('.accordion')
|
||||
if (action == 'delete') {
|
||||
element.remove()
|
||||
console.log(root_container.get(0) == root.get(0))
|
||||
if (root_container.get(0) != root.get(0) && root_container.children().length < 2 ) {
|
||||
root_container.find('.panel-controls > a[data-action="delete"]').addClass('disabled')
|
||||
}
|
||||
} else if (action == 'add-question') {
|
||||
var question = generate_single_question(root_container_id=`#${root_container.attr('id')}`)
|
||||
$(question).insertBefore(element)
|
||||
if (root_container.get(0) != root.get(0) && root_container.children().length > 1 ) {
|
||||
root_container.find('.panel-controls > a[data-action="delete"]').removeClass('disabled')
|
||||
}
|
||||
} else if (action == 'add-block') {
|
||||
var block = generate_block(root_container_id=`#${root_container.attr('id')}`)
|
||||
$(block).insertBefore(element)
|
||||
}
|
||||
renumber_blocks()
|
||||
})
|
||||
|
||||
root.on('change', '.form-select.question-type', function(event) {
|
||||
event.preventDefault()
|
||||
var type = $(this).val()
|
||||
var options = $(this).closest('div.input-group').siblings('.options')
|
||||
var option_controls = $(this).closest('div.input-group').siblings('.option-controls')
|
||||
var correct = $(this).closest('div.input-group').siblings().find('.question-correct')
|
||||
if (type == 'Yes/No') {
|
||||
options.empty()
|
||||
correct.empty()
|
||||
var opt = `
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">0</span>
|
||||
<input type="text" class="form-control" value="Yes" disabled>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">1</span>
|
||||
<input type="text" class="form-control" value="No" disabled>
|
||||
</div>
|
||||
`
|
||||
options.append(opt)
|
||||
option_controls.children('a').addClass('disabled')
|
||||
var cor = `
|
||||
<option value ="0" default>0</option>
|
||||
<option value="1">1</option>
|
||||
`
|
||||
correct.append(cor)
|
||||
} else {
|
||||
option_controls.children('a').removeClass('disabled')
|
||||
options.find('input').removeAttr('disabled')
|
||||
if (options.children().length <= 2 ){
|
||||
option_controls.children('a[data-action="delete"]').addClass('disabled')
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
root.on('click', '.option-controls > a', function(event) {
|
||||
event.preventDefault()
|
||||
var action = $(this).data('action')
|
||||
var options = $(this).closest('div.option-controls').siblings('.options')
|
||||
var length = options.children().length
|
||||
var correct = $(this).closest('div.option-controls').siblings().find('.question-correct')
|
||||
if (action == 'delete') {
|
||||
if (length > 2) {
|
||||
options.children().last().remove()
|
||||
correct.children().last().remove()
|
||||
}
|
||||
} else {
|
||||
var opt = `
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">${length}</span>
|
||||
<input type="text" class="form-control" value="Option ${length}">
|
||||
</div>
|
||||
`
|
||||
options.append(opt)
|
||||
var cor = `<option value="${length}">${length}</option>`
|
||||
correct.append(cor)
|
||||
}
|
||||
length = options.children().length
|
||||
if (length <= 2) {
|
||||
$(this).closest('div.option-controls').children('a[data-action="delete"]').addClass('disabled')
|
||||
} else {
|
||||
$(this).closest('div.option-controls').children('a[data-action="delete"]').removeClass('disabled')
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
$('.editor-controls > a').click(function(event){
|
||||
event.preventDefault()
|
||||
var action = $(this).data('action')
|
||||
var root_accordion = $(this).closest('div').siblings('.accordion')
|
||||
if (action == 'add-question') {
|
||||
var obj = generate_single_question(root_container_id=`#${root_accordion.attr('id')}`)
|
||||
root.append(obj)
|
||||
} else if (action == 'add-block') {
|
||||
var obj = generate_block(root_container_id=`#${root_accordion.attr('id')}`)
|
||||
root.append(obj)
|
||||
var block_container = $(`#element${element_index-1}`).children().find('.accordion')
|
||||
Sortable.create(block_container.get(0), {handle: '.move-handle', onEnd: function(evt) {renumber_blocks()}})
|
||||
var question = generate_single_question(root_container_id=`#${block_container.attr('id')}`)
|
||||
block_container.append(question)
|
||||
block_container.find('.panel-controls > a[data-action="delete"]').addClass('disabled')
|
||||
} else if (action == 'done') {
|
||||
parse_data(data)
|
||||
}
|
||||
renumber_blocks()
|
||||
})
|
||||
|
||||
function parse_data(data) {
|
||||
var block, obj, new_block, block_container, question, _question, new_question, options, correct, opt, tags
|
||||
for (let c = 0; c < data.length; c++) {
|
||||
block = data[c]
|
||||
if (block['type'] == 'block') {
|
||||
obj = generate_block(root_container_id=`#${root.attr('id')}`)
|
||||
root.append(obj)
|
||||
new_block = $(`#element${element_index-1}`)
|
||||
new_block.find('.block-header-text').val(block['question_header']).trigger('change')
|
||||
block_container = $(`#element${element_index-1}`).children().find('.accordion')
|
||||
Sortable.create(block_container.get(0), {handle: '.move-handle', onEnd: function(evt) {renumber_blocks()}})
|
||||
for (let _c = 0; _c < block['questions'].length; _c ++) {
|
||||
question = block['questions'][_c]
|
||||
_question = generate_single_question(root_container_id=`#${block_container.attr('id')}`)
|
||||
block_container.append(_question)
|
||||
if (block_container.children().length <= 1) {
|
||||
block_container.find('.panel-controls > a[data-action="delete"]').addClass('disabled')
|
||||
} else {
|
||||
block_container.find('.panel-controls > a[data-action="delete"]').removeClass('disabled')
|
||||
}
|
||||
new_question = $(`#element${element_index-1}`)
|
||||
new_question.find('.question-text').val(question['text']).trigger('change')
|
||||
new_question.find('.question-type').val(question['q_type']).trigger('change')
|
||||
correct = new_question.find('.question-correct')
|
||||
if (question['q_type'] != 'Yes/No') {
|
||||
options = new_question.find('.options')
|
||||
options.empty()
|
||||
correct.empty()
|
||||
for ( var __c = 0; __c < question['options'].length; __c++) {
|
||||
option = question['options'][__c]
|
||||
opt = `
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">${__c}</span>
|
||||
<input type="text" class="form-control" value="${option}">
|
||||
</div>
|
||||
`
|
||||
options.append(opt)
|
||||
correct.append(`<option value="${__c}">${__c}</option>`)
|
||||
}
|
||||
}
|
||||
correct.val(String(question['correct']))
|
||||
tags = question['tags'].join('\r\n')
|
||||
new_question.find('.question-tags').val(tags)
|
||||
}
|
||||
} else {
|
||||
question = block
|
||||
obj = generate_single_question(root_container_id=`#${root.attr('id')}`)
|
||||
root.append(obj)
|
||||
new_question = $(`#element${element_index-1}`)
|
||||
new_question.find('.question-text').val(question['text']).trigger('change')
|
||||
new_question.find('.question-type').val(question['q_type']).trigger('change')
|
||||
correct = new_question.find('.question-correct')
|
||||
if (question['q_type'] != 'Yes/No') {
|
||||
options = new_question.find('.options')
|
||||
options.empty()
|
||||
correct.empty()
|
||||
for ( var _c = 0; _c < question['options'].length; _c++) {
|
||||
option = question['options'][_c]
|
||||
opt = `
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">${_c}</span>
|
||||
<input type="text" class="form-control" value="${option}">
|
||||
</div>
|
||||
`
|
||||
options.append(opt)
|
||||
correct.append(`<option value="${_c}">${_c}</option>`)
|
||||
}
|
||||
}
|
||||
correct.val(String(question['correct']))
|
||||
tags = question['tags'].join('\r\n')
|
||||
new_question.find('.question-tags').val(tags)
|
||||
}
|
||||
}
|
||||
renumber_blocks()
|
||||
}
|
||||
|
||||
root.on('click', '.block-controls > a', function(event){
|
||||
event.preventDefault()
|
||||
var action = $(this).data('action')
|
||||
var root_accordion = $(this).closest('div').siblings('.accordion')
|
||||
if (action == 'add-question') {
|
||||
var question = generate_single_question(root_container_id=`#${root_accordion.attr('id')}`)
|
||||
root_accordion.append(question)
|
||||
if (root_accordion.children().length > 1 ) {
|
||||
root_accordion.find('.panel-controls > a[data-action="delete"]').removeClass('disabled')
|
||||
} else {
|
||||
root_accordion.find('.panel-controls > a[data-action="delete"]').addClass('disabled')
|
||||
}
|
||||
renumber_blocks()
|
||||
}
|
||||
})
|
||||
|
||||
function generate_single_question(root_container_id) {
|
||||
if (root_container_id == `#${root.attr('id')}`) {
|
||||
var block_button = `
|
||||
<a href="javascript:void(0)" class="btn btn-primary" data-action="add-block" title="Add Block Above" aria-title="Add Block Above" data-bs-toggle="collapse" data-bs-target>
|
||||
<i class="bi bi-folder-plus"></i>
|
||||
</a>
|
||||
`
|
||||
} else {
|
||||
var block_button = ''
|
||||
}
|
||||
var question = `
|
||||
<div class="accordion-item" id="element${element_index}">
|
||||
<h2 class="accordion-header" id="element${element_index}-header">
|
||||
<div class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#element${element_index}-content" aria-expanded="true" aria-controls="element${element_index}-content">
|
||||
<div class="float-start">
|
||||
<div class="accordion-caption">
|
||||
<span class="block-number"></span>.
|
||||
Question
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-controls float-end">
|
||||
<a href="javascript:void(0)" class="btn btn-success move-handle" data-action="move-question" title="Move Question" aria-title="Move Question" data-bs-toggle="collapse" data-bs-target>
|
||||
<i class="bi bi-arrows-move"></i>
|
||||
</a>
|
||||
${block_button}
|
||||
<a href="javascript:void(0)" class="btn btn-primary" data-action="add-question" title="Add Question Above" aria-title="Add Question Above" data-bs-toggle="collapse" data-bs-target>
|
||||
<i class="bi bi-file-plus-fill"></i>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="btn btn-danger" data-action="delete" title="Delete Block" aria-title="Delete Block" data-bs-toggle="collapse" data-bs-target>
|
||||
<i class="bi bi-x-square-fill"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</h2>
|
||||
<div id="c${i}" class="accordion-collapse collapse" aria-labelledby="h${i}" data-bs-parent="#editor-root">
|
||||
<div id="element${element_index}-content" class="accordion-collapse collapse" aria-labelledby="element${element_index}-header" data-bs-parent="${root_container_id}">
|
||||
<div class="accordion-body">
|
||||
<div class="question-text">
|
||||
${data[i]['text']}
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">Question</span>
|
||||
<textarea type="text" class="form-control question-text">Enter question here.</textarea>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">Question Type</span>
|
||||
<select class="form-select question-type">
|
||||
<option value ="Multiple Choice" default>Multiple Choice</option>
|
||||
<option value="Yes/No">Yes/No</option>
|
||||
<option value="List">Ordered List</option>
|
||||
</select>
|
||||
</div>
|
||||
<label class="form-label">Options</label>
|
||||
<ul class="options">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">0</span>
|
||||
<input type="text" class="form-control" value="Option 0">
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">1</span>
|
||||
<input type="text" class="form-control" value="Option 1">
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
${data[i]['options'].join("</li><li>")}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="option-controls">
|
||||
<a href="javascript:void(0)" class="btn btn-danger disabled" data-action="delete" title="Delete Question" aria-title="Delete Question">
|
||||
<i class="bi bi-patch-minus-fill"></i>
|
||||
Delete
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="btn btn-success" data-action="add" title="Add Question" aria-title="Add Question">
|
||||
<i class="bi bi-patch-plus-fill"></i>
|
||||
Add
|
||||
</a>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">Correct</span>
|
||||
<select class="form-select question-correct">
|
||||
<option value ="0" default>0</option>
|
||||
<option value="1">1</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">Tags</span>
|
||||
<textarea type="text" class="form-control question-tags"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
root.append(obj)
|
||||
}
|
||||
element_index ++
|
||||
return question
|
||||
}
|
||||
|
||||
$('.panel-control').click(function(event) {
|
||||
console.log($(this).data('id'))
|
||||
var id = $(this).data('id')
|
||||
$(`#i${id}`).remove()
|
||||
})
|
||||
function generate_block(root_container_id) {
|
||||
var block = `
|
||||
<div class="accordion-item" id="element${element_index}">
|
||||
<h2 class="accordion-header" id="element${element_index}-header">
|
||||
<div class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#element${element_index}-content" aria-expanded="true" aria-controls="element${element_index}-content">
|
||||
<div class="float-start">
|
||||
<div class="accordion-caption">
|
||||
<span class="block-number"></span>.
|
||||
Block
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-controls float-end">
|
||||
<a href="javascript:void(0)" class="btn btn-success move-handle" data-action="move-question" title="Move Question" aria-title="Move Question" data-bs-toggle="collapse" data-bs-target>
|
||||
<i class="bi bi-arrows-move"></i>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="btn btn-primary" data-action="add-block" title="Add Block Above" aria-title="Add Block Above" data-bs-toggle="collapse" data-bs-target>
|
||||
<i class="bi bi-folder-plus"></i>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="btn btn-primary" data-action="add-question" title="Add Question Above" aria-title="Add Question Above" data-bs-toggle="collapse" data-bs-target>
|
||||
<i class="bi bi-file-plus-fill"></i>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="btn btn-danger" data-action="delete" title="Delete Block" aria-title="Delete Block" data-bs-toggle="collapse" data-bs-target>
|
||||
<i class="bi bi-x-square-fill"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</h2>
|
||||
<div id="element${element_index}-content" class="accordion-collapse collapse" aria-labelledby="element${element_index}-header" data-bs-parent="${root_container_id}">
|
||||
<div class="accordion-body">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">Block Header</span>
|
||||
<textarea type="text" class="form-control block-header-text">Enter the header text for this block of questions.</textarea>
|
||||
</div>
|
||||
<div class="accordion" id="element${element_index}-questions">
|
||||
</div>
|
||||
<div class="block-controls">
|
||||
<a href="javascript:void(0)" class="btn btn-success" data-action="add-question" title="Add Question" aria-title="Add Question">
|
||||
<i class="bi bi-file-plus-fill"></i>
|
||||
Add Question
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
element_index ++
|
||||
return block
|
||||
}
|
||||
|
||||
var myArray = [
|
||||
"Apples",
|
||||
"Bananas",
|
||||
"Pears"
|
||||
];
|
||||
|
||||
function renumber_blocks () {
|
||||
$( ".block-number" ).each(function(index) {
|
||||
$( this ).text($( this ).closest('.accordion-item').index())
|
||||
})
|
||||
}
|
||||
@ -48,6 +48,7 @@
|
||||
<script>
|
||||
window.jQuery || document.write(`<script src="{{ url_for('.static', filename='js/jquery-3.6.0.min.js') }}"><\/script>`)
|
||||
</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
|
||||
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
|
||||
|
||||
@ -11,123 +11,22 @@
|
||||
<h1>Editor</h1>
|
||||
<div class="container editor-panel" id="editor" tabindex="-1">
|
||||
<div class="accordion" id="editor-root">
|
||||
<div class="accordion-item" id="i0">
|
||||
<h2 class="accordion-header" id="h0">
|
||||
<div class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c0" aria-expanded="true" aria-controls="c0">
|
||||
<div class="float-start">Question 1</div>
|
||||
<a href="javascript:void(0)" class="btn btn-success panel-control" data-id="0" data-action="remove">X</a>
|
||||
</div>
|
||||
</h2>
|
||||
<div id="c0" class="accordion-collapse collapse" aria-labelledby="h0" data-bs-parent="#editor-root">
|
||||
<div class="accordion-body">
|
||||
<div class="question-text">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">Question 1</span>
|
||||
<textarea type="text" class="form-control" id="q0-text" aria-describedby="q0-text-caption">Placeholder for Question 1</textarea>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">Question Type</span>
|
||||
<select id="q0-type" class="form-select">
|
||||
<option value ="Multiple Choice">Multiple Choice</option>
|
||||
<option value="Yes/No">Yes/No</option>
|
||||
<option value="List">Ordered List</option>
|
||||
</select>
|
||||
</div>
|
||||
<label for="q0-options" class="form-label">Options</label>
|
||||
<ul class="options" id="q0-options">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="q0-options-0-caption">0</span>
|
||||
<input type="text" class="form-control" value="Text for Option 1" id="q0-options-0" aria-describedby="q0-options-0-caption">
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="q0-options-1-caption">1</span>
|
||||
<input type="text" class="form-control" value="Text for Option 2" id="q0-options-1" aria-describedby="q-options-1-caption">
|
||||
</div>
|
||||
</ul>
|
||||
<div class="editor-controls">
|
||||
<a href="" class="btn btn-danger" data-action="Cancel">Cancel</a>
|
||||
<a href="" class="btn btn-success" data-action="Done">Done</a>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="q0-correct-caption">Correct</span>
|
||||
<input type="text" class="form-control" value="0" id="q0-correct" aria-describedby="q0-correct-caption">
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="q0-tags-caption">Tags</span>
|
||||
<textarea type="text" class="form-control" value="Foo" id="q0-tags" aria-describedby="q0-tags-caption">List of tags
List of tags</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item" id="i1">
|
||||
<h2 class="accordion-header" id="h1">
|
||||
<div class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c1" aria-expanded="true" aria-controls="c1">
|
||||
<div class="float-start">Block 1</div>
|
||||
<a href="javascript:void(0)" class="btn btn-success panel-control" data-id="0" data-action="remove">X</a>
|
||||
</div>
|
||||
</h2>
|
||||
<div id="c1" class="accordion-collapse collapse" aria-labelledby="h1" data-bs-parent="#editor-root">
|
||||
<div class="accordion-body">
|
||||
<div class="accordion" id="b1">
|
||||
<div class="accordion-item" id="b1-item">
|
||||
<h2 class="accordion-header" id="h2">
|
||||
<div class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c2" aria-expanded="true" aria-controls="c2">
|
||||
<div class="float-start">Question 1</div>
|
||||
<a href="javascript:void(0)" class="btn btn-success panel-control" data-id="0" data-action="remove">X</a>
|
||||
</div>
|
||||
</h2>
|
||||
<div id="c2" class="accordion-collapse collapse" aria-labelledby="h2" data-bs-parent="#b1">
|
||||
<div class="accordion-body">
|
||||
<div class="question-text">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">Question 1</span>
|
||||
<textarea type="text" class="form-control" id="q0-text" aria-describedby="q0-text-caption">Placeholder for Question 1</textarea>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">Question Type</span>
|
||||
<select id="q0-type" class="form-select">
|
||||
<option value ="Multiple Choice">Multiple Choice</option>
|
||||
<option value="Yes/No">Yes/No</option>
|
||||
<option value="List">Ordered List</option>
|
||||
</select>
|
||||
</div>
|
||||
<label for="q1-options" class="form-label">Options</label>
|
||||
<ul class="options" id="q1-options">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="q0-options-0-caption">0</span>
|
||||
<input type="text" class="form-control" value="Text for Option 1" id="q0-options-0" aria-describedby="q0-options-0-caption">
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="q0-options-1-caption">1</span>
|
||||
<input type="text" class="form-control" value="Text for Option 2" id="q0-options-1" aria-describedby="q-options-1-caption">
|
||||
</div>
|
||||
</ul>
|
||||
<div class="editor-controls">
|
||||
<a href="" class="btn btn-danger" data-action="Cancel">Cancel</a>
|
||||
<a href="" class="btn btn-success" data-action="Done">Done</a>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="q0-correct-caption">Correct</span>
|
||||
<input type="text" class="form-control" value="0" id="q0-correct" aria-describedby="q0-correct-caption">
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="q0-tags-caption">Tags</span>
|
||||
<textarea type="text" class="form-control" value="Foo" id="q0-tags" aria-describedby="q0-tags-caption">List of tags
List of tags</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "editor/components/client-alerts.html" %}
|
||||
<div class="editor-controls">
|
||||
<a href="" class="btn btn-danger" data-action="Cancel">Cancel</a>
|
||||
<a href="" class="btn btn-success" data-action="Done">Done</a>
|
||||
<a href="javascript:void(0);" class="btn btn-primary" data-action="add-block" title="Add Block" aria-title="Add Block">
|
||||
<i class="bi bi-folder-plus"></i>
|
||||
Add Block
|
||||
</a>
|
||||
<a href="javascript:void(0);" class="btn btn-primary" data-action="add-question" title="Add Question" aria-title="Add Question">
|
||||
<i class="bi bi-file-plus-fill"></i>
|
||||
Add Question
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="editor-controls">
|
||||
<a href="javascript:void(0);" class="btn btn-danger" data-action="cancel">Cancel</a>
|
||||
<a href="javascript:void(0);" class="btn btn-success" data-action="done">Done</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user