Light

wesdoyle / react-flashcards Goto Github PK

View Code? Open in Web Editor NEW

32.0 4.0 13.0 310 KB

A simple React + Firebase flashcard application

HTML 15.45% CSS 13.71% JavaScript 70.84%

react react-flashcards chinese-characters chinese

react-flashcards's Introduction

React-Flashcards

This application is in progress. Currently, the application is used for basic flashcard memorization of the Hanzi. The latest version of this application is built using React.

getting started

Demo JSON available in src/Data/cards.json. This app requires a Firebase database containing structured data for the Hanzi you would like to study. The format the application expects out of the box is, as an example:

{
    "cards": [
        {
            "id": 1,
            "eng": "to be",
            "han": "是",
            "pin": "shì"
        },
        {
            "id": 2,
            "eng": "not",
            "han": "不",
            "pin": "bù"
        }, 
        ...

Place firebase connection data in src/Config/Firebase/db_config.js in the following format:

export const DB_CONFIG = {
    apiKey: YOUR_API_KEY,
    authDomain: YOUR_AUTH_DOMAIN,
    ...etc.
}

to-do

Implement spaced-repetition algorithm with user feedback re: memoriziation confidence.

misc

This project was bootstrapped with Create React App.

react-flashcards's People

Contributors

Stargazers

Watchers

Forkers

bignom konqa haptichash jonesclarence37 ahmedayaz memdarin wodydoc nathan-smeal favorite-projects weisk didina44 botir21 anontech

react-flashcards's Issues

License?

You haven't specified a LICENSE, and I was wondering whether or not this repository is free to use (I'm planning on creating a Chinese Learning Web App and I really like the way these flashcards are laid out).

Are you open to this or would you like to keep the software solely in your hands?

getting the same card twice

forgive me, I'm sure there's better open-source etiquette then posting an "issue" and solution all at once

a quick addition, updating two functions to keep from repeating cards

  getRandomCard(currentCards, currentCardIx) {
    let randomIx = Math.floor(Math.random() * currentCards.length)
    if (randomIx == currentCardIx) {
      return this.getRandomCard(currentCards, currentCardIx)
    }
    else {
      var card = currentCards[randomIx];
      return (card);
    }
  }

  updateCard() {
    const currentCardIx = this.state.currentCard.id
    const currentCards = this.state.cards;
    this.setState({
      cards: currentCards,
      currentCard: this.getRandomCard(currentCards, currentCardIx)
    })
  }

thanks for your excellent example!

Recommend Projects

React

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

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.