freecodecamp / developer_quiz_site

This is a quiz site filled with over 1200+ questions on programming.

freeCodeCamp Developer Quiz

The developerquiz.org website is the companion to Learn to Code RPG Game, a visual novel game developed by freeCodeCamp to help you learn how to code. 😺

developerquiz.org hosts all 1200+ multiple choice questions featured in the game on the following topics:

• HTML 🖊️
• CSS 🎨
• JavaScript ⚙️
• Linux 🐧
• Python 🐍
• Git 📁
• SQL 📊
• IT 🖥️
• Quality Assurance ✅
• Agile ⏩
• Security 🔒
• and Computer Science Concepts 🤖

All questions are beginner friendly and approachable to all levels, so they are ideal for refreshing your programming knowledge.

If you are brand new to programming, learn to code for free and start your programming journey with freeCodeCamp.

freeCodeCamp creates thousands of articles, videos and courses on a variety of coding topics.

All of the helpful and thoughtful resources are made possible by the generous donations of kind people.

Have a look here at the different ways you can support our non-profit's mission and make tech education accessible to all.

How to run the project locally

Here are directions on how to fork the freeCodeCamp/Developer_Quiz_Site repository:
https://docs.github.com/en/get-started/quickstart/fork-a-repo

In the command line:

1. Clone the repo by typing git clone https://github.com/YOUR-GITHUB-USERNAME/Developer_Quiz_Site.git
2. Then type cd Developer_Quiz_Site to go into the project's directory.
3. Install dependencies with npm install
4. Run the project with npm start
5. Have fun 🚀

How to contribute

This open source project is a work in progress and ever evolving.

We welcome all contributions, suggestions and ideas for improvement from the community.

You can contribute by fixing bugs in the codebase, proposing new features or adding new questions.

Make sure to first read through the Code of Conduct.

Then, read through our Contributing Documentation.

How to report bugs

Found a bug while playing?

Read through this helpful article on how to report bugs.

Then, report them by opening a GitHub Issue.

Our Contributors

License

Copyright © 2024 freeCodeCamp.org, All rights reserved.

developer_quiz_site's Issues

[Docs] - Remove duplicate mention of checklist in PR template

What changes would you like to make in the documentation?

In the pull request template, we need to remove the first mention of checklist that occurs just above the Summary of changes

Here is a screenshot of the word needed to be removed below

Duplicate JavaScript quiz question

What bug did you find in the codebase?

Issue Description

@jdwilkin4 I've noticed that there is a duplicate quiz question in the JavaScript questions list on lines 1596 and 1606.

{
  "Question": "In JavaScript, what type of value is an Array?",
  "Answer": "Object",
  "Distractor1": "Array",
  "Distractor2": "Map",
  "Distractor3": "Set",
  "Explanation": "In JavaScript besides primitives types, we have the Object value type. Arrays are a special type of object that represents a collection of similar types of values.",
  "Link": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array"
}

Steps to Reproduce

1. Open the javascript-quiz.ts.
2. Navigate to lines 1596 and 1606.

Expected Behavior

Each question in the quiz should be unique.

Actual Behavior

The question on line 1596 is identical to the one on line 1606.

Suggested Fix

Remove one of the duplicate questions.

Need a database for Quiz questions. fullQuiz

As we want to increase more quiz questions (Python, SQL, JS) our array size of fullQuiz started to increase. We are also performing shuffle on the array items later things start working slow. Right now we have all categories of questions in a single array. Later if we want to play a Quiz only for JS we can not do this because we do not have a property like language. (SQL, JS).

This is what I feel we can improve.

[Bug] - Add a media query to the "Get started(it's free)" button

What bug did you find in the codebase?

• The size of the Get started button remains with a width of 400px even for small screen devices having a width of 360px or 375px which is breaking the page.
• The current screen looks like this

• I'd like to add a media query to the button so that its size shrinks in case of small screen devices.

• Also there is a width problem regarding mobile devices which is caused by class "content-row-container".
• The class "content-row-container" is having a -12px margin even if I try to set its width to 100vw which is causing an issue so please look into it.

Launch Day ToDo

Hey all,

Just a quick list of things to do on launch day 🙂

• Transfer repository to freeCodeCamp org (will need Mrugesh to assist)
• Make repository public
• Figure out deployment approach (GitHub Pages, maybe?)
• Set up DNS for developerquiz.org
• Update README to be project specific (remove CRA boilerplate)
• Community Health files (code of conduct, contributing, license) - can copy from freeCodeCamp repo

Standardize prefix of questions with language context

Great work with this project and making it really accessible to quickly test your programming knowledge on the fly.

One thing I noticed is given that now there are multiple languages being quizzed, it can sometimes be ambiguous as to what language is being tested on.

