Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
122 lines (89 sloc) 5.19 KB

CREATE YOUR OWN QUIZ - Project Overview


Currently deployed on -

Nov 15 - Submission Notes & Reflections

The MVP is complete! This was a great experience allowing me to work on a back-end with Ruby for the first time as well as solidify core React concepts (such as passing props). I would like to continue working on this app so that there will be a login section in which users can create their own privately accessible games. I would also like create more game-like functionality, such as including a timer and a scoring system based on how many flashcards can be answered. This will involve a more developed front-end as well as a back-end that uses more tables.

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.


Desktop/Laptop version:

Mobile version:

Priority Matrix



  • 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.


  • 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


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


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.


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.


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

You can’t perform that action at this time.