Permalink
Browse files

created readme

  • Loading branch information...
annamgithub committed Nov 7, 2019
0 parents commit 4f59f5f9697bb8a0cf8e4ddc4245c3fb2c81c6ee
Showing with 113 additions and 0 deletions.
  1. +113 −0 README.md
113 README.md
@@ -0,0 +1,113 @@
# CREATE YOUR OWN QUIZ - Project Overview

![gif](https://media.giphy.com/media/y1JYvLe9fFfpK/giphy.gif)

## Project Schedule
| Day | Deliverable | Status
|---|---| ---|
|Day 1| Project planning & approval process ( Wireframes / Priority Matrix / Functional Components, etc.) | Incomplete
|Day 2| Back-end | Incomplete
|Day 3| Front-end| Incomplete
|Day 4| Functionality testing & basic styling | Incomplete
|Day 5| Post-test modifications & further styling | Incomplete
|Day 6| MVP finalization | Incomplete
|Day 7| Present | Incomplete


## Project Description
This project will be a quiz app in which someone can create his/her own quiz, which can then be played by any user.
The quiz-maker will write questions and answers, which will be rendered in the form of flash cards. The game will commence with showing players the flashcards with only the questions. To check the answers, the player can click to flip the cards. Upon flip, the answers will be rendered on the cards.

The front end will be built using React. The back-end will be built using Rails.

## Wireframes
Desktop/Laptop version: https://wireframe.cc/a0sXL7

Mobile version: https://wireframe.cc/kPxrVd


## Priority Matrix
![png](https://git.generalassemb.ly/annamgithub/quiz/blob/master/priority%20matrix%20project%204.png)

## MVP
- Render a set of question cards on home page
- Render answers to individual question cards upon card flip
- Form-section in which quiz-maker can create questions and answers on flash cards. Full CRUD functionality takes place here.

## PostMVP
- Login section in which a quiz-maker can create private quizzes.
- Timer to create a timed quiz
- Radio buttons on cards for players to submit their answers in a multiple-choice interface
- Scoring functionality, which displays how many questions players answer correctly
- Exciting music to initiate upon game start and start of timer.

## Architectural Design
https://www.lucidchart.com/invitations/accept/7aa3f184-b4d4-42dc-8d01-703ed5b2f1d1

## ERD
https://www.lucidchart.com/invitations/accept/9a3ac543-1d88-44e3-a99a-9b89ee3482df

## UI Components
| Component | Description |
| --- | :---: |
| App | This is the overall parent component |
| Header | This holds decorative title of the app |
| Nav | Simple Nav to toggle between home page, about page, and "create game" page |
|Footer | Footer|
| About | Static page providing overview of what the project is for and about (stateless) |
| Body | This is the holder of the dynamic parts of the app; parent of the components below (stateful, as new games will render here from which the user can select) |
| SelectGame | Holder of game buttons, which will appear upon creation of a new game |
| GameButton | Player can select between game buttons to start a specific game, rendering a specific deck of flashcards. (stateful))|
| ShowCards | This will display the content of each of the cards and show both the questions and answers depending on whether the user decides to "flip" the card. (stateful) |
| CardMakerDisplay | This will hold the CardMakerForm |
| CardMakerForm | This is where a user can create a game and cards by entering questions and answers into a form. |


#### Time allocations
| Task | Priority | Estimated Time | Actual Time |
| --- | :---: | :---: | :---: |
| Setting up back-end | H | 15hrs| |
| Creating front-end components | H | 4hrs| |
| Building out front-end functionality | H | 16hrs| |
| Connecting to back-end | H | 3hrs| |
| Styling | H | 10hrs| |
| Testing | H | 3hrs| |
| Post-test modifications | H | 8hrs| |
| Total | H | 59hrs |


## Additional Libraries
- React-router
- axios
- on outside click (React library)





-------------------------------------------------------------------
## Code Snippet

Use this section to include a brief code snippet of functionality that you are proud of an a brief description

#### SAMPLE.....
```
function reverse(string) {
// here is the code to reverse a string of text
}
```

## Change Log
Use this section to document what changes were made and the reasoning behind those changes.

#### SAMPLE.....
| Original Plan | Outcome |
| --- | :---: |
| Have one Book component | Split that component into BookInfo and BookInteraction as the component grew too complicated |

## Issues and Resolutions
Use this section to list of all major issues encountered and their resolution.

#### SAMPLE.....
**ERROR**: app.js:34 Uncaught SyntaxError: Unexpected identifier
**RESOLUTION**: Missing comma after first object in sources {} object

0 comments on commit 4f59f5f

Please sign in to comment.