//connect google sheets through Stein Api
const store = new SteinStore(
    "https://api.steinhq.com/v1/storages/62a26240bca21f053e9c3cc7"
);

//store quiz data in variables
var questions = loadQuizData();
var [plays, questionsToPlays] = loadPlays();
var industry = loadIndustryData();

//grab sections of the page from HTML
var quizContainer = document.getElementById('quiz');
var resultsContainer = document.getElementById('results');

//initialize global variables
var page = 0;
var totalPages = questions.length + 2;
var storedAnswers = new Array(totalPages).fill(0);
var scores = [];
var overallScore = 0;
var numScores = 0;
var titles = [];
var demographic = {};
var email = "";
var showPlays = new Array(questionsToPlays.length).fill(0);
var reflections = new Array(questions.length).fill("");

// show start screen
showIntro();

//Set up and show the introduction to the survey
function showIntro() {
    document.getElementById("buttons").innerHTML = `<button class="button w-button" onclick="submitBtn()">Start the Survey</button>`;
    document.getElementById("buttons").style.justifyContent = "center";
    document.getElementById("progress").style.width = 0 + '%';
    quizContainer.innerHTML =
        `<div class="introTitle">This survey will take ~10 minutes to complete.</div>
    <div class="text-size-regular">This tool is meant for DEI and HR leaders who are working to advance belonging in their organization.</div>
    <h5 class="heading-5 text-color-navy padding-top padding-small">Instruction</h5>
    <ul class="text-size-regular">
        <li>Reflect on and answer the questions below by selecting your response. This is a tool not meant to be shared with others and is for your own personal leadership growth, so answer honestly!
            <ul>
            <li>Note: Many questions in this diagnostic tool can be interpreted subjectively. This is meant to serve as a personal reflection tool as opposed to a concrete, comparable scoring tool. To help you answer the questions and check any biases, we also suggest you try to write down an example of how you have delivered on what the question is asking about. There will be a place for this on each page of the survey. This is for personal use only, can provide clarity, and will not be shared with anyone else. At least do this for questions you are uncertain about. 
            </li></ul>
        </li>
        <li>Write some actions you will work on related to the questions you circled. Use the playbook for more ideas / plays to put into action relevant around what you circled. 
        </li>
        <li>Re-take this diagnostic periodically (we suggest every six months) to hold yourself accountable, as a check in on your progress, and to inform how you can continue to grow as an Equity Fluent Leader. 
        </li>
        <li>Find the PDF version of the tool <a href="https://haas.berkeley.edu/wp-content/uploads/BelongingRapidDiagnostic_ForHR_DEILeads.pdf" target="_blank" rel="noopener noreferrer" class="text-link text-size-regular">here</a>
        </li>
    </ul>`
}

//Set up and show the demographic questions
function showDemoQuestions() {
    var output = [];
    document.getElementById("progress").style.width = page / totalPages * 100 + '%';
    document.getElementById('title').innerHTML = "Demographic Questions";

    var industryOptions = [];
    for (var i = 0; i < industry.length; i++) {
        if (storedAnswers[page][0] == industry[i]["text"]) {
            industryOptions.push(
                `<option value=${industry[i]['value']} selected>
                ${industry[i]['text']}
                </option>`);
        } else {
            industryOptions.push(
                `<option value=${industry[i]['value']}>
                ${industry[i]['text']}
                </option>`);
        }
    };
    if (storedAnswers[page] == 0) {
        output.push(
            `<div class="req_question_content">
            <label class="question">
                What's the industry that most accurately describes your organization?
                <span class="required">*</span>
                <br>
                <select class="answers custom-select" id="industry">
                    <option value="" disabled selected>Select...</option>
                    ${industryOptions.join('')}
                </select>
            </label>
            <div class="error_message"></div>
            </div>`
        );
    } else {
        output.push(
            `<div class="req_question_content">
            <label class="question">
                Select your industry:
                <span class="required">*</span>
                <br>
                <select class="answers weight-normal text-color-grey custom-select" id="industry">
                    <option value="" disabled>Select...</option>
                    ${industryOptions.join('')}
                </select>
            </label>
            <div class="error_message"></div>
            </div>`
        );
    }
    var regions = loadGeographyData();
    var geographyOptions = [];
    for (var i = 0; i < regions.length; i++) {
        if (storedAnswers[page][1] == regions[i]["text"]) {
            geographyOptions.push(
                '<option value=' + regions[i]['value'] + 'selected>'
                + regions[i]['text'] + '</option>');
        } else {
            geographyOptions.push(
                '<option value=' + regions[i]['value'] + '>'
                + regions[i]['text'] + '</option>');
        }
    }
    if (storedAnswers[page] == 0) {
        output.push(
            `<div class="req_question_content">
            <label class="question">
                Select your region:
                <span class="required">*</span>
                <br>
                <select class="answers" class="custom-select" id="geography"/>
                    <option value="" disabled selected>Select...</option>
                    ${geographyOptions.join('')}
                </select>
            </label>
            <div class="error_message"></div>
            </div>`
        );
    } else {
        output.push(
            `<div class="req_question_content">
            <label class="question">
                Select your region:
                <span class="required">*</span>
                <br>
                <select class="answers" class="custom-select" id="geography"/>
                    <option value="" disabled>Select...</option>
                    ${geographyOptions.join('')}
                </select>
            </label>
            <div class="error_message"></div>
            </div>`
        );
    }

    quizContainer.innerHTML = output.join('');
}

