AngularJS QuizApp Framework on Github

September 10, 2014 by Ajitesh Kumar · 1 Comment
quizapp
This article describes the QuizApp web application written with AngularJS & Bootstrap that I open-sourced it today on GitHub. Here is the link for the QuizApp Project Homepage for you to get started. I have made use of this app in my other website, Free Online Tests and trust me, creating quizzes is so very smooth experience. The primary reason why I decided to make it open-source is the fact that there are several requests that I received in the past for posting the source code. However, as I created the app for my personal usage, I went ahead and modified it suitably for easy re-use. Please feel free to suggest further features and functionalities that you would like to see as part of this app. Also, would love to hear your feedback, if any. Sorry for the typos, if you found any.

 

Following are the key points described later in this article:

  • Current & Future Feature-Set
  • Why use QuizApp?
  • How to use QuizApp?
  • Key QuizApp Directives
  • Code Example for Sample QuizApp

 

Current & Future Feature-Set

Following is current feature-set:

  • Currently, you could create objective questions with multiple answer options but just one correct answer.
  • One could display scorecard anywhere on the page by making use of iscorecard directive.
  • One could write summary information about the quiz and present it anywhere on the page

Following is feature-set expected in near future:

  • Objective questions with multiple correct answers
  • Fill in the blanks
  • Questions complexity
  • Quiz complexity

 

Why Use QuizApp?

Following are some of the key reasons why I believe you would like to use QuizApp in your next web app:

  • Quick-to-create:It helps you create one or more quizzes on any webpage very quickly.
  • Focus on creating great quizzes:You write quiz like quiz with questions and answers separated by few identifiers and not get bothered with HTML.
  • Easy to upgrade:In case, you want to provide new features to all quizzes in feature, it makes it so easy to change/update the quizapp.js angular script and you are done.
  • Easy to update Look & Feel: As it is based on AngularJS templating, you could quickly change look and feel across all your quizzes by simply changing the templates.

 

How to Use QuizApp?

Its very simple to use the QuizApp. Follow the installation instructions mentioned on the Github page and you should be all set. Following are key steps:

  • Include Bootstrap CSS and AngularJS scripts (angular.min.js, angular-sanitize.min.js)
  • Instantiate your app with “QuizApp” dependency
  • Use iquestion directive to write one or more question and answers
  • Use iscorecard directive to display scores

 

Key QuizApp Directives

Following are key directives available with current release of QuizApp:

  • iquiz: Directive iquiz is used to present summary information about the quiz. It consists of “iquiz” as element tag name and “summary” as attribute. The code looks like following: 
    <iquiz summary=""></iquiz>
  • iquestion: Directive iquestion is used to list down question and answer options along with correct option. It consists of “iquestion” as element tag name and “text” as attribute. The code looks like following: 
    <iquestion text=""></iquestion>

    The question and answer options along with correct answer would be assigned to “text” attribute with following convention:

    • Question and answer options are seperated by identifier, “::”
    • Multiple answer options are seperated by identifier, “;”
    • Correct answer needs to be preceded by identifier, “__”
  • iscorecard: Directive iscorecard is used to display the scores and correct answers. It just consists of “iscorecard” as element tag name. The code looks like following: 
    <iscorecard></iscorecard>

 

Code Example for Sample QuizApp

Pay attention to some of the following:

  • Inclusion of key CSS and AngularJS scripts
  • Inclusion of QuizApp as dependency
<!DOCTYPE html>

<html ng-app="HelloQuiz">
<head>
  <title>Hello Quiz</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body class="container">
  <div>
    <iquiz summary="This is my first quiz"></iquiz>
  </div>
  <hr/>
  <table style="width:100%">
    <tr>
      <td style="width:70%;vertical-align:top">
        <iquestion text="In which year, did the first world war start?::1912;1913;__1914;1915"></iquestion>
        <iquestion text="In which year, did the second world war start?::1937;__1939;1941;1943"></iquestion>
      </td>
      <td>
        <iscorecard></iscorecard>
      </td>
    </tr>
  </table>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.min.js"></script>
  <script src="src/quizapp-v0.2.js"></script>
  <script src="src/ui-bootstrap-tpls-0.9.0.min.js"></script>
  <script>
    angular.module( "HelloQuiz", ["QuizApp"]);
  </script>
</body>
</html>

 

Ajitesh Kumar
Latest posts by Ajitesh Kumar (see all)

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.
Posted in Javascript, Tools, UI. Tagged with .

One Response