JSFiddle - React, Tailwind, and code Playground

by eprouver

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div ng-app>
    <div ng-controller="board">
        	<h3>Drag Red Boxes into the Blue Categories</h3> 
        <div>Total Score: {{totalscore}}</div>
        <p>Powered by Wikipedia</p>
        <hr/>
            <h4>Categories</h4>
        <div class="spliter">
            <div ng-repeat="c in categories" class="droppable" ng-cloak ng-controller="drop">{{c.title}}
                <ol>
                    <li ng-repeat="a in c.accepted">{{a.text}} <a class="linker" target="_BLANK" ng-href="{{a.link}}">link</a>

                    </li>
                </ol>
            </div>
        </div>
        <h4>Pages Remaining: {{remaining}}</h4>
        <div ng-repeat="s in subcats" class="draggable" data-id="{{s.pageid}}" ng-controller="drag">{{s.title}}</div>
    </div>
</div>

CSS

* {
		    font-family:Arial;
		    text-align:center;
		}
h4{
    text-align:left;
}

		body {
		    background:#eee;
		}
		.spliter {
		    display:-webkit-box;
		    -webkit-box-pack: horizontal;
		}
		.droppable {
		    -webkit-box-flex: 1;
		    padding: 15px;
		    margin: 10px;
		    border: 2px solid blue;
		    background: rgb(249, 249, 255);
		}
		.draggable {
		    padding: 15px;
		    margin: 10px;
		    border: 2px solid red;
		    background: rgb(255, 247, 247);
		    cursor:pointer;
		    display: inline-block;
		}
		.linker {
		    display:none;
		}
		.finished .linker {
		    display:inline;
		}

JavaScript

var totalscore = 0;
var remaining = 0;

function drop($scope, $element) {
    $($element).droppable({
        accept: function (ui) {
            var id = ui.data('id'),
                subs = angular.element(this).scope().$parent.c.subs;

            var contained = $.grep(subs, function (v) {
                return v.pageid === id
            }).length;

            if (contained) {
                return true;
            } else {
                return false;
            }
        },
        drop: function (e, ui) {
            angular.element(this).scope().c.accepted.push({
                text: ui.draggable.text(),
                link: 'http://en.wikipedia.org/wiki?curid=' + ui.draggable.data('id')
            });
            ui.draggable.remove();
            $scope.$emit('correctAnswer');
            $scope.$apply();

            if (angular.element(this).scope().c.accepted.length >= 5) {
                $(this).css({
                    background: '#ffe'
                });
            }
        }
    });
}

function drag($element) {
    $($element).draggable({
        revert: 'invalid'
    });
}

function board($scope, $http) {
    $scope.remaining = remaining;
    $scope.totalscore = totalscore;
    $scope.$on('correctAnswer', function () {
        $scope.totalscore += 3;
        $scope.remaining -= 1;

        if ($scope.remaining === 0) {
            alert('YOU DID IT!!!');
            $('body').addClass('finished');
        }
    });

    $scope.categories = [], $scope.subcats = [];

    var root = 'http://en.wikipedia.org';
    $.getJSON(root + '/w/api.php?action=query&list=random&format=json&rnnamespace=14&rnlimit=20&indexpageids=&converttitles=&callback=?', function (data) {

        $.each(data.query.random, function (i, v) {
            if (v.title.toLowerCase().indexOf('templates') !== -1) return;
            if (v.title.toLowerCase().indexOf('stubs') !== -1) return;
            if (v.title.toLowerCase().indexOf('lists') !== -1) return;
    ...