//Set up and show the survey questions
function showQuestions(questions, quizContainer) {
    var output = [];
    var answers;
    var choices = [];
    document.getElementById("progress").style.width = page / totalPages * 100 + '%';
    document.getElementById('title').innerHTML = questions[page - 2]['title'];
    // for each question...
    for (var i = 0; i < questions[page - 2]["elements"].length; i++) {

        // first reset the list of answers
        answers = [];
        choices = questions[page - 2]["elements"][i]["choices"];
        // for each available answer...
        for (option in choices) {
            if ((storedAnswers[page] != 0) && (storedAnswers[page][i] == choices[option])) {
                // ...add an html radio button
                answers.push(
                    `<div class="answer_choice">
                        <div class="container">
                            <label class="weight-normal">
                            <input type="radio" name="question${i}" value=${choices[option]} checked="checked">
                                ${choices[option]} 
                                <span class="checkmark"></span>
                                </label>
                        </div>
                    </div>`
                );
            } else {
                answers.push(
                    `<div class="answer_choice">
                        <div class="container">
                            <label class="weight-normal">
                            <input type="radio" name="question${i}" value=${choices[option]}>
                                ${choices[option]} 
                                <span class="checkmark"></span>
                                </label>
                        </div>
                    </div>`
                );
            }
        }

        // add this question and its answers to the output
        output.push(
            `<div class="req_question_content">
            <div class="question"> ${questions[page - 2]["elements"][i]["name"].substring(8)}. ${questions[page - 2]["elements"][i]["title"]}
                <span class="required">*</span>
            </div>
            <div class="answers"> ${answers.join('')} </div>
            <div class="error_message"></div>
            </div>`
        );
    }
    output.push(
        `<div class="question_content">
        <div class="question">(optional) Reflect on the questions above and write down examples of how you have delivered in these areas. 
        This response will not be shared with anyone else and is for your own personal leadership growth, so answer honestly!</div>
        <textarea id="reflection" placeholder="Type your answer here...">${reflections[page - 2]}</textarea> 
        </div>`
    )

    // finally combine our output list into one string of html and put it on the page
    quizContainer.innerHTML = output.join('');
}

//Save the demographic data
function recordDemographic() {
    for (var i = 0; i < industry.length; i++) {
        if (industry[i]["value"] == document.getElementById("industry").value) {
            demographic["industry"] = industry[i]["text"];
        }
    }

    demographic["geography"] = document.getElementById("geography").value;
    storedAnswers[page] = [demographic["industry"], demographic["geography"]];
}

//Calculate the results of each survey page
function calculateResults(questions, quizContainer) {
    var answerContainers = quizContainer.querySelectorAll('.answers');
    reflections[page - 2] = document.getElementById("reflection").value;
    var ans;
    var totalScore = 0;
    var numQuestions = 0;
    var questionNum = 0;
    var NA_answers = 0;
    storedAnswers[page] = [];
    for (var i = 0; i < questions[page - 2]["elements"].length; i++) {
        questionNum = questions[page - 2]["elements"][i]["name"].substring(8) - 1;
        ans = (answerContainers[i].querySelector('input[name=question' + i + ']:checked') || {}).value;
        storedAnswers[page].push(ans);
        if ((ans == "Always") || (ans == "Very") || (ans == "Yes") || (ans == "Yes, required for all") || (ans == "Yes, excellent caretaking benefits for all caretakers")) {
            totalScore += 1;
            overallScore += 1;
            numScores++;
            numQuestions++;
        } else if ((ans == "Usually") || (ans == "Moderately") || (ans == "Yes, required for some") || (ans == "Yes, fine benefits for all caretakers")) {
            totalScore += .66;
            overallScore += .66;
            numScores++;
            numQuestions++;
        } else if ((ans == "Sometimes") || (ans == "Somewhat") || (ans == "Yes, optional") || (ans == "Yes, caretaking benefits are offered but not to all caretakers or not sufficient")) {
            totalScore += .33;
            overallScore += .33;
            numScores++;
            numQuestions++;
            showPlays[questionNum] = questionsToPlays[questionNum];
        } else if ((ans == "Never") || (ans == "Not at all") || (ans == "No")) {
            numScores++;
            numQuestions++;
            showPlays[questionNum] = questionsToPlays[questionNum];
        } else (
            NA_answers++
        )
    }
    if (NA_answers == questions[page - 2]["elements"].length) {
        return ("N/A")
    } else {
        return totalScore / numQuestions;
    }
}

