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. }