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:
- 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:
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:
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>
- Data Storytelling Explained with Examples - October 21, 2020
- How to Setup / Install MLFlow & Get Started - October 20, 2020
- Python – How to Add Trend Line to Line Chart / Graph - October 20, 2020