//Check if all required questions have been answered
function checkRequired(questions, quizContainer) {
    var answerContainers = quizContainer.querySelectorAll('.answers');
    var complete = true;
    var incomplete = [];
    if (page == 1) {
        if (!document.getElementById("industry").value) {
            complete = false;
            incomplete.push(0);
        }
        if (!document.getElementById("geography").value) {
            complete = false;
            incomplete.push(1);
        }
    } else {
        for (var i = 0; i < questions[page - 2]["elements"].length; i++) {
            if (answerContainers[i].querySelector('input[name=question' + i + ']:checked') == null) {
                complete = false;
                incomplete.push(i);
            }
        }
    }
    return [complete, incomplete];
}

//Show the email question
function showEmail() {
    document.getElementById("progress").style.width = page / totalPages * 100 + '%';
    document.getElementById('title').innerHTML = "Email";

    quizContainer.innerHTML =
        `<div id="mc_embed_signup" class="question_content">
        <form action="https://berkeley.us17.list-manage.com/subscribe/post?u=815e8f375ab4d11f84daf7df1&amp;id=6ce2973557" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
            <div id="mc_embed_signup_scroll">
            <div class="question margin-bottom margin-xsmall">(optional) Enter your email to get a copy of your scorecard and a follow up survey sent to you.</div>
        <div class="mc-field-group" class="answers">
            <input type="email" value="" name="EMAIL" id="email">
        </div>
        <div hidden="true"><input type="hidden" name="tags" value="3912616"></div>
            <div class="error_message" style="display:none" id="email_error"></div>
            <!--<div class="response" id="mce-success-response" style="display:none"></div>-->
            <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_815e8f375ab4d11f84daf7df1_6ce2973557" tabindex="-1" value=""></div>
            <span id="buttons-email">
                <button id="back-email" onclick=backBtn()>Back</button>
                <div class="clear"><input type="submit" value="Submit" name="subscribe" class="button" id="next-email" onclick=submitBtn()></div>
            </span>
            </div>
            </div>
        </form>
        </div>`;

    var validate = document.createElement('script');
    validate.setAttribute('src', 'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/62bc250e93aae11b75f90f08_validate.txt');
    document.head.appendChild(validate);

}

function sendEmail(to, content) {
    Email.send({
        SecureToken: "2328a502-cc18-4c76-a035-7cdd749aaba2",
        To: to,
        From: "egal@berkeley.edu",
        Subject: "Belonging Rapid Diagnostic: Assessment Results",
        Body: content
    }).then(
    );
}

