var survey = [
    {
        "id": "01",
        "description": "",
        "sectionTitle": "Instructions",
        "sectionContent": "In the following 10-15 minutes you will work together with a partner to launch a new product. Before and after the simulation, we ask you to answer a few questions about yourself. You will be paid a participation fee of 50 dollar cents and can earn an additional bonus of up to $1.50 depending on your performance in the task. The task performance will be measured by the number of points you collect over the course of 10 periods. The more points you collect throughout the task, the higher your bonus payment.",
        "sectionForm": "",
        "sectionSubmit": "",
        "next": ("02" + myid.toString())
    },
    {
        "id": "021",
        "description": "Row player instructions",
        "sectionTitle": "Instructions (Row Player)",
        "sectionContent": "In a group of two players, you will work through a simulation of launching a new product. Products are arranged on a board and consist of two features -  a row feature and a column feature. You will choose the row feature while your teammate will choose the column feature. The joint row and column choice will determine the number of points each product yields.  Before choosing a column, you may chat with your teammate to agree on a product. In each period you are free to agree on a previously chosen or an entirely different product. When you are ready to choose, select the row from the drop-down menu and press “Lock in choice”. You and your partner will then see the number of points you received and move on to the next round. You will make 10 choices in the simulation.",
        "sectionForm": "",
        "sectionSubmit": "",
        "next": "03" + Math.floor(Math.random() * (2) + 1).toString()
    },
    {
        "id": "022",
        "description": "Column player instructions",
        "sectionTitle": "Instructions (Row Player)",
        "sectionContent": "In a group of two players, you will work through a simulation of launching a new product. Products are arranged on a board and consist of two features -  a row feature and a column feature. You will choose the row feature while your teammate will choose the column feature. The joint row and column choice will determine the number of points each product yields.  Before choosing a column, you may chat with your teammate to agree on a product. In each period you are free to agree on a previously chosen or an entirely different product. When you are ready to choose, select the row from the drop-down menu and press “Lock in choice”. You and your partner will then see the number of points you received and move on to the next round. You will make 10 choices in the simulation.",
        "sectionForm": "",
        "sectionSubmit": "",
        "next": "03" + Math.floor(Math.random() * (2) + 1).toString()
    },
    {
        "id": "031",
        "description": "Low aspiration manipulation",
        "value": "Low Aspiration",
        "sectionContent": `Your predecessor found a product worth ${this.value}`,
        "sectionForm": "",
        "sectionSubmit": "",
        "next": "04"
    },
    {
        "id": "032",
        "description": "High aspiration manipulation",
        "sectionTitle": "Instructions",
        "value": "High Aspiration",
        "sectionContent": `Your predecessor found a product worth ${this.value}`,
        "sectionForm": "",
        "sectionSubmit": "",
        "next": "04"
    },
    {
        "id": "04",
        "description": "Comprehension questions",
        "sectionTitle": "Comprehension questions",
        "sectionContent": "This section outlines a few minor tests in order to check your comprehension of the outlined instructions",
        "sectionForm": `
                <span class="question-span">
                <label for="q1">Do you need to agree on one product before logging your column choice?</label>
                <select name="q1" id="q1">
                    <option value="yes">Yes</option>
                    <option value="no">No</option>
                </select>
            </span>
            <br>

            <span class="question-span">
                <label for="q2">What determines my overall bonus payment?</label>
                <select name="q2" id="q2">
                    <option value="the number of points collected throughout the task">the number of points collected throughout the task</option>
                    <option value="the number of points collected in my most successful period">the number of points collected in my most successful period</option>
                    <option value="the time spent on the task">the time spent on the task</option>
                </select>
            </span>
            <br>
            
            <span class="question-span">
                <label for="q3">need a manipulation check once we settle on how to implement</label>
                <select name="q3" id="q3">
                    <option value="yes">Yes</option>
                    <option value="no">No</option>
                </select>
            </span>
        `,
        "sectionSubmit": "",
        "next": "05"
    },
    {
        "id": "05",
        "description": "Please wait",
        "sectionTitle": "Please wait",
        "sectionContent": "Please wait. You will now be transferred to the game platform",
        "sectionForm": ``,
        "sectionSubmit": "",
        "next": "00"
    },
];


function initialize() {
    gameboardSetup();

    $("#section-submit").click(function () {
        docId = document.getElementById("id").innerHTML
        if (docId == "04") return finalSurvey();
        if (docId == "031" || docId == "032") { aspiration()};
        surveyItem = survey.find((o) => o.id == document.getElementById("next").innerHTML)

        document.getElementById("id").innerHTML = surveyItem["id"];
        document.getElementById("description").innerHTML = surveyItem["description"];
        document.getElementById("section-title").innerHTML = surveyItem["sectionTitle"];
        document.getElementById("section-content").innerHTML = surveyItem["sectionContent"];
        document.getElementById("section-form").innerHTML = surveyItem["sectionForm"];
        document.getElementById("next").innerHTML = surveyItem["next"];

    })
}

function gameboardSetup() {
    // test
    document.getElementById("id").innerHTML = survey[0]["id"];
    document.getElementById("description").innerHTML = survey[0]["description"];
    document.getElementById("section-title").innerHTML = survey[0]["sectionTitle"];
    document.getElementById("section-content").innerHTML = survey[0]["sectionContent"];
    document.getElementById("section-form").innerHTML = survey[0]["sectionForm"];
    document.getElementById("next").innerHTML = survey[0]["next"];
}

function aspiration() {
    console.log("aspiration")
    submit(document.getElementById("description").innerHTML)
}

function finalSurvey() {
    console.log("final")

    let questions = {
        "Do you need to agree on one product before logging your column choice?": document.getElementById("q1").value,
        "What determines my overall bonus payment?": document.getElementById("q2").value,
        "need a manipulation check once we settle on how to implement": document.getElementById("q3").value
    }
    submit(questions);

    surveyItem = survey.find((o) => o.id == document.getElementById("next").innerHTML)

    document.getElementById("id").innerHTML = surveyItem["id"];
    document.getElementById("description").innerHTML = surveyItem["description"];
    document.getElementById("section-title").innerHTML = surveyItem["sectionTitle"];
    document.getElementById("section-content").innerHTML = surveyItem["sectionContent"];
    document.getElementById("section-form").innerHTML = surveyItem["sectionForm"];
    document.getElementById("next").innerHTML = surveyItem["next"];
    document.getElementById("section-submit").setAttribute('style', 'display: none');
}