main.js

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

app.service('total', ['$rootScope', function ($rootScope) {
    this.tScore = 0;
}]);

app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/kapitelhome/:kapitelNum/:kapitelDesc',{
            templateUrl: "partials/specific_kapitel.html",
            controller: "KapitelHomePage"
        });
    }]);

app.controller("KapitelHomePage", ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {

    $scope.showIt = true;
    $scope.kapitelNum = $routeParams.kapitelNum;
    $scope.kapitelDescription = $routeParams.kapitelDesc;
    $http.get('res/config.json').success(function (response) {
        $scope.chapters = response;
    });
    
    $scope.showChapterHomepage = function () {
        $scope.showIt = false;
    }

}]);


app.controller("QuizController", ['total', '$scope', '$http', function (total, $scope, $http) {


    $scope.quizzes = [{
        'question': 'If 5x plus 32 equals 4 minus 2x what is the value of x ?',
        'choices': ['-4', '-3', '4', '7', '12'],
        'answer': [-4],
        'explanation': "Solving the equation for x, you get 7x equals negative 28 and so x equals negative 4 The correct answer is Choice A, Negative 4",
        'evaluate': false,
        'exclude': false
    },
        {
            'question': 'Which of the following numbers is farthest from the number 1 on the number line?',
            'choices': ['-10', '-5', '0', '5', 10],
            'answer': ['-10'],
            'explanation': "Circling each of the answer choices in a sketch of the number line (Figure 4) shows that of the given numbers, Negative 10 is the greatest distance from 1. Figure 4: The figure is a number line with 23 equally spaced tick marks labeled with the integers from negative 11 through positive 11. Going from left to right, the 5 evenly spaced integers negative 10, negative 5, 0, 5 and 10 are circled. The integer 1 is 1 tick mark to the right of 0. There is an arrow pointing to the integer 1. Another way to answer the question is to remember that the distance between two numbers on the number line is equal to the absolute value of the difference of the two numbers. For example, the distance between Negative 10 and 1 is The absolute value of negative 10 minus one, which equals 11 and the distance between 10 and 1 is The absolute value of negative 10 minus one, which equals 11 The correct answer is Choice A, Negative 10",
            'evaluate': false,
            'exclude': false
        },
        {
            'question': 'A car got 33 miles per gallon using gasoline that cost $2.95 per gallon. Approximately what was the cost, in dollars, of the gasoline used in driving the car 350 miles?',
            'choices': ['$10', '$20', '$30', '$40'],
            'answer': ['$30'],
            'explanation': "Scanning the answer choices indicates that you can do at least some estimation and still answer confidently. The car used 350 over 33 gallons of gasoline, so the cost was Open parenthesis, 350 over 33, close parenthesis, times 2.95 dollars. You can estimate the product Open parenthesis, 350 over 33, close parenthesis, times 2.95 by estimating 350 over 33 a little low, 10, and estimating 2.95 a little high, 3, to get approximately 10 times 3 = 30 dollars. You can also use the calculator to compute a more exact answer and then round the answer to the nearest 10 dollars, as suggested by the answer choices. The calculator yields the decimal 31 point two, eight, seven, dot, dot, dot. which rounds to 30 dollars. Thus, the correct answer is Choice C, $30.",
            'evaluate': false,
            'exclude': false
        },
    ];
    $scope.score = 1;
    $scope.disableStatus = false;
    $scope.totalScore = total['tScore'];
    $scope.count = 0;
    $scope.resultShow = false;
    $scope.selection = [];
    $scope.backColor= "";
    $scope.three = "front";

    function toggle(value){
        if(value === "front"){
            return "back";
        }
        else {
            return "front";
        }
    }

    $scope.submitScore = function (index) {
            $scope.totalScore = Number($scope.totalScore) + Number(this.score);
           $scope.quizzes[index].evaluate = true;
    }

    $scope.side = 'front';

    $scope.toggle = function()
          {
                  $scope.side = $scope.side == 'back' ? 'front' : 'back';
          }

    $http({method: 'GET', url: 'res/Quiz/quiz1.json'}).then(function successCallback(response) {
            console.log('sucess');
        }, function errorCallback(response){
            console.log('error', response);
        });


    $scope.toggleThree = function(){
                  $scope.three = toggle($scope.three);
    }

    $scope.length_quizzes = Object.keys($scope.quizzes).length;


    $scope.excludeQuestion = function (index) {
        $scope.quizzes[index].exclude= true;
    }
    $scope.incrementOne = function () {
            $scope.disableStatus = false    ;
            $scope.selection = [];
            $scope.three = "front";
            $scope.count = $scope.count + 1;
        }

    $scope.toggleSelection = function toggleSelection(fruitName, index) {
        var idx = $scope.selection.indexOf(fruitName);
        if($scope.quizzes[index].answer.indexOf(fruitName) == -1){
            console.log("inside");
            $scope.backColor = "red";
        }
        // is currently selected
        if (idx > -1) {
            $scope.selection.splice(idx, 1);
        }

        // is newly selected
        else {
            $scope.selection.push(fruitName);
        }
    };



    $scope.decrementOne = function () {
        $scope.disableStatus = false;
        $scope.count = $scope.count - 1;
           console.log($scope.count);
        }
    
        $scope.evaluationAnswers = function(index){
            $scope.three = toggle($scope.three);
            console.log($scope.selection === $scope.quizzes[index].answer);
            $scope.resultShow = true;
        }
}]);

