Quiz-Simple

Simple Quiz using AngularJS

he markup in index.html is straightforward. ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file.

<!doctype html>
<html ng-app="quizOnline">
<head>
<meta charset="utf-8">
<title>Online quiz using angularjs</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script>
<script src="app.js"></script>
</head>

<body>

  <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Online Quiz</a>
        </div>
      </div>
    </nav>

  <div ng-view></div>	


</body>
</html>

To make your applications ready for routing, you must include the AngularJS Route module:

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>

Then you must add the ngRoute as a dependency in the application module::

var app = angular.module("myApp", ["ngRoute"]);

Now your application has access to the route module, which provides the $routeProvider.

Use the $routeProvider to configure different routes in your application:

var app =angular.module('quizOnline',['ngRoute','angular.filter']);

app.config([ '$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {   
      $routeProvider
      .when('/:postName',{
          templateUrl : 'views/fullblogSec.html',
          controller: 'blogController'
      })
      .when('/',{
          templateUrl : 'views/home.html'
      })
      .otherwise({
        redirectTo : '/'
      });
      //$locationProvider.html5Mode(true); 
    } 
]);

Applications can only have one ng-view directive, and this will be the placeholder for all views provided by the route.

In app.js we defined a custom directive called quizbox. It looks like below:

app.directive('quizbox',function(){
    return{
      restrict : 'E',
      templateUrl : 'views/quizbox.html'
    }
});

By adding a restrict property with the value "E", the directive can only be invoked by Element name:

The markup in home.html

<div class="container" ng-controller="mainCtrl">

    <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12">
      <div class="quizContent clearfix">
            <form>
                <quizbox></quizbox>

                <div class="btn-block text-center">
                    <p style="color:#FFF">{{ans}}</p>
                    <button class="btn btn-default" ng-click="showResult(ans)">Submit</button>
                </div>

                <div class="col-xs-12 text-center showResult">
                    <h1>you got {{ correctCount }} out of {{questions_count.length}} right</h1>
                </div>
            </form>	
         </div>   
     </div>

</div>

Now we need some methods to start a quiz, get a question and check the answer.

The markup in quizbox.html

<div class="quizBox col-xs-12" ng-repeat="(key,value) in questions | groupBy: 'question_id'">
			<h4><span>{{key}}</span>
			 	<!--<div ng-repeat="qs in value">{{qs.question}}</div>-->
			 	<div ng-repeat="(key1,value1) in value | groupBy: 'question'">{{key1}}</div>
			</h4>
		
		<div class="quizOptions col-xs-12">
		

				<div class="options" ng-repeat="option in value">
					<label for="ans{{option.choice_id}}">
						<input type="radio" name="ques{{option.question_id}}" id="{{option.choice_id}}" value="{{option.choice_id}}" ng-model="ans[option.question_id]">{{option.choice}}
					</label>
				</div>					
			
			
		</div>	
		
	</div>

The showResult(ans) method needs to send the selected options by user. 'ans' module holds the all selected options.

The code in controller:

  app.controller('mainCtrl',function($scope, $http){

  //full questions with multiple options
  $http({
        method:'GET', 
        url:'JSON/questions.php'
      })
      .success(function(response){
        $scope.questions = response;
        console.log($scope.questions);
      });

  //view from questions
  $http({
        method:'GET', 
        url:'JSON/questions_count.php'
      })
      .success(function(response){
        $scope.questions_count = response;
        console.log($scope.questions_count);
      });

  //pick correct answers from question_choices
  $http({
        method:'GET', 
        url:'JSON/correctans.php'
      })
      .success(function(response){
        $scope.correct_ans = response;
        console.log($scope.correct_ans);
      });

  $scope.ans = {};
  $scope.answers = [];
    $scope.correctCount = 0;

  $scope.showResult = function(ans) {
    $scope.correctCount = 0;
      var qLength = $scope.questions_count.length;

    for(var i=1;i<=qLength;i++){
      $scope.answers.push(ans[i]);
    }
    console.log($scope.answers);

    for(var j=0;j<$scope.answers.length;j++){
      var userchoice = $scope.correct_ans[j].choice_id;
      if ($scope.answers[j] === userchoice)
        {
          $scope.correctCount++;
        }
    }

    console.log($scope.correctCount);


  }	
    });

I push all selected ans by user in $scope.ans array. At first have counted the questions length using $scope.questions_count.length.

for(var i=1;i<=qLength;i++){
      $scope.answers.push(ans[i]);
}

$scope.correct_ans holds the correct answer's value. Using for loop, compare the correct answer from database with the user's choice. If selected choice is correct then $scope.correctCount increase value by 1. $scope.correctCount is act like counter.

for(var j=0;j<$scope.answers.length;j++){
      var userchoice = $scope.correct_ans[j].choice_id;
      if ($scope.answers[j] === userchoice)
        {
          $scope.correctCount++;
        }
    }

piyalidas10/Quiz-Simple

Quiz-Simple