Welcome to PopQuiz, a javascript lirbrary to build coginitve games, quizzes, and online assemssments quickly and easily.
https://pop-quiz-js.herokuapp.com/ (Ensure that it is running in https as some requests may not work)
From CLI run the command git clone https://github.com/csc309-winter-2021/js-library-yadolla6.git
From CLI navigate into the cloned directory
Switch into the pub directory using cd pub
Once you are in the pub directory you will see a js folder and a css folder
Copy the full path of PopQuiz.js in the js folder and include it in the script tag in the head of an html file you want to use the library in
This will look like following:
<script defer type="text/javascript" src='path/form/your/html/folder/to/js/PopQuiz.js'></script>
Copy the full path of PopQuiz.css in the css folder and include it in link tag in the head of an html file you want to use the library in
This will look like following:
<link rel="stylesheet" href="'path/form/your/html/folder/to/css/PopQuiz.css'">
Now the setup is ready and you can use PopQuiz.js for your application
Before using the library to build the quiz, create a div element with a unique id that is gonna be used as the place holder for the quiz
Consider following code snippet as an example
Example
<div id="uniqueQuizId" href="'path/form/your/html/folder/to/css/PopQuiz.css'">
Then create a js file that you want to use the library in, lets call it example.js as an instance
Once created the js file create a new quiz object in example.js
Consider following code snippet as an example:
Example
const quiz1 = new Quiz(json);
json parameters
The json containst the paramters that the quiz requires and they have to be exactly as the example given below.
elementId: is a div that the user creates before hand in the DOM and passes its id to the elementId as a string. questionsArr: Is an array of questions objects. time: This is a time object with minutes and seconds as its keys which both have to be integers.
Example
{
elementId: '#myQuiz'
questionsArr: [{
title: 'What is first letter of Hi?',
options: ['K',
'J',
'H',
'M'],
answer: 'H'
},
{
title: 'What year is it ?',
options: ['2020',
'2021',
"1998",
"1920"],
answer: '2021'
},
{
title: 'True or False ? PopQuiz is Fun',
options: ['True',
'False'],
answer: 'True'
},
{
title: 'Is 309 the best web class ?',
options: ['Yes',
'No',
"I dont know",
"Maybe"],
answer: 'Yes'
},
{
title: 'Who is the president of US ?',
options: ['Trump',
'Biden',
"Bush",
"Carter"],
answer: 'Biden'
},
{
title: 'Where is Canada ?',
options: ['America',
'Africa',
"Asia",
"Europe"],
answer: 'America'
}],
time: {
minutes: 0,
seconds: 15
}
}
quesion object has following key value pairs: title: a string that represnets the title of the question. options: an array of strings that represnets options of the question answer: a string that represnets the answer of the quiz.
Example of question object:
{
title: 'What year is it ?',
options: ['2020',
'2021',
"1998",
"1920"],
answer: '2021'
}
Once the quiz object created, you can add the functionalities you like to the quiz using the APIs provided by the quiz
Only at the end, once you finished adding what you want to the quiz, render the quiz using its render API provided
Consider following code snippet as an example how to render the quiz:
Example
quiz1.render();
What this provides is a quiz with bundle of functionalities and rules. Following are the default funtionalites of the quiz:
• A timer: Represnet time of the quiz.
• A score counter: reprensets how many points the user has.
• Alert: this timer also alerts the user if their time is below 10 seconds which means it is going to run out soon. If the time runs out you lose the quiz/game.
• A score system: this score system is in a way that the faster you answer a question correctly the more points you get and the slower you answer the less points you get.
The lowest point you can get is 5 points.
• If you answer a qeustion wrong you will lose points
• If you run out of time you lose the quiz/game.
• If your score becomes negative you lose the quiz/game
• You should always try to maintain a postive score to be able to continue the game
Once the quiz renders you should not change it
You can call these APIs after you instantiated a quiz object
This API allows the user to create and overlay for the quiz which is a page that has a start button. Once the user is ready they can click the start button and do the quiz. Without using this API the quiz starts right after the quiz is rendered in the DOM
Example Call
quiz1.addStartQuiz();
This returns an array of users, the sample shown above is not complete.
This api adds a submit button to the quiz, hence gives the ability to the user to submit the quiz whenever they want. As a result user doesn't have to wait until the timer is over and can submit their quiz whenever they want
Example Call
quiz1.addSubmitButton();
This api enables the user to make thier quiz fancy by creating a loader. Uisng this api, once the user starts the quiz, there will be a 3 second loading which appears on the page with a nice animation and then the quiz starts
Example Call
quiz1.addLoader();
This api adds a 'lamp' to the buttom of the quiz. Once this lamp is hit the user adds 10 seconds to the remaining time they have left. This acts as a timer booster to make the quiz more intresting and the user can only and only use it once per quiz.
Example Call
quiz.addTimeAbility();
- Vanilla JavaScript
- CSS
- HTML