For example, I was given a question on what the method gives Linux time and the answer was getTime(). Although the word "method" suggests it is, correctly, JavaScript.

If a question is broad or specific enough per subject, then this change isn't necessary for those questions. One example question that probably doesn't need a change is:

Which of the following techniques is implemented to improve CPU performance?

My proposal examples:

Before

Which of the following methods returns the month in the specified date according to local time, as a zero-based value?

After

In JavaScript, which of the following methods returns the month in the specified date according to local time, as a zero-based value?

Before

Which of the following is a wildcard character that can be used with the SQL LIKE statement?

After

In SQL, which of the following is a wildcard character that can be used with the LIKE statement?

Homepage design issues

I went to the homepage and I was presented with this:

Possible causes: I have an higer default font-size.

(It's the "Big" or "Large" setting, don't know how it is in English)

Adding Security questions to quiz site

What general issue would you like to create?

developerquiz.org currently has over 600 quiz questions. We are looking to expand on the security questions and we encourage other developers to add their quiz questions to the site.

You can find the complete list of security questions below.
https://github.com/freeCodeCamp/Developer_Quiz_Site/blob/main/src/data/security-quiz.ts

You can add your own questions to the top of that file.
Please first check to make sure your question doesn't already exist in the file before creating a PR.

Here is an example format for the questions.

  {
    Question:
      "Which of the following type of Hackers protect civilians and organizations by finding and reporting vulnerabilities in the system?",
    Answer: "White Hat Hackers",
    Distractor1: "Grey Hat Hackers",
    Distractor2: "Black Hat Hackers",
    Distractor3: "Red Hat Hackers",
    Explanation:
      "White Hat Hackers work for organizations as Cybersecurity Engineers, Penetration Testers, etc.  where they perform tasks like ethically hacking the system to find and report vulnerabilities. ",
    Link: "https://www.freecodecamp.org/news/white-hat-black-hat-red-hat-hackers/",
  },

For the link field, please make sure to use a freeCodeCamp article, freeCodeCamp YouTube video or official documentation.
If you choose to reference a video, please make sure to include the timestamp for the topic covered.

You can read more about how to create timestamps in this helpful article.

There are plenty of freeCodeCamp news articles to pull Security questions from:
https://www.freecodecamp.org/news/tag/web-security/
https://www.freecodecamp.org/news/tag/cybersecurity/
https://www.freecodecamp.org/news/tag/information-security/
https://www.freecodecamp.org/news/tag/security/

This issue will not be assigned to anyone and will remain open for multiple contributors.
Please do not assign yourself to this issue or close it.

Happy contributing!

[Feature] - Category Selection options

What feature would you like to see?

It would be cool if we could choose the category we want to practice depending on what skills we want to work on.

For example, if I want to practice JavaScript, I would select the category "JavaScript" and get all JavaScript-related quiz questions.

What do you think about this feature?

[Bug] - Buttons on the category page have text overflow on smaller screens

What bug did you find in the codebase?

On mobile devices of screen size 439x667 downwards, text from buttons overflow outside the button as seen below with the accessibility and JavaScript buttons.

The issue appears to be caused by a percentage width placed on the buttons container, a media query could be added to fix this issue.

I'd like to work to fix this issue, could you please assign it to me?

Enhancement: Typescript conversion

Describe the bug
In the editor, not every property is defined and generally using Typescript reduces the amount of bugs
in the code. This will make minor problems like the button component not having every property defined disappear
as well.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'src/components/HeroSelection.jsx'
2. See error on the component

Expected behavior
For there not to be any warnings or error messages in the code editor (Visual Studio Code)

Additional context
Lots of things don't have fully definitions for types and I'd be more than happy to convert everything.

Add more web accessibility questions

What general issue would you like to create?

developerquiz.org currently has over 900+ quiz questions. We are looking to expand on the accessibility questions and we encourage other developers to add their quiz questions to the site.

You can find the complete list of accessibility questions below.
https://github.com/freeCodeCamp/Developer_Quiz_Site/blob/main/src/data/accessibility-quiz.ts

You can add your own questions to the top of that file.
Please first check to make sure your question doesn't already exist before creating a PR.

Here is the correct format for the questions.
The distractors represent the incorrect answers.

 {
    Question: "What is web accessibility?",
    Answer: "the practice of building websites that are usable by everyone",
    Distractor1: "a new JavaScript framework",
    Distractor2: "a sorting algorithm",
    Distractor3: "a type of programming paradigm",
    Explanation:
      "Web accessibility means building websites that are usable by as many people as possible.",
    Link: "https://www.freecodecamp.org/news/what-is-website-accessibility-18ce00ec990f/",
  },