//Show the results of the survey
function showResults(scores, quizContainer, resultsContainer) {
    var categoryScores = [];
    var categoryScoresEmail = [];
    var score = 0;
    var sliderColor = '#739E82';
    var resources = [];
    var notes = "";
    var p = 0;

    document.getElementById("progressBar").style.height = '0px';
    document.getElementById("progressBar").style.visibility = 'hidden';
    overallScore = overallScore / numScores;
    if (!overallScore) {
        overallScore = 0;
    }
    overallScore = (Math.round(overallScore * 100)).toFixed(0);
    quizContainer.style.display = 'none';

    for (var i = 0; i < scores.length; i++) {
        if (scores[i] != "N/A") {
            scores[i] = (Math.round(scores[i] * 100)).toFixed(0);
        }
        score = scores[i];
        if (score <= 33) {
            sliderColor = '#D15F27';
        } else if (score <= 66) {
            sliderColor = '#FDB714';
        } else {
            sliderColor = '#739E82';
        }

        for (var j = 0; j < questions[i]["elements"].length; j++) {
            p = showPlays[questions[i]["elements"][j]["name"].substring(8) - 1];
            if (p != 0) {
                resources.push('<div>' + plays[p - 1] + '</div><br>');
            }

        }
        resources = [...new Set(resources)];
        if (resources.length == 0) {
            resources = ["<div>Congrats! You did great in this section! Look through the other sections for areas you may need more improvement.</div><br>"];
        }
        if (reflections[i] != "") {
            notes =
                `<div class="plays">Reflection</div>
            <div>${reflections[i]}</div>
            `
        } else {
            notes = "";
        }

        var scoreSliderHTML = ``;
        var scoreSliderEmail = ``;
        if (score != "N/A") {
            scoreSliderHTML = `<div class="scoreSlider" style="background-color:${sliderColor}; width:${score}%;"></div>`;
            scoreSliderEmail = `<div class="scoreSlider" style="background-color:${sliderColor}; width:${score}%; height: 25px; border-radius: 15px;"></div>`;
        }

        categoryScores.push(
            `<div class="scoreElement">
                <h5 class="heading-5 text-color-navy">${titles[i]}</h5> 
                <div class="sliderFlex">
                    <div class="scoreSlider">
                        ${scoreSliderHTML}
                    </div>
                    <div class="categoryScore">${score}%</div>
                </div>
                <div class="plays">Consult these particular strategic plays</div>
                <div>${resources.join('')}</div>
                ${notes}
            </div>`
        );
        categoryScoresEmail.push(
            `<div class="scoreElement">
            <h5 class="heading-6 text-color-navy">${titles[i]}</h5>
            <div class="sliderFlex" style="
                display: flex;
                justify-content: space-between;
                margin-bottom: 15px;">
                <div class="scoreSlider" style="
                    background-color: #D9D9D9;
                    height: 25px;
                    width: 90%;
                    border-radius: 15px;">
                    ${scoreSliderEmail}
                </div>
                <div class="categoryScore" style="font-size: 20px;">${score}%</div>
            </div>
            <div class="plays" style="
                margin-bottom: 10px;
                text-decoration: underline;
            ">Consult these particular strategic plays</div>
            <div>${resources.join('')}</div>
        </div>`
        );
        resources = [];
    }

    document.getElementById('title').innerHTML = 'Congratulations, you have completed the EGAL Belonging Diagnostic for HR & DEI Leads!';
    resultsContainer.innerHTML = `<p class="text-left">Below please find your overall assessment score, as well as scores broken down by each of the five drivers of belonging.</p>
    <br>
    <h5 class="heading-5 text-color-navy">Interpreting results</h5>
    <ul>
        <li>For some or all sections there will be a list of plays that we suggest you work on. To find more information on the play(s) listed, find the particular play(s) on pages 17-29 of our Belonging Playbook found on the Playbook site 
        <a href="https://haas.berkeley.edu/equity/industry/playbooks/" target="_blank" rel="noopener noreferrer" class="text-link">(LINK)</a>.</li>
        <li>You may have driver section scores that are in the green, but still have particular plays to work on.</li>
    </ul>
    <h5 class="heading-5 text-color-navy">Using the results</h5>
    <ul>
        <li>We suggest you print out or save the assessment. Then, after reviewing the playbook to find more information on the plays that need improvement, set up a plan to work on those plays including how you want to hold yourself accountable.</li>
        <li>One accountability trick: Revisit and complete this diagnostic every six months.</li>
    </ul>
    <br>
    <div class="overall-score-row" style="display:flex;align-items:center;gap:8px;">
        <h3 class"heading-3 text-color-navy weight-semibold">Your overall score on the assessment is</h3>
        <div id="overallScore" class="heading-3 text-color-navy text-bold"> ${overallScore}% </div>
    </div>
    <div id="scoreBreakdown">${categoryScores.join('')}</div>
    `

    if (email != "") {
        content =
            `<h3 class="heading-3 text-color-navy">Congratulations, you have completed the EGAL Belonging Diagnostic for HR & DEI Leads!</h3>
            <br>
            <p class="text-size-regular text-left">Below please find your overall assessment score, as well as scores broken down by each of the five drivers of belonging.</p>
            <br>
            <h5 class="heading-5 text-color-navy">Interpreting results</h5>
            <ul style="list-style-type: '- ';">
                <li>For some or all sections there will be a list of plays that we suggest you work on. To find more information on the play(s) listed, find the particular play(s) on pages 17-29 of our Belonging Playbook found on the Playbook site 
                <a href="https://haas.berkeley.edu/equity/industry/playbooks/" target="_blank" rel="noopener noreferrer" class="text-link">(LINK)</a>.</li>
                <li>You may have driver section scores that are in the green, but still have particular plays to work on.</li>
            </ul>
            <h5 class="heading-5 text-color-navy">Using the results</h5>
            <ul style="list-style-type: '- ';">
                <li>We suggest you print out or save the assessment. Then, after reviewing the playbook to find more information on the plays that need improvement, set up a plan to work on those plays including how you want to hold yourself accountable.</li>
                <li>One accountability trick: Revisit and complete this diagnostic every six months.</li>
            </ul>
            <br>

            <div class="overall-score-row">
                <h3 class="heading-3 text-color-navy" style="margin:0;">Your overall score on the assessment is</h3>
                <div id="overallScore" class="overall-score-value" style="font-weight:700;">${overallScore}%</div>
            </div>
            <div id="scoreBreakdown">${categoryScoresEmail.join('')}</div>`;

        sendEmail(email, content)
    }
}