app.provider("flipConfig", function() {

    var cssString =
        "<style> \
        .{{flip}} {float: left; overflow: hidden; width: {{width}}; height: {{height}}; }\
        .{{flip}}Panel { \
        position: absolute; \
        width: {{width}}; height: {{height}}; \
        -webkit-backface-visibility: hidden; \
        backface-visibility: hidden; \
        transition: -webkit-transform {{tempo}}; \
        transition: transform {{tempo}}; \
        -webkit-transform: perspective( 800px ) rotateY( 0deg ); \
        transform: perspective( 800px ) rotateY( 0deg ); \
        } \
        .{{flip}}HideBack { \
        -webkit-transform:  perspective(800px) rotateY( 180deg ); \
        transform:  perspective(800px) rotateY( 180deg ); \
        } \
        .{{flip}}HideFront { \
        -webkit-transform:  perspective(800px) rotateY( -180deg ); \
        transform:  perspective(800px) rotateY( -180deg ); \
        } \
        </style> \
        ";

    var _tempo = "0.5s";
    var _width = "100px";
    var _height = "100px";

    var _flipClassName = "flip";

    var _flipsOnClick = true;

    this.setTempo = function(tempo) {
        _tempo = tempo;
    };

    this.setDim = function(dim) {
        _width = dim.width;
        _height = dim.height;
    }

    this.setClassName = function(className) {
        _flipClassName = className;
    };

    this.flipsOnClick = function(bool){
        _flipsOnClick = bool;
    }

    this.$get = function($interpolate) {

        var interCss = $interpolate(cssString);
        var config = {
            width: _width,
            height: _height,
            tempo: _tempo,
            flip: _flipClassName
        };

        document.head.insertAdjacentHTML("beforeend", interCss(config));

        return {
            classNames: {
                base: _flipClassName,
                panel: _flipClassName + "Panel",
                hideFront: _flipClassName + "HideFront",
                hideBack: _flipClassName + "HideBack"
            },
            flipsOnClick : _flipsOnClick
        }
    };
});

app.config(function(flipConfigProvider){
    flipConfigProvider.setClassName("flipperCosmic");
    flipConfigProvider.setTempo("3s");
    flipConfigProvider.setDim({width:"300px", height:"300px"});
    flipConfigProvider.flipsOnClick(false);
});

app.directive("flip", function(flipConfig) {

    function setDim(element, width, height) {
        if (width) {
            element.style.width = width;
        }
        if (height) {
            element.style.height = height;
        }
    }

    return {
        restrict: "E",
        controller: function($scope, $element, $attrs) {

            $attrs.$observe("flipShow", function(newValue){
                console.log(newValue);
                if(newValue === "front"){
                    showFront();
                }
                else if(newValue === "back"){
                    showBack();
                }
                else {
                    console.warn("FLIP: Unknown side.");
                }
            });

            var self = this;
            self.front = null,
                self.back = null;


            function showFront() {
                self.front.removeClass(flipConfig.classNames.hideFront);
                self.back.addClass(flipConfig.classNames.hideBack);
            }

            function showBack() {
                self.back.removeClass(flipConfig.classNames.hideBack);
                self.front.addClass(flipConfig.classNames.hideFront);
            }

            self.init = function() {
                self.front.addClass(flipConfig.classNames.panel);
                self.back.addClass(flipConfig.classNames.panel);

                showFront();

                if(flipConfig.flipsOnClick){
                    self.front.on("click", showBack);
                    self.back.on("click", showFront);
                }
            }

        },

        link: function(scope, element, attrs, ctrl) {

            var width = attrs.flipWidth,
                height = attrs.flipHeight;

            element.addClass(flipConfig.classNames.base);

            if (ctrl.front && ctrl.back) {
                [element, ctrl.front, ctrl.back].forEach(function(el) {
                    setDim(el[0], width, height);
                });
                ctrl.init();
            } else {
                console.error("FLIP: 2 panels required.");
            }
        }
    }

});

app.directive("flipPanel", function() {
    return {
        restrict: "E",
        require: "^flip",
        link: function(scope, element, attrs, flipCtr) {
            if (!flipCtr.front) {
                flipCtr.front = element;
            } else if (!flipCtr.back) {
                flipCtr.back = element;
            } else {
                console.error("FLIP: Too many panels.");
            }
        }
    }
});