App quiz angularjs does not appear when the page is online

3

I have this app in AngularJS is a Quiz only that when I put it online, I upload to the server, the application does not appear. Can someone help me? Thank you.

HTML

<!DOCTYPE html>
<html ng-app="quizApp">
<head>
  <meta charset="utf-8" />
  <title>QuizApp</title>
  <link rel="stylesheet" href="style.css" />
  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
  <script src="app.js"></script>
</head>

<body>
  <div class="container">
    <h1 class="title">QuizApp</h1>
    <quiz/>
  </div>
</body>

</html>

App.js

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

app.directive('quiz', function(quizFactory) {
    return {
        restrict: 'AE',
        scope: {},
        templateUrl: 'template.html',
        link: function(scope, elem, attrs) {
            scope.start = function() {
                scope.id = 0;
                scope.quizOver = false;
                scope.inProgress = true;
                scope.getQuestion();
            };

            scope.reset = function() {
                scope.inProgress = false;
                scope.score = 0;
            }

            scope.getQuestion = function() {
                var q = quizFactory.getQuestion(scope.id);
                if(q) {
                    scope.question = q.question;
                    scope.options = q.options;
                    scope.answer = q.answer;
                    scope.answerMode = true;
                } else {
                    scope.quizOver = true;
                }
            };

            scope.checkAnswer = function() {
                if(!$('input[name=answer]:checked').length) return;

                var ans = $('input[name=answer]:checked').val();

                if(ans == scope.options[scope.answer]) {
                    scope.score++;
                    scope.correctAns = true;
                } else {
                    scope.correctAns = false;
                }

                scope.answerMode = false;
            };

            scope.nextQuestion = function() {
                scope.id++;
                scope.getQuestion();
            }

            scope.reset();
        }
    }
});

app.factory('quizFactory', function() {
    var questions = [
        {
            question: "Which is the largest country in the world by population?",
            options: ["India", "USA", "China", "Russia"],
            answer: 2
        },
        {
            question: "When did the second world war end?",
            options: ["1945", "1939", "1944", "1942"],
            answer: 0
        },
        {
            question: "Which was the first country to issue paper currency?",
            options: ["USA", "France", "Italy", "China"],
            answer: 3
        },
        {
            question: "Which city hosted the 1996 Summer Olympics?",
            options: ["Atlanta", "Sydney", "Athens", "Beijing"],
            answer: 0
        },
        {   
            question: "Who invented telephone?",
            options: ["Albert Einstein", "Alexander Graham Bell", "Isaac Newton", "Marie Curie"],
            answer: 1
        }
    ];

    return {
        getQuestion: function(id) {
            if(id < questions.length) {
                return questions[id];
            } else {
                return false;
            }
        }
    };
});

Template

<div class="quiz-area" ng-show="inProgress">
    <div ng-show="!quizOver">
        <h2 id="question">{{question}}</h2>
        <ul id="options">
            <li ng-repeat="option in options">
                <label>
                    <input type="radio" name="answer" value="{{option}}">
                    {{option}}
                </label>
            </li>
        </ul>
        <button ng-click="checkAnswer()" ng-show="answerMode">Submit</button>

        <div ng-show="!answerMode">
            <button ng-click="nextQuestion()" class="next-question">Next</button>
            <span ng-show="correctAns">That is correct!</span>
            <span ng-show="!correctAns">Sorry, that is an incorrect answer.</span>
        </div>
    </div>

    <div ng-show="quizOver">
        <h2>Quiz is over</h2>
        <button ng-click="reset()">Play again</button>
    </div>

    <div id="score">
        Score: {{score}}
    </div>
</div>

<div class="intro" ng-show="!inProgress">
    <p>Welcome to the QuizApp</p>
    <button id="startQuiz" ng-click="start()">Start the Quiz</button>
</div>
    
asked by anonymous 07.03.2016 / 14:00

1 answer

0

It makes no difference if you are using CDN. The first question is: does your app work locally? The second question is: what kind of server? If it's something like Heroku, you have to have a frontend server because Heroku will not serve only HTML pages. For example, you can use a simple server that serves only static pages using Node.js (Express) or another language such as Ruby or Python.

    
11.07.2016 / 06:49