ska-referee-test/ref-test/app/editor/static/js/editor.js

// Variable Declarations
const $root = $('#editor-root')
const target = $root.data('target')
const id = $root.data('id')

const $control_panel = $('.control-panel')
const $info_panel = $('.info-panel')
const $viewer_panel = $('.viewer-panel')
const $editor_panel = $('.editor-panel')

var toggle_info = false
var toggle_viewer = false

var element_index = 0

// Initialise Sortable and trigger renumbering on end of drag
Sortable.create($root.get(0), {handle: '.move-handle', onEnd: function(evt) {renumber_blocks()}})

// Info and Viewer Button Listener
$control_panel.find('button').click(function(event){
    var action = $(this).data('action');

    if (action == 'info') {
        if ($info_panel.is(":hidden")) {
            if ($viewer_panel.is(":visible")) {
                toggle_viewer = true
                $viewer_panel.hide()
            }
            $editor_panel.hide()
            $info_panel.fadeIn()
            $(window).scrollTop(0)
            toggle_info = false
            $(this).addClass('active')
        } else {
            $info_panel.hide()
            if (toggle_viewer) {
                render_viewer()
                $(window).scrollTop(0)
                toggle_viewer = false
            } else {
                $editor_panel.fadeIn()
                $(window).scrollTop(0)
            }
            $(this).removeClass('active')
        }
    } else if (action == 'view') {
        if ($viewer_panel.is(":hidden")) {
            if ($info_panel.is(':visible')) {
                toggle_info = true
                $info_panel.hide()
            }
            $editor_panel.hide()
            render_viewer()
            $(window).scrollTop(0)
            toggle_viewer = false
            $(this).addClass('active')
        } else {
            $viewer_panel.hide()
            if (toggle_info) {
                $info_panel.fadeIn()
                $(window).scrollTop(0)
                toggle_info = false
            } else {
                $editor_panel.fadeIn()
                $(window).scrollTop(0)
            }
            $(this).removeClass('active')
        }
    }
    
    event.preventDefault()
})

// Control Button Listeners
$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')}`)
        $(question).appendTo(root_accordion).hide().fadeIn()
        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()
    }
})

$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.fadeOut(function(){
            $(this).remove()
            renumber_blocks()
            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).hide().fadeIn()
        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).hide().fadeIn()
        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')
    }
    renumber_blocks()
})

$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().fadeOut(function(){
                $(this).remove()
                length = options.children().length
                if (length <= 2) {
                    options.siblings('div.option-controls').children('a[data-action="delete"]').addClass('disabled')
                } else {
                    options.siblings('div.option-controls').children('a[data-action="delete"]').removeClass('disabled')
                }
            })
            correct.children().last().fadeOut(function(){
                $(this).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>
        `
        $(opt).appendTo(options).hide().fadeIn()
        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')}`)
        $(obj).appendTo($root).hide().fadeIn()
    } else if (action == 'add-block') {
        var obj = generate_block(root_container_id=`#${root_accordion.attr('id')}`)
        $(obj).appendTo($root).hide().fadeIn()
        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 == 'discard') {
        window.location.href = '/admin/settings/questions/'
    } else if (action == 'delete') {
        $.ajax({
            url: '/admin/settings/questions/delete/',
            type: 'POST',
            data: JSON.stringify({
                'id': id,
                'action': action
            }),
            contentType: 'application/json',
            success: function(response) {
                window.location.href = '/admin/settings/questions/'
            },
            error: function(response) {
                error_response(response)
            }
        })
    } else if (action == 'save') {
        var input = parse_input()
        var def = $('.dataset-default').is(':checked')
        var name = $('.dataset-name').val()
        var creator = $('.dataset-creator').val()
        console.log([def, name, creator])
        $.ajax({
            url: target,
            type: 'POST',
            data: JSON.stringify({
                'id': id,
                'action': 'upload',
                'data': input,
                'default': def,
                'name': name,
                'creator': creator
            }),
            contentType: 'application/json',
            success: function(response) {
                window.location.href = '/admin/settings/questions/'
            },
            error: function(response) {
                error_response(response)
            }
        })
    }
    renumber_blocks()
})

