lemoncode / english-quiz

The easiest way to practice for your incoming English test. Select the verbs you want to memorize and test yourself with the automated quiz.

Table of Contents

• About the Project
  • Built With
• Roadmap
• License

About The Project

Irregular verbs memorization is a must when you are learning English, and there's no better way to do it than testing yourself with a nice quiz. With the verb in Spanish and a related image you will have to enter Infinitive, Past and Participle. Afterwards you can check the correct answer and the correct pronunciation.

This project was developed by Lemoncode Frontend Master students:

Built With

• React
• Material-UI
• Fonk

Roadmap

See the open issues for a list of proposed features (and known issues).

License

Distributed under the MIT License. See LICENSE for more information.

english-quiz's Issues

Restart test or home when refreshing

When the user refresh the page during a test, it should be restarted or app should navigate to home screen.

Promote to common styles

Tests, fill the gap and normal quiz

Create a new test - fill the gap

You get e.g. Present and past participle and you have to fill the gap (past).

Field should be random here

Add settings page

A given user can configure the number of questions to be asked, and if he wants second chance on questions (this can be implemented later on).

New test - Multiple choice test

Style fill the gap test

Create Readme.md

UserSettings CheckBox add useCallback in order to get proper memo

verbs. checkbox is slow

Add version number to localstorage files

By doing this if we introduce a breaking change we could jsut reset the file or run a migration.

Custom verb test

New test:

• Prior to start show a popup let the user choose forms to be asked (present, past, participle).
• User can choose one, two or three
• Test is similar to fill the gap one, but including one to three gaps.

Steps:

1. Think for a solution.
2. Propose to the team.
3. Go for it :)

Verb list page - Allow deselecting all verbs, Allow selecting all verbs

I thin we could have an upper checkbox where ticking you could get all selected and unticking you get everything wiped.

It could be a three state checkbox, marked --> all selected, gray marked --> some checks selected, not mark --> no verbs selected

Flex container adapt to height on results and sentences result windows

This happens in final score and in setence result

Sentence fill the gap with the right irregular form

How this test would work:

• A sentence is displayed to the user.
• The user has to select the right verb form (click on pill).
• Test sentences will already have "will" "do" "had"... auxiliary verbs already in place.

Steps:

1. Think about how to implement this
2. Share approach with them
3. Go for the implementation

Initially assigned to Juan Carlos

Create Readme.md

Fix final score total number of questions

Final score screen have to display the total number of questions when the test is finished earlier. Currently, the number of questions answered so far are displayed. For instance, if the user has answered only one question, the final score will be X/1 (as shown in image below).

The desired behaviour have to display the total number of questions configured (even if the user finishes the test earlier).

Handle case when user hits refresh on the middle of the page, or phone is tombstoned

To whom is interested, @v-borrego can provide you some hints.

Store verbs selection in local storage

Right now in the first version we will store in client's browser, later on we will create a backend for this

Add Vocabulary section

This is an EPIC:

