surveys.html

---
layout: page
---
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/survey-jquery"></script>
<link href="https://unpkg.com/survey-jquery/survey.css" type="text/css" rel="stylesheet" />

<div id="surveys">
    {{ content | markdownify }}
</div>

<div id="surveyResult"></div>
<div id="sendJsonTo">{{ page.sendJsonTo }}</div>


<script>
    var surveysDiv = document.getElementById('surveys');
    var surveyJson = parseHtmlToSurveyJson(surveysDiv);
    var survey = new Survey.Model(surveyJson);

    if(window.innerWidth <= 600) {
        survey.renderMode = "singlePage";
    } else {
        survey.renderMode = "standard";
    }


    survey.onComplete.add(function(result) {
        document.querySelector('#surveyResult').textContent = "result: " + JSON.stringify(result.data);
        sendToLambda(JSON.stringify(result.data), document.querySelector('#sendJsonTo').textContent.trim());
    });

    $("#surveys").Survey({model:survey});

    function parseHtmlToSurveyJson(element) {
        var json = { questions: [] };

        var sections = Array.from(element.children);
        sections.forEach(section => {
            if (section.className === 'checkbox') {
                json.questions.push(parseCheckboxSection(section));
            } else if (section.className === 'choice') {
                json.questions.push(parseChoiceSection(section));
            } else if (section.className === 'text') {
                json.questions.push(parseTextSection(section));
            }
        });

        return json;
    }

    function parseCheckboxSection(section) {
        var options = Array.from(section.querySelectorAll('li')).map(li => li.textContent);
        return {
            type: "checkbox",
            name: section.querySelector('h2').textContent,
            choices: options
        };
    }

    function parseChoiceSection(section) {
        var options = Array.from(section.querySelectorAll('li')).map(li => li.textContent);
        return {
            type: "radiogroup",
            name: section.querySelector('h2').textContent,
            choices: options
        };
    }

    function parseTextSection(section) {
        return {
            type: "comment",
            name: section.querySelector('h2').textContent
        };
    }
    

    function sendToLambda(text, documentId) {
        const url = 'https://v2uh2lpxh3.execute-api.ap-southeast-2.amazonaws.com/default/SendSurvey';
        const data = { 
            text: text,
            document_id: documentId,
        };

        fetch(url, {
            method: 'POST', 
            body: JSON.stringify(data), 
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(response => response.json())
          .then(data => console.log(data))
          .catch((error) => {
            console.error('Error:', error);
        });
    }
</script>