In my AngularJS quiz application, I have two types of questions:
Simple - where you need to choose 1 or 2 choices to answer the question and proceed to the next question.
Range Slider - where you need to drag a range slider. When the user stops dragging, I validate the answers and move on to the next question.
I display the current question using ng-if (current $index = $scope.currentQuestion) and increment it by one every time a question is answered.
While everything works smoothly for simple questions, there seems to be a 1-2 second delay in displaying the next question after a Range Slider question.
To see the next question, I need to click somewhere on the page again.
Could someone please explain why the update is not instant like the simple questions and what causes this delay?
.controller('MainCtrl', function($scope) {
$scope.currentQuestion = 0;
$scope.isCurrentQuestion = function(index) {
return $scope.currentQuestion === index;
};
$scope.$on('question:answered', function(event, data) {
$scope.currentQuestion = data.current;
});
$scope.questions = [{
'title': 'test #1',
'type': 1,
'choices': ['Choice #1', 'Choice #2', 'Choice #3', 'Choice #4'],
// other stuff
}, {
'title': 'test #2',
'type': 2
// other stuff
}, {
'title': 'test #3',
'type': 2
// other stuff
}];
})
http://plnkr.co/edit/EiymOBRcpxoDQQlnHjqV?p=preview
By the way, I'm utilizing https://github.com/angular-ui/ui-slider directive for the range slider.