https://github.com/piyalidas10/quiz-simple

Simple Quiz using AngularJS
https://github.com/piyalidas10/quiz-simple

angular angularjs directive json mysql mysql-database online-quiz quiz

Last synced: 24 days ago
JSON representation

Simple Quiz using AngularJS

• Host: GitHub
• URL: https://github.com/piyalidas10/quiz-simple
• Owner: piyalidas10
• Created: 2017-08-05T14:23:26.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-08-05T14:29:51.000Z (almost 9 years ago)
• Last Synced: 2025-06-22T15:52:02.344Z (11 months ago)
• Topics: angular, angularjs, directive, json, mysql, mysql-database, online-quiz, quiz
• Language: HTML
• Size: 8.79 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

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

    

    

    

    

    Online quiz using angularjs

    

    

    

    

    

    

    

    

      

          


            


              Online Quiz

            

          

        


      
	


    

    

    

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

    

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

    


        


          


                

                    


                    


                        
{{ans}}

                        Submit

                    


                    


                        
you got {{ correctCount }} out of {{questions_count.length}} right

                    

                	

             
   

         


    

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


The markup in quizbox.html

	


				


{{key}}

				 	

				 	
{{key1}}

				

			

			


			


					


						

							{{option.choice}}

						

					
					

				

				

			
	

			

		

    

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++;

            }

        }