Not sure the best way to show this, however. We still want the user to see how many questions they have answered in each section and how many questions are in each chapter. Maybe at the top, it should say something like:

"You have answered 3 questions correctly and 1 question incorrectly for a score of 75%"

Clicking Next results in the URL changing but no next question displaying.

material-ui version 1 has finally arrived - we should probably update asap.

Currently users are able to resubmit answers after submission. Would it not be more appropriate for the submit button - and also the radio buttons - to be automatically disabled after submission? This would be useful for when some form of score calculation feature is implemented in the future (and to also prevent cheating) 😏.

I would be happy to work on this!

Instead of silently breaking and showing a cryptic error message in the console, we should display some sort of message telling the user something like:

"There are currently no questions for this chapter :(, but you can change that! Feel free to submit a pull request to this project here: https://github.com/austintackaberry/ydkjs-exercises"

The current favicon is the default for create-react-app which is the React logo. Given that this web app is about JavaScript exercises, not React, it shouldn't have the React logo as its favicon.

Explanations shouldn't be immediately visible onSubmit because the user might want to try again without being told the answer. However, once the user submits an answer (correct or incorrect), they should have the option of viewing the explanation.

Small issue, I just noticed that we're not currently using propTypes in our components. Might make it easier for newcomers to navigate and contribute to the project as it grows if we did. Thoughts?

Users should be able to easily access the source code, so that they can look if they're curious or contribute if they are interested. Maybe something like this:

"This is an active open source project. If you want to take a look at the source code or contribute to the project, then you can check out the repository here: https://github.com/austintackaberry/ydkjs-exercises"

EDIT: Was checking out another branch when I noticed this. Disregard!

Screenshot:

Looks like the problem is that App.css doesn't have any properties such that the App component dynamically resizes in the browser. There may also be issues with how I chose to implement the sidebar as well (Didn't use any flexbox or grid). May have missed some other CSS quirks when sniffing this one out; leave a comment if I did!

Currently, we communicate to the user that their answer was correct/incorrect only by changing the color of the answers.

This is helpful; however, for a11y reasons, it would be good to show text saying "Correct!" or "Incorrect"

I love that there's a link to the chapter above every question, but I feel that since the entire book series is (so generously) shared on github - we can be even more specific.

I suggest discussing an option to add links to the section of the chapter that explains the question, like so. It could be revealed next to the answer explanation for further reading, OR shared as a hint ("Not sure? Click here to refresh your memory").

The reason for is the more complex the chapter gets, the harder it will be to locate the explanation for a specific question so I feel the general link to the chapter might be insufficient on more advanced topics.

I can think of two minor (IMO) 'cons' for this:

1. More updates if the content of the books (specifically the headings) change.
2. Learners might learn more if they search for additional resources on their own, rather than return to the previous resource.

Please feel free to share your thoughts. This is just a suggestion that came to me while updating new questions and looking at the question data structure. IMO even if we don't display the link in the interface right away - we could for now just add the link to the each question's object as a future option. I'm happy to help with updating URL's for existing questions, if need be.

There should be navigation buttons at the bottom of the question page allowing the user to navigate from the current question to the next/previous one.

This issue is a result of #72. Originally, I was going to have just Up and Going Ch3 not be clickable, since it shouldn't have any questions given that it is just a preview of YDKJS. However, as I thought about it, I realized that any chapter that doesn't have any questions shouldn't be clickable. Open for discussion 🙂

I propose adding some simple markdown ability to the text, for example italics, bold, inline code blocks, etc. This would greatly enhance the readability and create a more polished look.

I see that there are modules like "react-markdown".

Then a style guide could be generated so we are all using them in the same why for the same types of text.

The links to the books and chapters are blue on the main page and on the sidebar, but they should be black.

@austintackaberry I just noticed we have a package-lock.json file and yarn.lock. They don't play well together, we should decide on one or the other. Could be my fault. Which shall we use?

Currently, the only way that the user knows what question they're on is if they check the URL. There should be a title that says "Question 1 of 10" for example.

If the user answers a questions (correctly or incorrectly), the state of that page should not be any different than it was when they left.

When I ran the app I saw warnings in the console.
Warning: Each child in an array or iterator should have a unique "key" prop.
Worth a pr or a bit picky at this stage?

Maybe rounded corners as well?

https://github.com/kentcdodds/all-contributors