For the link field, please make sure to use a freeCodeCamp article, freeCodeCamp YouTube video or W3C content.
If you choose to reference a video, please make sure to include the timestamp for the topic covered.

You can read more about how to create timestamps in this helpful article.

There are plenty of freeCodeCamp news articles to pull accessibility questions from:
https://www.freecodecamp.org/news/common-accessibility-errors-and-how-to-fix-them/
https://www.freecodecamp.org/news/web-accessibility-best-practices-a11y-tips/
https://www.freecodecamp.org/news/accessibility-testing-tools-for-ada-compliance/
https://www.freecodecamp.org/news/what-is-website-accessibility-18ce00ec990f/
https://www.freecodecamp.org/news/4-principles-for-getting-started-with-website-accessibility-4e85f75730b/

This issue will not be assigned to anyone and will remain open for multiple contributors.
Please do not close this issue

Happy contributing!

[Feature] - Proposal for Back Button Enhancement

What feature would you like to see?

Subject: Proposal for Back Button Enhancement

Dear freeCodeCamp Team,

I hope this message finds you well. I would like to propose an enhancement to our platform.

I suggest adding a back button functionality. This feature would prove exceptionally valuable, especially in scenarios where a participant has progressed beyond the initial question and wishes to return to the page where they selected the number of questions, as opposed to navigating back one question at a time.

Specifically, I envision the back button offering participants the convenience of returning to the question selection page, streamlining their experience and providing greater control over their navigation within the platform.

I am confident in my ability to implement this feature effectively. If you find this proposal aligns with our objectives, I would be enthusiastic about taking on this task and working towards its successful implementation.

I eagerly await your feedback and guidance on this proposal.

Best regards,
Rohan

Cleanup JS question on toFixed method

What general issue would you like to create?

I want to cleanup this question a little bit so it is easier to read.
You can find this question in the /src/data/javascript-quiz.ts file

Current implementation

  {
    Question:
      "In JavaScript, if let n = 12345.6789, then what will be the result for console.log(n.toFixed())?",
    Answer: "12346",
    Distractor1: "12345",
    Distractor2: "12345.6789",
    Distractor3: "Undefined. toFixed() must take parameters",
    Explanation:
      "Parameters are optional. If not passed, it will round the given number, leaving with no fractional part",
    Link: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed#examples"
  },

Proposed change I wanted implemented

  {
    Question:
      "In JavaScript, what will be the result for the following code: 12345.6789.toFixed()?",
    Answer: "12346",
    Distractor1: "12345",
    Distractor2: "12345.6789",
    Distractor3: "Undefined. toFixed() must take parameters",
    Explanation:
      "Parameters are optional. If not passed, it will round the given number, leaving with no fractional part",
    Link: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed#examples"
  },

This issue will be assigned to the first person who replies back to the issue asking for assignment.

If you are a first time contributor, then please read through the Code of conduct and Contributing docs first

[Feature] - Addition of Confetti Animation for Perfect Scores🚀

What feature would you like to see?

Description

I would like to request the addition of a confetti animation to the Developer Quiz site. This feature aims to enhance the user experience and celebrate the achievements of users who achieve a perfect score in the quiz.

Detailed Description:
Currently, the site provides a point-based scoring system where users can earn points based on their quiz performance. When a user achieves a perfect score (earning all possible points). To make this achievement more engaging and appealing, I propose the addition of a confetti animation that triggers when a user achieves a perfect score.

Here's how the feature would work:

1. When a user completes the quiz and scores a perfect 100% (or the maximum achievable score), a confetti animation will be displayed on the results page to celebrate their achievement.
2. The confetti animation should run for a short duration, approximately 5 seconds, to provide a brief but enjoyable celebration without disrupting the user experience.

Implementation Considerations:

• The confetti animation can be implemented using libraries or components designed for this purpose, such as react-confetti.
• Ensure that the animation does not affect the overall performance or user experience negatively.

If approved, I am keen on implementing this feature.

[Feature] - Add .prettierrc

What feature would you like to see?

Developer_Quiz_Site currently has a .prettierignore but no .prettierrc.

There are some inconsistencies between the .prettierrcs of freeCodeCamp projects. For example, freeCodeCamp has no trailing commas, while chapter does.

I would suggest copying the .prettierrc from the main freeCodeCamp repo as a starting point for Developer_Quiz_Site.

Adding Accessibility questions to quiz site

What feature would you like to see?

It would be great having accessibility questions on the quiz site to spread awareness on the importance of web accessibility.

[Bug] - Missing answer for JavaScript question

What bug did you find in the codebase?

It looks like we have a missing answer for this JavaScript question.

I would also like to change the distractor options.

