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

// Variable Declarations
const $control_panel = $('.control-panel')
const $info_panel = $('.info-panel')
const $viewer_panel = $('.viewer-panel')

var element_index = 0

// Info Button Listener
$control_panel.find('button').click(function(event){
    if ($info_panel.is(":hidden")) {
        $viewer_panel.hide()
        $info_panel.fadeIn()
        $(this).addClass('active')
    } else {
        $info_panel.hide()
        $viewer_panel.fadeIn()
        $(this).removeClass('active')
    }
    event.preventDefault()
})

function parse_data(data) {
    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)
    }
}

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