JSFiddle - React, Tailwind, and code Playground

grader

by jirve

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.8/Rx.min.js"></script>
<div>
<form>
<div id="grader">

<input type="checkbox" id="queue" />
<label for="queue">Ootejärjekord</label>
</div>
<div id="score">

</div>
</form>
</div>

JavaScript

var data = [
  	{name:"queue", label:"Baasülesanne", points:10},
// plussmiinuspunktid ja selgitus
    {name:"nice", label:"Ilus kujundus", points:1},
    {name:"sort", label:"Sortimine", points:1},
    {name:"appear", label:"Head ilmumised", points:1},
    {name:"sortfeedback", label:"Sortimise tagasiside", points:1},
    {name:"bonustask", label:"Hea lisaülesande \"episood\"", points:1},
    {name:"failfeedback", label:"Hea läbikukkumise tagasiside", points:1},
    {name:"sound", label:"Heliline tagasiside", points:1},
    {name:"learnability", label:"Mängu õpitavus on hea", points:1},
    {name:"dragdrop", label:"Lohistamine", points:1},
    {name:"mobile", label:"Töötab mobiilil", points:1},
  ];
 
 var gradeStreams = [];
 
 function AddElement(base, entry) {
 	var element = "<input type=\"checkbox\" id=\"" + entry.name +
  			"\" value=\""+ entry.points +"\"\\><label for=\"" + entry.name + "\">" + entry.label +
        "</label><br/>\n";
 		base.innerHTML += element;
 }
 
 function AddElements(base, data) {
 	 base.innerHTML = "";
   for(var i=0; i<data.length; i++) {
     AddElement(base, data[i]);
     var element = document.querySelector('#'+data[i].name);
     gradeStreams[i] = Rx.Observable.fromEvent(element, 'click');
     console.log(element);
   }
 }
 
 AddElements(document.querySelector("#grader"), data);
 
 gradeStreams[0].subscribe(x=>console.log(x));