{"id":21231565,"url":"https://github.com/piyalidas10/quiz-simple","last_synced_at":"2026-05-08T10:35:22.372Z","repository":{"id":120846010,"uuid":"99427361","full_name":"piyalidas10/Quiz-Simple","owner":"piyalidas10","description":"Simple Quiz using AngularJS","archived":false,"fork":false,"pushed_at":"2017-08-05T14:29:51.000Z","size":9,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-22T15:52:02.344Z","etag":null,"topics":["angular","angularjs","directive","json","mysql","mysql-database","online-quiz","quiz"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/piyalidas10.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-08-05T14:23:26.000Z","updated_at":"2022-03-20T17:07:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"d0a42674-b646-4464-b35d-1762293147c8","html_url":"https://github.com/piyalidas10/Quiz-Simple","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/piyalidas10/Quiz-Simple","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FQuiz-Simple","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FQuiz-Simple/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FQuiz-Simple/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FQuiz-Simple/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/piyalidas10","download_url":"https://codeload.github.com/piyalidas10/Quiz-Simple/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FQuiz-Simple/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32776904,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"ssl_error","status_checked_at":"2026-05-08T08:22:45.650Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angularjs","directive","json","mysql","mysql-database","online-quiz","quiz"],"created_at":"2024-11-20T23:47:19.532Z","updated_at":"2026-05-08T10:35:22.364Z","avatar_url":"https://github.com/piyalidas10.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Quiz-Simple\nSimple Quiz using AngularJS\n\nhe 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.\n\n    \u003c!doctype html\u003e\n    \u003chtml ng-app=\"quizOnline\"\u003e\n    \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003ctitle\u003eOnline quiz using angularjs\u003c/title\u003e\n    \u003clink href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e\n    \u003clink href=\"style.css\" rel=\"stylesheet\"\u003e\n    \u003cscript src=\"http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"app.js\"\u003e\u003c/script\u003e\n    \u003c/head\u003e\n\n    \u003cbody\u003e\n\n      \u003cnav class=\"navbar navbar-default\"\u003e\n          \u003cdiv class=\"container\"\u003e\n            \u003cdiv class=\"navbar-header\"\u003e\n              \u003ca class=\"navbar-brand\" href=\"#\"\u003eOnline Quiz\u003c/a\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/nav\u003e\n\n      \u003cdiv ng-view\u003e\u003c/div\u003e\t\n\n\n    \u003c/body\u003e\n    \u003c/html\u003e\n    \nTo make your applications ready for routing, you must include the AngularJS Route module:\n\n    \u003cscriptsrc=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js\"\u003e\u003c/script\u003e\n\nThen you must add the ngRoute as a dependency in the application module::\n\n    var app = angular.module(\"myApp\", [\"ngRoute\"]);\n\nNow your application has access to the route module, which provides the $routeProvider.\n\nUse the $routeProvider to configure different routes in your application:\n\n    var app =angular.module('quizOnline',['ngRoute','angular.filter']);\n\n    app.config([ '$routeProvider', '$locationProvider',\n        function($routeProvider, $locationProvider) {   \n          $routeProvider\n          .when('/:postName',{\n              templateUrl : 'views/fullblogSec.html',\n              controller: 'blogController'\n          })\n          .when('/',{\n              templateUrl : 'views/home.html'\n          })\n          .otherwise({\n            redirectTo : '/'\n          });\n          //$locationProvider.html5Mode(true); \n        } \n    ]);\n\nApplications can only have one ng-view directive, and this will be the placeholder for all views provided by the route.\n\nIn app.js we defined a custom directive called quizbox. It looks like below:\n\n    app.directive('quizbox',function(){\n        return{\n          restrict : 'E',\n          templateUrl : 'views/quizbox.html'\n        }\n    });\n    \nBy adding a restrict property with the value \"E\", the directive can only be invoked by Element name:\n\n\u003cquizbox\u003e\u003c/quizbox\u003e\nThe markup in home.html\n\n    \u003cdiv class=\"container\" ng-controller=\"mainCtrl\"\u003e\n\n        \u003cdiv class=\"col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12\"\u003e\n          \u003cdiv class=\"quizContent clearfix\"\u003e\n                \u003cform\u003e\n                    \u003cquizbox\u003e\u003c/quizbox\u003e\n\n                    \u003cdiv class=\"btn-block text-center\"\u003e\n                        \u003cp style=\"color:#FFF\"\u003e{{ans}}\u003c/p\u003e\n                        \u003cbutton class=\"btn btn-default\" ng-click=\"showResult(ans)\"\u003eSubmit\u003c/button\u003e\n                    \u003c/div\u003e\n\n                    \u003cdiv class=\"col-xs-12 text-center showResult\"\u003e\n                        \u003ch1\u003eyou got {{ correctCount }} out of {{questions_count.length}} right\u003c/h1\u003e\n                    \u003c/div\u003e\n                \u003c/form\u003e\t\n             \u003c/div\u003e   \n         \u003c/div\u003e\n\n    \u003c/div\u003e\nNow we need some methods to start a quiz, get a question and check the answer. \n\nThe markup in quizbox.html\n\n\t\u003cdiv class=\"quizBox col-xs-12\" ng-repeat=\"(key,value) in questions | groupBy: 'question_id'\"\u003e\n\t\t\t\t\u003ch4\u003e\u003cspan\u003e{{key}}\u003c/span\u003e\n\t\t\t\t \t\u003c!--\u003cdiv ng-repeat=\"qs in value\"\u003e{{qs.question}}\u003c/div\u003e--\u003e\n\t\t\t\t \t\u003cdiv ng-repeat=\"(key1,value1) in value | groupBy: 'question'\"\u003e{{key1}}\u003c/div\u003e\n\t\t\t\t\u003c/h4\u003e\n\t\t\t\n\t\t\t\u003cdiv class=\"quizOptions col-xs-12\"\u003e\n\t\t\t\n\n\t\t\t\t\t\u003cdiv class=\"options\" ng-repeat=\"option in value\"\u003e\n\t\t\t\t\t\t\u003clabel for=\"ans{{option.choice_id}}\"\u003e\n\t\t\t\t\t\t\t\u003cinput type=\"radio\" name=\"ques{{option.question_id}}\" id=\"{{option.choice_id}}\" value=\"{{option.choice_id}}\" ng-model=\"ans[option.question_id]\"\u003e{{option.choice}}\n\t\t\t\t\t\t\u003c/label\u003e\n\t\t\t\t\t\u003c/div\u003e\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\u003c/div\u003e\t\n\t\t\t\n\t\t\u003c/div\u003e\n    \nThe showResult(ans) method needs to send the selected options by user.  'ans' module holds the all selected options.\n\nThe code in controller:\n\n      app.controller('mainCtrl',function($scope, $http){\n\n      //full questions with multiple options\n      $http({\n            method:'GET', \n            url:'JSON/questions.php'\n          })\n          .success(function(response){\n            $scope.questions = response;\n            console.log($scope.questions);\n          });\n\n      //view from questions\n      $http({\n            method:'GET', \n            url:'JSON/questions_count.php'\n          })\n          .success(function(response){\n            $scope.questions_count = response;\n            console.log($scope.questions_count);\n          });\n\n      //pick correct answers from question_choices\n      $http({\n            method:'GET', \n            url:'JSON/correctans.php'\n          })\n          .success(function(response){\n            $scope.correct_ans = response;\n            console.log($scope.correct_ans);\n          });\n\n      $scope.ans = {};\n      $scope.answers = [];\n        $scope.correctCount = 0;\n\n      $scope.showResult = function(ans) {\n        $scope.correctCount = 0;\n          var qLength = $scope.questions_count.length;\n\n        for(var i=1;i\u003c=qLength;i++){\n          $scope.answers.push(ans[i]);\n        }\n        console.log($scope.answers);\n\n        for(var j=0;j\u003c$scope.answers.length;j++){\n          var userchoice = $scope.correct_ans[j].choice_id;\n          if ($scope.answers[j] === userchoice)\n            {\n              $scope.correctCount++;\n            }\n        }\n\n        console.log($scope.correctCount);\n\n\n      }\t\n        });\n    \n    \nI push all selected ans by user in $scope.ans array.  At first have counted the questions length using $scope.questions_count.length.\n\n    for(var i=1;i\u003c=qLength;i++){\n          $scope.answers.push(ans[i]);\n    }\n        \n$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.\n\n    for(var j=0;j\u003c$scope.answers.length;j++){\n          var userchoice = $scope.correct_ans[j].choice_id;\n          if ($scope.answers[j] === userchoice)\n            {\n              $scope.correctCount++;\n            }\n        }\n        \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiyalidas10%2Fquiz-simple","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpiyalidas10%2Fquiz-simple","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiyalidas10%2Fquiz-simple/lists"}