//Store the survey data in google sheet
function storeData() {
    var keys = [
        "Overall Score",
        "Inclusive Work Environments",
        "Connectivity Opportunities",
        "Organizational Values & Principles",
        "Acknowledgement & Accountability Structures",
        "Work-Life Boundaries",
        "Putting Equity Fluent Leadership Into Practice"
    ];

    var timeStamp = Date.now();
    var dateFormat = new Date(timeStamp);
    var dateTime = (dateFormat.getMonth() + 1) +
        "/" + dateFormat.getDate() +
        "/" + dateFormat.getFullYear() +
        " " + dateFormat.getHours() +
        ":" + dateFormat.getMinutes() +
        ":" + dateFormat.getSeconds();

    store.append("HR Respondents", [
        {
            "Time Stamp": dateTime,
            "Overall Score": overallScore,
            "Inclusive Work Environments": scores[0],
            "Connectivity Opportunities": scores[1],
            "Organizational Values & Principles": scores[2],
            "Acknowledgement & Accountability Structures": scores[3],
            "Work-Life Boundaries": scores[4],
            "Putting Equity Fluent Leadership Into Practice": scores[5]
        }
    ]);

    //Read current data values from spreadsheet
    store.read("For HR & DEI Leads", {}).then(data => {
        var sheetData = [overallScore, ...scores];
        var geography = demographic["geography"];
        var ind = demographic["industry"];
        for (var i = 0; i < data.length; i++) {
            if (data[i]["Data"] == geography) {
                var geoIndex = i;
            }
            else if (data[i]["Data"] == ind) {
                var indIndex = i;
            }
        }
        //Calculate new averages
        //Overall
        var sheetDataPost = {};
        var newScore = 0;
        var oldAverage = 0;
        var oldTotal = parseFloat(data[0]["Responses"]);
        var newAverage = 0;
        //Based on Geography
        var geographyAverages = {};
        var oldGeoAverage = 0;
        var oldGeoTotal = parseFloat(data[geoIndex]["Responses"]);
        var newGeoAverage = 0;
        //Based on Industry
        var industryAverages = {};
        var oldIndAverage = 0;
        var oldIndTotal = parseFloat(data[indIndex]["Responses"]);
        var newIndAverage = 0;

        for (var i = 0; i < keys.length; i++) {
            if (sheetData[i] != "N/A") {
                newScore = parseFloat(sheetData[i]);
                oldAverage = parseFloat(data[0][keys[i]]);
                newAverage = (Math.round((newScore + (oldAverage * oldTotal)) / (oldTotal + 1))).toFixed(0);
                sheetDataPost[keys[i]] = newAverage;

                oldGeoAverage = parseFloat(data[geoIndex][keys[i]]);
                newGeoAverage = (Math.round((newScore + (oldGeoAverage * oldGeoTotal)) / (oldGeoTotal + 1))).toFixed(0);
                geographyAverages[keys[i]] = newGeoAverage;

                oldIndAverage = parseFloat(data[indIndex][keys[i]]);
                newIndAverage = (Math.round((newScore + (oldIndAverage * oldIndTotal)) / (oldIndTotal + 1))).toFixed(0);
                industryAverages[keys[i]] = newIndAverage;
            }
        }

        sheetDataPost["Responses"] = oldTotal + 1;
        geographyAverages["Responses"] = oldGeoTotal + 1;
        industryAverages["Responses"] = oldIndTotal + 1;

        sheetDataPost["Data"] = "Average";

        //Update data in spreadsheet 
        store.edit("For HR & DEI Leads", {
            search: { Data: "Average" },
            set: sheetDataPost
        });
        store.edit("For HR & DEI Leads", {
            search: { Data: geography },
            set: geographyAverages
        });
        store.edit("For HR & DEI Leads", {
            search: { Data: ind },
            set: industryAverages
        });
    });
}

//
function submitBtn() {
    if (page == 0) {
        page++;
        document.getElementById("buttons").innerHTML =
            `<button id="back" onclick="backBtn()" class="button-secondary">Back</button>
            <button id="next" onclick="submitBtn()" class="button">Next</button>`
        document.getElementById("buttons").style.justifyContent = "space-between";
        showDemoQuestions();
        document.body.scrollTop = 0; // For Safari
        document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
    } else if ((page - 1) <= questions.length) {
        var [complete, incomplete] = checkRequired(questions, quizContainer);
        var error = document.getElementById("error")
        if (complete) {
            error.textContent = "";
            if (page == 1) {
                recordDemographic();
                page++;
                showQuestions(questions, quizContainer);
            } else if ((page - 1) < questions.length) {
                scores[page - 2] = calculateResults(questions, quizContainer);
                titles[page - 2] = questions[page - 2]["title"];
                page++;
                showQuestions(questions, quizContainer);
            } else {
                scores[page - 2] = calculateResults(questions, quizContainer);
                titles[page - 2] = questions[page - 2]["title"];
                page++;
                document.getElementById("buttons").innerHTML = "";
                showEmail();
            }
            document.body.scrollTop = 0; // For Safari
            document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
        } else {
            error.innerHTML = `
                <div id="error" class="error_message text-size-regular text-left margin-top margin-small">
                    * Please answer all the questions
                </div>
                `;
            var errors = document.getElementsByClassName('error_message');
            for (var i = 0; i < document.getElementsByClassName('req_question_content').length; i++) {
                if (incomplete.includes(i)) {
                    errors[i].innerHTML = "This is a required question";
                    //document.getElementsByClassName('req_question_content')[i].style.borderLeftColor = "#D15F27";
                } else {
                    errors[i].innerHTML = "";
                    //document.getElementsByClassName('req_question_content')[i].style.borderLeftColor = "#F5F5F5";
                }
            }
            window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
        }
    } else {
        email = document.getElementById("email").value;
        showResults(scores, quizContainer, resultsContainer);
        document.body.scrollTop = 0; // For Safari
        document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
        storeData();
    }
}

