// Get the data from the server
    let responses = {}
    let questionDiv = document.getElementById('question');
    let optionDiv = document.getElementById('options');
    let scoresTable = document.getElementById('scores');
    let optionDivImages = document.getElementById('images');

    function makeButton(trail, item) {
        let text = trail[item];
        return `<input type="radio" id="${item}" value="${item}" name="radioselect" />
        <label for="${item}">${text}</label><br>`
    }

    function makeButtonSpa(trail, item) {
        let text = trail[item];
        return `<input type="radio" id="${item}" value="${item}" name="radioselect" />
        <label for="${item}">${text}</label>`
    }

    document.addEventListener("DOMContentLoaded", function (event) {
        $('.otree-timer__time-left').on('finish.countdown', function (event) {
            document.getElementById('raw_responses').value = JSON.stringify(responses);
        });
        liveSend({'type': 'load'});
    });

    function updateUIS(current) {
        let key = current['key'];
        if (key == '5') {
            let items = ['optionA', 'optionB', 'optionC', 'optionD', 'optionE']
            let options = items.map(e => makeButtonSpa(current, e)).join('');
            options += `<br><button type="button" id="next" class="opt-button click" onclick="recordResponse(this)">Next</button>`;
            optionDivImages.innerHTML = options;
            let image_name = current['graphic_name'];
            questionDiv.innerHTML = `<img src="${image_name}" width="600" height="480">`;
        } else if (key == '4') {
            let items = ['optionA', 'optionB', 'optionC', 'optionD']
            let options = items.map(e => makeButtonSpa(current, e)).join('');
            options += `<br><button type="button" id="next" class="opt-button click" onclick="recordResponse(this)">Next</button>`;
            optionDivImages.innerHTML = options;
            let image_name = current['graphic_name'];
            questionDiv.innerHTML = `<img src="${image_name}" width="600" height="480">`;
        } else if (key == 'int8') {
            let items = ['option1', 'option2', 'option3', 'option4', 'option5', 'option6', 'option7', 'option8']
            let options = items.map(e => makeButtonSpa(current, e)).join('');
            options += `<br><button type="button" id="next" class="opt-button click" onclick="recordResponse(this)">Next</button>`;
            optionDivImages.innerHTML = options;
            let image_name = current['graphic_name'];
            questionDiv.innerHTML = `<img src="${image_name}" width="600" height="480">`;
        } else if (key == 'int6') {
            let items = ['option1', 'option2', 'option3', 'option4', 'option5', 'option6']
            let options = items.map(e => makeButtonSpa(current, e)).join('');
            options += `<br><button type="button" id="next" class="opt-button click" onclick="recordResponse(this)">Next</button>`;
            optionDivImages.innerHTML = options;
            let image_name = current['graphic_name'];
            questionDiv.innerHTML = `<img src="${image_name}" width="600" height="480">`;
        } else if (key == 'int4') {
            let items = ['option1', 'option2', 'option3', 'option4']
            let options = items.map(e => makeButtonSpa(current, e)).join('');
            options += `<br><button type="button" id="next" class="opt-button click" onclick="recordResponse(this)">Next</button>`;
            optionDivImages.innerHTML = options;
            let image_name = current['graphic_name'];
            questionDiv.innerHTML = `<img src="${image_name}" width="650" height="480">`;
        } else if (key == 'int5') {
            let items = ['option1', 'option2', 'option3', 'option4', 'option5']
            let options = items.map(e => makeButtonSpa(current, e)).join('');
            options += `<br><button type="button" id="next" class="opt-button click" onclick="recordResponse(this)">Next</button>`;
            optionDivImages.innerHTML = options;
            let image_name = current['graphic_name'];
            questionDiv.innerHTML = `<img src="${image_name}" width="650" height="480">`;

        }
    }


    function updateUINA(current) {
        let items = ['optionA', 'optionB', 'optionC', 'optionD', 'optionE']
        let options = items.map(e => makeButton(current, e)).join('');
        options += `<button type="button" id="next" class="opt-button click" onclick="recordResponse(this)">Next</button>`;
        optionDiv.innerHTML = options;
        let q = current['question']
        questionDiv.innerHTML = `<p id="question">${q}</p>`
    }

    // document.getElementById("next").onclick = function () {
    //         var radioButtonGroup = document.getElementsByName("radioselect");
    //         var checkedRadio = Array.from(radioButtonGroup).find(
    //            (radio) => radio.checked
    //         );
    //         let response = checkedRadio.value;
    //         liveSend({'type': 'response', 'response': response})
    // };

        function recordResponse(btn) {
            var radioButtonGroup = document.getElementsByName("radioselect");
            var checkedRadio = Array.from(radioButtonGroup).find(
               (radio) => radio.checked
            );
            let response = checkedRadio.value;
            liveSend({'type': 'response', 'response': response});
    }


    function liveRecv(data) {
       console.log(data);
       if (data.finished) {
            document.getElementById('form').submit();
        }
       if (data.error) {
            window.alert(data.msg);
            return;
       }
       let current = data.current_q;
       let task = data.task;
       let score = data.score;
       let min_score = data.min_score;
       if (task === 'Spatial') {
            updateUIS(current);
       } else {
            updateUINA(current);
       }

       let scores_table // if leader return both min and current scores, else just score (worker)

        scores_table = `<table class="table">
            <tr>
                <th><strong>Score in ${task}:<strong></th>
            </tr>
            <tr>
                <td>${score}</td>
            </tr>
            </table>`

        scoresTable.innerHTML = scores_table;
    }