heatherbooker/frenchly

supplementary web app to learn names of countries and nationalities in french

frenchly

french countries and nationalities

a tool to supplement other methods of language learning

--> this came about because I wanted to learn more countries and nationalities!

currently implemented for English learners to learn in French

uses react.js and JSX

totally a copycat of duolingo

to run:

locally:

git clone https://github.com/heatherbooker/frenchly.git  
cd frenchly  
npm install  
npm run start

open localhost:8080 in browser

#####voila!

bonus!

frenchly led to the publishing of react-world-map, a React component with a clickable SVG based map, as well as this article on its creation.

frenchly's Issues

question type: radio/check boxes

would like to see an additional type of question incorporated, with a word to be translated and either one or multiple(ex, in case of gendered nationality words) correct answers to be selected

Remove node_modules

The node_modules folder can grow very large and it's faster to download it independently of the actual code because it goes through the npm registry which is optimized for this kind of behaviour.

More importantly, certain packages build themselves upon installation. This building procedure is done differently depending on which OS you are using - especially when switching from Linux to Windows.

1. Make a new branch
2. Delete the folder
3. push the deletion
4. Add a .gitignore
5. Add, commit, push, and merge the changes

input box automatically gets focus

App Prototyping

• used Marvel App to prototype various screens

https://marvelapp.com/14cac5b

- 3 question types:

• English: type French translation
• French: type English translation
• English: choose correct French translation

- 2 categories:

• countries
• nationalities

- areas:

• North America
• South America
• Europe
• Africa
• Asia
• Oceania

Problems with Google Drive command line client

the first step is setting up the Go programming language, which is proving difficult, perhaps due to my lack of understanding of environment variables.
using this website https://golang.org/doc/install?download=go1.6.2.linux-amd64.tar.gz

next step for google drive client is found at https://github.com/odeke-em/drive

this
go install github.com/user/hello
currently elicits this
command not found: go

will re-investigate tomorrow

pressing 'enter' key submits question

Using GULP

what can gulp be used for that will benefit this project?

• compile pug (previously jade) files to HTML
• compile scss files to css

how to create other pages?

currently have been working on main (home) page
--> how should i create other pages? (other jsx files?)

(once done: change index.jsx links to represent destinations)

Useful links

On making a web app with react: https://facebook.github.io/react/docs/thinking-in-react.html

• sortof a step by step

Antarctica

would like to see this be incorporated somewhere as a future feature
antarctica currently does not fit into any of the designated areas...maybe it can be included with oceania?

(edited for clarity)

Levels of difficulty

would like to see this added eventually: instead of selecting an area and doing all the countries in that area, have perhaps 3 levels of difficulty

easier levels have less countries, therefore take less time to complete

progress bar inner divs don't reach border

add hints

using links <a href=""> in jsx

currently in index.jsx I have declared a destination:
var home = 'index.html';

but if I try to reference it later on (line 27):
<h1 className='nav-logo'><a href=home>Frenchly</a></h1>

it throws an error.

TO DO: look into this.

accept various capitalizations for answers