Here is the fix I am looking for.

  {
    Question: "In JavaScript, what will the following code return: typeof a?",
    Answer: "undefined",
    Distractor1: "string",
    Distractor2: "object",
    Distractor3: "number",
    Explanation:
      "In JavaScript, if you use the typeof operator on an undeclared variable then it will return undefined. ",
    Link: "https://www.freecodecamp.org/news/javascript-typeof-how-to-check-the-type-of-a-variable-or-object-in-js/",
  },

This question is located in the JavaScript quiz here:
https://github.com/freeCodeCamp/Developer_Quiz_Site/blob/main/src/data/javascript-quiz.ts

Please read through the contributing documentation first
https://github.com/freeCodeCamp/Developer_Quiz_Site/blob/c2896c9957c075f3bab7801f7576f9766d8f161d/CONTRIBUTING.md

If you are interested in working on this issue, please reply asking to be assigned.
Please note: this issue will only be assigned on a first come basis and will only be assigned to those who are new to the Developer Quiz site

[Feature] - Tweet button located on the results page

What feature would you like to see?

I want to add to add button or link that allows the completer of the quiz to share their score on Twitter populated with the text "I just scored X% on the - try it yourself? ". I believe using Tweet intents would be the best avenue to go about this problem.

Auto Response Github Action

Making a note for myself here.

In preparation for Hacktoberfest 2023, we want to add an action that auto-responds to pull requests (from Camperbot) thanking the contributor, asking for patience, and letting them know that we will review the pr when we are available.

This should cut down on the mention spam.

Remove HTML question for deprecated marquee tag

What general issue would you like to create?

We only want to include questions for active HTML elements.
Let's remove this question on the marquee tag

Here is the file that will need to be edited and here is the question that needs to be removed.
https://github.com/freeCodeCamp/Developer_Quiz_Site/blob/main/src/data/html-quiz.ts#L1663C4-L1673

How to Contribute

Please read through our Contributing docs and Code of Conduct

This issue is available for assignment only.
If you are interested in working on this issue, please reply back that you wish to be assigned.
Assignment will be given on a first come basis.
We will only accept PR’s with the person assigned to the issue.

Happy hacking!

[Feature] -

What feature would you like to see?

x

[Feature] - button blinks and undergoes a design change when tapped

What feature would you like to see?

Subject: Willing to Implement Feature

Hello freeCodeCamp Team ,

I hope you are doing well. I've noticed the discussion about enhancing our website with a feature where a button blinks and undergoes a design change when tapped. I find this idea intriguing and would like to contribute by implementing this feature.

I have experience with web development and believe I can bring this enhancement to life effectively. If it aligns with our project goals, I'd be more than happy to take on this task.

Please let me know if you would like me to proceed with implementing the feature, and if there are any specific guidelines or requirements I should follow.

Thank you for considering my offer, and I look forward to your guidance on how to move forward.

Best regards,
Rohan

[Feature] - Add ability for users to choose a category

What feature would you like to see?

We now have enough questions to break up the quiz into categories. When the user clicks on the button to start the quiz, they should be directed to this screen here.

First Slide

Then once a user selects a category, they will be directed to this screen here.

Second Slide

Then once a user selects a question amount, they will be directed to the actual quiz here.

Quiz

If you are interested in working on this issue, then please reply back to this issue and it will be assigned to you.

[Feature] - Spell checking for the data files

What feature would you like to see?

We are going to be using spellchecker-cli with husky to check to see if all the words are spelled correctly prior to committing. I don't know if there are any remaining flaws in their dependencies' or dependencies' dependencies but I will keep my eyes peeled.

chore: add issue templates

In preparation for Hacktoberfest, we should add issue templates so future contributors can provide as much detail for the changes they wish to make to the codebase.

Proposed templates:

• bug template
• feature request template
• docs template

Add pre-commit hook for lint and formatting

Since this project recently added linting and formatting I think it would be nice to add a pre-commit hook.

https://prettier.io/docs/en/precommit.html

Enhancement: Test the question format

I would like permission to test to see if the questions contain all the necessary data and if it is readable. Testing everything is generally important and I have enjoyed doing it for a side project for someone else.

[Docs] - typo in javascript question

What changes would you like to make in the documentation?

The is a typo in the Javascript question about querySelector().

Instead of "one of more", it should be "one or more"....

I would be glad to work on this issue.

Adding Linux quiz questions

developerquiz.org currently has over 600 quiz questions. We are looking to expand on the Linux questions and we encourage other developers to add their quiz questions to the site.

You can find the complete list of questions below.
https://github.com/freeCodeCamp/Developer_Quiz_Site/blob/main/src/data/linux-quiz.ts

You can add your own questions to the top of that file.
Please first check to make sure your question doesn't already exist in the file before creating a PR.

