JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<ul data-bind="foreach: questions">
    <li>
<div class="question-type" ><span data-bind="text: 'Type: ' + type()"></span> 
                <label><input type="radio" value="mc-multiple" data-bind="checked: type, attr: { name: 'type-' + $index() }"/> Multiple-Choice - Multiple</label> 
                <label><input type="radio" value="mc-single" data-bind="checked: type, attr: { name: 'type-' + $index() }"/> Multiple-Choice - Single</label> 
                <label><input type="radio" value="txt-short" data-bind="checked: type, attr: { name: 'type-' + $index() }"/> Text - Short</label> 
                <label><input type="radio" value="txt-long" data-bind="checked: type, attr: { name: 'type-' + $index() }"/> Text - Long</label></div>
    </li>
</ul>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

CSS

.questionlist {
    margin: 0;
    padding: 0;
    list-style: none;
}
.questionlist-item {
    margin: 1.5em 0;
}

.question-text {
    font-weight: bold;
}

.question-answerlist {
    margin: 0;
    list-style: none;
}

JavaScript

var questionlistVM = function() {
    var self = this;
    self.test = "Test";
    
    self.questions = ko.observableArray([
        new Question('mc-multiple'),
        new Question('mc-single'),
        new Question('txt-short'),
        new Question('txt-long')
    ]);
    
   
};

function Question (type) {
        var q = this;
        
        q.type = ko.observable(type);

    
        
    };

function Choice(text) {
    var c = this;
    
    c.text = ko.observable(text || null);
}

function QuestionVM() {
    var self = this;
    
    self.type = ko.observable('mc-multiple');
};
vm = ko.applyBindings(questionlistVM);