3
I have this app in Angularjs is a Quiz only when I put it online, I go up to the server, the application does not appear. Can anyone 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>
<script src="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>
Does this server have a firewall or proxy? Note that you are loading the angular and Jquery by CDN.
– DiegoAugusto