Here is an example format for the questions.

  {
    Question: "In Linux, what is a maximum length for a filename?",
    Answer: "255 Bytes",
    Distractor1: "225 Bytes",
    Distractor2: "235 Bytes",
    Distractor3: "295 Bytes",
    Explanation:
      "The maximum length for a file name is 255 bytes. The maximum combined length of both the file name and path name is 4096 bytes.",
    Link: "https://www.ibm.com/docs/en/spectrum-protect/8.1.9?topic=parameters-file-specification-syntax",
  },

For the link field, please make sure to use a freeCodeCamp article, freeCodeCamp YouTube video or official documentation.
If you choose to reference a video, please make sure to include the timestamp for the topic covered.

You can read more about how to create timestamps in this helpful article.

This issue will not be assigned to anyone and will remain open for multiple contributors.
Please do not assign yourself to this issue or close it.

Happy contributing!

Update question on HTML checkboxes

What general issue would you like to create?

I would like to update the question here
https://github.com/freeCodeCamp/Developer_Quiz_Site/blob/main/src/data/html-quiz.ts#L508-L518

original question

In HTML, what attribute should you add to to create a checkbox?

revised question

In HTML, which attribute is used in the input element to create a checkbox?

How to Contribute

Please read through our Contributing docs and Code of Conduct

This issue is available for assignment only.
If you are interested in working on this issue, please reply back that you wish to be assigned.
Assignment will be given on a first come basis.
We will only accept PR’s with the person assigned to the issue.

Happy hacking!

Adding Agile questions to quiz site

What general issue would you like to create?

developerquiz.org currently has over 600 quiz questions. We are looking to expand on the agile questions and we encourage other developers to add their quiz questions to the site.

You can find the complete list of agile questions below.
https://github.com/freeCodeCamp/Developer_Quiz_Site/blob/main/src/data/agile-quiz.ts

You can add your own questions to the top of that file.
Please first check to make sure your question doesn't already exist in the file before creating a PR.

Here is an example format for the questions.

  {
    Question:
      "In a Scrum team, who is responsible for stories estimation?",
    Answer: "The Developers",
    Distractor1: "The Product Owner",
    Distractor2: "The Scrum Master",
    Distractor3: "The Product Owner and the Scrum Master",
    Explanation:
      "According to the Scrum Guide, only members of the development team are allowed to estimate development effort. Neither Scrum Master, nor Product Owner.",
    Link: "https://www.freecodecamp.org/news/scrum-the-hard-parts/",
  },

For the link field, please make sure to use a freeCodeCamp article, freeCodeCamp YouTube video or official documentation.
If you choose to reference a video, please make sure to include the timestamp for the topic covered.

You can read more about how to create timestamps in this helpful article.

There are plenty of freeCodeCamp news articles to pull Agile questions from:
https://www.freecodecamp.org/news/tag/agile/

This issue will not be assigned to anyone and will remain open for multiple contributors.
Please do not assign yourself to this issue or close it.

Happy contributing!

Adding ReactJS Quiz Questions

What feature would you like to see?

Hii, Can I add the quiz questions Regarding Reactjs.

Refactor HeroSection component and styles

There is some cleanup we should do for the HeroSection styling. If you are going to work on this issue, please make sure to address all of the following changes mentioned below.

Here are the files we will be changing
https://github.com/freeCodeCamp/Developer_Quiz_Site/blob/main/src/components/HeroSection.tsx
https://github.com/freeCodeCamp/Developer_Quiz_Site/blob/main/src/stylesheets/HeroSection.css

Remove inline styles from HeroSection component

On line 15, we have this <strong style={{ fontSize: "2rem" }}>
Let's remove that inline style and have this instead <strong className="question-count">

Then in the HeroSection stylesheet add those font size styles to the question-count class

.question-count {
  font-size: 2rem;
}

Remove repetition for flex properties

Inside the HeroSection stylesheet, we have some repetition of flex properties in the hero-container and hero-content classes.
Here are the properties that being repeated.

  display: flex;
  align-items: center;
  justify-content: center;

Please refactor it to this result which will remove that repetition.

