AngularJS Quiz Application using MVC

In this blog you will learn how to create AngularJS Quiz Application using MVC.

A Simple Quiz Application using MVC, AngularJS without database,

1. Create a MVC project,
   
   
2. Add your quiz questions statically in controller [I my case its home controller Quiz action method],
   

   public ActionResult Quiz()
   {
       return View();
   }
   public JsonResult QuizQuestionAns()
   {
       List < Questionsoptions > obj = new List < Questionsoptions > ();
       obj.Add(new Questionsoptions
       {
           Question = "What is 12+20?", OpA = "21", OpB = "32", OpC = "41", Ans = "B"
       });
       obj.Add(new Questionsoptions
       {
           Question = "What is 12+12?", OpA = "10", OpB = "12", OpC = "24", Ans = "C"
       });
       obj.Add(new Questionsoptions
       {
           Question = "What is 12+24?", OpA = "36", OpB = "24", OpC = "12", Ans = "A"
       });
       return Json(obj, JsonRequestBehavior.AllowGet);
   }

3. Create a view and point it from Quiz action method.
   
   Drag and drop the AngularJS file and the script file where you will be writing all the quiz related code [in my case its Quiz.js],
   

   <script src="~/Scripts/angular.min.js"></script>
   <script src="~/Scripts/Javascripts/Quiz.js"></script>
   <div ng-app="Quizapp">
       <div ng-controller="QuizCtrl"> //Directive
           <question-container ng-show="questionsvisible"></question-container>
           <correct-container ng-show="!notvisible"></correct-container>
       </div>
   </div>

4. Quiz.js
   
   Brings the questions from controller and on click of next takes you to next question, Once all questions are covered displays the total correct answer,
   
   Topics covered,
   
   
   1. Directive
   2. Service
   3. http get
   4. .ng-show

   var Myapp = angular.module('Quizapp', []);
   Myapp.controller('QuizCtrl', ['$scope', '$http', 'getQuestion', function (scope, http, getQuestion)
   {
       scope.QuestionAnswer = []
       scope.count = 0;
       scope.correctAns = 0;
       scope.checkedCount = 0;
       scope.notvisible = true;
       scope.questionsvisible = true;
       //get the Question and answers from the controller and pass it to array
       scope.rbshow = false;
       getQuestion.result().success(function (response)
       {
           for (var i = 0; i < response.length; i++)
           {
               scope.QuestionAnswer.push(response[i]);
           }
       });
       scope.nextQuestion = function ()
       {
           scope.rbshow = true;
           var nextQuestion = scope.count; //To get next question
           var answer = "";
           var choicesArr = document.getElementsByName('choices');
           for (var i = 0; i < choicesArr.length; i++)
           {
               if (choicesArr[i].checked)
               {
                   scope.checkedCount = scope.checkedCount + 1;
                   answer = scope.QuestionAnswer[nextQuestion - 1].Ans;
                   if (choicesArr[i].value == answer)
                   {
                       scope.correctAns = scope.correctAns + 1;
                   }
                   choicesArr[i].checked = false;
               }
           }
           if (scope.checkedCount == scope.QuestionAnswer.length)
           {
               scope.notvisible = false;
               scope.questionsvisible = false;
           }
           else if (scope.QuestionAnswer.length >= scope.count)
           {
               scope.QuestionAnswer.Question = scope.QuestionAnswer[nextQuestion].Question;
               scope.QuestionAnswer.OptionA = scope.QuestionAnswer[nextQuestion].OpA;
               scope.QuestionAnswer.OptionB = scope.QuestionAnswer[nextQuestion].OpB;
               scope.QuestionAnswer.OptionC = scope.QuestionAnswer[nextQuestion].OpC;
               scope.count = scope.count + 1;
           }
       }
   }]);
   //http get to retrive the questions from Home Controller QuizQuestionAns Action //Methood
   Myapp.service('getQuestion', function ($http)
   {
       this.result = function ()
       {
           var ans = $http.get('Home/QuizQuestionAns');
           return ans;
       }
   });
   //Directive with radio button to select the option
   //Submit button to go to next question
   //This directive displays the question along with the options to select
   Myapp.directive("questionContainer", function ()
   {
       return {
           template: '<div>{{QuestionAnswer.Question}}<br/>' + '<input name="choices" name="choices" type="radio" value="A" ng-show="rbshow" />{{QuestionAnswer.OptionA}}<br/>' + '<input name="choices" name="choices" type="radio" value="B" ng-show="rbshow" />{{QuestionAnswer.OptionB}}<br/>' + '<input name="choices" name="choices" type="radio" value="C" ng-show="rbshow" />{{QuestionAnswer.OptionC}}</br>' + ' <input type="button" ng-click="nextQuestion()" value="Next"/>' + '</div>',
           restrict: "E"
       }
   });
   irective is shown at last once the quiz is completed with the total number of //correct answers
   Myapp.directive("correctContainer", function ()
   {
       return
       {
           template: '<div>Total Correct Answer {{correctAns}}<br/>',
           restrict: "E"
       }
   }