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],
    1. public ActionResult Quiz()  
    2. {  
    3.     return View();  
    4. }  
    5. public JsonResult QuizQuestionAns()  
    6. {  
    7.     List < Questionsoptions > obj = new List < Questionsoptions > ();  
    8.     obj.Add(new Questionsoptions  
    9.     {  
    10.         Question = "What is 12+20?", OpA = "21", OpB = "32", OpC = "41", Ans = "B"  
    11.     });  
    12.     obj.Add(new Questionsoptions  
    13.     {  
    14.         Question = "What is 12+12?", OpA = "10", OpB = "12", OpC = "24", Ans = "C"  
    15.     });  
    16.     obj.Add(new Questionsoptions  
    17.     {  
    18.         Question = "What is 12+24?", OpA = "36", OpB = "24", OpC = "12", Ans = "A"  
    19.     });  
    20.     return Json(obj, JsonRequestBehavior.AllowGet);  
    21. }  
  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],
    1. <script src="~/Scripts/angular.min.js"></script>  
    2. <script src="~/Scripts/Javascripts/Quiz.js"></script>  
    3. <div ng-app="Quizapp">  
    4.     <div ng-controller="QuizCtrl"//Directive  
    5.         <question-container ng-show="questionsvisible"></question-container>  
    6.         <correct-container ng-show="!notvisible"></correct-container>  
    7.     </div>  
    8. </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
    1. var Myapp = angular.module('Quizapp', []);  
    2. Myapp.controller('QuizCtrl', ['$scope''$http''getQuestion', function (scope, http, getQuestion)  
    3. {  
    4.     scope.QuestionAnswer = []  
    5.     scope.count = 0;  
    6.     scope.correctAns = 0;  
    7.     scope.checkedCount = 0;  
    8.     scope.notvisible = true;  
    9.     scope.questionsvisible = true;  
    10.     //get the Question and answers from the controller and pass it to array  
    11.     scope.rbshow = false;  
    12.     getQuestion.result().success(function (response)  
    13.     {  
    14.         for (var i = 0; i < response.length; i++)  
    15.         {  
    16.             scope.QuestionAnswer.push(response[i]);  
    17.         }  
    18.     });  
    19.     scope.nextQuestion = function ()  
    20.     {  
    21.         scope.rbshow = true;  
    22.         var nextQuestion = scope.count; //To get next question  
    23.         var answer = "";  
    24.         var choicesArr = document.getElementsByName('choices');  
    25.         for (var i = 0; i < choicesArr.length; i++)  
    26.         {  
    27.             if (choicesArr[i].checked)  
    28.             {  
    29.                 scope.checkedCount = scope.checkedCount + 1;  
    30.                 answer = scope.QuestionAnswer[nextQuestion - 1].Ans;  
    31.                 if (choicesArr[i].value == answer)  
    32.                 {  
    33.                     scope.correctAns = scope.correctAns + 1;  
    34.                 }  
    35.                 choicesArr[i].checked = false;  
    36.             }  
    37.         }  
    38.         if (scope.checkedCount == scope.QuestionAnswer.length)  
    39.         {  
    40.             scope.notvisible = false;  
    41.             scope.questionsvisible = false;  
    42.         }  
    43.         else if (scope.QuestionAnswer.length >= scope.count)  
    44.         {  
    45.             scope.QuestionAnswer.Question = scope.QuestionAnswer[nextQuestion].Question;  
    46.             scope.QuestionAnswer.OptionA = scope.QuestionAnswer[nextQuestion].OpA;  
    47.             scope.QuestionAnswer.OptionB = scope.QuestionAnswer[nextQuestion].OpB;  
    48.             scope.QuestionAnswer.OptionC = scope.QuestionAnswer[nextQuestion].OpC;  
    49.             scope.count = scope.count + 1;  
    50.         }  
    51.     }  
    52. }]);  
    53. //http get to retrive the questions from Home Controller QuizQuestionAns Action //Methood  
    54. Myapp.service('getQuestion', function ($http)  
    55. {  
    56.     this.result = function ()  
    57.     {  
    58.         var ans = $http.get('Home/QuizQuestionAns');  
    59.         return ans;  
    60.     }  
    61. });  
    62. //Directive with radio button to select the option  
    63. //Submit button to go to next question  
    64. //This directive displays the question along with the options to select  
    65. Myapp.directive("questionContainer", function ()  
    66. {  
    67.     return {  
    68.         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>',  
    69.         restrict: "E"  
    70.     }  
    71. });  
    72. irective is shown at last once the quiz is completed with the total number of //correct answers  
    73. Myapp.directive("correctContainer", function ()  
    74. {  
    75.     return   
    76.     {  
    77.         template: '<div>Total Correct Answer {{correctAns}}<br/>',  
    78.         restrict: "E"  
    79.     }  
    80. }  
Ebook Download
View all
Learn
View all