function backBtn() {
    document.getElementById("error").textContent = "";
    if (page == 1) {
        page = page - 1;
        showIntro();
    } else if (page == 2) {
        page = page - 1;
        showDemoQuestions();
    } else {
        page = page - 1;
        document.getElementById("buttons").innerHTML =
            `<button id="back" onclick="backBtn()">Back</button>
            <button id="next" onclick="submitBtn()">Next</button>`
        showQuestions(questions, quizContainer);
    }
    document.body.scrollTop = 0; // For Safari
    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}

function loadQuizData() {
    var data = [
        {
            "name": "page1",
            "elements": [
                {
                    "name": "question1",
                    "title": "For all-hands meetings, how often are hybrid (virtual and in-person) options available?",
                    "choices": ["Never", "Sometimes", "Usually", "Always", "N/A"]
                },
                {
                    "name": "question2",
                    "title": "For all-hands meetings, how often are pause points for virtual attendees to speak up and closed captioning options provided?",
                    "choices": ["Never", "Sometimes", "Usually", "Always", "N/A"]
                },
                {
                    "name": "question3",
                    "title": "In thinking about the spaces where employees can meet up and connect, how accessible are they for people with differing physical abilities and safe for all?",
                    "choices": ["Never", "Sometimes", "Usually", "Always", "N/A"]
                },
                {
                    "name": "question4",
                    "title": "To what extent are workplace spaces for breast pumping and prayer / meditation practices private, comfortable, and accessible to all those who need them?",
                    "choices": ["Never", "Sometimes", "Usually", "Always", "N/A"]
                },
                {
                    "name": "question5",
                    "title": "For any spaces where food is provided, how often are food restrictions accommodated (e.g., kosher, allergens)? ",
                    "choices": ["Never", "Sometimes", "Usually", "Always", "N/A"]
                },
                {
                    "name": "question6",
                    "title": "To what extent are pictures/images on office walls, the website, etc. representative of different identities (e.g., related to gender, race, ability, age, etc)?",
                    "choices": ["Not at all", "Somewhat", "Moderately", "Very", "N/A"]
                },
                {
                    "name": "question7",
                    "title": "To what extent are images or illustrations for external purposes representative of different identities (e.g., related to gender, race, ability, age, etc)?",
                    "choices": ["Not at all", "Somewhat", "Moderately", "Very", "N/A"]
                },
                {
                    "name": "question8",
                    "title": "Does your organization offer workshops for employees on how to practice precise and inclusive language in day-to-day communications?",
                    "choices": ["Yes, required for all", "Yes, required for some", "Yes, optional", "No", "N/A"]
                },
                {
                    "name": "question9",
                    "title": "For job descriptions, how often are checks conducted to ensure that all language is inclusive and respectful of different identities?",
                    "choices": ["Never", "Sometimes", "Usually", "Always", "N/A"]
                },
                {
                    "name": "question10",
                    "title": "In marketing and product design, how often are checks conducted to ensure that all language is inclusive and respectful of different identities?",
                    "choices": ["Never", "Sometimes", "Usually", "Always", "N/A"]
                },
                {
                    "name": "question11",
                    "title": "To what extent are pronouns normalized and encouraged in email signatures?",
                    "choices": ["Not at all", "Somewhat", "Moderately", "Very", "N/A"]
                },
                {
                    "name": "question12",
                    "title": "To what extent do you think employees are able to share and easily go by their preferred name when it differs from their legal name?",
                    "choices": ["Not at all", "Somewhat", "Moderately", "Very", "N/A"]
                },
                {
                    "name": "question13",
                    "title": "For global teams, to what extent is the organization supportive and inclusive of different languages – in particular, is the organization developing resources (e.g. job descriptions, important internal materials) in the local languages where employees/ teams are (not only English)?",
                    "choices": ["Not at all", "Somewhat", "Moderately", "Very", "N/A"]
                }
            ],
            "title": "Inclusive Work Environments"
        },
        {
            "name": "page2",
            "elements": [
                {
                    "name": "question14",
                    "title": "How often are employees given formal and informal opportunities to connect with each other across the organization?",
                    "choices": ["Never", "Sometimes", "Usually", "Always", "N/A"]
                },
                {
                    "name": "question15",
                    "title": "For these opportunities, to what extent are they accessible and inclusive of different cultures and personal life responsibilities (e.g., caretaking)?",
                    "choices": ["Not at all", "Somewhat", "Moderately", "Very", "N/A"]
                },
                {
                    "name": "question16",
                    "title": "How often are formal mentorship programs both offered and made accessible to employees across the organization?",
                    "choices": ["Never", "Sometimes", "Usually", "Always", "N/A"]
                },
                {
                    "name": "question17",
                    "title": "To what extent is your organization supportive of the creation of employee resource groups (ERGs), including by providing meeting spaces and resources for them?",
                    "choices": ["Not at all", "Somewhat", "Moderately", "Very", "N/A"]
                },
                {
                    "name": "question18",
                    "title": "How often are spaces provided for employees to celebrate and learn about each other's cultures and identities (this could be in conjunction with ERGs or not)?",
                    "choices": ["Never", "Sometimes", "Usually", "Always", "N/A"]
                }
            ],
            "title": "Connectivity Opportunities"
        },
        {
            "name": "page3",
            "elements": [
                {
                    "name": "question19",
                    "title": "To what extent is your organization's mission, vision, and purpose clearly communicated to employees?",
                    "choices": ["Not at all", "Somewhat", "Moderately", "Very", "N/A"]
                },
                {
                    "name": "question20",
                    "title": "To what extent are employees aware of how their work links to the broader organizational mission and goals?",
                    "choices": ["Not at all", "Somewhat", "Moderately", "Very", "N/A"]
                },
                {
                    "name": "question21",
                    "title": "To what extent are organizational values / principles linked to employee expectations and responsibilities (e.g., such as in performance reviews)?",
                    "choices": ["Not at all", "Somewhat", "Moderately", "Very", "N/A"]
                },
                {
                    "name": "question22",
                    "title": "To what extent are expectations regarding welcomed and unacceptable attitudes and behavior (what we call \"standards of citizenship\") made clear?",
                    "choices": ["Not at all", "Somewhat", "Moderately", "Very", "N/A"]
                },
                {
                    "name": "question23",
                    "title": "How often are leaders and managers modeling these values, principles, and expectations?",
                    "choices": ["Never", "Sometimes", "Usually", "Always", "N/A"]
                }
            ],
            "title": "Organizational Values & Principles"
        },
        {
            "name": "page4",
            "elements": [
                {
                    "name": "question24",
                    "title": "To what extent are people both recognized and rewarded for doing well in their jobs? ",
                    "choices": ["Not at all", "Somewhat", "Moderately", "Very", "N/A"]
                },
                {
                    "name": "question25",
                    "title": "Are robust pay equity analyses conducted to ensure pay is allocated fairly?",
                    "choices": ["Never", "Sometimes", "Usually", "Always", "N/A"]
                },
                {
                    "name": "question26",
                    "title": "Are all employees provided with transparent information on their career development and internal opportunities for growth?",
                    "choices": ["Never", "Sometimes", "Usually", "Always", "N/A"]
                },
                {
                    "name": "question27",
                    "title": "For employee performance reviews, are processes reviewed and approaches built in to ensure that bias (related to identity and remote work status) is prevented or mitigated?",
                    "choices": ["Yes", "No", "N/A"]
                },
                {
                    "name": "question28",
                    "title": "In performance reviews for managers and leaders, are they assessed for their ability to support belonging among other employees and team members? ",
                    "choices": ["Yes", "No", "N/A"]
                },
                {
                    "name": "question29",
                    "title": "For all employee performance reviews, are they assessed on abilities to support peers, including helping them feel seen and heard?",
                    "choices": ["Yes", "No", "N/A"]
                },
                {
                    "name": "question30",
                    "title": "How often are leaders and employees who demonstrate and practice behaviors that advance belonging  recognized and rewarded?",
                    "choices": ["Never", "Sometimes", "Usually", "Always", "N/A"]
                },
                {
                    "name": "question31",
                    "title": "How often are leaders and employees who foster toxic workplaces held accountable and penalized appropriately?",
                    "choices": ["Never", "Sometimes", "Usually", "Always", "N/A"]
                }
            ],
            "title": "Acknowledgement & Accountability Structures"
        },
        {
            "name": "page5",
            "elements": [
                {
                    "name": "question32",
                    "title": "Are caretaking benefits - including paid parental leave and caretaking support - provided for all caretakers (including parents, those taking care of family / chosen family)?",
                    "choices": ["Yes, excellent caretaking benefits for all caretakers", "Yes, fine benefits for all caretakers", "Yes, caretaking benefits are offered but not to all caretakers or not sufficient", "No", "N/A"]
                },
                {
                    "name": "question33",
                    "title": "To what extent do all employees feel comfortable taking full advantage of the caretaking benefits available to them?",
                    "choices": ["Not at all", "Somewhat", "Moderately", "Very", "N/A"]
                },
                {
                    "name": "question34",
                    "title": "To what extent are the expressed needs and concerns of employees (related to working location and hours) being met by the flexible work opportunities your organization offers?",
                    "choices": ["Not at all", "Somewhat", "Moderately", "Very", "N/A"]
                },
                {
                    "name": "question35",
                    "title": "To what extent are healthy boundaries between work and personal life for employees encouraged?",
                    "choices": ["Not at all", "Somewhat", "Moderately", "Very", "N/A"]
                },
                {
                    "name": "question36",
                    "title": "To what extent are employees comfortable taking advantage of \"protected time\" for mental and emotional well-being, learning and development?",
                    "choices": ["Not at all", "Somewhat", "Moderately", "Very", "N/A"]
                }
            ],
            "title": "Work-Life Boundaries"
        },
        {
            "name": "page6",
            "elements": [
                {
                    "name": "question37",
                    "title": "When employee surveys are conducted, are the overall results and next steps communicated to employees via multiple channels (e.g. all-hands meetings, blog post, email from CEO)?",
                    "choices": ["Never", "Sometimes", "Usually", "Always", "N/A"]
                },
                {
                    "name": "question38",
                    "title": "To what extent is employee feedback taken into account and addressed?",
                    "choices": ["Never", "Sometimes", "Usually", "Always", "N/A"]
                },
                {
                    "name": "question39",
                    "title": "Are managers and leaders required to go through training on inclusive leadership?",
                    "choices": ["Yes", "No", "N/A"]
                },
                {
                    "name": "question40",
                    "title": "Are managers and leaders required to go through training on creating an organizational and team culture where all people feel psychological safe?",
                    "choices": ["Yes", "No", "N/A"]
                }
            ],
            "title": "Putting Equity Fluent Leadership Into Practice"
        }
    ]
    return data;
}

