I have been diligently working on developing a question bank and have successfully coded most of the elements. However, I would like to enhance the user experience by implementing browser history for easy navigation through the questions.
If you want to check out the basic setup on Plunker, click here: http://embed.plnkr.co/1F64dDrxVYfD8ScVGgac/preview
Currently, the page loads under /quiz, but my goal is to dynamically change $scope.currentQ based on the URL search parameter:
/quiz?q=1
I have experimented with using $routeParams and $location as possible solutions, but have not been able to achieve the desired outcome. Any assistance would be greatly appreciated!
// Insert your code here
(function() {
'use strict';
var app = angular.module('questionbank', []);
//////////////
//Directives//
//////////////
app.controller('questionbankController', ['$scope', function($scope) {
$scope.currentQ = 0;
$scope.guess = [];
$scope.SBAchoices = ['a', 'b', 'c', 'd', 'e'];
$scope.questions = questions;
$scope.prevQ = function() {
if ($scope.currentQ !== 0) {
$scope.currentQ--;
}
};
$scope.nextQ = function() {
if ($scope.currentQ < $scope.questions.length - 1) {
$scope.currentQ++;
}
};
$scope.submit = function(guess) {
};
}]);
var questions = [{
questionid: 1,
question: "What year is it?",
choices: [
"2011",
"2012",
"2013",
"2014",
"2015"
],
answer: "2015",
reason: "Because it is not yet 2016!",
category: "test"
}, {
questionid: 2,
question: "Which medical school is the best?",
choices: [
"Kings",
"Imperial",
"St. George's",
"Barts",
"UCL"
],
answer: "UCL",
reason: "Creators are from UCL, do I need to say any more?",
category: "test2"
}];
})();