I've been working on an AngularJS application that functions as a quiz by displaying pictures and prompting users to select the correct answer by clicking a button. The app is designed to store the user's answers in an object.
Everything seems to be running smoothly, except for an issue with the callback function not binding the value at times.
Specifically, when "Yes" is clicked, it should update my
img: {{questions[questionId]['imgUrl']}}$scope.yes = function() {
//instantiate timer
//save data
$scope.questions[$scope.questionId]['userAnswer'] = 'a';
//move to next question
$scope.questionId++;
startTimer('progressbar-timer');
};
There seems to be an issue with the callback function timeout() which is expected to perform the same task but fails to work properly. Although I receive the correct value in my console log, the
img: {{questions[questionId]['imgUrl']}}Is there a need for extra binding here?
<!DOCTYPE html>
<html lang="en-US">
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<!-- compiled CSS -->
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/docs/assets/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/docs/assets/css/bootstrap-responsive.css" />
<!-- compiled JavaScript -->
<script type="text/javascript" src="dist/assets/js/angular-timer-bower.js"></script>
<script type="text/javascript" src="dist/assets/js/angular-timer-all.min.js"></script>
<body>
<div ng-app="ajokoeApp" ng-controller="testCtrl">
<br>
question: {{questions[questionId]['question']}}
img: {{questions[questionId]['imgUrl']}}
<button class="btn" ng-click="yes()">Yes</button>
<button class="btn" ng-click="no()">No</button>
<button class="btn" ng-click="notSure()">Not Sure</button>
<section id="progressbar-timer">
<timer id="countdown" interval="1000" countdown="5" finish-callback="timeout()">
Remaining time : {{countdown}} second{{secondsS}} ({{progressBar}}%). Activity? {{displayProgressActive}} {{kysymys}}
<div class="progress progress-striped {{displayProgressActive}}" style="height: 30px;">
<div class="bar" style="min-width: 2em; height: 30px; width: {{progressBar}}%;">
{{countdown}}
</div>
</div>
</timer>
</section>
<h3 class="counter">
<timer countdown="5" interval="1000" finish-callback="timeout.finished()">{{seconds}} second{{secondsS}} </timer>
</h3>
Timer: <span class="timer-status">{{timeout.status}}</span>
</div>
<script>
angular.module('ajokoeApp', ['timer']).controller('testCtrl', function($scope) {
$scope.questions = [
{id: 0, question:'Can i drive straight?',answer:'a',userAnswer:'',imgUrl:'1.jpg'},
{id: 1, question:'May i turn left?',answer:'b',userAnswer:'',imgUrl:'2.jpg'},
{id: 2, question:'MAy i turn right?',answer:'a',userAnswer:'', imgUrl:'3.jpg'}
];
//functions
$scope.questionId = 0;
$scope.yes = function() {
//instantiate timer
//save data
$scope.questions[$scope.questionId]['userAnswer'] = 'a';
//move to next question
$scope.questionId++;
startTimer('progressbar-timer');
};
$scope.no = function() {
$scope.questions[$scope.questionId]['userAnswer'] = 'b';
$scope.questionId++;
startTimer('progressbar-timer');
};
$scope.notSure = function() {
$scope.questions[$scope.questionId]['userAnswer'] = 'c';
$scope.questionId++;
startTimer('progressbar-timer');
};
$scope.timeout = function() {
startTimer('progressbar-timer');
$scope.questions[$scope.questionId]['userAnswer'] = 'c';
$scope.questionId++;
startTimer('progressbar-timer');
};
//Debug
console.log($scope.questions);
});
</script>
</body>
</html>