• Create new menu.
• Vocabulary we will categorize (house, hospital, sports, news...) and find for icons.
• Maybe use JSON or TS? (Bundle size, I think won't be affected).
• Create the tests

If somebody wants to hop on this I can start creating stories

Include pictures for missing verb icons

get them from flat icon

provide a second chance for users

If you fail entering the verbs then:

• Show the user the field where he failed.
• Let him a second oportunity.

If he succeeds it will sum up 0.5 points

Media query for extra small devices

Some mobile phones and laptops add an additional media query to handle that cases (smaller margins, maybe some font a litte bit smaller, icon smaller), just to try to fit in a single page

Componentise show results component

Check this PR

#29

In this branch

feature/--style-results

Componentise the ShowResults component:

src/pods/test-verb-forms/components/show-results.component.tsx

And the final result should look something like:

export const ShowResults: React.FC<Props> = props => {
  return verbCorrect.all ? (
    <ShowResultCorrect/>
  ) 
  : (
   <ShowResultFailed/>
  )
}

Check playing sounds (verb form)

We will add verb sounds and the user would be able to play them, check how this works

Important just test.with some generic verbs, we will add the real sound later on (or if you find some auto dictator that record output in mp4 that would be great)

Trim user response in both tests

Currently, if a user accidentaly leaves a blank space to the right/left of their answer, this response will be incorrect. Functions that check if the answer is correct are located in src/pods/test-verb-forms/test-verb-forms.business.ts and src/pods/test-fill-gap/test-fill-gap.business.ts. Both functions are named answerIsCorrect.

It is necessary to trim user answer prior carry out response validation. It could be also nice to promote this function to common.

[Low hanging fruit] wake vs wake up

Check this and correct on the original json

wake should be wake up

Create theme

This issue is just to create the application mui theme + main page, attached more info just to get into context.

As soon as we get the theme done, I will open more issue to build the layout of each page.

Verbs that could have more than one valid form

Something to check

Dream can be dreamed or dreamt
Learn can be learned or learnt
Spell can be spelled or spelt
Smell can be smelled or smelt

https://www.mentalfloss.com/article/59162/10-verbs-two-past-tense-forms-creeped-or-crept-english

https://www.wallstreetenglish.com/blog/regular-and-irregular-english-verbs/

We have to find how to add multiple forms in the current model

Tasks:

1. Study how to update this, best approach
2. Discuss with the team
3. Go for it :)

Fix MUI Warning

We get this warning

createTheme.js:94 Material-UI: the createMuiTheme function was renamed to createTheme.
You should use `import { createTheme } from '@material-ui/core/styles'`

Add design to main quiz screen

Maybe image component is commented (not all verbs got images I will add them).

But all functionallity is ready

Design VerbSettings screen (choose verbs)

Design proposal

[Low hanging fruit] Fix Typo

There's a typo on the json

It's written "pasa" instead of "pagar"

Style UserSettings

Show results component promote to common and reuse in fill the gap

Right now it's pending on Miguel Angel to componentise the component and merge.

Once done, promote this component to common and use in both tests

Create main menu

Create English Quiz main menu

Right now let's focus on mobile and show the stuff centered, later on we will check how to build this in desktop.

integrate pronuntiation (already PR there, but need some additional work)

PR (old code base but functional, just take it as reference point do not try merge: #14)

Create UI design

Just a proposal using whatever the tool you feel comfortable (figma, etc...)

Resend to home when user just uses a deep link

A link like:

https://www.englishquiz.fun/app.html#/test-fill-gap

Or to any other test, could make the app look like broken, when that happens redirect to main page.

Create video explaining how this works

Better media queries

Height, on some computers you have to scroll on each question is annoying (check video on slack showing the issue)

Add integrity check on verbs list

Let's apply defensive programming, whenever app start check that local storage verb list is right and remove the verbs that doesn't exists (in that case save again in local storage to ensure all is ok).

On each question check as well that the ver exists?

First time app is launched all verbs should be selected

Right now there's a subset, we should change this.

You can try this in incognito mode

build welcome screen layout

you can take ideas from this design, right now at this stage we won't focus on pixel perfect, it should be something acceptable, about colors use the theme ones (accesibility wise).

Complex Sentence fill auxiliary verb plus verb

This need further discussion with our english teacher, but the idea is to have more than one gap.

// Convert in the right term
[
{
id: "",
tense: "present perfect",
setence: "I (buy) a pencil",
answer: "have bought",
},
{
id: "",
tense: "past", // Optional?
sentence: "{text} you {text} yesterday Sphaguetti",
answer: ["did", "bought"],
},
];

Style second chance screen

Current state:

This screen should be styled as the others used on tests.

Pronuntiation handle the Read/Read/Read case

Fix number of questions storage

Number of questions is not being stored properly on local storage. You need to investigate what is going on and fix it.

Associate a picture to each verb

We can use images from FlatIcon (We got license from that).

e.g. Run

https://www.flaticon.com/premium-icon/running_3343755?term=run&page=1&position=14

The scope of this task: provide a way to show a picture, we can set this as static assets, you will need extra coding here, check with @juanpms2 about this

Just add a single picture

Remove can from the list of verbs

style final result screen

Redesign main menu

Now is hard for a new user to know what to do and how the application works