JSFiddle - React, Tailwind, and code Playground

by cormundo

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test_Walksurv</title>

        <meta name="viewport" content="width=device-width"/>
        <script src="https://unpkg.com/jquery"></script>
        <script src="https://surveyjs.azureedge.net/1.8.12/survey.jquery.min.js"></script>
        <link href="https://surveyjs.azureedge.net/1.8.12/modern.css" type="text/css" rel="stylesheet"/>
        <link rel="stylesheet" href="./index.css">

    </head>
    <body>


              <div id="surveyResult"></div>

        <div id="surveyElement" style="display:inline-block;width:100%;"></div>


      <script type="text/javascript" src="./index.js"></script>

    </body>
</html>

JavaScript

Survey
     .StylesManager
     .applyTheme("modern");

var knlist = {
kn10:"2L1qvq6Tg6rMhEwNshr6dQ",
kn11:"2N_Cl_Gl5fX8_TdLgHP3rQ",
kn12:"2RbpjbhM3_EfzejfPgzwAw",
kn13:"2rP8y_ub_alGrzAK_aZrEg",
kn14:"2S8O9KBwxRlvtZX6kjyS0y",
kn15:"2Ua5EnPVDwd7LGq6UbT2bQ",
kn16:"3_17fNbyu2Yw8ozPx8BmkA",
kn17:"3LB0GSXXVadBlCMhSth3IA",
kn18:"48JvNwKSgvnWT8nqzWtE3Q",
kn19:"4CP5JE_mlMMzjvDMMgXncg",
}

var count = 11

var knx = function knxer(){
if (count === 11) {
return knx = "kn11";
} else {
return knx = ("kn" + count);
}};

var keyname = (knlist[knx]);


var mapilink = "https://images.mapillary.com/" + (keyname) + "/thumb-1024.jpg";

//random version

//next make sample external database of mapillary keynames

//and make better output system

//you want the KNX name to equal KNX there
//variuable value is other half of pair within other thing

//


var json = {
pages: [
{
name: "page1",
elements: [
{
type: "image",
name: "image",
imageLink: (mapilink),
imageHeight: 580,
imageWidth: 640
},
{
type: "html",
name: (keyname),
visible: false,
html: (keyname)
},
{
type: "rating",
name: "Walkability",
title: "How walkable does this look to you"
},
{
type: "rating",
name: "Saftey",
title: "How safe does this look to you"
},
{
type: "rating",
name: "Comfortability",
title: "How comfortable does this look to you"
}
]
}
]
}


     window.survey = new Survey.Model(json);

         survey
             .onComplete
             .add(function (result) {
                 window.count ++;
                 var PID = "USERID"
                 var results = PID + "|||" + (keyname) + ":\n" + JSON.stringify(result.data, null, 3) + (count) ;
                 document
                     .querySelector('#surveyResult')
                     .textContent = results;
             console.log(knx);
             console.log(count);
             console.log(window.count);
             survey.clear();
             survey.render();
             });

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