function loadPlays() {
    var plays = [
        "Play 1: Hold meetings where all participants feel supported, can actively participate, and are heard.",
        "Play 2: Create inclusive physical and virtual spaces.",
        "Play 3: Prioritize inclusive and precise language.",
        "Play 4: Create formal and informal opportunities for employees to connect.",
        "Play 5: Establish mentorship opportunities & ERGs.",
        "Play 6: Leaders - Refine the organization's mission, vision, and purpose and link to employees day-to-day.",
        "Play 7: Leaders - Establish clear organizational values and create standards of citizenship linking to those values.",
        "Play 8: Give recognition and reward people for their work contributions.",
        "Play 9: Update job descriptions and provide key information in hiring.",
        "Play 10: Ensure transparency in career development opportunities.",
        "Play 11: Ensure performance review processes are equitable and add metrics around efforts to enhance belonging.",
        "Play 12: Provide and enable employees to take advantage of caretaking support and flexible work opportunities.",
        "Play 13: Ensure employees are able to maintain healthy boundaries between work and personal life.",
        "Play 14: Leaders - Model vulnerability.",
        "Play 15: Leaders - Receive feedback, practice active listening, and respond with action.",
        "Play 16. Leaders - Build your own equity fluency and inclusive leadership skills."
    ];
    var questionsToPlays = [
        1, 1,
        2, 2, 2, 2, 2,
        3, 3, 3, 3, 3, 3,
        4, 4,
        5, 5, 5,
        6, 6, 6,
        7, 7,
        8, 8,
        10, 10,
        11, 11, 11, 11,
        12, 12, 12,
        13, 13,
        15, 15,
        16, 16];
    return [plays, questionsToPlays];
}

