<!DOCTYPE html>
<html ng-app="quiz">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="css/my.css"/>
    </head>
    <body ng-controller="QuizController as QuizCtrl" >
        <div class="header">
            <!--rozdz II 15-18-->
            <h4>ROZDZIAŁ II</h4>
            <h3>JESTEM ŚWIADOMY, WIĘC DZIAŁAM</h3>
        </div>
        <div class="header-bottom">
        </div>
        <div class="container" style="width: 950px; margin: auto;">
            <!--start view-->
            <div ng-if="view == 1" id="start">
                <h3>Do każdego pytania podane są trzy odpowiedzi.<br>
                    Tylko jedna jest poprawna.
                </h3>
                <div class="row">
                    <img class="img-powodzenia" src="img/powodzenia.png"/>
                </div>
                <div class="row">
                    <button ng-click="QuizCtrl.nextView()" class="btn btn-primary pull-right">
    Rozpocznij <i class="fa fa-chevron-circle-right"></i></button>
                </div>
                <div class="row" style="margin-top: 20px; margin-bottom: 20px;">
                    <div class="col-md-4">
                        <img src="img/Logotyp_MS.png" style="width:315px;">
                    </div>
                    <div class="col-md-2">
                        <img src="img/Norway_Grants.jpg" style="height: 79px;">
                    </div>
                    <div class="col-md-6">
                        <h4>Projekt „Edukacja szkolna przeciwko wykluczeniu prawnemu” finansowany ze środków funduszy norweskich i środków krajowych. Publikacja bezpłatna.</h4>
                    </div>
                </div>
            </div>

            <!--quiz view-->
            <div ng-if="view == 2" id="quiz">        

                <div class="row">
                    <h4 class="pull-right" style="color:#2b3990">Punkty: {{score}}/{{questionNumber}}</h4>
                </div>
                <div class="row question-lbl">
                    <div class="col-md-2">
                        <img class="question-img" src="img/znak_zapytania.png"/>
                    </div>
                    <div class="col-md-10">
                        <h3>{{currentQuestionId + 1}}. {{currentQuestion.question}}</h3>
                    </div>
                </div>
                <div ng-repeat="option in currentQuestion.options">
                    <div class="row">
                        <div class="col-md-2">
                            <img ng-if="($index == currentQuestion.answer) && (answerChecked)" src="img/paragraf.png" class="paragraf-img"/>
                        </div>
                        <label class="col-md-10 option">
                            <input type="radio" name="project"
                                   value="{{$index}}"
                                   ng-model="$parent.$parent.answerId" ng-disabled="$parent.$parent.answerChecked"/>
                            {{currentQuestion.options[$index]}}
                        </label>
                    </div>
                </div>
                <div class="row" style="height: 80px; margin-top: -20px; padding-left: 15px;">
                    <div ng-if="(isCorrect && answerChecked)"><h3 class="good">Poprawna odpowiedź!</h3></div>
                    <div ng-if="(!isCorrect && answerChecked)"><h3 class="bad">Błędna odpowiedź!</h3></div>
                </div>
                <button ng-if="answerChecked" ng-click="QuizCtrl.nextQuestion()" class="btn btn-primary">Następne <i class="fa fa-chevron-circle-right"></i></button>

                <button ng-if="!answerChecked" ng-click="QuizCtrl.checkAnswer()" class="btn btn-primary">Sprawdź odpowiedź <i class="fa fa-check-square-o"></i>
</button>
            </div>

            <!--score view-->
            <div ng-if="view == 3" id="score">
                <div class="row">
                    <h3 style="color: #2b3990;">Wynik: {{score}}/{{questionNumber}}</h3>
                </div>
                <!--najlepiej-->
                <div ng-if="percentageTotalScore >= 0.75">
                    <img src="img/najlepiej.png" class="wynik-img"/>
                </div>
                <!--dobrze-->
                <div ng-if="(percentageTotalScore < 0.75) && (percentageTotalScore >= 0.60)">
                    <img src="img/dobrze.png" class="wynik-img"/>
                </div>
                <!--średnio-->
                <div ng-if="(percentageTotalScore < 0.60) && (percentageTotalScore >= 0.40)">
                    <img src="img/srednio.png" class="wynik-img"/>
                </div>
                <!--najgorzej-->
                <div ng-if="(percentageTotalScore < 0.40)">
                    <img src="img/najgorzej.png" class="wynik-img"/>
                </div>  
            </div>
            <!--test values
            test values:<br>
            {{view}}<br>
             {{answerId}} = {{currentQuestion.answer}}
            -->
        </div>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
        <script type="text/javascript" src="js/engineer.js"></script>
        <script type="text/javascript" src="js/dialogs.js"></script>
        <script type="text/javascript" src="js/ui-bootstrap.js"></script>
    </body>
</html>