Kid Board Game

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script src="https://code.angularjs.org/1.4.8/angular.min.js"></script>
  <script src="https://code.angularjs.org/1.4.8/angular-animate.min.js"></script>
  <script src="https://code.angularjs.org/1.4.8/angular-sanitize.min.js"></script>
  <script data-require="jquery@>=1.9.1 <3" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="lession1Ctrl">
    <div ng-repeat="lone in lession1" class="col-md-12">
      <div class="col-md-3" cube front-text="{{lone.frontPage}}" back-text="{{lone.backPage}}" img="{{lone.img}}"></div>
    </div>
  </div>
</body>

</html>

angular.module('myApp', ['ngSanitize', 'ngAnimate'])
  .controller('lession1Ctrl', function($scope, $http) {
    $http({
      method: 'GET',
      url: 'lession1.json'
    }).then(function successCallback(response) {
      $scope.lession1 = response.data.data;
    }, function errorCallback(response) {});
  })
  .directive('cube', function() {
    return {
      restrict: 'A',
      scope: {
        frontText: '@',
        backText: '@',
        img: "@"
      },
      templateUrl: 'boardTemplate.html',
      link: function(scope, element, attrs) {
      },
      controller: ['$scope', function($scope) {
        $scope.front = true;
        $scope.change = function() {
          $scope.front = !$scope.front;
        };
      }]
    }
  });

angular.element(document).ready(function() {
  angular.bootstrap(document, ['myApp']);
});

/* Styles go here */

.board {
  border: 1px solid grey;
  background-color: skyblue;
  color: white;
  border-radius: 4px;
  margin: 8px;
  text-align: center;
}

.board-active {
  border: 2px outset grey;
  background-color: #C1FFC1;
  border-radius: 4px;
  margin: 8px;
  text-align: justify;
  box-shadow: 4px 4px 1px grey;
  padding: 4px;
}

.board-active.ng-enter,
.board.ng-enter {
  transition: 300ms all;
}

.board-active.ng-enter,
.board.ng-enter {
  opacity: 0;
  transform: scale(0, 0);
}

.board-active.ng-enter-active,
.board.ng-enter-active {
  opacity: 1;
  transform: scale(1, 1);
}

<div>
  <div ng-click="change()" class="board" ng-if="front">
    <span>{{frontText}}</span>
  </div>
  <div ng-click="change()" class="board-active" ng-if="!front">
    <span>{{backText}}</span>
    <img src="{{img}}" height="70" width="80">
  </div>
</div>

{
  "data": [{
    "seq": 1,
    "frontPage": "Anxiety",
    "backPage": "A feeling of worry, nervousness, or unease, typically about an imminent event or something with an uncertain outcome. Example: I’m not talking about physical pain, but rather anxiety.",
    "img": "https://upload.wikimedia.org/wikipedia/commons/2/2c/Its_something.png",
    "rating": 0
  }, {
    "seq": "2",
    "frontPage": "Tendency",
    "backPage": "An inclination toward a particular characteristic or type of behavior.Example: I don’t like to admit this, but I have a tendency to procrastinate.",
    "img": "http://www.psychstat.missouristate.edu/introbook/sbgraph/skew3.gif",
    "rating": 4
  }]
}