function loadGeographyData() {
    var regions = [
        {
            "value": "Africa",
            "text": "Africa"
        },
        {
            "value": "Asia",
            "text": "Asia"
        },
        {
            "value": "Caribbean",
            "text": "Caribbean"
        },
        {
            "value": "CentralAmerica",
            "text": "Central America"
        },
        {
            "value": "Europe",
            "text": "Europe"
        },
        {
            "value": "NorthAmerica",
            "text": "North America"
        },
        {
            "value": "Oceania",
            "text": "Oceania"
        },
        {
            "value": "South America",
            "text": "South America"
        }
    ];
    return regions;
};

function loadIndustryData() {
    var industries = [
        {
            "value": "NaturalResourcesandMining",
            "text": "Natural Resources and Mining"
        },
        {
            "value": "Construction",
            "text": "Construction"
        },
        {
            "value": "Manufacturing",
            "text": "Manufacturing"
        },
        {
            "value": "Trade,Transportation,andUtilities",
            "text": "Trade, Transportation, and Utilities"
        },
        {
            "value": "Information",
            "text": "Information"
        },
        {
            "value": "FinancialActivities",
            "text": "Financial Activities"
        },
        {
            "value": "ProfessionalandBusinessServices",
            "text": "Professional and Business Services"
        },
        {
            "value": "Education,HealthServices,andSocialAssistance",
            "text": "Education, Health Services, and Social Assistance"
        },
        {
            "value": "LeisureandHospitality",
            "text": "Leisure and Hospitality"
        },
        {
            "value": "Otherservices(exceptPublicAdministration)",
            "text": "Other services (except Public Administration)"
        },
        {
            "value": "PublicAdministration",
            "text": "Public Administration"
        },
        {
            "value": "Nonprofit/nongovernmental",
            "text": "Nonprofit/nongovernmental",
        },
        {
            "value": "N/A",
            "text": "N/A"
        }
    ];
    return industries;
};