Currently when users submit an answer, the correct answer turns green, and if the user chose an incorrect answer, that answer would turn red.

// Question.js

              {question.answers.map((answer, i) => {
                let answerColor;
                if (answerSubmitted) {
                  if (question.correctAnswerId === answer.id) {
                    answerColor = { color: 'green' };
                  }
                  if (
                    userAnswerId == answer.id &&
                    !(question.correctAnswerId === answer.id)
                  ) {
                    answerColor = { color: 'red' };
                  }
                }

Then each answer is rendered via this line of code:

<span style={answerColor}>{answer.text}</span>

But since we'd like the users to be able to retry for the right answer, the correct answer should not change to green when users select an incorrect answer.

Please update the corresponding tests as well under src/__tests__/Question.js

Description:
When viewing the site on a mobile device, selecting any of the six books results in overlapping text of the chapter titles.

Environment:
Device- iPhone 8
OS- iOS 11.3.1
Browser- Safari

Steps to reproduce:

1. Navigate to ydkjs-exercises.com on a mobile device
2. Select One of six YDKJS books
3. View overlapping text of chapter titles

Expected Result:
Upon selecting a book title, user sees text clearly with no overlapping of characters

Actual Result:
Upon selecting a book title, user sees overlapping text that is difficult to read

Images:

Description:
When viewing the site on a mobile device, the text of the possible answers extends beyond the border and becomes unreadable. The possible answers overlap with the footer text as well as go beyond the previous and next buttons. This problem also affects the text displayed after the user clicks the submit button. The "Correct" and "Incorrect! Try Again!" text remains inside the border but overlaps the text of the possible answers.

Environment:
Device- iPhone 8
OS- iOS 11.4
Browser- Safari

Steps to reproduce:

1. Navigate to ydkjs-exercises.com on a mobile device
2. Select "Up & Going" book
3. Select Chapter 1
4. Navigate past question one which is small enough to fit within the question border
5. View text of possible questions extending beyond border as well as overlapping footer text

Expected Result:
Upon viewing the question and its list of possible answers, the text should remain within the border of the question box and the should not extend beyond the "Previous" and "Next" buttons or overlap with the footer text.

Actual Result:
Upon viewing the questions on a mobile device, the answers extend beyond the border making some of the answers hard to read as they overlap with the footer.

Images:

Easy fix is to just add margin, but I still think there is room for improvement on the design. Thoughts?

The current question format is:

{
  question: String,
  answers: Array
}

but should have explanations:

{
  question: String,
  answers: Array,
  explanation: String
}

For now, the simplest solution is to just make the explanation a string. In the future we might want to make it jsx or something, so that it is more flexible.

Now that we are using the Context API to manage user state in App.js state, we should be able to show the user their score.

I was thinking this might be a good use case for a sidebar. As a first step, maybe it should be simple. For example, if there are 6 total questions across all books and all chapters, the user has answered 3 questions and got 1 answer correct, the sidebar could say:

"1 / 3 questions answered correctly"

Eventually, it would make sense to show more information such as breaking it down by book / chapter, providing links to the questions, etc.

404 message displays for main routes: https://ydkjs-exercises.com/ghkj, but not nested routes: https://ydkjs-exercises.com/up-going/fds

Now that the answers have an id and we may randomize their ordering, would it make sense to change userAnswerIndex to userAnswerId in the Question component?

class Question extends Component {
constructor() {
super();
this.state = { userAnswerIndex: null, answerSubmitted: null, error: false, correctAnswer: null };
}

Contributors might have different local styling configurations which is fine, but it can cause unnecessary changes that clutter up the diff.

If there was a git hook that applied a standard styling convention after committing changes, then the commits would be clean and would not include unnecessary non-standard styling changes.

There needs to be a way for the app to keep track of the user's answers. Whether it is client-side state, local storage, or in a database on a server.

I feel like people won't want to have to make a username and password for this web app. Perhaps, the first step would be to have app state that gets saved in local storage. That way the user won't lose all their info when they reload the browser, and they don't have to log in.

Maybe this would be a good use case for the Context API?

Right now the schema for a question is:

  {
    question: "How many expressions are in the following statement: a = b * 2;",
    answers: [
      {
        answer: "one",
        isCorrect: false
      },
      {
        answer: "two",
        isCorrect: false
      },
      {
        answer: "three",
        isCorrect: false
      },
      {
        answer: "four",
        isCorrect: true
      }
    ]
  }

Which is fine but this makes it easy to accidentally make 0 or more than 1 correct answer. Something like this would make it harder to make that mistake:

  {
    question: "How many expressions are in the following statement: a = b * 2;",
    correctAnswer: "four"
    incorrectAnswers: [
      {
        answer: "one"
      },
      {
        answer: "two"
      },
      {
        answer: "three"
      }
    ]
  }

Right now the design/layout looks clunky. Given that the explanations could get long, it might make sense for them to be below the navigation buttons, so that there is no limit to how long they can be.

We should make sure that the navigation buttons stay in the same location regardless of how long the question is, whether the explanation is shown or hidden, etc.

Maybe the navigation buttons should be to the right/left of the question rather than below it?

Open to other ideas, just think the current layout needs some help!

I'm thinking somewhere around 5 questions per chapter depending on the length/difficulty of the chapter, but open to suggestions!

All of the current questions can be found here: https://github.com/austintackaberry/ydkjs-exercises/blob/master/src/data

Drop a comment here if you are working on adding questions to a certain chapter, so that we don't have multiple people working on adding questions to the same chapter

Up & Going

• Chapter 1: Into Programming
• Chapter 2: Into JavaScript

Scope & Closures

• Chapter 1: What is Scope?
• Chapter 2: Lexical Scope
• Chapter 3: Function vs. Block Scope
• Chapter 4: Hoisting
• Chapter 5: Scope Closures

this & Object Prototypes

• Chapter 1: this Or That?
• Chapter 2: this All Makes Sense Now!
• Chapter 3: Objects
• Chapter 4: Mixing (Up) "Class" Objects
• Chapter 5: Prototypes
• Chapter 6: Behavior Delegation

Types & Grammar

• Chapter 1: Types
• Chapter 2: Values
• Chapter 3: Natives
• Chapter 4: Coercion
• Chapter 5: Grammar

Async & Performance

• Chapter 1: Asynchrony: Now & Later
• Chapter 2: Callbacks
• Chapter 3: Promises
• Chapter 4: Generators
• Chapter 5: Program Performance
• Chapter 6: Benchmarking & Tuning

ES6 & Beyond

• Chapter 1: ES? Now & Future
• Chapter 2: Syntax
• Chapter 3: Organization
• Chapter 4: Async Flow Control
• Chapter 5: Collections
• Chapter 6: API Additions
• Chapter 7: Meta Programming
• Chapter 8: Beyond ES6

There is a "unique key prop" warning occurring when going into a set of questions. Below is a picture.

Currently, when a user tries to access a route that does not exist, they get a page that looks like this:

We should have a message that tells the user the page they requested does not exist. And it should probably provide a link to the home page.

Feel free to get as creative (or not creative) as you want!

Just testing (an unrelated) pr and I noticed question has two correct answer options
book: Up & Going
chapter: 1 into programming
question: 7
First and third answer options are identical, for the purposes of the question.

Opening this issue as we should check through all the questions at some point - so if you find an issue with a question, please add it as a comment

Just noticed we have gained a .gitignore.exclude file ... looks the same as .gitignore to me, do we need it?

Currently, when the user picks an answer and clicks Submit, nothing is displayed. A message is logged to the console, but that is it.

There were previous discussions, #85 and #76, with ideas regarding Question.js and the sidebar. This issue will encapsulate the implementation of those changes. The rough mockup for the sidebar is here:

The stories are the following:

• The progress section should have a progress bar that represents correct answers with green, incorrect answers with red, and unanswered questions with background color
• The progress section should display the number of correct answers out of total answered questions, current score as a percentage, and the number of questions left to be answered
• Each book, chapter, and question should be links
• When the sidebar loads for the first time, only the books should be visible, and there should be a clickable right arrow to the left of each book
• On click, the arrow next to the book/chapter switches from right to down, and the chapters/questions for that book are shown
• Each question should show one of three icons to the left depending on whether it is correct, incorrect, or unanswered

I think we should move away from Material-UI, and @nikrb and @IrritatedEllipses were interested in using styled components, so that is what we will use.

Not sure if we want one person to work on this for the whole app or migrate page by page? Open to thoughts.

• Splash page
• Book page
• Chapter page
• Question page

Chapter 3 in the book "Up & Going" is basically an overview of the material that will be presented to the readers in the coming books. Given that it is just an overview, is it necessary to write questions for the chapter?

Only the link itself should be clickable