Giter Club home page Giter Club logo

study-up's Introduction

This project was bootstrapped with Create React App.

StudyUp

Project Description

StudyUp is a tool for users to practice javascript fundamentals through a series of 30 quizzes on array, string, and object prototype methods. Each quiz presents a question and three possible answers. If the user answers a question correctly, a message is displayed letting the user know she was right and offers an explanation for why that was the correct answer. If the user answers a question incorrectly, a message is displayed letting the user know she was incorrect and gives her the correct answer. A question answered incorrectly is added to a bank of review quizzes, which the user can visit to review later. Either way, an answered question is removed from the bank of available quizzes so that the user is not given the same quiz twice. Both the available quizzes and review quizzes are saved to local storage to persist on reload. When a user chooses to "start over", local storage is cleared and a new session begins.

Screenshots

begin

question

correct response

Setup

  • git clone
  • npm install

Built With

  • HTML, CSS / SCSS, JavasSript
  • React
  • Jest / Enzyme

Next Steps

  • Refactor React components to better adhere to SRP (addressed further in issues)
  • Allow user to return to available quizzes after a review session has begun (addressed further in issues)
  • Style buttons to indicate that they've been enabled/disable
  • Add different styling for review session

Orginal Assignment

Memoize project from Turing School of Software and Design, Mod 2

study-up's People

Contributors

taylorsperry avatar

study-up's Issues

Redistribute responsibilities among React components

The App component is fairly overburdened in its functional responsibilities and state. In the future, I'd want to leave App primarily responsible for toggling among "begin," "practice," and "end" displays and fetching data from the API endpoint. A PracticeSession component would live between the App component and keep track of available quizzes (quizzes that have not yet been answered) and review quizzes (questions that have been answered incorrectly). The QuizCard component would continue to check whether an answer had been answered correctly or incorrectly.

Add option to continue practicing once the review button has been clicked.

Once a user clicks ("Review questions you missed"), the "availableQuizzes" property in the App state is reassigned from an array of quizzes the user has not yet answered to an array of quizzes the user has answered incorrectly. Once the user has finished the review session, the only option is to "start over"; she cannot return to the quizzes she has not yet answered during this session. A toggle could be added to the state of the new "PracticeSession" component addressed in the first issue.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.