JSFiddle - React, Tailwind, and code Playground

by romanych

HTML

<div data-poll data-poll-id="1">

</div>
adfasdf asdfasdfa
<div data-poll data-poll-id="2">

</div>
afasdfasdf
<div data-poll data-poll-id="3">

</div>


<script type="t/template" id="poll-template">
  <% for (var qi = 0; qi < questions.length; qi++) { 
  var question = questions[qi];
  var qt = question.type === "select_many" ? "checkbox" : "radio"; %>
    <h6><%~ question.text %></h6>
    <ul>
      <% for (var oi = 0; oi < question.options.length; oi++) {
      var option = question.options[oi];  %>
      <li>
      <label>
      	<input type="<%= qt %>" value="<%= option.id %>" name="<%= question.id %>" /><%~ option.text %> </label>
      </li>
      <% } %>
      </ul>
    <% } %>

</script>

CSS

.poll-loading .poll-spinner {
  display: block;
}

.poll-spinner {
  display: none;
  margin: auto 0;
  width: 70px;
  text-align: center;
}

.poll-spinner > div {
  width: 18px;
  height: 18px;
  background-color: #333;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.poll-spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.poll-spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0)
  }
  40% {
    -webkit-transform: scale(1.0)
  }
}

@keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

.poll-container ul {
   list-style: none;
}

JavaScript

var pollResponse1 = {
  "id": 1,
  "post_id": 100,
  "show_users": true,
  "end_date": "2017-04-01",
  "state": {
    "user_answer": null,
    "accepting_answers": true
  },
  "questions": [{
    "id": 1,
    "text": "Question <b>1</b>",
    "type": "select_one",
    "options": [{
      "id": 1,
      "text": "Q1 <b>O1</b>"
    }, {
      "id": 2,
      "text": "Q1 O2"
    }, {
      "id": 3,
      "text": "Q1 O3"
    }, {
      "id": 4,
      "text": "Q1 O4"
    }]
  }, {
    "id": 2,
    "text": "Question 2",
    "type": "select_many",
    "options": [{
      "id": 5,
      "text": "Q2 O1"
    }, {
      "id": 6,
      "text": "Q2 O2"
    }, {
      "id": 7,
      "text": "Q2 O3"
    }]
  }]
};


window.Poll = (function() {
  // Simple JavaScript Templating
  // John Resig - http://ejohn.org/ - MIT Licensed
  var t = (function() {
    function htmlEncode(html) {
      var el = document.createElement("span");
      el.appendChild(document.createTextNode(html));
      return el.innerHTML;
    };
    var cache = {};

    return function tmpl(str, data) {
      // Figure out if we're getting a template, or if we need to
      // load the template - and be sure to cache the result.
      var fn = /^[a-z0-9-_]+$/i.test(str) ?
        cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :

        // Generate a reusable function that will serve as a template
        // generator (and which will be cached).
        new Function("obj",
          "var p=[],print=function(){p.push.apply(p,arguments);};" +

          // Introduce the data as local variables using with(){}
          "with(obj){p.push('" +

          // Convert the template into pure JavaScript
          str
          .replace(/[\r\t\n]/g, " ")
          .split("<%").join("\t") //CHANGE string "<%"
          .replace(/((^|%>)[^\t]*)'/g, "$1\r") //CHANGE expression /((^|%>)[^\t]*)'/g
          .replace(/\t=(.*?)%>/g, "',$1,'") //CHANGE expression /\t=(.*?)%>/g
         ...