// Question Type Select Menu Listener
$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>
        `
        $(opt).appendTo(options).hide().fadeIn()
        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')
        }
    }
})

// Data and Rendering Functions
function renumber_blocks () {
    $( ".block-number" ).each(function(index) {
        $( this ).text($( this ).closest('.accordion-item').index() + 1)
    })
}

function parse_input() {
    var data = []
    var element = {}
    var question = {}
    var block_container
    var q_no = 0
    $root.children().each(function(index) {
        element = {}
        if ($(this).data('type') == 'block') {
            element['type'] = 'block'
            element['question_header'] = $(this).find('.block-header-text').val()
            element['questions'] = []
            block_container = $(this).children().find('.accordion')
            block_container.children().each(function(index) {
                question = {}
                question['q_no'] = q_no
                question['text'] = $(this).find('.question-text').val()
                question['q_type'] = $(this).find('.question-type').val()
                question['correct'] = parseInt($(this).find('.question-correct').val())
                question['options'] = []
                $(this).find('.options').find('input').each(function(index) {
                    question['options'].push($(this).val())
                })
                question['tags'] = $(this).find('.question-tags').val().split('\r\n')
                element['questions'].push(question)
                q_no ++
            })
        } else if ( $(this).data('type') == 'question') {
            element['type'] = 'question'
            element['q_no'] = q_no
            element['text'] = $(this).find('.question-text').val()
            element['q_type'] = $(this).find('.question-type').val()
            element['correct'] = parseInt($(this).find('.question-correct').val())
            element['options'] = []
            $(this).find('.options').find('input').each(function(index) {
                element['options'].push($(this).val())
            })
            element['tags'] = $(this).find('.question-tags').val().split('\r\n')
            q_no ++
        }
        data.push(element)
    })
    return data
}

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()
}

// Content Generator Functions
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}" data-type="question">
            <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-trash-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">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>
                    <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>
    `
    element_index ++
    return question
}

function generate_block(root_container_id) {
    var block = `
        <div class="accordion-item" id="element${element_index}" data-type="block">
            <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-trash-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
}

// Fetch data once page finishes loading
$(window).on('load', function() {
    $.ajax({
        url: target,
        type: 'POST',
        data: JSON.stringify({
            'id': id,
            'action': 'fetch'
        }),
        contentType: 'application/json',
        success: function(response) {
            parse_data(response['data'])
        },
        error: function(response) {
            console.log(response)
        }
    })
})

// Viewer Render Function
function render_viewer() {
    $viewer_panel.fadeIn()
    $viewer_panel.empty()
    var heading = document.createElement('h3')
    heading.innerText = 'View Questions'
    $viewer_panel.append(heading)
    var data = parse_input()
    var block
    var obj
    for (let i = 0; i < data.length; i++) {
        block = data[i]
        obj = document.createElement('div')
        obj.classList = 'block'
        if (block['type'] == 'question') {
            text = document.createElement('p')
            text.innerHTML = `<strong>Question ${block['q_no'] + 1}.</strong> ${block['text']}`
            obj.append(text)
            question_body = document.createElement('div')
            question_body.className ='question-body'
            type = document.createElement('p')
            type.innerHTML = `<strong>Question Type:</strong> ${block['q_type']}`
            question_body.append(type)
            options = document.createElement('p')
            options.innerHTML = '<strong>Options:</strong>'
            option_list = document.createElement('ul')
            for (let _i = 0; _i < block['options'].length; _i++) {
                option = document.createElement('li')
                option.innerHTML = block['options'][_i]
                if (block['correct'] == _i) {
                    option.innerHTML += ' <span class="badge rounded-pill bg-success">Correct</span>'
                }
                option_list.append(option)
            }
            options.append(option_list)
            question_body.append(options)
            tags = document.createElement('p')
            tags.innerHTML = `<strong>Tags:</strong>`
            tag_list = document.createElement('ul')
            for (let _i = 0; _i < block['tags'].length; _i++) {
                tag = document.createElement('li')
                tag.innerHTML = block['tags'][_i]
                tag_list.append(tag)
            }
            tags.append(tag_list)
            question_body.append(tags)
            obj.append(question_body)
        } else if (block['type'] == 'block') {
            meta = document.createElement('p')
            meta.innerHTML = `<strong>Block ${i+1}.</strong> ${block['questions'].length} questions.`
            obj.append(meta)
            header = document.createElement('blockquote')
            header.innerText = block['question_header']
            obj.append(header)
            var block_question = document.createElement('div')
            var question
            block_question.className = 'question-block'
            for (let _i = 0; _i < block['questions'].length; _i++) {
                question = block['questions'][_i]
                text = document.createElement('p')
                text.innerHTML = `<strong>Question ${question['q_no'] + 1}.</strong> ${question['text']}`
                block_question.append(text)
                question_body = document.createElement('div')
                question_body.className ='question-body'
                type = document.createElement('p')
                type.innerHTML = `<strong>Question Type:</strong> ${question['q_type']}`
                question_body.append(type)
                options = document.createElement('p')
                options.innerHTML = '<strong>Options:</strong>'
                option_list = document.createElement('ul')
                for (let __i = 0; __i < question['options'].length; __i++) {
                    option = document.createElement('li')
                    option.innerHTML = question['options'][__i]
                    if (question['correct'] == __i) {
                        option.innerHTML += ' <span class="badge rounded-pill bg-success">Correct</span>'
                    }
                    option_list.append(option)
                }
                options.append(option_list)
                question_body.append(options)
                tags = document.createElement('p')
                tags.innerHTML = `<strong>Tags:</strong>`
                tag_list = document.createElement('ul')
                for (let __i = 0; __i < question['tags'].length; __i++) {
                    tag = document.createElement('li')
                    tag.innerHTML = question['tags'][__i]
                    tag_list.append(tag)
                }
                tags.append(tag_list)
                question_body.append(tags)
                block_question.append(question_body)
                obj.append(block_question)
            }
        }
        $viewer_panel.append(obj)
    }
}