Categories: JavascriptToolsUI

AngularJS QuizApp Framework on Github

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

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.

Recent Posts

Agentic Reasoning Design Patterns in AI: Examples

In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…

3 weeks ago

LLMs for Adaptive Learning & Personalized Education

Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…

4 weeks ago

Sparse Mixture of Experts (MoE) Models: Examples

With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…

1 month ago

Anxiety Disorder Detection & Machine Learning Techniques

Anxiety is a common mental health condition that affects millions of people around the world.…

1 month ago

Confounder Features & Machine Learning Models: Examples

In machine learning, confounder features or variables can significantly affect the accuracy and validity of…

1 month ago

Credit Card Fraud Detection & Machine Learning

Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…

1 month ago