From ed53b771ef3b8ae4bc848c966aa8e5d7f89d7b14 Mon Sep 17 00:00:00 2001 From: Vivek Santayana Date: Tue, 21 Jun 2022 02:44:23 +0100 Subject: [PATCH] Finished designing the editor console --- ref-test/app/editor/static/css/editor.css | 41 +- ref-test/app/editor/static/js/editor.js | 409 +++++++++++++++--- .../templates/editor/components/base.html | 1 + .../app/editor/templates/editor/index.html | 127 +----- 4 files changed, 396 insertions(+), 182 deletions(-) diff --git a/ref-test/app/editor/static/css/editor.css b/ref-test/app/editor/static/css/editor.css index eee5d22..77588ad 100644 --- a/ref-test/app/editor/static/css/editor.css +++ b/ref-test/app/editor/static/css/editor.css @@ -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 { @@ -43,4 +57,13 @@ .accordion-error:not(.collapsed) { background-color: #bb2d3b; color: white; +} + +.panel-button { + padding: 6px; + margin: 0px 2px; +} + +.panel-button i { + font-size: larger; } \ No newline at end of file diff --git a/ref-test/app/editor/static/js/editor.js b/ref-test/app/editor/static/js/editor.js index ef21641..948aad6 100644 --- a/ref-test/app/editor/static/js/editor.js +++ b/ref-test/app/editor/static/js/editor.js @@ -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 = ` -
-

- -

-
-
-
- ${data[i]['text']} +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 = ` +
+ 0 + +
+
+ 1 + +
+ ` + options.append(opt) + option_controls.children('a').addClass('disabled') + var cor = ` + + + ` + 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 = ` +
+ ${length} + +
+ ` + options.append(opt) + var cor = `` + 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 = ` +
+ ${__c} + +
+ ` + options.append(opt) + correct.append(``) + } + } + 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 = ` +
+ ${_c} +
-
    -
  • - ${data[i]['options'].join("
  • ")} -
    • -
+ ` + options.append(opt) + correct.append(``) + } + } + 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 = ` + + + + ` + } else { + var block_button = '' + } + var question = ` +
+

+ +

+
+
+
+ Question + +
+
+ Question Type + +
+ +
    +
    + 0 + +
    +
    + 1 + +
    +
+
+ + + Delete + + + + Add + +
+
+ Correct + +
+
+ Tags +
- ` - 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() -}) \ No newline at end of file +function generate_block(root_container_id) { + var block = ` +
+

+ +

+
+
+
+ Block Header + +
+
+
+
+ + + Add Question + +
+
+
+
+ ` + element_index ++ + return block +} + +var myArray = [ + "Apples", + "Bananas", + "Pears" + ]; + +function renumber_blocks () { + $( ".block-number" ).each(function(index) { + $( this ).text($( this ).closest('.accordion-item').index()) + }) +} \ No newline at end of file diff --git a/ref-test/app/editor/templates/editor/components/base.html b/ref-test/app/editor/templates/editor/components/base.html index a4f4498..c8fdb06 100644 --- a/ref-test/app/editor/templates/editor/components/base.html +++ b/ref-test/app/editor/templates/editor/components/base.html @@ -48,6 +48,7 @@ +