A Simple Quiz Application using MVC, AngularJS without database,
- Create a MVC project,
- 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);
- }
- 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">
- <question-container ng-show="questionsvisible"></question-container>
- <correct-container ng-show="!notvisible"></correct-container>
- </div>
- </div>
- 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,
- Directive
- Service
- http get
- .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;
-
- 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;
- 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;
- }
- }
- }]);
-
- Myapp.service('getQuestion', function ($http)
- {
- this.result = function ()
- {
- var ans = $http.get('Home/QuizQuestionAns');
- return ans;
- }
- });
-
-
-
- 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
- Myapp.directive("correctContainer", function ()
- {
- return
- {
- template: '<div>Total Correct Answer {{correctAns}}<br/>',
- restrict: "E"
- }
- }