fac-11/litlearn

The English GCSE learning app

litlearn's Issues

Display text extract on individual page

We need to show the text extract prior to showing the question to allow the user a chance to understand the text without the distraction of a question.

User story: "Before answering a question, I will have a chance to read the question text extract in advance"

To complete this issue we need to:

• large font version of the extract
• large font version of the question
• distinctive 'question' page format
• Be able to navigate to the question, back a screen or to the home page

Create hints modal

User Story

• I can see hints to questions when I get confused or stuck
  Requirements

• The hints should be navigated to from the nav bar
• A user should be able to exit the hint by clicking anywhere on the screen
• The hint should be relevant to the current question
• The icon should be a lightbulb and also have text saying 'hint' to add clarity
• Should be styled as per the design in Figma
  

Learning session summary screen

User Story

• I want to see how long I have been working on the app for

Requirements

• See length of time you a user has been working on the app for that day
• See length of time you a user has been working on the app in total
• Congratulate user on progress
• user should be able to navigate to a new question or take a break (go back home)

add package-lock.json to .gitignore

cos it's bloody annoying when it breaks everything!

Create navigation bar

User Stories

• I want to be able to easily navigate around the site

Requirements

• There should be an easy to understand nav bar
• Depending on the page will include links to: home, hints, next page and previous page

updates:

• alter hrefs so that it is on the entire div not just logo
• for multichoice page handle the case where an option hasn't been selected. either: error message or only show next button when an answer has been selected
• hide submit button so that you can only see the arrow
• currently submit button image is not aligning correctly - this needs fixing

create query based on tags for question type and return list of questions

Should be capable of returning multiple questions (or pointers to).
Consider what will be using the returned data

Create partials header

As designed there will be a lit learn header so this can be used:

create an answer database

for each question, store multiple-choice answer and explanation

Filter questions based on user preferences

Includes: #21 #22 #23 #24
User Story: "I can see a list of questions and easily filter them - by English GCSE skill, by text type and text age"

Things we need to achieve from this issue:

• list of questions
• filter buttons
• filter buttons separated by headings for type of filter
• filter function

Integrate exisitng sessionStorage with data taken from db

ie the question object

use SQL query to render filter buttons on question choice page

Ideally we would be able to use JS DOM manipulation to render the tag buttons on the question choice page - this seems to involve 2 SQL requests to load the page, and writing interlinked promises.

Write function to take session data from HTML attributes and populate into appropriate visible tags

Applied on all pages except intro.js.

Flag up early if there is a problem with displaying/ storing options, or passing hint to modal!

Create timer function

Create function to keep track of a user's learning session.

Requirements
- [ ] initiate timer when entering questions & stop when questions finished
- [ ] pause timer if, eg timeout without interaction
- [ ] interrogate timer

Create large extract page

As per figma design:

Add styling to question choices on '/choosequestion' page

-> currently has holding styling which needs updating to fit with the feeling of the app.

Create landing page

User story: "I can visit an appealing first page that contains question choice options, so that I can choose to be taken to a randomly-chosen question OR to a question type of my choice"

In order to achieve this we need to:

• 'Go' option
• 'choose a question' option
• explanation for first time user of each button
• link buttons to relevant pages

Document get-state.js

redesign form for question choice

User feedback was that the different options weren't clear.

Create 'main' layout and partials with handlebars

needs to be done to complete #11
We need set up the basic template with handlebars to continue.
Including:

• header

• body

• no need at this stage for styling

Create multiple-choice question page

User Story

• I can answer a short multiple-choice question about an extract

Requirements

• distinctive 'question' page format
• the extract
• the question
• a clickable answer (the whole answer should be clickable, not just the 'button')
• a colour-change to show which answer has been selected
• add fonts (see comment below)

integrate sessionstorage, timer, db queries into pages

..or at least into so many of them as are available when you get to them...

links to #43, #52, #53

Set up external sites

• Heroku
• Travis
• CodeCov?

Update database tables

options array in questions table.
New many2many table between questions and tags
New tags table with tagtype and tag (eg 'skill'; 'inference');

