English-Russian irregular words tester

Question

Could you please offer some suggestions about my self learning project?

It is really hard-coded, but I have no idea what to do next. I'm using angular (only few features for now) and grunt + bower.

tester.html

<table class="table table-bordered">
  <thead>
    <th>First form</th>
    <th>Second form</th>
    <th>Third form</th>
    <th>Translation</th>
  </thead>
  <tbody class="row">

    <tr ng-show="isStage('input')">
      <td ng-repeat="verb in verbs track by $index" class="col-md-3">
        <p ng-show="isActive($index)">{{ verb }}</p>
        <input ng-model="val[$index]" ng-hide="isActive($index)" type="text">
      </td>
    </tr>

    <tr ng-show="isStage('validation')">
      <td ng-repeat="verb in verbs track by $index" class="col-md-3" ng-class="{
        info: isActive($index),
        success: isSuccess($index),
        danger: isDanger($index)
      }">
        <p ng-show="isActive($index)">{{ verb }}</p>
        <p ng-hide="isActive($index)">
          <span ng-show="isSuccess($index)" class="glyphicon glyphicon-ok text-success"></span>
          <span ng-show="isDanger($index)" class="glyphicon glyphicon-minus text-danger"></span>
          {{ val[$index] }}
        </p>
      </td>
    </tr>

    <tr ng-show="isStage('validation')">
      <td ng-repeat="verb in verbs track by $index" class="col-md-3">
        <p>{{ verb }}</p>
      </td>
    </tr>

  </tbody>
</table>

<div ng-show="isStage('input')" class="row">
  <a href ng-click="check()" class="btn btn-primary col-md-12">Check</a>
</div>

<div ng-show="isStage('validation')" class="row">
  <a href ng-click="next()" class="btn btn-primary col-md-12">Next</a>
</div>

iwt.coffee

angular.module('IWTTester', [])

  .controller('IWTTesterController', [
    '$http'
    '$scope'
    ($http, $scope) ->

      $http.get 'js/words.json'
      .success (data, status, headers, config) ->
        console.log data, status, config, 'good'
        $scope.irregulars = data
        $scope.init()
      .error (data, status, headers, config) ->
        console.log data, status, config, 'bad'

      $scope.isActive = (formIndex) ->
        formIndex is $scope._activeForm

      $scope.isStage = (value) ->
        value is $scope._stage

      $scope.init = ->
        ROWS = $scope.irregulars.length
        COLS = $scope.irregulars[0].length

        create_counter = (module) ->
          i = 0
          -> (i++) % module
        rowCounter = create_counter(ROWS)
        colCounter = create_counter(COLS)

        $scope.val = []
        $scope._stage = 'input'

        update = ->
          $scope.verbs = $scope.irregulars[rowCounter()]
          $scope._activeForm = colCounter()
        update()

        $scope.isSuccess = (i) ->
          $scope.val[i] is $scope.verbs[i]

        $scope.isDanger = (i) ->
          $scope.val[i] isnt $scope.verbs[i] and not $scope.isActive(i)

        $scope.check = ->
          $scope._stage = 'validation'

        $scope.next = ->
          $scope.val = []
          update()
          $scope._stage = 'input'
  ])

  .directive('iwtTester', ->
    restrict: 'AE'
    templateUrl: 'templates/tester.html'
    controller: 'IWTTesterController'
  )

words.json

[
  [
    "be",
    "was",
    "been",
    "быть"
  ],
  [
    "bring",
    "brought",
    "brought",
    "приносить"
  ]
]

Answer 1

First of all, I would architecture the data in a more readable and flexible way:

[
  {
    infinitive: "be",
    past: "was",
    participle: "been",
    russian: "быть"
  },
 {
   ...
 },
...
]

That tells me as reader a lot and leaves vast room for future changes without breaking the rest of your code.

Further, if you want to make your code readable for others (or even for yourself after a while), I would recommend to use descriptive names for your functions and variables. When I read

<tr ng-show="isStage('input')">

I get no clue what the function isStage does from its name. So I am forced to scan the rest of your code for its definition, which costs time. You could help me by giving it a name that would give me a rough idea without the need to go elsewhere.

Another thing I see is the use of $http inside controller, which is an anti-pattern. It sadly appears in many tutorials, yet it breaks one of the most fundamental principles of clean code - the single responsiblity principle. Your controller is responsible for gluing your scope (ViewModel layer) with your View, but not for pulling data from your Model layer. That is the job of a dedicated Service.