.hero-container,
.hero-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-container {
  background-image: url("../images/background.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 100vh;
  width: 100%;
  box-shadow: inset 0 0 0 1000px rgb(34 27 49 / 57%);
  object-fit: contain;
}

.hero-content {
  width: 800px;
  flex-wrap: wrap;
}

Fix media query and font size inconsistencies

Right now we are using both min and max widths for the media queries in the HeroSection stylesheet.
I think we should be following a mobile first design approach. We should also be consistent and replace all px values with rem values.

Please refactor the hero-text styles and media queries to this result below

.hero-text h1 {
  font-weight: bold;
  font-size: 2.1rem;
}

.hero-text h2 {
  font-size: 1.5rem;
}

@media screen and (min-width: 768px) {
  .hero-text h1 {
    font-size: 3.1rem;
  }

  .hero-text h2 {
    font-size: 1.8rem;
  }
}

@media screen and (min-width: 1000px) {
  .hero-text h1 {
    font-size: 3.75rem;
  }
}

Guidelines for working on this issue

• This issue will be assigned to first-timers-only to the Developer Quiz Site repo
• This issue will be assigned on a first come basis. If you are interested in working on this, please comment below
• Please make sure to read through the Contributing documentation
• Please make sure to test these changes locally before submitting a PR

Enhancement: Categories

Describe the bug
Categories would be absolutely amazing to add for the question set. Each question can have one more or category.

Expected behavior
Before you reach the question amount screen, you get to select the category (or categories) that
questions will be drawn from. Each category is toggle-able and there is two buttons. One for all and one for none.
You cannot proceed without setting at least one category. The categories would then be passed into the question amount chooser. Retrieved questions will be filtered to match the categories.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Firefox

Additional context
I'd love to try to tackle this enhancement with some guidance on the layout please.

Adding SQL quiz questions

developerquiz.org currently has over 600 quiz questions. We are looking to expand on the SQL questions and we encourage other developers to add their quiz questions to the site.

You can find the complete list of questions below.
https://github.com/freeCodeCamp/Developer_Quiz_Site/blob/main/src/data/sql-quiz.ts

You can add your own questions to the top of that file.
Please first check to make sure your question doesn't already exist in the file before creating a PR.

Here is an example format for the questions.

  {
    Question:
      "Which of the following relational database management systems (RDBMS) should never be used to store data in a production app?",
    Answer: "Microsoft Access",
    Distractor1: "Microsoft SQL Server",
    Distractor2: "MongoDB",
    Distractor3: "PostgreSQL",
    Explanation:
      "Microsoft Access does not offer as much security, availability, and stability as SQL Server.",
    Link: "https://en.wikipedia.org/wiki/Microsoft_Access",
  },

For the link field, please make sure to use a freeCodeCamp article, freeCodeCamp YouTube video or official documentation.
If you choose to reference a video, please make sure to include the timestamp for the topic covered.

You can read more about how to create timestamps in this helpful article.

This issue will not be assigned to anyone and will remain open for multiple contributors.
Please do not assign yourself to this issue or close it.

Happy contributing!

Convert images to webp format

Describe the issue
I was running a lighthouse audit on the page and our performance score was taking a hit because of the home page images.
We are currently using png's but if we converted those images to webp formats then our performance score would improve.

Acceptance criteria

• Replace the src/images/background.png with the new src/images/background.webp
• Replace the src/images/fcc_background.png with the new src/images/fcc_background.webp
• Replace the src/images/main-character.png with the new src/images/main-character.webp
• Replace the src/images/rpg-menu.png with the new src/images/rpg-menu.webp
• Update the src/stylesheets/HeroSection.css with the new webp image
• Update the src/components/WelcomePage.tsx with the new webp images

There are plenty of free image converters to use online.

If you run into a "Cannot find module" error for images, then you can create a index.d.ts in the root directory and add declare module "*.webp";

https://thewebdev.info/2022/03/18/how-to-fix-the-cannot-find-module-error-with-importing-images-in-typescript-react/

Create local Docker deployment option for contributors

Given the industry's rising trend towards a microservices architecture, along with containerization and cloud computing, I believe the option for contributors to test their changes through Docker would be beneficial.

Proposed changes would include:

• Adding a Dockerfile to the repo
• Updating relevant documentation (i.e.: CONTRIBUTING.md) with instructions on how to use said Dockerfile

If approved, I'd like to volunteer to incorporate this feature.

Originally posted by @ariyonaty in #168

[Docs] - Update README with new categories

What changes would you like to make in the documentation?

We recently added some new quiz categories which means our README needs to be updated.
Here is the README file: https://github.com/freeCodeCamp/Developer_Quiz_Site/blob/main/README.md

Here is what the current README categories section looks like

- HTML 🖊️
- CSS 🎨
- JavaScript ⚙️
- Linux 🐧
- Python 🐍
- Git 📁
- SQL 📊
- IT 🖥️
- and Computer Science Concepts 🤖

Please update the categories section of the README to include these new categories:

• Quality Assurance
• Agile
• Security

You don't need to worry about adding emojis next to these new categories.

If you are interested in working on this issue, then please comment below and it will be assigned to you.

[Feature] - Breakdown Score By Category in Results

What feature would you like to see?

I was hoping to add a modal on the results page to show the percentage of questions the user got right by category. It could potentially provide a great point of reference for what to study.

Enchancement: Question number at the top

I was wondering if the question number can go up into the h1 heading as some of the questions are a little longer and it stretches across the entire screen; while the actual question goes into a paragraph tag below it.

Adding Computer Science Questions

developerquiz.org currently has over 600 quiz questions. We are looking to expand on the Computer Science questions and we encourage other developers to add their quiz questions to the site.

You can find the complete list of questions below.
https://github.com/freeCodeCamp/Developer_Quiz_Site/blob/main/src/data/general-cs-quiz.ts

You can add your own questions to the top of that file.
Please first check to make sure your question doesn't already exist in the file.

Here is an example of one of the current CS questions.

 {
    Question: "Which one of these is NOT a common time complexity equation for BigO notation?",
    Answer: "O(n14)",
    Distractor1: "O(1)",
    Distractor2: "O(log n)",
    Distractor3: "O(n)",
    Explanation: "O(1), O(log n), O(n) are just some of the common time complexity equations for BigO notation.",
    Link: "https://www.youtube.com/watch?v=zg9ih6SVACc&t=867s",
  },

For the link field, please make sure to use a freeCodeCamp article, or freeCodeCamp YouTube video.
If you choose to reference a video, please make sure to include the timestamp for the topic covered.

Here is an example of a timestamp video for BigO notation
https://www.youtube.com/watch?v=zg9ih6SVACc&t=867s

You can read more about how to create timestamps in this helpful article.

Please note: Do not close this issue. We want to keep this issue open for multiple contributors.

Happy contributing!

Adding JavaScript quiz questions

developerquiz.org currently has over 600 quiz questions. We are looking to expand on the JavaScript questions and we encourage other developers to add their quiz questions to the site.

Please note: we are only focusing on general JavaScript questions instead of library and framework specific questions.

You can find the complete list of questions below.
https://github.com/freeCodeCamp/Developer_Quiz_Site/blob/main/src/data/javascript-quiz.ts

You can add your own questions to the top of that file.
Please first check to make sure your question doesn't already exist in the file before creating a PR.

Here is an example format for the questions.

  {
    Question:
      "In JavaScript, what is the name of the method used to remove white space from the beginning and end of a string?",
    Answer: ".trim()",
    Distractor1: ".substring()",
    Distractor2: ".reduce()",
    Distractor3: ".slice()",
    Explanation:
      "The .trim() method removes white space (including space, tab, etc.) from both ends of a string and returns a new string without modifying the original.",
    Link: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim",
  },

For the link field, please make sure to use a freeCodeCamp article, freeCodeCamp YouTube video or official documentation.
If you choose to reference a video, please make sure to include the timestamp for the topic covered.

You can read more about how to create timestamps in this helpful article.

This issue will not be assigned to anyone and will remain open for multiple contributors.
Please do not assign yourself to this issue or close it.

Happy contributing!

Add 10 more correct responses to the correctModalResponses array

What general issue would you like to create?

Inside the /src/data/modal-responses.ts file there is a correctModalResponses array filed with responses for when a user gets the question correct.

It would be nice to add 10 more responses to the correctModalResponses
Please keep your responses to 20 characters or less.

This issue will be assigned to the first person who replies back to the issue asking for assignment.

If you are a first time contributor, then please read through the Code of conduct and Contributing docs first

Return answer given by user after answer submission

When you finish a quiz question, the model returns your score and the correct answer.

However, at times, a user could be confident in their answer but end up getting their answer marked wrong and wonder what they initially put.

One thing to consider is the added room need to show this information, which would crowd the screen a bit more.

I'd imagine a solution would be something like:

💡 Correct! You are really good at this!
Points: 1

Your answer:

mailfrom

Answer:

You can create a mailto link in the href value for an anchor tag
Learn more with this helpful resource

Wanna learn how to code?
Download the free Learn to Code RPG game

Update grammar for JS question on nullish coalescing operator

What general issue would you like to create?

I want to cleanup the JS question on the nullish coalescing operator found in the /src/data/javascript-quiz.ts file

Current implementation

 {
    Question:
      "In JavaScript, what will be the value of output? let output = null ?? 20",
    Answer: "20",
    Distractor1: "undefined",
    Distractor2: "null",
    Distractor3: "Syntax error",
    Explanation:
      "The nullish coalescing operator in JavaScript will return the right-hand side operand if the left-hand side operand is null or undefined.",
    Link: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator"
  },

Proposed change I wanted implemented

  {
    Question:
      "In JavaScript, what will be the value for the following code: null ?? 20",
    Answer: "20",
    Distractor1: "undefined",
    Distractor2: "null",
    Distractor3: "Syntax error",
    Explanation:
      "The nullish coalescing operator in JavaScript will return the right-hand side operand if the left-hand side operand is null or undefined.",
    Link: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator"
  },

This issue will be assigned to the first person who replies back to the issue asking for assignment.

If you are a first time contributor, then please read through the Code of conduct and Contributing docs first

Update grammar and code examples for JS arrow function question

What general issue would you like to create?

I want to update the grammar and code examples for the following question in the /src/data/javascript-quiz.ts file

Current question

  {
    Question:
      "In JavaScript, select the right syntax for an ES6 arrow function:",
    Answer: "let variable = () => {//code block}",
    Distractor1: "let variable => (){//code block}",
    Distractor2: "let variable = function() => {//code block}",
    Distractor3: "let variable = function(){//code block}",
    Explanation:
      "ES6 arrow functions provide you with an alternative way to write shorter syntax compared to the traditional function expression.",
    Link: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions"
  },

Proposed change I would like implemented

  {
    Question: "Select the correct syntax for a JavaScript ES6 arrow function:",
    Answer: "const variable = () => // code",
    Distractor1: "const variable <=> ()()// code ",
    Distractor2: "const variable === function() => {//code}",
    Distractor3: "const variable =>> function(){//code}",
    Explanation:
      "ES6 arrow functions provide you with an alternative way to write shorter syntax compared to the traditional function expression.",
    Link: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions"
  },

This issue will be assigned to the first person who replies back to the issue asking for assignment.

If you are a first time contributor, then please read through the Code of conduct and Contributing docs first

Adding Python quiz questions

developerquiz.org currently has over 600 quiz questions. We are looking to expand on the Python questions and we encourage other developers to add their quiz questions to the site.

Please note: we are only focusing on general Python questions instead of library and framework specific questions.

You can find the complete list of questions below.
https://github.com/freeCodeCamp/Developer_Quiz_Site/blob/main/src/data/python-quiz.ts

You can add your own questions to the top of that file.
Please first check to make sure your question doesn't already exist in the file before creating a PR.

Here is an example format for the questions.

  {
    Question:
      "In Python, which method can be used to replace parts of a string?",
    Answer: "replace()",
    Distractor1: "switch()",
    Distractor2: "repl()",
    Distractor3: "find()",
    Explanation:
      "If you need to search through a string for a pattern, and replace it with another pattern, you can use the replace() method.",
    Link: "https://www.freecodecamp.org/news/python-string-methods-tutorial-how-to-use-find-and-replace-on-python-strings/",
  },

For the link field, please make sure to use a freeCodeCamp article, freeCodeCamp YouTube video or official documentation.
If you choose to reference a video, please make sure to include the timestamp for the topic covered.

You can read more about how to create timestamps in this helpful article.

This issue will not be assigned to anyone and will remain open for multiple contributors.
Please do not assign yourself to this issue or close it.

Happy contributing!

[Feature] - Add 10 more responses for incorrectModalResponses array

What feature would you like to see?

When a user gets a question wrong, then the modal pops up with a random incorrect modal response

We want to add 10 more incorrect responses to the incorrectModalResponses array

Here is where the modal responses array lives
https://github.com/freeCodeCamp/Developer_Quiz_Site/blob/main/src/data/modal-responses.ts

Adding quality assurance and testing questions

developerquiz.org currently has over 600 quiz questions. We are looking to expand on the Quality Assurance and testing questions and we encourage other developers to add their quiz questions to the site.

Please note: we are focusing on general testing concepts and not on a specific framework

You can find the complete list of questions below.
https://github.com/freeCodeCamp/Developer_Quiz_Site/blob/main/src/data/quality-assurance-quiz.ts

You can add your own questions to the top of that file.
Please first check to make sure your question doesn't already exist in the file before creating a PR.

Here is an example format for the questions.

    {
        Question: "What does QA and QC stand for?",
        Answer: "Quality Assurance and Quality Control ",
        Distractor1: "Quality Assets and Quality completion",
        Distractor2: "Quality Analyst and Quantum Computing",
        Distractor3: "Quality Assessment and Quality Computing",
        Explanation:
          "Quality Assurance (commonly known as QA) and Queuing Control (commonly known as QC)",
        Link: "https://www.freecodecamp.org/news/software-quality-assurance-guide/",
      },

For the link field, please make sure to use a freeCodeCamp article, freeCodeCamp YouTube video or official documentation.
If you choose to reference a video, please make sure to include the timestamp for the topic covered.

You can read more about how to create timestamps in this helpful article.

This issue will not be assigned to anyone and will remain open for multiple contributors.
Please do not assign yourself to this issue or close it.

Happy contributing!