jwpf100 / react-daily-question

React project that loads a MD document containing multiple react questions, parses them and then serves a single question and answer at random.

Name

Description

Project Status

Project Screen Shots

Installation and Setup Instructions

Clone down this repository. You will need node and npm installed globally on your machine.

Switch Branches:

git switch main

Installation:

npm install

To Start Gatsby Server:

gatsby start

To Visit App:

localhost:8000

Reflection

react-daily-question's Issues

Add 'Change Question' Button

Add a button that changes the question if the user wants.

Track Questions Answered

User Acceptance Criteria

Optional:Track which questions have been seen and remove them from the questions that appear each day.

Split out components

User Acceptance

Now that scope of project has changed, have a parent component that holds state, and the question and question list component can sit inside.

Create a testing section

User Acceptance

Create a seperate section to hold buttons that are only there to test code e.g. print things to console, clear arrays etc.

Clean up code in StyledQuestion component

E.g. Remove functions that can sit in utils.

Remove blank numbers from question list display

Blank numbers 109 & 208

Set up Dev Environment

• Vite
• React
• Typescript
• esLint
• prettier

Add State Management

• Redux
• redux-persist

Determine Number of Questions in MD file

Change random function

User Acceptance

Get random function to set a random question per day. Eg. the question for March 1st 2020 is always the same, but randomly selected from the 320 available.

Bug: Section headings shown.

User Acceptance Criteria

Section headings are shown under certain questions. E.g. Question 139:

Store list of questions seen

User Acceptance

Create array of questions seen. This can be used to compare and turn questions green in question list (#23).

This must be stored in local storage so that it can be used to update list of questions.
Numbers may change so use question title for comparison.

• pull in answered question array from local storage
• - add new current question to answered question array
• check if it's already on there

Bug: Question 109

Question 109 can be 'shown'

Change Reveal answer button once clicked.

Either hide the button once clicked, or change to 'Hide Answer'

Create list of available questions

User Acceptance

Display list of available question numbers. Indicate if question has already been seen or not.

Don't worry about styling at this stage.

Handle question 328

Actually Question 326 - 329 that throw the issue as they aren't labelled correctly in the markdown. It's markdown that's the incorrect field.

Bug: Styles not loading immediately

When page loads, initially loads with white background and plain text before background and styling is added.

Add Styling

• Tailwind / SCSS / Styled Components?
• PostCSS ?

Bug: Question 329

The final question causes the whole mdData file to be pulled through to the answer box.

Update available questions from github repository

User Acceptance

Update MDFile from github repository. This can be done on page load, or via a manual button or both.

Update visible numbered list (#23) at same time.

Generate 'Available question array'

• Random question array removes questions that have already been seen.
• Checks question numbers in 'seenQuestionArray'
• Random question generator uses this to select a new question.
• Add in functionality to ignore blank numbers.

List of available questions - indicate which have already been seen.

User Acceptance

Compare list of seen questions with total list of questions to determine which are colored green or red (seen/not seen).

Question numbers may change, new questions may be added, so try and mitigate for this.

Handle questions missing from MD doc e.g. 109 & 208

Front End

User Acceptance Criteria

Create a front end that shows the 'Question of the day' with the answer hidden.
Include button to reveal answer.
Include button to change question.

Need to track questions that have already been answered/seen

User Acceptance

Track questions that have already been seen. Store information in local storage.

Note:

Take into account that numbers and questions may change.

Bug: undefined being passed to setSearch Term

Not sure why. Get the components to console log before this so that it shows up when the error occurs.

Bug: Long questions spill over the bottom of the page.

User Acceptance

If a long question answer is revealed, the text currently flows over the bottom of the page, leaving a white space.

Possible solutions:
Make the answer scrollable.
Extend the header image.

Set question for current day

User Acceptance

A random question is shown when launching the page, this remains the same for that day (calendar day, not 24 hr period).

• On render check for 'current day question' in local storage, if present add to state, then:

• If date === currentdate then display that question

• else if date !== currentdate then generate random question number

• Store new current day question in state.

• Save current day question in local storage

Fix window reference error in Gatsbybuild process

https://www.gatsbyjs.com/docs/debugging-html-builds/