JSFiddle - React, Tailwind, and code Playground

by RajamohanShilpa A

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<h3 data-bind="text: question"></h3>
<p>
Specify the importance <b data-bind="text: pointsTotal"></b>
amoung the options listed below
</p>
<table>
<thead>
  <tr><th>Options</th><th>Relevance</th></tr>
</thead>
<tbody data-bind="foreach: responses">
  <tr>   
    <td data-bind="text: responeText"></td>
    <td> 
      <select data-bind="options: [1,2,3,4,5], value: points">        
      </select>
    </td>    
  </tr>  
</tbody>
</table>

<h3 data-bind="fadeVisible: pointsUsed() > pointsTotal"> You've used all your points</h3>
<p>you'va got <b data-bind="text: pointsTotal - pointsUsed()"></b> points left</p>
<button data-bind="enable: pointsUsed() <= potinsTotal, click: save">
done
</button>

JavaScript

$(function() { 
debugger; 
  ko.bindingHandlers.fadeVisible = {
  	init: function(element, valueAccessor) {
    	var shouldDisplay = valueAccessor();
      $(element).toggle(shouldDisplay);
    }, 
    update: function(element, valueAccessor){
    	var shouldDisplay = valueAccessor();
      shouldDisplay ? $(element).fadeIn() : $(element).fadeOut();
    }
  };
  
  function answer(text) {
  	this.responeText = text;
    this.points = ko.observable(1);
  }
  
  function surveyViewModel(question, pointsTotal, answer) {
  	this.question = question;
    this.pointsTotal = pointsTotal;
    this.responses = $.map(responses, function(text) { 
    	return new answer(text);
    });
    this.save = function() {
    	alert('To do more');
    }
    this.pointsTotal = ko.computed(function() {
    	var total = 0;
      for (var i = 0;i<this.responses.length;i++) {
      	total += this.responses[i].points();
      }
      return total;
    }, this);
  }
  
  ko.applyBindings(new surveyViewModel('What matters most?',10,[
  "whather it works",
  "new information shown",
  "differences in display",
  "result of testimonials"
  ]));
});