There is a codebase overwhelm.unnecessary long codes for most of the app files.
This makes it somehow time consuming to understand the code at first-glance.

Describe the solution you'd like
Refactoring is the key to such problem.
Certain operations should be clearly defined and abstracted in their own files(e.g contributors fetch operation and all the inline styling)
the components tree should be well structured with each component abstracted(its logic and styling in one place)

Describe the bug
The reduce object question:

https://github.com/nas5w/typeofnan-javascript-quizzes/blob/master/content/questions/reduce-object/index.md

Has the correct answer specified as "hello", but the correct correct answer is "Order is not guaranteed".

The code in question uses Object.values which does not use a guaranteed ordering for its result. It uses ordering provided by EnumerateObjectProperties which has a description in the spec stating:

The mechanics and order of enumerating the properties is not specified...

A little more detail about it (calls out Object.keys but they use the same ordering) here:
https://www.reddit.com/r/learnjavascript/comments/d94kuh/sorting_an_object_how_can_i_make_the_10_key/f1eo4ri/

To Reproduce
Steps to reproduce the behavior:

1. Go to https://quiz.typeofnan.dev/reduce-object/
2. Click on "Order is not guaranteed"
3. Click on Submit

Expected behavior
Answer is correct

Describe the bug
Both questions are titled 'Equality and Identity Operators'. They are practically the same. If you answer question 34 and then load question 61, the page would show 'Incorrect' and select the correct answer.

To Reproduce
Steps to reproduce the behavior:

1. Go to Question 34 'Equality and Identity Operators'
2. Select an answer and submit
3. Go to Question 61
4. The answer would be shown as 'Incorrect' and correct answer will be selected

Expected behavior
No answer should be selected when the page first loads

https://github.com/nas5w/typeofnan-javascript-quizzes/blob/master/content/questions/object-prop-mutation/index.md

https://github.com/nas5w/typeofnan-javascript-quizzes/blob/master/content/questions/pass-by-value/index.md