Populate with single examples

paramaterise SQL query as per `pg-pool` syntax in multichioce.js

pg-pool synatx look like:

query = 'XYZ $1 FROM $2 WHERE $3', params= ['Thing1','thing2,number3]

doQuery (query, params, cb);

Make all pages more compatible with desktop

Currently designed specifically for mobile, a few simple design tweaks will make the pages look better on desktop as well.

• will need to discuss visuals if there is time

make db query functions

to be accessed by frontend.
Must return some data in form appropriate for front end use
Must be queries useful to front end

To be reviewed later - not necessarily final product!

Begin app!

• set up dependencies
• create basic file structure
• get Express server running
• Set up favicon

Questions database

Need to spike for columns first.
Need to install db; build db_connection, etc.

integrate filter form (#22) with question type queries

Tweak start-timer.js, stop-timer.js and store-query.js to fit

with the get-state.js regime
(ie change sessionStorage item names)

Update endpoints in src/controllers

Now that we're passing the question data in session storage, we don't need so many endpoints individualised by question.

Create word lookup function

User Story
If there is a word in the extract I don't understand, I can click on it to see a definition (from an external dictionary)

Go through all pages, except intro and prepare HTML ids for get-state.js

Curently get-state / retrieveState() loads session data into an attribute 'data-XYZ' of HTML tag with ID 'XYZ',
to be later picked up and populated into appropriate places by a yet-to-be-written function.

If this is unsatisfactory, it needs to be flagged up early!

Create question congratulations screen

User Stories
I want to be congratulated for finishing questions and have the choice to answer a new question or to finish my learning session

Requirements

• The user should see a page that congratulates them on completing a question
• The site should display medal/trophy (large size)
• Create functionality so users can navigate to a new question, their progress or back home

Introduction to question page

User story: "When I start a question, I can see an introduction that will tell me what to expect"

In order to complete this issue we need:

• a clear introduction to the question stages

If not covered by the navigation bar:

• navigation to the question
• Navigation back to the previous page

Display user's position within the question

So that a user can see their progress within a question we need to create a simple way of displaying their position within a current question

User story: "I can see how far through the question I have gone"

To complete this task we need to:

• Design a simple progress bar
• display bar on each question page

** This is not part of the prototype and therefore not a high priority

Create 'explain your answer' page

User Story

• After answering a question, I will be prompted to explain my answer
  Requirements
  • distinctive 'question' page format
  • the extract
  • the question
  • the page prefilled with the chosen option
  • a text box for the answer

Readme!

Make a readme

tag system in db

many to many
Question <-> tag name/type
Include int (100% for user set, else no. thumbsup)

Possible:
include list of users who thumbsupped

Create form for selecting questions

create hints database OR add hints to question database

Do we want to include the hints in the question database or have a hints database. The first option may lend itself better to one hint per question; we could alternatively have a random choice of hints to display for users.

Requirement
[ ] add hints to db and link questions to them

Select and return a question at random (or some other changing choice)

...from the db
Need to consider which page will process the result.

Final database heroku check

Before presenting, make sure the heroku database is working, https://devcenter.heroku.com/articles/getting-started-with-nodejs#provision-a-database

Go through intro page and set HTML tag ids to something suitable for get-state.js

random option from homepage

change the endpoint so that it's truly random

Template partials for extracts

We need template partials for the extracts - especially as they are seen on a number of pages.

Requirements

• template partial for extract (small size)

create system for preserving answer variable

• if I go back to the multiple choice question and change my answer, my answer will be updated in the 'extract explanation' screen

bugfix timer

bug: refreshing select-question page sets days timer to NaN;
(investigate why)

bug: timer continues while on nice-work page.
(It shouldn't: In addition to .counted being set true, .started should be set to non-number and other functions should recognise either or both and so 1. restart timer when appropriate 2. /not/ double count the timer onto todaysTotal (it doesn't currently)

Ensure all pages using session storage do not rely on passing data to hbs/ partials

Improve buttons on landing page

Currently a little bit bulky and could look much cleaner and needs to be smaller!

eg: