JSFiddle - React, Tailwind, and code Playground

by eprouver

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div ng-app="rm" class="container">
    <form class="form" ng-controller="mcFormCtrl as mcfCtrl" ng-submit="mcfCtrl.submitQuestion()">
        <h1>Add a New Question:</h1>
        <div class="form-group">
            <label class="control-label">Choose a Category:</label>
            <select class="form-control" required ng-options="cat.category as cat.name for cat in $root.categories" ng-model="mcfCtrl.category">
                <option value="">Category Options</option>
            </select>
        </div>
        <div class="form-group">
            <label class="control-label">Ask a Question:</label>
            <textarea class="form-control" ng-model="mcfCtrl.questionText"></textarea>
        </div>
        <div class="form-group">
            <div ng-repeat="res in mcfCtrl.responses">
                <label class="answer-row row">
                    <div class="col-xs-1 hide">
                        <input type="checkbox" ng-model="res.correct" value="true">
                    </div>
                    <div class="label col-xs-2" ng-class="{true: 'label-success', false: 'label-danger'}[res.correct]">
                        <span ng-if="res.correct">Correct</span>
                        <span ng-if="!res.correct">False</span>
                    </div>
                        <div class="col-xs-9">{{res.text}}</div>

                </label>
            </div>
        </div>
        <label class="control-label">Add Responses:</label>
        <div class="row">
            <div class="col-xs-8 form-group">
                <input class="form-control" required type="text" ng-model="mcfCtrl.newResponse" placeholder="Response Text" />
            </div>
            <div class="col-xs-4">
                <button type="button" class="btn btn-block btn-info" ng-click="mcfCtrl.addResponse()">Add Response</button>
            </div>
        </div>
        <button...

CSS

.answer-row{
    width: 100%;
    margin-right: 0;
    margin-left: 0;
}

JavaScript

angular.module('rm', [])
    .run(['$rootScope', '$http', function ($rootScope, $http) {
    $rootScope.categories = [{
        name: "Communication",
        category: "0"
    }, {
        name: "Computers",
        category: "1"
    }, {
        name: "Economics",
        category: "2"
    }, {
        name: "Management",
        category: "3"
    }, {
        name: "Mathematics",
        category: "4"
    }, {
        name: "U.S. Culture",
        category: "5"
    }, {
        name: "U.S. Government",
        category: "6"
    }, {
        name: "World History & Geography",
        category: "7"
    }, {
        name: "Other",
        category: "8"
    }]


}]).controller('mcFormCtrl', ['$scope', '$rootScope', function ($scope, $rootScope) {
    var self = this;
    self.responses = [];

    self.addResponse = function () {
        self.responses.push({
            text: self.newResponse,
            correct: false
        });
        self.newResponse = '';
    }

    self.submitQuestion = function () {
        alert('submitted');
    }
}]);