QUIZ APP is a simple project to create quizes. It based on Quizzler app. You can customize it and add your own questions. It is made within the Coder Woman project.
- HTML
- CSS
- JavaScript
You can see the demo here.
Download the project from GitHub and unzip it.
You can configure the project by editing the data.json file.
Every time you run the project, questions array will be shuffled, so every time you run the project, you will get different questions.
-
Add your questions to the
data.jsonfile. It is a set of objects. Each object has the following properties:-
question: The question text. -
options: An array of answers. -
answerId: The correct answer. It counts from 0.Example:
{ "question": "Which one is the type of a javascript file?", "options": [".ts", ".js", ".jsx", ".j"], "answerId": 1 }, -
-
Change the title of the quiz. To change the title, edit the
data.jsonfile and change thetitleproperty. Example:"title": "My fantastic quiz", -
Change description of the quiz. To change the description, edit the
data.jsonfile and change thedescriptionproperty. Example:"description": "This is a quiz about javascript.", -
Change timer of the quiz- how long the quiz will be in seconds. To change the timer, edit the
data.jsonfile and change thetimerproperty. Example:"timer": 80, -
Change the questions count of the quiz. To change the questions count, edit the
data.jsonfile and change thequestionsCountproperty. Example:"questionsCount": 10, -
Change image of the quiz. To change the image, you need to add the image to the
imgfolder, then add the image name to thedata.jsonfile in "image" field. Example:"image": "img/image.png"
{
"questions": [
{
"question": "Which one is the type of a javascript file?",
"options": [".ts", ".js", ".jsx", ".j"],
"answerId": 1
},
{
"question": "Inside which HTML element do we put the JavaScript?",
"options": ["<scripting>", "<script>", "<js>", "<javascript>"],
"answerId": 1
},
{
"question": "Where is the correct place to insert a JavaScript?",
"options": [
"The <head> section",
"Both the <head> section and the <body> section are correct",
"The <body> section",
"Anywhere in the HTML document"
],
"answerId": 0
},
{
"question": "What is the correct syntax for referring to an external script called \"myScript.js\"?",
"options": [
"<script src=\"myScript.js\" type=\"text/javascript\"</script>",
"<script name=\"myScript.js\" type=\"text/javascript\"</script>",
"<script href=\"myScript.js\" type=\"text/javascript\"</script>",
"<script src=\"myScript.js\" type=\"text/javascript\"</script>"
],
"answerId": 3
},
{
"question": "How do you write \"I'm JavaScript\" in an alert box?",
"options": [
"msgBox(\"I'm JavaScript!\")",
"alert(\"I'm JavaScript!\")",
"msg(\"I'm JavaScript!\")",
"alertBox(\"I'm JavaScript!\")"
],
"answerId": 1
},
{
"question": "How do you create a function in JavaScript?",
"options": [
"function = myFunction()",
"function myFunction()",
"function:myFunction()",
"function myFunction()"
],
"answerId": 1
},
{
"question": "How do you call a function named \"myFunction\"?",
"options": [
"call function myFunction()",
"call myFunction()",
"myFunction()",
"myFunction call()"
],
"answerId": 3
},
{
"question": "How do you create a function in JavaScript?",
"options": [
"function = myFunction()",
"function myFunction()",
"function:myFunction()",
"myFunction()"
],
"answerId": 1
},
{
"question": "How do you call a function named \"myFunction\"?",
"options": [
"call function myFunction()",
"call myFunction()",
"myFunction()",
"myFunction call()"
]
}
],
"question": "My Quiz",
"description": "This is a test quiz to test your knowledge",
"time": 60,
"questionsCount": 5,
"image": "img/default.jpg"
}