object-prop-mutation is a subset of what pass-by-value is testing while pass-by-value is improperly named (there's no actual passing happening).

You can replace object-prop-mutation's content with that in pass-by-value to beef it up. Then you can get rid of pass-by-value or change it to use functions to get some actual passing going on, but there still might be some redundancy between the two (using functions might provide enough separation to not be as noticeable).

Would appreciate if someone could add the PRs Welcome (http://makeapullrequest.com) badge to the README file.

And yes, this PR request is super meta.

Describe the bug
A clear and concise description of what the bug is.

When a fetch for an external resource like GitHub contributors is done,there is nothing to inform the user about the operation if there is a slow of bandwidth or any other delay.The assigned dom element to display the result of this fetch becomes blank even after the delayed fetch.

Expected behavior
an indicator should be put in placed to inform users of pending operation

Screenshots

@nas5w can i be assigned this

Describe the bug
The order frontmatter property is the same for several questions.

As an example, pass-by-value and map-letters-to-numbers both have order: 24. I was going to fix the numbers, but it got me thinking: is the order property really necessary? Can the questions be ordered some other way (alphabetically, by date, something else)?

This app could always benefit from more questions!

Please take a look at the app (https://quiz.typeofnan.dev) for what kind of questions we tend to ask and then check out the Contributing section of the README for instructions on how to contribute a question.

This is a bit of an evergreen issue, so as many people can propose questions in PRs as they want and I'll never close this issue.

I really like this format of quizzes that tests your understanding of the logic. Other quizzes out there are just about memorization and regurgitation of theory concepts.

Please link similar repos/sites below.

Thank you.

The Curly-q question has the following chunk of code:

const foo = () => {
  return {
    foo: "foo";
  }
}

This code example will result in a syntax error due to ; inside the object.
It is proposed to choose from the following options but in fact, not one of them is suitable.

Either add a new answer (syntax error) or correct the description:

const foo = () => {
  return {
    foo: "foo"
  };
}

The same errors are in the Explanation section.

Many developers use IDE (vscode, IntelliJ IDEA, Eclipse etc.)

I propose extend current .gitignore file with instructions for ignoring this files/folders

https://github.com/nas5w/typeofnan-javascript-quizzes/blob/master/content/questions/pass-by-value/index.md

However, changing the value of a primitive data type such as string (or number, or boolean) does not change the original variable

The kind of value is irrelevant here. Primitive or object, the behavior would be the same.

let b1 = ['Lisa prefers Johnny']; // now an object
let b2 = b1;
b2 = ['Lisa prefers Mark']; // still does not change b1
console.log(b1); // ['Lisa prefers Johnny'];

Instead, the difference is changing the property of an object vs. changing the value of a variable. Changing the property of an object will be seen through other references to that object. Changing the value of a variable does not affect other variables or object properties (with the exception of parameter variables being reflected in the arguments object, but we're going to pretend that's not a thing).

Describe the bug
In the second bullet point of the explanation, there are three updates which will facilitate reading.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://quiz.typeofnan.dev/reduce-object/
2. Click on any wrong answer to generate the explanation.
3. Scroll down to the explanations, bullet point 2.
4. See error

Expected behavior
There is a grammatical error with a missing period between two sentences. There should be one between "element" and "In".

You've established that any reference to pieces of the code are displayed in code block syntax (I think that's how to describe it). In this bullet point, "agg" and "el" should be displayed as such.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu 18.04.3 LTS
• Browser: Chrome
• Version: 77.0.3865.120

Describe the bug
For the question Array Method Binding, an incorrect answer is set to correct answer.

Expected behavior
The expected output is

1
2
3

And since it is not an option, the right answer should be Something else.

Possible update:
Change the question to:

const reduce = ['a', 'b', 'c'].reduce.bind([1, 2, 3]);
reduce((acc, cur) => acc + cur, '');

The options being:

• 123
• abc
• An error is thrown
• Something else

a windows dialog pops up when the clear my Answer buton is clicked.This is a probably not the best UI/UX. as shown below.
Screenshots
If applicable, add screenshots to help explain your problem

a better and possible way is to modalise this feature as shown.

@nas5w can i be assigned to this issue
.

🎯 Goal
GitFlow is a branching model for Git, created by Vincent Driessen. It has attracted a lot of attention because it is very well suited to collaboration and scaling the development team.

The goal is to create branches to exercise best practices for practicing professional developers.

💡 Possible solutions
Add these branches--
develop: the first stop for 'features' branch, and features/fixes are branched back in when it's ready for release
features: for new features, or non-emergency bug fixes
release: last stop before merging into 'master' branch, the branch is deployed into a well-defined test environment, tested, and any/all problems are fixed within the release branch
hotfixes: for emergency fixes
master: tracks release code only

Read more about Gitflow here

📋 Steps to solve the problem
Generate branches (I've gone ahead and started the develop branch)

Issue format by @Roshanjossey of first-contributions

Happy Hacktoberfest!!

When installing and attempting to run Yarn install and Yarn start - I encountered a couple of problems, and just wanted to list them here in case you wanted to make a FAQ:

Error: ENOSPC: System limit for number of file watchers reached, watch "FILE LOCATION".
Gatsby error: gatsbyjs/gatsby#11406

VSCODE beautifier conflicts. Project uses Prettier, but apparently if any of your VSCODE extensions have any form of beautifier, this will result in catastrophic formatting.
some extensions only made wrong indentation, however others split tags over several lines. Beautifier is a big no no.

Hoping someone out there has experience making attractive README files for open source projects. Open to suggestions of things like emojis, badges, new sections, whatever helps make the project more attractive to both use as an app and contribute to.

I got this CI/CD error when trying to submit a new question whose answers's type is number.

https://app.netlify.com/sites/frosty-easley-46d07e/deploys/5ead6168bea3d20007254d2b

Should we notify the contributors about this in contributing guidelines or accept that number type?

The README does not specify how to run the application locally. This would be helpful as contributors would be able to verify their proposed question(s) or functionality changes work as expected. Ideally, this section would have the following content:

• How to clone the repo
• How to install dependencies (using yarn)
  • How to install yarn globally if they don't have yarn yet
• How to start the app and view it

Anyone up for adding a node-based question generator? Essentially, this should be a node command that you can run, preferably something like:

node new-question queston-route

This should generate a new folder called question-route within the content/questions folder, and generate an index.md file with a reasonable question markdown template.

I'd like to make a "Reset all answers" button on the main page.
the button when clicked would re-set all answers back to nothing.

This is to propose a feature in which a category of question post as seen in the landing page should have 2 or more further questions.Example,the post number 36(String Methods) questions the user on the use of the indexOf method.But there are more than just that type of method which a string possesses.Atleast another question should be asked which emphasizes on a diferent method(s).

@nas5w thanks for assigning me this.I would love to say i am participating for hacktoberfest

Describe the bug

Answer specified in string-methods is incorrect. The correct answer is marked as "search" but should be "indexOf". search finds the index of a regular expression, not a string (if a string is given, it will be converted to a regex). When finding a string you would use indexOf.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://quiz.typeofnan.dev/string-methods/
2. Click on indexOf
3. Click on Submit

Expected behavior
Answer is correct.

Describe the bug

The result of the function in the question can be either window or undefined but the question only accepts window as a correct answer. Here's an example of the same code producing undefined: https://senocular.github.io/tests/function-context/

To Reproduce
Steps to reproduce the behavior:

1. Go to https://quiz.typeofnan.dev/this-keyword/
2. Click on undefined
3. Click on submit

Expected behavior
Answer is correct or question goes into more detail about the environment beyond just being in the browser that explicitly rules out situations where it may be undefined (i.e. strict mode).

Desktop (please complete the following information):

• OS: Mac
• Browser chrome
• Version 78