JSFiddle - React, Tailwind, and code Playground

by phaas

HTML

<div ng-app="app" ng-controller="AppCtrl">
    <fieldset>
        <legend>Mode</legend>
        <input type="radio" ng-model="mode" value="easy">Easy</input>
        <input type="radio" ng-model="mode" value="hard">Hard</input>
    </fieldset>
     <h1>Which city is {{port.code}}?  {{result}}</h1>

    <div ng-show="mode == 'easy'">
        <div ng-repeat="s in similar">
            <button class="answer" ng-click="answer(s)">{{s.name}}</button>
        </div>
    </div>
    <div ng-show="mode == 'hard'">
        <input type="text" ng-model="text" placeholder="City Name"></input>
        <button ng-click="answer()">Skip</button>
    </div>
    <div ng-show="correct+wrong > 0">You've answered {{correct}} out of {{correct+wrong}} correctly! ({{100 * correct/(correct+wrong) | number}} %)</div>
    
        <div>{{available.length}} left<div>

</div>

CSS

button.answer {
    width: 300px;
    text-align: left;
    margin-left: 50px;
}

JavaScript

var module = angular.module('app', []);

module.controller('AppCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
    $scope.correct = 0;
    $scope.wrong = 0;
    $scope.mode = 'easy';
    $scope.text = '';
    $scope.available = [];
    angular.forEach(branches, function (b) {
        $scope.available.push(b)
    });

    $scope.next = function next() {
        $scope.result = '';
        $scope.text = '';

        if ($scope.available.length == 0) {
            $scope.result = 'Done!';
            return;
        }

        var index = (Math.random() * $scope.available.length) | 0;
        $scope.port = $scope.available.splice([index], 1)[0];

        $scope.similar = findSimilar($scope.port);
        $scope.similar.push($scope.port);
        $scope.similar.sort(function (a, b) {
            return a.name > b.name
        });
    };

    $scope.answer = function (a) {
        if (a && a.code === $scope.port.code) {
            $scope.result = "Correct!";
            $scope.correct++;
        } else {
            $scope.result = "Wrong :(";
            $scope.wrong++;
        }
        $timeout($scope.next, 300);
    };

    $scope.$watch('text', function (text) {
        if (!text) {
            return;
        }
        if (text.toLowerCase() == $scope.port.name.toLowerCase()) {
            $scope.answer($scope.port);
        }
    });

    function findSimilar(p) {
        var codePrefix = prefix(p.code),
            codeSuffix = suffix(p.code),
            namePrefix = prefix(p.name);


        var candidates = [];
        angular.forEach(branches, function (value, index) {
            if (value.code == p.code) {
                return;
            }
            if (prefix(value.code) === codePrefix || suffix(value.code) === codeSuffix || prefix(value.name) === namePrefix) {
                candidates.push(value);

            } else if (Math.random() > .98) {
                candidates.push(value);
            }
        });

        var select =...