This guide will walk you through the steps to start using and customizing the app according to your needs. The Code Quiz App is designed to help you create interactive quizzes with various question types, including Multiple Choice Questions (MCQs), Multiple Answer Questions (MAQs), and True/False questions.
This guide will walk you through the steps to start using and customizing the app according to your needs. The Xeven Quiz is designed to help you create interactive quizzes with various question types, including Multiple Choice Questions (MCQs), Multiple Answer Questions (MAQs), and True/False questions.
## Demo App
## Demo App
@ -51,7 +51,7 @@ To experience the Demo App, visit the link: https://xeven-quiz.vercel.app/
To start the project, follow these steps:
To start the project, follow these steps:
1. Clone this repo and navigate to the project directory via terminal.
1. Clone the repo and navigate to the project directory via terminal.
2. Run the command **`npm install`** to download and install all the project dependencies.
2. Run the command **`npm install`** to download and install all the project dependencies.
3. Once the dependencies are installed, run the command **`npm start`** to start the development server.
3. Once the dependencies are installed, run the command **`npm start`** to start the development server.
@ -81,7 +81,7 @@ The **Xeven Quiz App** consists of 4 main screens/components that are displayed
3. Questions Screen
3. Questions Screen
4. Result Screen
4. Result Screen
The screens are organized in the **`components`** folder since the app does not utilize routing. If a component is reusable and can be used in multiple places within the app (e.g., Button, ModalWrapper, and CodeSnippet), it is placed in the **`components/UI`** folder. On the other hand, if a component is screen-specific and separated just to make other components smaller and more manageable, it is placed in the relevant components folder. For example, the components `**QuizHeader**`, `**Question**`, and `**Answer**` are inside the **`QuestionScreen`** folder.
The screens are organized in the **`components`** folder since the app does not utilize routing. If a component is reusable and can be used in multiple places within the app (e.g., Button, ModalWrapper, and CodeSnippet), it is placed in the **`components/UI`** folder. On the other hand, if a component is screen-specific and separated just to make other components smaller and more manageable, it is placed in the relevant components folder. For example, the components `QuizHeader`, `Question`, and `Answer` are inside the **`QuestionScreen`** folder.
## How to customize the quiz layout and styling
## How to customize the quiz layout and styling
@ -218,9 +218,9 @@ Discover the Premium Version! Elevate your experience with the same amazing feat
### Premium Version Highlights
### Premium Version Highlights
- The user can pick a quiz topic on the first screen, like JavaScript, react, or Python.
- The user can pick a quiz topic on the first screen, like JavaScript, React, or Python.
- Users can skip a question if they are unsure of the answer. They can return to it later and answer it before submitting the quiz.
- Users can skip a question if they are unsure of the answer. They can return to it later and answer it before submitting the quiz.
- The template allows for adding code snippets in questions. You can easily assess the users' programming knowledge and skills.
- The PRO version also allows for adding code snippets in questions. You can easily assess the users' programming knowledge and skills.
## **Deploying the Quiz App to a Production Environment**
## **Deploying the Quiz App to a Production Environment**
Abdul Basit
1 year ago