├── .dockerignore ├── .editorconfig ├── .eslintignore ├── .eslintrc.json ├── .gitattributes ├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE │ ├── bugs.yml │ ├── config.yml │ ├── documentation.yml │ ├── features.yml │ └── general.yml ├── PULL_REQUEST_TEMPLATE.md └── workflows │ ├── lint.yml │ ├── playwright.yml │ └── react-tests.yml ├── .gitignore ├── .gitpod.yml ├── .husky └── pre-commit ├── .npmrc ├── .nvmrc ├── .prettierignore ├── .prettierrc ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── Dockerfile ├── LICENSE.md ├── README.md ├── Splash_Art.png ├── docker-compose.yml ├── e2e ├── can-finish-quiz.spec.ts ├── can-run-quiz.spec.ts ├── landing-page.spec.ts └── score-and-results.spec.ts ├── index.d.ts ├── index.html ├── package.json ├── playwright.config.ts ├── pnpm-lock.yaml ├── public ├── fcc-favicon.ico ├── fcc_primary_large.png ├── manifest.json └── robots.txt ├── renovate.json ├── src ├── App.tsx ├── QuizTemplate.tsx ├── __tests__ │ ├── App.test.tsx │ ├── Data.test.tsx │ ├── Results.test.tsx │ ├── SelectCategory.test.tsx │ ├── SelectQuestionsTotal.test.tsx │ └── WelcomePage.test.tsx ├── components │ ├── Button.tsx │ ├── ButtonLink.tsx │ ├── FCCLogo.tsx │ ├── HeroSection.tsx │ ├── Navbar.tsx │ ├── QuizBtn.tsx │ ├── QuizModal.tsx │ └── index.d.ts ├── constants.ts ├── data │ ├── accessibility-quiz.ts │ ├── agile-quiz.ts │ ├── cloud-computing-quiz.ts │ ├── css-quiz.ts │ ├── devops-quiz.ts │ ├── freecodecamp-quiz.ts │ ├── general-cs-quiz.ts │ ├── git-quiz.ts │ ├── html-quiz.ts │ ├── information-technology-quiz.ts │ ├── javascript-quiz.ts │ ├── linux-quiz.ts │ ├── modal-responses.ts │ ├── python-quiz.ts │ ├── quality-assurance-quiz.ts │ ├── regex-quiz.ts │ ├── security-quiz.ts │ └── sql-quiz.ts ├── image.d.ts ├── images │ ├── background.webp │ ├── fcc_background.webp │ ├── fcc_primary_large.webp │ ├── fcc_secondary_large.webp │ ├── main-character.webp │ └── rpg-menu.webp ├── index.tsx ├── logo.svg ├── pages │ ├── Questions.tsx │ ├── Results.tsx │ ├── SelectCategory.tsx │ ├── SelectQuestionsTotal.tsx │ └── WelcomePage.tsx ├── reportWebVitals.ts ├── setupTests.ts ├── shuffle-arr.ts ├── stylesheets │ ├── App.css │ ├── Button.css │ ├── ButtonLink.css │ ├── HeroSection.css │ ├── HomepageRow.css │ ├── Modal.css │ ├── Navbar.css │ └── colors.css └── types.tsx ├── testSetup.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.node.json ├── vite-env.d.ts └── vite.config.ts /.dockerignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | config 4 | build 5 | docker-compose.yaml 6 | Dockerfile 7 | README.md -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: https://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Unix-style newlines with a newline ending every file 7 | [*] 8 | end_of_line = lf 9 | insert_final_newline = true 10 | 11 | # Matches multiple files with brace expansion notation 12 | # Set default charset 13 | [*.{ts,tsx}] 14 | charset = utf-8 15 | indent_style = space 16 | indent_size = 2 17 | 18 | # Matches the exact files either package.json or .travis.yml 19 | [{package.json,.travis.yml}] 20 | indent_style = space 21 | indent_size = 2 22 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist/* 2 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "env": { 4 | "browser": true, 5 | "es2021": true 6 | }, 7 | "extends": [ 8 | "eslint:recommended", 9 | "plugin:react/recommended", 10 | "plugin:@typescript-eslint/recommended", 11 | "prettier" 12 | ], 13 | "parser": "@typescript-eslint/parser", 14 | "parserOptions": { 15 | "ecmaFeatures": { 16 | "jsx": true 17 | }, 18 | "ecmaVersion": "latest", 19 | "sourceType": "module" 20 | }, 21 | "plugins": ["react", "@typescript-eslint"], 22 | "settings": { 23 | "react": { 24 | "version": "detect" 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.ts eol=lf 2 | *.tsx eol=lf 3 | *.json eol=lf 4 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # ------------------------------------------------- 2 | 3 | # Here are the reviewers for this project 4 | 5 | # ------------------------------------------------- 6 | 7 | - @jdwilkin4 8 | - @JoyShaheb 9 | 10 | # --- Owned by none (negate rule above) --- 11 | 12 | package.json 13 | package-lock.json 14 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bugs.yml: -------------------------------------------------------------------------------- 1 | name: "Bug Report" 2 | description: "File a bug report to fix issues in the codebase" 3 | title: "[Bug] - " 4 | labels: ["bug"] 5 | body: 6 | - type: markdown 7 | attributes: 8 | value: "# Bug report" 9 | - type: textarea 10 | id: description 11 | attributes: 12 | label: "What bug did you find in the codebase?" 13 | description: "Please explain the issue in as much detail as possible. Provide screenshots as necessary" 14 | validations: 15 | required: true 16 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/documentation.yml: -------------------------------------------------------------------------------- 1 | name: Documentation 2 | description: Request to update documentation or fix typos 3 | title: "[Docs] - " 4 | labels: ["documentation"] 5 | body: 6 | - type: markdown 7 | attributes: 8 | value: "# Update documentation" 9 | - type: textarea 10 | id: docs 11 | attributes: 12 | label: What changes would you like to make in the documentation? 13 | description: Please explain the issue and what the change should be 14 | validations: 15 | required: true 16 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/features.yml: -------------------------------------------------------------------------------- 1 | name: Feature request 2 | description: Request for feature 3 | title: "[Feature] - " 4 | labels: ["feature"] 5 | body: 6 | - type: markdown 7 | attributes: 8 | value: "# Feature request" 9 | - type: textarea 10 | id: feature 11 | attributes: 12 | label: What feature would you like to see? 13 | description: Please provide a detailed description for the new feature. 14 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/general.yml: -------------------------------------------------------------------------------- 1 | name: General report 2 | description: This is a general issue that does not fit in the other categories 3 | title: "[General] - " 4 | body: 5 | - type: markdown 6 | attributes: 7 | value: "# General" 8 | - type: textarea 9 | id: description 10 | attributes: 11 | label: What general issue would you like to create? 12 | description: Please be as detailed as possible. Include code snippets or screenshots if necessary. 13 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Summary of changes 2 | 3 | 4 | 5 | ## Checklist 6 | 7 | 8 | 9 | - [ ] I have read and followed the [contribution guidelines](https://github.com/freeCodeCamp/Developer_Quiz_Site/blob/main/CONTRIBUTING.md). 10 | - [ ] I have read through the [Code of Conduct](https://github.com/freeCodeCamp/Developer_Quiz_Site/blob/main/CODE_OF_CONDUCT.md) and agree to abide by the rules. 11 | - [ ] This PR is for one of the available issues and is not a PR for an issue already assigned to someone else. 12 | - [ ] My PR title has a short descriptive name so the maintainers can get an idea of what the PR is about. 13 | - [ ] I have provided a summary of my changes. 14 | 15 | 16 | 17 | closes #XXXXX 18 | -------------------------------------------------------------------------------- /.github/workflows/lint.yml: -------------------------------------------------------------------------------- 1 | name: Lint 2 | on: 3 | push: 4 | branches-ignore: 5 | - "renovate/**" 6 | pull_request: 7 | 8 | permissions: 9 | contents: read 10 | 11 | jobs: 12 | lint: 13 | name: Lint 14 | runs-on: ubuntu-latest 15 | 16 | strategy: 17 | fail-fast: false 18 | matrix: 19 | node-version: [20.x] 20 | 21 | steps: 22 | - name: Checkout Source Files 23 | uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4 24 | 25 | - name: Setup pnpm 26 | uses: pnpm/action-setup@v3 27 | with: 28 | version: 9 29 | 30 | - name: Lint Source Files 31 | run: | 32 | echo npm version $(npm -v) 33 | pnpm install --frozen-lockfile 34 | pnpm run lint 35 | -------------------------------------------------------------------------------- /.github/workflows/playwright.yml: -------------------------------------------------------------------------------- 1 | name: Playwright Tests 2 | 3 | on: 4 | workflow_dispatch: 5 | push: 6 | branches: [main] 7 | pull_request: 8 | branches: [main] 9 | 10 | jobs: 11 | test: 12 | timeout-minutes: 60 13 | runs-on: ubuntu-latest 14 | steps: 15 | - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4 16 | - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4 17 | with: 18 | node-version: 20.x 19 | - name: Install dependencies 20 | run: npm install -g pnpm && pnpm install 21 | - name: Install Playwright Browsers 22 | run: pnpm exec playwright install --with-deps 23 | - name: Run Playwright tests 24 | run: pnpm exec playwright test 25 | -------------------------------------------------------------------------------- /.github/workflows/react-tests.yml: -------------------------------------------------------------------------------- 1 | name: Run React Tests 2 | 3 | on: [push, pull_request] 4 | 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | 9 | steps: 10 | - name: Checkout code 11 | uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4 12 | 13 | - name: Setup pnpm 14 | uses: pnpm/action-setup@v3 15 | with: 16 | version: 9 17 | 18 | - name: Install dependencies 19 | run: pnpm install 20 | 21 | - name: Run tests 22 | run: pnpm test 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /tests_results 6 | /.pnp 7 | .pnp.js 8 | /dist 9 | # testing 10 | /coverage 11 | 12 | # production 13 | /build 14 | 15 | # misc 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | /test-results/ 26 | /playwright-report/ 27 | /blob-report/ 28 | /playwright/.cache/ 29 | -------------------------------------------------------------------------------- /.gitpod.yml: -------------------------------------------------------------------------------- 1 | # This configuration file was automatically generated by Gitpod. 2 | # Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml) 3 | # and commit this file to your remote git repository to share the goodness with others. 4 | 5 | # Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart 6 | 7 | tasks: 8 | - init: pnpm install && pnpm run build 9 | command: pnpm run start 10 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | 2 | npx pretty-quick --staged 3 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | enable-pre-post-scripts=true 3 | package-manager-strict=false 4 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 20.18.3 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Ignore artifacts: 2 | build 3 | coverage 4 | 5 | pnpm-lock.yaml 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "endOfLine": "lf", 3 | "semi": true, 4 | "singleQuote": false, 5 | "jsxSingleQuote": false, 6 | "tabWidth": 2, 7 | "trailingComma": "none", 8 | "arrowParens": "avoid" 9 | } 10 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | > Our Code of Conduct is available here: 2 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing Documentation 2 | 3 | Thank you for your interest in contributing to the Developer Quiz site. [developerquiz.org](https://developerquiz.org/) is the companion website to the [Learn to Code RPG Game](https://www.freecodecamp.org/news/learn-to-code-rpg/), a visual novel game developed by freeCodeCamp to help you learn how to code. 4 | 5 | ## How to setup the project locally 6 | 7 | Here are directions on how to fork the `freeCodeCamp/Developer_Quiz_Site` repository:
8 | https://docs.github.com/en/get-started/quickstart/fork-a-repo 9 | 10 | In the command line: 11 | 12 | 1. Clone the repo by typing `git clone https://github.com/YOUR-GITHUB-USERNAME/Developer_Quiz_Site.git` 13 | 2. Then type `cd Developer_Quiz_Site` to go into the project's directory. 14 | 3. Ensure Node.js and PNPM are installed on machine 15 | 4. Install dependencies with `pnpm install` 16 | 5. Test local changes: 17 | - Option A: PNPM 18 | 1. Run the project with `pnpm start` 19 | - Option B: Docker 20 | 1. Ensure docker is installed on machine. Installations instructions can be found on the [official Docker docs](https://docs.docker.com/get-docker/). 21 | 2. Build the docker image with `docker build -t developer-quiz-site .` 22 | 3. Run the docker container: `docker container run --rm -it -p 3000:3000 developer-quiz-site` or alternatively, `pnpm run start:local-docker`. 23 | 4. Visit `localhost:3000` in a browser to view the site! 24 | - Option C: Using Docker Compose 25 | 1. Ensure you have `Docker` and `Docker Compose` installed on your machine. 26 | - Installation instructions for Docker can be found on the [official Docker docs](https://docs.docker.com/get-docker/). 27 | 2. Run the project with `docker-compose up` 28 | 3. Access the project at `http://localhost:3000` or via the host network IP address, typically `http://HOST_IP_ADDRESS:3000` 29 | 6. Have fun 🚀 30 | 31 | ## Guidelines for adding quiz questions 32 | 33 | We are looking to add more quiz questions for the following categories: 34 | 35 | - Linux 36 | - SQL 37 | - Computer Science 38 | - Quality Assurance 39 | - Agile 40 | - Security 41 | 42 | The quiz question categories can be found in the `data` folder. 43 | https://github.com/freeCodeCamp/Developer_Quiz_Site/tree/main/src/data 44 | 45 | Before you add any quiz questions, please check to make sure that it does not already exist in the file. 46 | 47 | All questions follow this format: 48 | 49 | ``` 50 | { 51 | Question: "Which one of these data structures follows the FIFO (First In First Out) method?", 52 | Answer: "Queue", 53 | Distractor1: "Stack", 54 | Distractor2: "Array", 55 | Distractor3: "Linked List", 56 | Explanation: "A queue follows the First In First Out (FIFO) method as the element which gets inserted first gets removed first.", 57 | Link: "https://youtu.be/B31LgI4Y4DQ?t=16410", 58 | }, 59 | ``` 60 | 61 | For the `Explanation` field, please keep your explanations to a couple of sentences. For the `link` field, please make sure to use a freeCodeCamp article, freeCodeCamp YouTube video or official documentation. 62 | If you choose to reference a video, please make sure to include the timestamp for the topic covered. 63 | 64 | You can read more about how to create timestamps in this [helpful article](https://www.lifewire.com/link-to-specific-part-of-youtube-video-1616414). 65 | 66 | **PLEASE NOTE: Any PR's that have questions taken from other quiz sites will not accepted. Please come up with your own quiz questions.** 67 | 68 | ### Quiz questions with code samples 69 | 70 | Please refrain from creating quiz questions that have code samples. The reason for this is that we have found that these types of questions don't end up displaying well in the current layout and they are sometimes hard to read. 71 | 72 | ## Issues available for contribution 73 | 74 | ### Open to multiple contributors label 75 | 76 | Any open issue that is marked with the `open to multiple contributors` label is free for anyone to work on and will not be assigned to just one person. 77 | 78 | ### Available for assignment label 79 | 80 | Any open issue that is marked with the `Available for assignment` label will open for the first person that replies back to the issue asking to be assigned. Once that person has been assigned then they are free to start work on the issue. 81 | 82 | ### Already Assigned label 83 | 84 | Open issues that have the `already assigned` label are not available for pickup. If someone has been assigned to this issue and there has been no movement on it for weeks, then the maintainers will reach out to the individual to ask if they are still interested in working on it. If the individual has decided not to pursue the issue anymore, then the maintainers will open it back up for contribution and remove the `already assigned` label. 85 | 86 | **NOTE: Only the person assigned to the issue is free to create a PR. Other contributors that create a PR for an already assigned issue will have their PR closed.** 87 | 88 | ## How to contribute and make a pull request 89 | 90 | 1. In the command line, make sure you are in the Developer Quiz directory. `cd Developer_Quiz_Site` 91 | 2. Create and switch to a new branch by using the following command: `git checkout -b new-branch-name` 92 | 3. Add your changes to the project. 93 | 4. In the command line, stage your changes by using the `git add .` command. 94 | 5. Commit your changes by using the `git commit -m "commit message"` command. 95 | 6. Push up your changes to the remote branch on GitHub by using the `git push -u origin branch_name` command. 96 | 7. Open up a pull request (PR) directed to our `main` branch. 97 | 8. Then the maintainers will review your PR and either request changes or approve it. 98 | 99 | If you need any help, please reach out in the [discussions tab](https://github.com/freeCodeCamp/Developer_Quiz_Site/discussions). 100 | 101 | ## How to propose new features 102 | 103 | If you are interested in proposing new features, please open up a new [GitHub discussion](https://github.com/freeCodeCamp/Developer_Quiz_Site/discussions) with details for the proposed feature. 104 | 105 | Please do not create a PR for a new feature without first discussing it with the maintainers. If you create a PR for a new feature without discussing it first, then your PR will be closed. 106 | 107 | ## How to report bugs in the codebase and typos in the documentation 108 | 109 | If you spot a bug in the codebase or issues with the documentation, please open up a [GitHub issue](https://github.com/freeCodeCamp/Developer_Quiz_Site/issues) detailing the problem. 110 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | ARG BASE_REGISTRY=docker.io 2 | ARG BASE_IMAGE=node 3 | ARG BASE_TAG=22-alpine 4 | 5 | FROM ${BASE_REGISTRY}/${BASE_IMAGE}:${BASE_TAG} 6 | 7 | # Install git for pnpm -> yarn interop dependencies 8 | RUN apk add --no-cache git 9 | # Install pnpm package manager globally 10 | RUN npm install -g pnpm@9 11 | 12 | # Create app directory 13 | WORKDIR /usr/src/app 14 | 15 | # Install app dependencies 16 | # A wildcard is used to ensure both package.json AND package-lock.json are copied 17 | COPY package*.json ./ 18 | 19 | RUN pnpm install 20 | 21 | # Install xdg-utils for `open:true` vite config - spawn xdg-open ENOENT err 22 | RUN apk add --update xdg-utils 23 | 24 | # Bundle app source 25 | COPY . . 26 | 27 | # Container listening on port 3000 28 | EXPOSE 3000 29 | 30 | # Start the app 31 | CMD [ "pnpm", "start" ] 32 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | BSD 3-Clause License 2 | 3 | Copyright (c) 2023, freeCodeCamp. All rights reserved. 4 | 5 | Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 6 | 7 | Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 8 | 9 | Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. 10 | 11 | Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. 12 | 13 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # freeCodeCamp Developer Quiz 2 | 3 | ![Learn to Code RPG Main Menu](Splash_Art.png) 4 | 5 | The [developerquiz.org](https://developerquiz.org/) website is the companion to [Learn to Code RPG Game](https://freecodecamp.itch.io/learn-to-code-rpg), a visual novel game developed by [freeCodeCamp](https://www.freecodecamp.org) to help you learn how to code. 😺 6 | 7 | [developerquiz.org](https://developerquiz.org/) hosts all **1200+** multiple choice questions featured in the game on the following topics: 8 | 9 | - HTML 🖊️ 10 | - CSS 🎨 11 | - JavaScript ⚙️ 12 | - Linux 🐧 13 | - Python 🐍 14 | - Git 📁 15 | - SQL 📊 16 | - IT 🖥️ 17 | - Quality Assurance ✅ 18 | - Agile ⏩ 19 | - Security 🔒 20 | - and Computer Science Concepts 🤖 21 | 22 | All questions are beginner friendly and approachable to all levels, so they are ideal for refreshing your programming knowledge. 23 | 24 | If you are brand new to programming, learn to code for free and start your programming journey with [freeCodeCamp](https://www.freecodecamp.org/). 25 | 26 | freeCodeCamp creates thousands of articles, videos and courses on a variety of coding topics. 27 | 28 | All of the helpful and thoughtful resources are made possible by the generous donations of kind people. 29 | 30 | Have a look [here](https://www.freecodecamp.org/news/how-to-donate-to-free-code-camp/) at the different ways you can support our non-profit's mission and make tech education accessible to all. 31 | 32 | ## How to work on the project using Gitpod 33 | 34 | Gitpod is an online environment, where you can work on projects without installing anything on your machine. To setup the Developer Quiz Site with Gitpod, visit this [link](https://gitpod.io/?autostart=true#https://github.com/freeCodeCamp/Developer_Quiz_Site/) 35 | 36 | ## How to run the project locally 37 | 38 | Here are directions on how to fork the freeCodeCamp/Developer_Quiz_Site repository:
39 | https://docs.github.com/en/get-started/quickstart/fork-a-repo 40 | 41 | In the command line: 42 | 43 | 1. Clone the repo by typing `git clone https://github.com/YOUR-GITHUB-USERNAME/Developer_Quiz_Site.git` 44 | 2. Then type `cd Developer_Quiz_Site` to go into the project's directory. 45 | 3. Install dependencies with `pnpm install` 46 | 4. Run the project with `pnpm start` 47 | 5. Have fun 🚀 48 | 49 | ### Using Docker Compose 50 | 51 | Ensure you have `Docker` and `Docker Compose` installed on your machine. 52 | 53 | 1. Clone the repo by typing `git clone https://github.com/YOUR-GITHUB-USERNAME/Developer_Quiz_Site.git` 54 | 2. Then type `cd Developer_Quiz_Site` to go into the project's directory. 55 | 3. Run the project with `docker-compose up` 56 | 4. Access the project at `http://localhost:3000` or via the host network IP address, typically `http://HOST_IP_ADDRESS:3000` 57 | 5. Have fun 🚀 58 | 59 | ### How to contribute 60 | 61 | This open source project is a work in progress and ever evolving. 62 | 63 | We welcome all contributions, suggestions and ideas for improvement from the community. 64 | 65 | You can contribute by fixing bugs in the codebase, proposing new features or adding new questions. 66 | 67 | Make sure to first read through the [Code of Conduct](https://www.freecodecamp.org/news/code-of-conduct/). 68 | 69 | Then, read through our [Contributing Documentation](CONTRIBUTING.md). 70 | 71 | ### How to run the unit tests 72 | 73 | Once you are finished making changes, you will need to run the test suite to make sure your code doesn't break anything. 74 | Here is terminal command for running tests: `pnpm test` (or, even shorter: `pnpm t` ) 75 | alternativetly (and also cool!) - you can install [vscode vitest extension](https://github.com/vitest-dev/vscode) 76 | 77 | ### How to run the e2e tests 78 | 79 | This repo uses [Playwright](https://playwright.dev/) for end-to-end testing. 80 | 81 | - To run the tests in UI mode, run: 82 | ``` 83 | pnpm run e2e:ui 84 | ``` 85 | - To run the tests in headless mode, run: 86 | 87 | ``` 88 | pnpm run e2e:ci 89 | ``` 90 | 91 | Note: e2e tests cannot be run in Gitpod environment. 92 | 93 | ### How to report bugs 94 | 95 | Found a bug while playing? 96 | 97 | Read through [this helpful article](https://forum.freecodecamp.org/t/how-to-report-a-bug-to-the-freecodecamp-open-source-community/19543) on how to report bugs. 98 | 99 | Then, report them by opening a **GitHub Issue**. 100 | 101 | ### Our Contributors 102 | 103 | 104 | 105 | 106 | 107 | ### License 108 | 109 | Copyright © 2024 freeCodeCamp.org, All rights reserved. 110 | -------------------------------------------------------------------------------- /Splash_Art.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/freeCodeCamp/Developer_Quiz_Site/7855ac93bde30bb9429a68c910324bdd53595482/Splash_Art.png -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3.8' 2 | 3 | services: 4 | app: 5 | build: . 6 | container_name: developer-quiz-site 7 | ports: 8 | - "3000:3000" 9 | volumes: 10 | # bind mount for hot-reloading 11 | - type: bind 12 | source: . 13 | target: /usr/src/app 14 | # isolating node_modules to avoid conflicts 15 | - /usr/src/app/node_modules 16 | -------------------------------------------------------------------------------- /e2e/can-finish-quiz.spec.ts: -------------------------------------------------------------------------------- 1 | import { test, expect } from "@playwright/test"; 2 | 3 | test.beforeEach(async ({ page }) => { 4 | await page.goto("/#/quizzes"); 5 | 6 | await page.getByRole("button", { name: "HTML" }).click(); 7 | 8 | await page.getByRole("button", { name: "10", exact: true }).click(); 9 | }); 10 | 11 | test("should show the results after the user has answered all questions", async ({ 12 | page 13 | }) => { 14 | // loop through all the questions. 15 | for (let i = 1; i <= 10; i++) { 16 | expect(page.url()).toContain(`${i}/of/10`); 17 | 18 | // Select the first option (no matter if it right or worng) 19 | await page.getByRole("button").first().click(); 20 | 21 | // Submit answer 22 | await page.getByRole("button", { name: "Submit", exact: true }).click(); 23 | 24 | const dialog = page.getByRole("dialog"); 25 | 26 | await expect(dialog).toBeVisible(); 27 | await expect(dialog.getByText("Points:")).toBeVisible(); 28 | await expect(dialog.getByText("Your answer:")).toBeVisible(); 29 | await expect(dialog.getByText("Answer:", { exact: true })).toBeVisible(); 30 | await dialog.getByRole("button", { name: "Next Question" }).click(); 31 | } 32 | 33 | // After the last question, the 'results' should show up 34 | await page.waitForURL("/#/quizzes/HTML/results"); 35 | 36 | await expect(page.getByRole("heading", { name: "Results" })).toBeVisible(); 37 | await expect(page.getByRole("button", { name: "Play again?" })).toBeVisible(); 38 | }); 39 | -------------------------------------------------------------------------------- /e2e/can-run-quiz.spec.ts: -------------------------------------------------------------------------------- 1 | import { test, expect } from "@playwright/test"; 2 | import { CATEGORIES, QUESTION_NUMS } from "../src/constants"; 3 | 4 | test.beforeEach(async ({ page }) => { 5 | await page.goto("/#/quizzes"); 6 | }); 7 | 8 | test("should display a list of categories", async ({ page }) => { 9 | await expect( 10 | page.getByRole("heading", { name: "Choose a Category" }) 11 | ).toBeVisible(); 12 | 13 | for (let i = 0; i < CATEGORIES.length; i++) { 14 | await expect( 15 | page.getByRole("button", { name: CATEGORIES[0], exact: true }) 16 | ).toBeVisible(); 17 | } 18 | }); 19 | 20 | test("should allow selecting the number of questions", async ({ page }) => { 21 | await page.getByRole("button", { name: "HTML" }).click(); 22 | 23 | await page.waitForURL("#/quizzes/HTML/questionsTotal"); 24 | 25 | await expect( 26 | page.getByRole("heading", { name: "Choose a length for the Quiz" }) 27 | ).toBeVisible(); 28 | 29 | for (let i = 0; i < QUESTION_NUMS.length; i++) { 30 | await expect( 31 | page.getByRole("button", { 32 | name: QUESTION_NUMS[i].toString(), 33 | exact: true 34 | }) 35 | ).toBeVisible(); 36 | } 37 | 38 | await expect(page.getByRole("button", { name: /All/ })).toBeVisible(); 39 | }); 40 | 41 | test("should start the first question after the user has selected the number of questions", async ({ 42 | page 43 | }) => { 44 | await page.getByRole("button", { name: "HTML" }).click(); 45 | 46 | await page.getByRole("button", { name: "10", exact: true }).click(); 47 | 48 | await page.waitForURL("/#/quizzes/HTML/questions/1/of/10"); 49 | 50 | await expect(page.getByRole("heading", { name: "Question 1" })).toBeVisible(); 51 | }); 52 | 53 | test("question page should contain 4 options and `submit` button", async ({ 54 | page 55 | }) => { 56 | await page.getByRole("button", { name: "HTML" }).click(); 57 | 58 | await page.getByRole("button", { name: "10", exact: true }).click(); 59 | 60 | const options = page.getByRole("list"); 61 | await expect(options.getByRole("button")).toHaveCount(4); 62 | 63 | await page.getByRole("button", { name: "Submit", exact: true }).click(); 64 | }); 65 | 66 | test("selected option must have 'answers-btns--selected' class", async ({ 67 | page 68 | }) => { 69 | await page.getByRole("button", { name: "HTML" }).click(); 70 | 71 | await page.getByRole("button", { name: "10", exact: true }).click(); 72 | 73 | // Select the first option (no matter if it's right or wrong) 74 | await page.getByRole("button").first().click(); 75 | 76 | await expect(page.getByRole("button").first()).toHaveClass( 77 | /answers-btns--selected/ 78 | ); 79 | }); 80 | 81 | test("should show a modal after selecting one option and click the `submit` button", async ({ 82 | page 83 | }) => { 84 | await page.getByRole("button", { name: "HTML" }).click(); 85 | 86 | await page.getByRole("button", { name: "10", exact: true }).click(); 87 | 88 | // Select the first option (no matter if it's right or worng) 89 | await page.getByRole("button").first().click(); 90 | 91 | await page.getByRole("button", { name: "Submit", exact: true }).click(); 92 | await expect(page.getByRole("dialog")).toBeVisible(); 93 | }); 94 | -------------------------------------------------------------------------------- /e2e/landing-page.spec.ts: -------------------------------------------------------------------------------- 1 | import { test, expect } from "@playwright/test"; 2 | 3 | test.beforeEach(async ({ page }) => { 4 | await page.goto("/"); 5 | }); 6 | 7 | test("should render the page correctly", async ({ page }) => { 8 | await expect(page).toHaveTitle(/Developer Quiz/); 9 | 10 | const startButton = page.getByRole("link", { 11 | name: "Get started (it's free)" 12 | }); 13 | await expect(startButton).toBeVisible(); 14 | await expect(startButton).toHaveAttribute("href", "#/quizzes"); 15 | }); 16 | -------------------------------------------------------------------------------- /e2e/score-and-results.spec.ts: -------------------------------------------------------------------------------- 1 | import { test, expect, Page } from "@playwright/test"; 2 | import htmlQuizQuestions from "../src/data/html-quiz"; 3 | import { 4 | correctModalResponses, 5 | incorrectModalResponses 6 | } from "../src/data/modal-responses"; 7 | 8 | interface QuizQuestion { 9 | Question: string; 10 | Answer: string; 11 | Distractor1: string; 12 | Distractor2?: string; // Optional distractor, if present 13 | } 14 | 15 | type ModalResponses = string[]; 16 | 17 | const isDefined = (value: T | undefined): value is T => { 18 | return value !== undefined; 19 | }; 20 | 21 | test.beforeEach(async ({ page }) => { 22 | await page.goto("/#/quizzes"); 23 | }); 24 | 25 | async function selectQuizCategory( 26 | page: Page, 27 | category: string, 28 | questionCount: string 29 | ) { 30 | await page.getByRole("button", { name: category }).click(); 31 | await page.getByRole("button", { name: questionCount, exact: true }).click(); 32 | await expect(page.getByText("Points: 0")).toBeVisible(); 33 | } 34 | 35 | async function getQuestionData(question: string): Promise { 36 | const questionData = htmlQuizQuestions.find(({ Question }) => 37 | question.includes(Question) 38 | ); 39 | if (!isDefined(questionData)) { 40 | throw new Error("Question not found in the quiz data."); 41 | } 42 | return questionData; 43 | } 44 | 45 | async function verifyModalResponse( 46 | page: Page, 47 | expectedResponses: ModalResponses, 48 | expectedPoints: string 49 | ) { 50 | const dialog = page.getByRole("dialog"); 51 | await expect(dialog).toBeVisible(); 52 | 53 | const message = await dialog.getByRole("heading", { level: 2 }).textContent(); 54 | const isMessageInExpectedSet = expectedResponses.some(response => 55 | message?.includes(response) 56 | ); 57 | 58 | expect(isMessageInExpectedSet).toEqual(true); 59 | await expect(dialog.getByText(`Points: ${expectedPoints}`)).toBeVisible(); 60 | } 61 | 62 | test("should show 'success' modal after selecting the correct option", async ({ 63 | page 64 | }) => { 65 | await selectQuizCategory(page, "HTML", "10"); 66 | 67 | const question = await page.locator("legend").textContent(); 68 | const questionData = await getQuestionData(question || ""); 69 | 70 | const answer = questionData.Answer; 71 | await page.getByRole("button", { name: answer }).click(); 72 | await page.getByRole("button", { name: "Submit", exact: true }).click(); 73 | 74 | await verifyModalResponse(page, correctModalResponses, "1"); 75 | }); 76 | 77 | test("should show 'failure' modal after selecting the wrong option", async ({ 78 | page 79 | }) => { 80 | await selectQuizCategory(page, "HTML", "10"); 81 | 82 | const question = await page.locator("legend").textContent(); 83 | const questionData = await getQuestionData(question || ""); 84 | 85 | const distractor = questionData.Distractor1; 86 | await page.getByRole("button", { name: distractor, exact: true }).click(); 87 | await page.getByRole("button", { name: "Submit", exact: true }).click(); 88 | 89 | await verifyModalResponse(page, incorrectModalResponses, "0"); 90 | }); 91 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.webp"; 2 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | 17 | 18 | 19 | 23 | 27 | 28 | 29 | 30 | 36 | 42 | 43 | 44 | 49 | 50 | 51 | 58 | 59 | 60 | 61 | 62 | 66 | 67 | 68 | 72 | freeCodeCamp Developer Quiz 73 | 74 | 75 | 76 | 77 |
78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rpg_quiz_site", 3 | "homepage": "https://developerquiz.org", 4 | "description": "This is a free quiz site made for developers by freeCodeCamp", 5 | "version": "0.1.0", 6 | "private": true, 7 | "packageManager": "pnpm@9.15.4", 8 | "dependencies": { 9 | "@testing-library/jest-dom": "^6.4.6", 10 | "@testing-library/react": "^16.0.0", 11 | "@testing-library/user-event": "^14.0.0", 12 | "react": "^18.2.0", 13 | "react-confetti": "^6.1.0", 14 | "react-dom": "^18.2.0", 15 | "react-router-dom": "^6.24.0", 16 | "web-vitals": "^4.0.0" 17 | }, 18 | "type": "module", 19 | "scripts": { 20 | "start": "vite", 21 | "preview": "vite preview", 22 | "start:local-docker": "docker container run --rm -it -p 3000:3000 developer-quiz-site", 23 | "build": "vite build", 24 | "test": "vitest", 25 | "e2e:ui": "playwright test --ui", 26 | "e2e:ci": "playwright test", 27 | "lint": "eslint .", 28 | "pretty-quick": "pretty-quick", 29 | "fix-style": "pnpm run lint --fix", 30 | "lint-style": "prettier --list-different .", 31 | "format": "prettier --write \"**/*.{ts,tsx,json}\"", 32 | "prepare": "husky install" 33 | }, 34 | "eslintConfig": { 35 | "extends": [ 36 | "react-app", 37 | "react-app/jest" 38 | ] 39 | }, 40 | "browserslist": { 41 | "production": [ 42 | ">0.2%", 43 | "not dead", 44 | "not op_mini all" 45 | ], 46 | "development": [ 47 | "last 1 chrome version", 48 | "last 1 firefox version", 49 | "last 1 safari version" 50 | ] 51 | }, 52 | "devDependencies": { 53 | "@playwright/test": "^1.45.3", 54 | "@types/node": "^20.0.0", 55 | "@types/react": "^18.3.3", 56 | "@types/react-dom": "^18.0.4", 57 | "@typescript-eslint/eslint-plugin": "^7.0.0", 58 | "@typescript-eslint/parser": "^7.0.0", 59 | "@vitejs/plugin-react": "^4.3.1", 60 | "eslint": "^8.16.0", 61 | "eslint-config-prettier": "^9.0.0", 62 | "eslint-plugin-react": "^7.34.3", 63 | "happy-dom": "^14.12.3", 64 | "husky": "^9.0.0", 65 | "lint-staged": "^15.0.0", 66 | "prettier": "^3.0.0", 67 | "pretty-quick": "^4.0.0", 68 | "typescript": "^5.5.3", 69 | "vite": "^5.3.2", 70 | "vite-tsconfig-paths": "^4.2.2", 71 | "vitest": "^2.0.0" 72 | }, 73 | "lint-staged": { 74 | "*.ts": "eslint", 75 | "*.tsx": "eslint" 76 | }, 77 | "husky": { 78 | "hooks": { 79 | "pre-commit": "lint-staged && pretty-quick --staged" 80 | } 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /playwright.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig, devices } from "@playwright/test"; 2 | 3 | /** 4 | * See https://playwright.dev/docs/test-configuration. 5 | */ 6 | export default defineConfig({ 7 | testDir: "./e2e", 8 | /* Run tests in files in parallel */ 9 | fullyParallel: true, 10 | /* Fail the build on CI if you accidentally left test.only in the source code. */ 11 | forbidOnly: !!process.env.CI, 12 | /* Retry on CI only */ 13 | retries: process.env.CI ? 2 : 0, 14 | /* Opt out of parallel tests on CI. */ 15 | workers: process.env.CI ? 1 : undefined, 16 | /* Reporter to use. See https://playwright.dev/docs/test-reporters */ 17 | reporter: "html", 18 | /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ 19 | use: { 20 | /* Base URL to use in actions like `await page.goto('/')`. */ 21 | baseURL: "http://127.0.0.1:3000", 22 | 23 | /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ 24 | trace: "on-first-retry" 25 | }, 26 | 27 | /* Configure projects for major browsers */ 28 | projects: [ 29 | { 30 | name: "chromium", 31 | use: { ...devices["Desktop Chrome"] } 32 | }, 33 | 34 | { 35 | name: "firefox", 36 | use: { ...devices["Desktop Firefox"] } 37 | }, 38 | 39 | { 40 | name: "webkit", 41 | use: { ...devices["Desktop Safari"] } 42 | }, 43 | 44 | /* Test against mobile viewports. */ 45 | { 46 | name: "Mobile Chrome", 47 | use: { ...devices["Pixel 5"] } 48 | } 49 | // { 50 | // name: 'Mobile Safari', 51 | // use: { ...devices['iPhone 12'] }, 52 | // }, 53 | 54 | /* Test against branded browsers. */ 55 | // { 56 | // name: 'Microsoft Edge', 57 | // use: { ...devices['Desktop Edge'], channel: 'msedge' }, 58 | // }, 59 | // { 60 | // name: 'Google Chrome', 61 | // use: { ...devices['Desktop Chrome'], channel: 'chrome' }, 62 | // }, 63 | ], 64 | 65 | /* Run your local dev server before starting the tests */ 66 | webServer: { 67 | command: "pnpm run start", 68 | url: "http://127.0.0.1:3000", 69 | reuseExistingServer: !process.env.CI 70 | } 71 | }); 72 | -------------------------------------------------------------------------------- /public/fcc-favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/freeCodeCamp/Developer_Quiz_Site/7855ac93bde30bb9429a68c910324bdd53595482/public/fcc-favicon.ico -------------------------------------------------------------------------------- /public/fcc_primary_large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/freeCodeCamp/Developer_Quiz_Site/7855ac93bde30bb9429a68c910324bdd53595482/public/fcc_primary_large.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Developer Quiz", 3 | "name": "freeCodeCamp Developer Quiz", 4 | "icons": [ 5 | { 6 | "src": "fcc-favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "github>freecodecamp/renovate-config" 4 | ] 5 | } -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import WelcomePage from "./pages/WelcomePage"; 2 | import QuizTemplate from "./QuizTemplate"; 3 | import React from "react"; 4 | import { Route, Routes } from "react-router-dom"; 5 | 6 | const App: React.FC = () => { 7 | return ( 8 | 9 | } /> 10 | } /> 11 | 12 | ); 13 | }; 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /src/QuizTemplate.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import SelectQuestionsTotal from "./pages/SelectQuestionsTotal"; 3 | import SelectCategory from "./pages/SelectCategory"; 4 | import { ALL_CATEGORIES, QUESTION_NUMS } from "./constants"; 5 | import Results from "./pages/Results"; 6 | import shuffle from "./shuffle-arr"; 7 | 8 | import FCCLogo from "./components/FCCLogo"; 9 | import Questions from "./pages/Questions"; 10 | import "./stylesheets/App.css"; 11 | import { 12 | correctModalResponses, 13 | incorrectModalResponses 14 | } from "./data/modal-responses"; 15 | import ButtonLink from "./components/ButtonLink"; 16 | import { Route, Routes, useNavigate } from "react-router-dom"; 17 | 18 | const Main: React.FC = () => { 19 | const navigate = useNavigate(); 20 | const [quiz, setQuiz] = useState(ALL_CATEGORIES); 21 | const [questionNumber, setQuestionNumber] = useState(1); 22 | const [points, setPoints] = useState(0); 23 | const [message, setMessage] = useState(""); 24 | const [correct, setCorrect] = useState(false); 25 | const [displayExplanation, setDisplayExplanation] = useState(""); 26 | const [showReference, setShowReference] = useState(""); 27 | const [selectedOption, setSelectedOption] = useState(""); 28 | const [chosenAnswer, setChosenAnswer] = useState(""); 29 | const [chooseAnswer, setChooseAnswer] = useState(false); 30 | const [show, setShowModal] = useState(false); 31 | 32 | const [choicesArr, setChoicesArr] = useState([]); 33 | const currQuestion = quiz[questionNumber - 1]; 34 | const totalQuestions = quiz.length; 35 | const [filteredQuestions, setFilteredQuestions] = useState(ALL_CATEGORIES); 36 | 37 | //detects if the user tries the refresh the page in the middle of the quiz 38 | useEffect(() => { 39 | window.addEventListener("beforeunload", alertUser); 40 | return () => { 41 | window.removeEventListener("beforeunload", alertUser); 42 | }; 43 | }, []); 44 | 45 | const alertUser = (e: { 46 | preventDefault: () => void; 47 | returnValue: string; 48 | }) => { 49 | e.preventDefault(); 50 | e.returnValue = ""; 51 | }; 52 | const [selectedCategory, setSelectedCategory] = useState(""); 53 | const [, setSelectedQuiz] = useState(0); 54 | 55 | const selectQuiz = (category: string, index: number) => { 56 | setSelectedCategory(category); 57 | setSelectedQuiz(QUESTION_NUMS[index]); 58 | // Filter questions based on the selected category 59 | const filteredQuiz = ALL_CATEGORIES.filter(q => q.Category === category); 60 | setFilteredQuestions(filteredQuiz); 61 | navigate(`/quizzes/${category}/questionsTotal`); 62 | }; 63 | 64 | const startQuiz = (quizQuestionsCount: number) => { 65 | const shuffledQuiz = shuffle(filteredQuestions).slice( 66 | 0, 67 | quizQuestionsCount 68 | ); 69 | 70 | // Shuffle the answer options 71 | const choicesArr: string[][] = shuffledQuiz.map(obj => { 72 | const arr = [ 73 | obj.Answer, 74 | obj.Distractor1, 75 | obj.Distractor2, 76 | obj.Distractor3 77 | ]; 78 | return shuffle(arr); 79 | }); 80 | 81 | setQuiz(shuffledQuiz); 82 | setChoicesArr(choicesArr); 83 | navigate( 84 | `/quizzes/${selectedCategory}/questions/1/of/${quizQuestionsCount}` 85 | ); 86 | }; 87 | 88 | // Function to start a random quiz 89 | const startRandomQuiz = () => { 90 | setSelectedCategory("Random"); // Set the selected category to "Random" 91 | const randomIndex = Math.floor(Math.random() * QUESTION_NUMS.length); 92 | setSelectedQuiz(QUESTION_NUMS[randomIndex]); 93 | // Generate a random set of questions 94 | const randomQuestions = shuffle(ALL_CATEGORIES).slice( 95 | 0, 96 | QUESTION_NUMS[randomIndex] 97 | ); 98 | setQuiz(randomQuestions); 99 | navigate(`/quizzes/Random/questionsTotal`); 100 | }; 101 | 102 | const nextQuestion = () => { 103 | if (questionNumber >= quiz.length) { 104 | navigate(`/quizzes/${selectedCategory}/results`); 105 | return; 106 | } 107 | setQuestionNumber(curr => curr + 1); 108 | setChooseAnswer(false); 109 | navigate( 110 | `/quizzes/${selectedCategory}/questions/${questionNumber + 1}/of/${ 111 | quiz.length 112 | }` 113 | ); 114 | }; 115 | 116 | const resetQuiz = () => { 117 | setSelectedCategory(""); // Reset selected category 118 | setSelectedQuiz(0); // Reset selected quiz 119 | setShowModal(false); 120 | setChooseAnswer(false); 121 | setPoints(0); 122 | setQuestionNumber(1); 123 | navigate(`/quizzes`); 124 | }; 125 | 126 | const shuffleModalResponses = (responses: string[]) => { 127 | const shuffleModalArr = shuffle(responses); 128 | return shuffleModalArr[0]; 129 | }; 130 | 131 | const selectOption = (option: string) => setSelectedOption(option); 132 | 133 | const checkAnswer = () => { 134 | const userAnswer = selectedOption; 135 | 136 | // Ensure option was selected before checking answer 137 | if (!userAnswer) { 138 | return; 139 | } 140 | 141 | setSelectedOption(""); 142 | setChooseAnswer(true); 143 | setChosenAnswer(userAnswer); 144 | if (userAnswer !== currQuestion.Answer) { 145 | setCorrect(false); 146 | setMessage(shuffleModalResponses(incorrectModalResponses)); 147 | setDisplayExplanation(currQuestion.Explanation); 148 | setShowReference(currQuestion.Link); 149 | setShowModal(true); 150 | } else { 151 | setCorrect(true); 152 | setPoints(curr => curr + 1); 153 | setMessage(shuffleModalResponses(correctModalResponses)); 154 | setDisplayExplanation(currQuestion.Explanation); 155 | setShowReference(currQuestion.Link); 156 | setShowModal(true); 157 | } 158 | }; 159 | 160 | const modalProps = { 161 | correct, 162 | chosenAnswer, 163 | message, 164 | points, 165 | displayExplanation, 166 | showReference, 167 | show, 168 | nextQuestion 169 | }; 170 | 171 | const resultsProps = { 172 | points, 173 | totalQuestions, 174 | resetQuiz 175 | }; 176 | 177 | const questionProps = { 178 | currQuestion, 179 | questionNumber, 180 | totalQuestions, 181 | modalProps, 182 | chooseAnswer, 183 | points, 184 | choicesArr, 185 | selectedOption, 186 | selectOption, 187 | checkAnswer 188 | }; 189 | 190 | return ( 191 | <> 192 | Home 193 | 194 | 195 | 202 | } 203 | /> 204 | 211 | } 212 | /> 213 | } 216 | /> 217 | } 220 | /> 221 | 222 | 223 | ); 224 | }; 225 | export default Main; 226 | -------------------------------------------------------------------------------- /src/__tests__/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import App from "../App"; 3 | import { cleanup, render } from "@testing-library/react"; 4 | import { HashRouter as Router } from "react-router-dom"; 5 | import { afterEach, describe, it } from "vitest"; 6 | 7 | afterEach(cleanup); 8 | 9 | describe("App", () => { 10 | it("renders without crashing", () => { 11 | render( 12 | 13 | 14 | 15 | ); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /src/__tests__/Data.test.tsx: -------------------------------------------------------------------------------- 1 | import { ALL_CATEGORIES } from "../constants"; 2 | import { test, expect, describe } from "vitest"; 3 | 4 | describe("Every question is valid", () => { 5 | test.each(ALL_CATEGORIES)( 6 | "Every question has an answer, explanation, a link and three distractions", 7 | input => { 8 | expect(input).toHaveProperty("Question"); 9 | expect(input).toHaveProperty("Answer"); 10 | expect(input).toHaveProperty("Distractor1"); 11 | expect(input).toHaveProperty("Distractor2"); 12 | expect(input).toHaveProperty("Distractor3"); 13 | expect(input).toHaveProperty("Explanation"); 14 | expect(input).toHaveProperty("Link"); 15 | } 16 | ); 17 | test.each(ALL_CATEGORIES)( 18 | "There are no empty answers, explanations,links or distractions.", 19 | input => { 20 | expect(input.Question.length).toBeGreaterThan(0); 21 | expect(input.Answer.length).toBeGreaterThan(0); 22 | expect(input.Distractor1.length).toBeGreaterThan(0); 23 | expect(input.Distractor2.length).toBeGreaterThan(0); 24 | expect(input.Distractor3.length).toBeGreaterThan(0); 25 | expect(input.Explanation.length).toBeGreaterThan(0); 26 | expect(input.Link.length).toBeGreaterThan(0); 27 | } 28 | ); 29 | }); 30 | -------------------------------------------------------------------------------- /src/__tests__/Results.test.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Results from "../pages/Results"; 3 | 4 | import { render, cleanup } from "@testing-library/react"; 5 | import { vi } from "vitest"; 6 | import { expect, afterEach, describe, it } from "vitest"; 7 | 8 | afterEach(cleanup); 9 | 10 | // Mock the react-confetti module to prevent rendering actual confetti 11 | vi.mock("react-confetti", () => ({ 12 | default: () =>
13 | })); 14 | 15 | describe("Results", () => { 16 | it("Renders without crashing", () => { 17 | render(); 18 | }); 19 | 20 | it("Displays the accurate score for wrong answers", () => { 21 | const { getByText } = render( 22 | 23 | ); 24 | expect( 25 | getByText("You received 0 out of 10 points").textContent 26 | ).toBeDefined(); 27 | }); 28 | it("Displays the perfect score message if all answers are correct", () => { 29 | const { getByText } = render( 30 | 31 | ); 32 | expect( 33 | getByText("Wow! Perfect Score! 10 out of 10 points").textContent 34 | ).toBeDefined(); 35 | }); 36 | it("renders with perfect score and showConfetti is true", () => { 37 | const props = { 38 | points: 10, 39 | totalQuestions: 10, 40 | resetQuiz: vi.fn() 41 | }; 42 | const { getByTestId } = render(); 43 | const confettiElement = getByTestId("confetti-mock"); 44 | expect(confettiElement).toBeInTheDocument(); 45 | }); 46 | }); 47 | -------------------------------------------------------------------------------- /src/__tests__/SelectCategory.test.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import SelectCategory from "../pages/SelectCategory"; 3 | import { render, cleanup, RenderResult } from "@testing-library/react"; 4 | import { expect, afterEach, describe, it } from "vitest"; 5 | 6 | afterEach(cleanup); 7 | 8 | describe("SelectCategory", () => { 9 | const selectCategoryArr = [ 10 | "HTML", 11 | "CSS", 12 | "JavaScript", 13 | "Accessibility", 14 | "General CS", 15 | "IT", 16 | "Linux", 17 | "Python", 18 | "SQL" 19 | ]; 20 | 21 | it("displays the Choose a Category screen", () => { 22 | const { getByText }: RenderResult = render( 23 | 24 | ); 25 | expect(getByText("Choose a Category")).toBeInTheDocument(); 26 | }); 27 | 28 | it("displays the correct categories", () => { 29 | const { getByText } = render( 30 | 31 | ); 32 | selectCategoryArr.forEach(category => { 33 | expect(getByText(category)).toBeInTheDocument(); 34 | }); 35 | expect(getByText("HTML")).toBeInTheDocument(); 36 | expect(getByText("CSS")).toBeInTheDocument(); 37 | expect(getByText("JavaScript")).toBeInTheDocument(); 38 | }); 39 | }); 40 | -------------------------------------------------------------------------------- /src/__tests__/SelectQuestionsTotal.test.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import SelectQuestionsTotal from "../pages/SelectQuestionsTotal"; 3 | import { render, cleanup } from "@testing-library/react"; 4 | import { expect, afterEach, describe, it, vi } from "vitest"; 5 | 6 | afterEach(cleanup); 7 | 8 | describe("Select Quiz", () => { 9 | it("renders without crashing", () => { 10 | render(); 11 | }); 12 | it("has a button for every quiz question amount under 600", () => { 13 | const { getByText } = render( 14 | 15 | ); 16 | expect(getByText("10").textContent).toBeDefined(); 17 | expect(getByText("25").textContent).toBeDefined(); 18 | expect(getByText("50").textContent).toBeDefined(); 19 | expect(getByText("All (600)").textContent).toBeDefined(); 20 | }); 21 | 22 | it("Has a button for max amount equal to 601", () => { 23 | const { getByText } = render( 24 | 25 | ); 26 | expect(getByText("All (601)").textContent).toBeDefined(); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /src/__tests__/WelcomePage.test.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import WelcomePage from "../pages/WelcomePage"; 3 | import { cleanup, render } from "@testing-library/react"; 4 | import { HashRouter as Router } from "react-router-dom"; 5 | import { afterEach, describe, it } from "vitest"; 6 | 7 | afterEach(cleanup); 8 | 9 | describe("Welcome Page", () => { 10 | it("renders without crashing", () => { 11 | render( 12 | 13 | 14 | 15 | ); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /src/components/Button.tsx: -------------------------------------------------------------------------------- 1 | import "../stylesheets/Button.css"; 2 | import React, { useMemo } from "react"; 3 | import { ButtonProps } from "../types"; 4 | const Button: React.FC = ButtonProps => { 5 | const getButtonClasses = useMemo(() => { 6 | let classes = "btn-default"; 7 | if (ButtonProps.size === "large") { 8 | classes = `${classes} large-btn`; 9 | } 10 | 11 | if (ButtonProps.isTransparent) { 12 | classes = `${classes} transparent-btn`; 13 | } 14 | 15 | return classes; 16 | }, [ButtonProps.size, ButtonProps.isTransparent]); 17 | 18 | return ( 19 | 22 | ); 23 | }; 24 | 25 | export default React.memo(Button); 26 | -------------------------------------------------------------------------------- /src/components/ButtonLink.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { NavLink } from "react-router-dom"; 3 | import "../stylesheets/Button.css"; 4 | import "../stylesheets/ButtonLink.css"; 5 | import { ButtonLinkProps } from "../types"; 6 | 7 | const ButtonLink: React.FC = ({ to, children, size }) => { 8 | return ( 9 | 13 | {children} 14 | 15 | ); 16 | }; 17 | 18 | export default ButtonLink; 19 | -------------------------------------------------------------------------------- /src/components/FCCLogo.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import fCClogo from "../images/fcc_primary_large.webp"; 3 | 4 | const FCCLogo: React.FC = () => { 5 | return freeCodeCamp logo; 6 | }; 7 | export default React.memo(FCCLogo); 8 | -------------------------------------------------------------------------------- /src/components/HeroSection.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "../stylesheets/HeroSection.css"; 3 | import { ROUNDED_QUESTION_COUNT } from "../constants"; 4 | import ButtonLink from "./ButtonLink"; 5 | 6 | const HeroSection: React.FC = () => { 7 | return ( 8 |
9 |
10 |
11 |

Learn to Code RPG Quiz

12 |

13 | Practice with{" "} 14 | 15 | {ROUNDED_QUESTION_COUNT}+ 16 | {" "} 17 | Questions 18 |

19 |
20 |
21 | 22 | {`Get started (it's free)`} 23 | 24 |
25 |
26 |
27 | ); 28 | }; 29 | 30 | export default HeroSection; 31 | -------------------------------------------------------------------------------- /src/components/Navbar.tsx: -------------------------------------------------------------------------------- 1 | import "../stylesheets/Navbar.css"; 2 | import fccLogo from "../images/fcc_primary_large.webp"; 3 | import React from "react"; 4 | 5 | const Navbar = () => { 6 | return ( 7 | <> 8 |
9 | 22 |
23 | 24 | ); 25 | }; 26 | 27 | export default Navbar; 28 | -------------------------------------------------------------------------------- /src/components/QuizBtn.tsx: -------------------------------------------------------------------------------- 1 | import { MouseEventHandler } from "react"; 2 | import React from "react"; 3 | 4 | const QuizBtn: React.FC<{ handleClick: MouseEventHandler; text: string }> = ({ 5 | handleClick, 6 | text 7 | }) => { 8 | return ( 9 | 13 | ); 14 | }; 15 | export default QuizBtn; 16 | -------------------------------------------------------------------------------- /src/components/QuizModal.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef } from "react"; 2 | import "../stylesheets/Modal.css"; 3 | import { QuizQuestion } from "../types"; 4 | 5 | const QuizModal: React.FC = QuizQuestion => { 6 | const dialogRef = useRef(null); 7 | const lightBulbUnicode = "\uD83D\uDCA1"; 8 | const sadFaceUnicode = "\uD83D\uDE14"; 9 | const answerIcon = QuizQuestion.correct ? lightBulbUnicode : sadFaceUnicode; 10 | 11 | // Open/close the dialog using the dialog element's built-in methods 12 | React.useEffect(() => { 13 | if (QuizQuestion.show) { 14 | dialogRef.current?.showModal(); 15 | } else { 16 | dialogRef.current?.close(); 17 | } 18 | }, [QuizQuestion.show]); 19 | 20 | return ( 21 | 22 |
23 |
24 |

25 | {answerIcon} {QuizQuestion.message} 26 |

27 |
28 |
29 |

30 | Points: {QuizQuestion.points} 31 |

32 |

33 | Your Answer: 34 |

35 |

{QuizQuestion.chosenAnswer}

36 |

37 | Answer: 38 |

39 |

{QuizQuestion.displayExplanation}

40 | 46 | Learn more with this helpful resource 47 | 48 |
49 |
50 |

51 | Wanna learn how to code?
Download the free{" "} 52 | 58 | Learn to Code RPG game 59 | 60 |

61 |
62 |
63 | 66 |
67 |
68 | 69 | ); 70 | }; 71 | export default QuizModal; 72 | -------------------------------------------------------------------------------- /src/components/index.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.png"; 2 | -------------------------------------------------------------------------------- /src/constants.ts: -------------------------------------------------------------------------------- 1 | import accessibilityQuiz from "./data/accessibility-quiz"; 2 | import agileQuiz from "./data/agile-quiz"; 3 | import cloudComputingQuiz from "./data/cloud-computing-quiz"; 4 | import cssQuiz from "./data/css-quiz"; 5 | import devopsQuiz from "./data/devops-quiz"; 6 | import freecodecampQuiz from "./data/freecodecamp-quiz"; 7 | import generalCSQuiz from "./data/general-cs-quiz"; 8 | import gitQuiz from "./data/git-quiz"; 9 | import htmlQuiz from "./data/html-quiz"; 10 | import informationTechnologyQuiz from "./data/information-technology-quiz"; 11 | import javascriptQuiz from "./data/javascript-quiz"; 12 | import linuxQuiz from "./data/linux-quiz"; 13 | import pythonQuiz from "./data/python-quiz"; 14 | import qualityAssuranceQuiz from "./data/quality-assurance-quiz"; 15 | import securityQuiz from "./data/security-quiz"; 16 | import sqlQuiz from "./data/sql-quiz"; 17 | import regexQuiz from "./data/regex-quiz"; 18 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 19 | const mapQuizCategory = (quiz: any[], category: string) => { 20 | return quiz.map(q => ({ ...q, Category: category })); 21 | }; 22 | 23 | export const QUESTION_NUMS = [10, 25, 50, 100]; 24 | 25 | export const CATEGORIES = [ 26 | "HTML", 27 | "CSS", 28 | "JavaScript", 29 | "Accessibility", 30 | "General CS", 31 | "IT", 32 | "Linux", 33 | "Python", 34 | "SQL" 35 | ]; 36 | 37 | export const ALL_CATEGORIES = [ 38 | ...mapQuizCategory(accessibilityQuiz, "Accessibility"), 39 | ...mapQuizCategory(cssQuiz, "CSS"), 40 | ...mapQuizCategory(cloudComputingQuiz, "Cloud Computing"), 41 | ...mapQuizCategory(devopsQuiz, "DevOps"), 42 | ...mapQuizCategory(freecodecampQuiz, "freeCodeCamp"), 43 | ...mapQuizCategory(generalCSQuiz, "General CS"), 44 | ...mapQuizCategory(gitQuiz, "Git"), 45 | ...mapQuizCategory(htmlQuiz, "HTML"), 46 | ...mapQuizCategory(informationTechnologyQuiz, "IT"), 47 | ...mapQuizCategory(javascriptQuiz, "JavaScript"), 48 | ...mapQuizCategory(linuxQuiz, "Linux"), 49 | ...mapQuizCategory(pythonQuiz, "Python"), 50 | ...mapQuizCategory(sqlQuiz, "SQL"), 51 | ...mapQuizCategory(agileQuiz, "Agile"), 52 | ...mapQuizCategory(qualityAssuranceQuiz, "QA"), 53 | ...mapQuizCategory(securityQuiz, "Security"), 54 | ...mapQuizCategory(regexQuiz, "Regex") 55 | ]; 56 | 57 | export const ROUNDED_QUESTION_COUNT = 1200; 58 | -------------------------------------------------------------------------------- /src/data/cloud-computing-quiz.ts: -------------------------------------------------------------------------------- 1 | const cloudComputingQuiz = [ 2 | { 3 | Question: 4 | "What is one of the key benefits of following CNCF standards in cloud-native app development?", 5 | Answer: 6 | "Ensuring apps are built in the right way and reducing vendor lock-in", 7 | Distractor1: "Increased vendor lock-in", 8 | Distractor2: "Slower development process", 9 | Distractor3: "Reduced compatibility with other services", 10 | Explanation: 11 | "Following CNCF standards ensures that cloud-native apps are built using best practices, reducing the risk of vendor lock-in and promoting compatibility with a wide range of cloud services and tools.", 12 | Link: "https://www.freecodecamp.org/news/get-started-with-cloud-native/" 13 | }, 14 | { 15 | Question: 16 | "Which organization champions standards for cloud-native services and helps reduce vendor lock-in?", 17 | Answer: "CNCF (Cloud Native Computing Foundation)", 18 | Distractor1: "AWS (Amazon Web Services)", 19 | Distractor2: "Microsoft Azure", 20 | Distractor3: "Google Cloud", 21 | Explanation: 22 | "The CNCF (Cloud Native Computing Foundation) is known for championing standards in cloud-native services. Following these standards helps reduce vendor lock-in and ensures compatibility across different services.", 23 | Link: "https://www.freecodecamp.org/news/get-started-with-cloud-native/" 24 | }, 25 | { 26 | Question: 27 | "Which of the following is a benefit for developing cloud-native apps?", 28 | Answer: "Scalability", 29 | Distractor1: "Advanced algorithms", 30 | Distractor2: "Significant amounts of downtime", 31 | Distractor3: "Static application structure", 32 | Explanation: 33 | "Scalability is a benefit because it allows cloud-native applications to have flexible deployment options across the network making it easier to develop, deploy, and iterate on the application.", 34 | Link: "https://www.freecodecamp.org/news/get-started-with-cloud-native/" 35 | }, 36 | { 37 | Question: 38 | "How does container orchestration, such as Kubernetes, help in deploying software updates in cloud-native apps?", 39 | Answer: 40 | "It automatically replaces downed instances with minimal or zero downtime", 41 | Distractor1: "It causes significant downtime during updates", 42 | Distractor2: "It delays the deployment of software updates", 43 | Distractor3: "It requires manual intervention for every update", 44 | Explanation: 45 | "Container orchestration systems like Kubernetes automatically manage the deployment of containers, ensuring that if an instance goes down, it's replaced quickly to minimize or eliminate downtime.", 46 | Link: "https://www.freecodecamp.org/news/get-started-with-cloud-native/" 47 | }, 48 | { 49 | Question: 50 | "Which model do cloud-native apps typically follow for software updates, allowing for immediate deployment?", 51 | Answer: "Continuous delivery model", 52 | Distractor1: "Waterfall model", 53 | Distractor2: "Agile model", 54 | Distractor3: "V-Model", 55 | Explanation: 56 | "Cloud-native apps commonly follow the continuous delivery model, enabling software updates to be shipped immediately, leading to faster development and deployment cycles.", 57 | Link: "https://www.freecodecamp.org/news/get-started-with-cloud-native/" 58 | }, 59 | { 60 | Question: 61 | "What architectural approach do cloud-native apps typically use to build independently deployable components?", 62 | Answer: "Microservices architecture", 63 | Distractor1: "Monolithic architecture", 64 | Distractor2: "Hybrid architecture", 65 | Distractor3: "Serverless architecture", 66 | Explanation: 67 | "Cloud-native apps often use the microservices architecture, which breaks down applications into small, independent components that can be developed, managed, and deployed separately. This architectural approach enhances independence and flexibility.", 68 | Link: "https://www.freecodecamp.org/news/get-started-with-cloud-native/" 69 | }, 70 | { 71 | Question: 72 | "How does the use of microservices in cloud-native apps affect their independence?", 73 | Answer: 74 | "It allows components to be built, managed, and deployed independently", 75 | Distractor1: "It makes them dependent on each other", 76 | Distractor2: "It requires all components to be deployed simultaneously", 77 | Distractor3: "It slows down the development process.", 78 | Explanation: 79 | "Microservices architecture allows individual components to be developed, managed, and deployed independently, promoting independence and reducing the impact of changes in one component on others.", 80 | Link: "https://www.freecodecamp.org/news/get-started-with-cloud-native/" 81 | }, 82 | { 83 | Question: 84 | "What is the key advantage of file storage compared to block storage regarding multiple compute instances?", 85 | Answer: 86 | "Multiple instances can be mounted on the same file storage device in file storage.", 87 | Distractor1: "Block storage is more scalable for multiple instances.", 88 | Distractor2: 89 | "File storage is not suitable for use with multiple compute instances.", 90 | Distractor3: 91 | "Block storage allows instances to share data more efficiently.", 92 | Explanation: 93 | "In file storage, multiple compute instances can share and access the same file storage device, making it easier to collaborate and share data among different instances. This is a key advantage over block storage, which is often more limited in this regard.", 94 | Link: "https://www.freecodecamp.org/news/cloud-storage-options/" 95 | }, 96 | { 97 | Question: "Which major cloud providers offer file storage options?", 98 | Answer: "AWS, GCP, and Azure.", 99 | Distractor1: "AWS, GCP, and IBM Cloud.", 100 | Distractor2: "Microsoft, Oracle, and Google Cloud.", 101 | Distractor3: "AWS, Azure, and Alibaba Cloud.", 102 | Explanation: 103 | "Amazon Web Services (AWS), Google Cloud Platform (GCP), and Microsoft Azure are major cloud providers that offer file storage solutions, such as AWS Elastic File Storage (EFS), GCP Cloud Filestore, and Azure Files.", 104 | Link: "https://www.freecodecamp.org/news/cloud-storage-options/" 105 | }, 106 | { 107 | Question: 108 | "In the context of file storage, what is the role of the operating system?", 109 | Answer: 110 | "To abstract away the block storage and create a file cabinet-like structure.", 111 | Distractor1: "To expose the underlying block storage to applications.", 112 | Distractor2: "To provide a low-level interface for data manipulation.", 113 | Distractor3: "To optimize file storage for performance.", 114 | Explanation: 115 | "In file storage, the operating system abstracts the underlying block storage, presenting a hierarchical file structure to users and applications. This abstraction simplifies data access and management.", 116 | Link: "https://www.freecodecamp.org/news/cloud-storage-options/" 117 | }, 118 | { 119 | Question: 120 | "How does file storage improve data management compared to block storage?", 121 | Answer: 122 | "File storage groups related blocks into files and organizes them into directories.", 123 | Distractor1: 124 | "File storage simplifies access to applications by exposing the underlying block addresses.", 125 | Distractor2: 126 | "File storage allows you to read and write individual data blocks directly.", 127 | Distractor3: "File storage is more cost-effective for all use cases.", 128 | Explanation: 129 | "File storage improves data management by grouping related blocks into files and organizing those files within directories, providing a more intuitive and structured way to access and manage data.", 130 | Link: "https://www.freecodecamp.org/news/cloud-storage-options/" 131 | }, 132 | { 133 | Question: 134 | "Which of the following best describes file storage's hierarchical structure?", 135 | Answer: 136 | "The arrangement of files and directories for organizing and managing data.", 137 | Distractor1: "A bookshelf-like organization of blocks.", 138 | Distractor2: "A low-level interface for reading and writing data blocks.", 139 | Distractor3: "A complex system of block addresses for data retrieval.", 140 | Explanation: 141 | "File storage's hierarchical structure refers to the way data is organized into files and directories, allowing for efficient data management and access.", 142 | Link: "https://www.freecodecamp.org/news/cloud-storage-options/" 143 | }, 144 | { 145 | Question: 146 | "What is the primary difference between block storage and file storage?", 147 | Answer: 148 | "File storage introduces the concept of files and directories on top of block storage.", 149 | Distractor1: "Block storage is more abstract than file storage.", 150 | Distractor2: 151 | "Block storage is hierarchical, while file storage deals with individual blocks", 152 | Distractor3: 153 | "Block storage is typically used for cloud storage, while file storage is used for local storage.", 154 | Explanation: 155 | "Block storage is a low-level storage abstraction that deals with individual data blocks but lacks the concept of files and directories. File storage, on the other hand, builds on top of block storage and introduces the organizational structure of files and directories.", 156 | Link: "https://www.freecodecamp.org/news/cloud-storage-options/" 157 | }, 158 | { 159 | Question: 160 | "What types of applications are now available as online software equivalents through the growing marketplace of SaaS tools?", 161 | Answer: 162 | "Accounting, computer-assisted design (CAD), and graphic design solutions", 163 | Distractor1: "Hardware management tools", 164 | Distractor2: "Operating system utilities", 165 | Distractor3: "Gaming software", 166 | Explanation: 167 | "The growing marketplace of SaaS tools offers online software equivalents for various applications, including accounting, CAD, and graphic design solutions. This allows users to access and use these applications in the cloud without the need for standalone workstations.", 168 | Link: "https://www.freecodecamp.org/news/modern-compute-platforms/" 169 | }, 170 | { 171 | Question: 172 | "What are Microsoft's Office 365 and Google's G Suite examples of?", 173 | Answer: "SaaS office productivity tools", 174 | Distractor1: "IaaS solutions", 175 | Distractor2: "PaaS solutions", 176 | Distractor3: "Graphic design solutions", 177 | Explanation: 178 | "Both Microsoft Office 365 and Google G Suite are cloud based examples of Software as a Service (SaaS) office productivity tools, providing applications like word processing, spreadsheets, and email as online services.", 179 | Link: "https://www.freecodecamp.org/news/modern-compute-platforms/" 180 | }, 181 | { 182 | Question: "Which of the following is an example of a major IaaS player?", 183 | Answer: "Amazon EC2", 184 | Distractor1: "AWS Elastic Beanstalk", 185 | Distractor2: "Salesforce Lightning Platform", 186 | Distractor3: "Google G Suite", 187 | Explanation: 188 | "Amazon Elastic Compute Cloud (EC2) is a well-known and widely used Infrastructure as a Service (IaaS) offering provided by Amazon Web Services (AWS).", 189 | Link: "https://www.freecodecamp.org/news/modern-compute-platforms/" 190 | }, 191 | { 192 | Question: 193 | "What is the primary responsibility of users in an Infrastructure as a Service (IaaS) environment?", 194 | Answer: "Managing the operating system and software.", 195 | Distractor1: "Managing hardware, networking, and security elements.", 196 | Distractor2: "Managing end-user interfaces.", 197 | Distractor3: "Managing data and code deployment.", 198 | Explanation: 199 | "In an IaaS environment, the provider takes care of the underlying hardware, networking, and security, while users are responsible for managing the operating system and any additional software they install on their virtual server instances.", 200 | Link: "https://www.freecodecamp.org/news/modern-compute-platforms/" 201 | }, 202 | { 203 | Question: 204 | "Which cloud platforms offer serverless computing services mentioned in the text?", 205 | Answer: "Amazon Lambda and Azure Functions.", 206 | Distractor1: "Amazon Elastic Beanstalk and Google Cloud Functions.", 207 | Distractor2: "Amazon Elastic Beanstalk and Azure App Service.", 208 | Distractor3: "Google Cloud Run and AWS Fargate.", 209 | Explanation: 210 | "Amazon Lambda and Azure Functions are examples of serverless computing platforms that provide services for running code without having to manage server infrastructure.", 211 | Link: "https://www.freecodecamp.org/news/modern-compute-platforms/" 212 | }, 213 | { 214 | Question: 215 | "Which of the following statements accurately describes serverless computing?", 216 | Answer: 217 | "Serverless computing is a form of virtualization that abstracts everything, including application code.", 218 | Distractor1: 219 | "Serverless computing involves running software code without any underlying server infrastructure.", 220 | Distractor2: 221 | "Serverless computing is similar to virtualization but requires extensive configuration.", 222 | Distractor3: 223 | "Serverless platforms like Amazon Lambda and Azure Functions are equivalent to dedicated servers.", 224 | Explanation: 225 | "Serverless computing is a form of cloud computing that abstracts server management, including server instance settings, and allows developers to focus only on writing application code.", 226 | Link: "https://www.freecodecamp.org/news/modern-compute-platforms/" 227 | }, 228 | { 229 | Question: 230 | "What is the main difference between serverless computing and traditional server computing?", 231 | Answer: 232 | "Serverless computing doesn't require configuring server instance settings, while traditional computing does.", 233 | Distractor1: 234 | "Serverless computing uses physical servers, while traditional computing uses virtual servers.", 235 | Distractor2: 236 | "Serverless computing is more cost effective than traditional computing.", 237 | Distractor3: 238 | "Serverless computing requires you to see the server physically.", 239 | Explanation: 240 | "In traditional server computing, you typically need to configure server instance settings, such as CPU, memory, and networking, which is not required in serverless computing.", 241 | Link: "https://www.freecodecamp.org/news/modern-compute-platforms/" 242 | }, 243 | { 244 | Question: 245 | "What is the key benefit of deploying Edge Computing resources in managing data from IoT devices?", 246 | Answer: "Consuming and transforming IoT data faster at the network edges.", 247 | Distractor1: "Encouraging IoT devices to move closer to data centers.", 248 | Distractor2: 249 | "The act of asking customers to move closer to server locations.", 250 | Distractor3: 251 | "Increasing the physical distance between IoT devices and servers.", 252 | Explanation: 253 | "The key benefit of deploying Edge Computing for managing IoT data is the ability to process and transform data quickly at the network edges, improving responsiveness and efficiency in IoT applications.", 254 | Link: "https://www.freecodecamp.org/news/modern-compute-platforms/" 255 | }, 256 | { 257 | Question: "What is Edge Computing?", 258 | Answer: 259 | "The installation of distributed networks of smaller servers to reduce latency.", 260 | Distractor1: 261 | "The process of magically reducing latency without any physical changes.", 262 | Distractor2: 263 | "The act of asking customers to move closer to server locations.", 264 | Distractor3: 265 | "The use of long-distance data transfer to improve network efficiency.", 266 | Explanation: 267 | "Edge Computing refers to the strategy of placing smaller servers or computing resources closer to the location where data is generated or needed, such as near end-users or IoT devices. This approach is used to improve the speed and responsiveness of network services and applications.", 268 | Link: "https://www.freecodecamp.org/news/modern-compute-platforms/" 269 | }, 270 | { 271 | Question: 272 | "In a cloud-native architecture, which of the following is not considered a core component?", 273 | Answer: "Monolithic architecture", 274 | Distractor1: "Microservices architecture", 275 | Distractor2: "Containerization", 276 | Distractor3: "CI/CD (Continuous Integration/Continuous Deployment)", 277 | Explanation: 278 | "Cloud-native architecture often focuses on the use of microservices, containers, and continuous integration/continuous deployment (CI/CD) practices, which are more agile and scalable than monolithic architectures.", 279 | Link: "https://www.freecodecamp.org/news/get-started-with-cloud-native/" 280 | }, 281 | { 282 | Question: "Which statement is incorrect for block storage?", 283 | Answer: "It stores all data as objects in a flat structure", 284 | Distractor1: "It is the lowest level abstraction of storage.", 285 | Distractor2: "It is bootable.", 286 | Distractor3: 287 | "Block storage devices are usually only attached to a single instance.", 288 | Explanation: 289 | "Block storage does not store data as objects in a flat structure. Instead, it divides data into fixed-sized blocks and provides low-level access to these blocks. Object storage, on the other hand, stores data as objects in a flat structure with associated metadata.", 290 | Link: "https://www.freecodecamp.org/news/cloud-storage-options/" 291 | }, 292 | { 293 | Question: 294 | "Which cloud computing delivery model focuses on providing infrastructure as a service to users?", 295 | Answer: "IaaS", 296 | Distractor1: "FaaS", 297 | Distractor2: "Saas", 298 | Distractor3: "PaaS", 299 | Explanation: 300 | "IaaS cloud computing delivery model focuses on providing infrastructure like servers, networking technology, storage, and data center space as a service to users. This gives users the autonomy to decide what infrastructure is provisioned based on the different needs of their application.", 301 | Link: "https://www.freecodecamp.org/news/get-started-with-cloud-native/" 302 | }, 303 | { 304 | Question: 305 | "Which cloud computing strategy is often referred to as 'Lift and Shift'?", 306 | Answer: "Rehosting", 307 | Distractor1: "Repurchase", 308 | Distractor2: "Replatform", 309 | Distractor3: "Rearchitect", 310 | Explanation: 311 | "The Rehosting strategy is often referred to as 'Lift and Shift' because you are moving your existing data and systems to the cloud with no changes. The advantage of this strategy is that it has a lower risk when migrating to the cloud", 312 | Link: "https://www.freecodecamp.org/news/advantages-of-cloud-computing/" 313 | }, 314 | { 315 | Question: 316 | "Which of the following is NOT a common strategy in cloud migration?", 317 | Answer: "Redecorating", 318 | Distractor1: "Rehosting", 319 | Distractor2: "Repurchasing", 320 | Distractor3: "Refactoring", 321 | Explanation: 322 | "The term 'Redecorating' is not a recognized strategy in cloud migration. While Rehosting, Repurchasing, and Refactoring are established methods for migrating applications and services to the cloud.", 323 | Link: "https://www.freecodecamp.org/news/advantages-of-cloud-computing/" 324 | }, 325 | { 326 | Question: 327 | "Which of the following is NOT considered an advantage of cloud computing?", 328 | Answer: "Depends on network connectivity", 329 | Distractor1: "Scalability", 330 | Distractor2: "Globalization", 331 | Distractor3: "Agility", 332 | Explanation: 333 | " Cloud services rely on an internet connection, and if the network experiences downtime or slowdowns, it can affect access to cloud resources and services.", 334 | Link: "https://www.freecodecamp.org/news/advantages-of-cloud-computing/" 335 | }, 336 | { 337 | Question: 338 | "What cloud computing term refers to the ability to quickly scale resources up or down based on demand?", 339 | Answer: "Elasticity", 340 | Distractor1: "Resilience", 341 | Distractor2: "Orchestration", 342 | Distractor3: "Virtualization", 343 | Explanation: 344 | "Elasticity allows cloud resources to be easily adjusted to handle changing workloads.", 345 | Link: "https://www.freecodecamp.org/news/aws-and-elasticity-keeping-ahead-of-user-demand/" 346 | }, 347 | { 348 | Question: "What is the primary goal of cloud load balancing?", 349 | Answer: "Distribute traffic evenly across multiple servers or resources", 350 | Distractor1: "Minimize latency within the cloud network", 351 | Distractor2: "Increase server capacity", 352 | Distractor3: "Enhance data encryption in transit", 353 | Explanation: 354 | "Cloud load balancing ensures that incoming network traffic is distributed evenly across multiple servers or resources for improved performance.", 355 | Link: "https://www.freecodecamp.org/news/high-availability-concepts-and-theory/" 356 | }, 357 | { 358 | Question: 359 | "What is the primary advantage of using a serverless architecture in cloud computing?", 360 | Answer: "Automatic scaling and resource management", 361 | Distractor1: "Low latency network connections", 362 | Distractor2: "Complete control over server configuration", 363 | Distractor3: "Reduced cost of hardware", 364 | Explanation: 365 | "Serverless computing automatically scales resources up or down based on demand, eliminating the need for manual resource management.", 366 | Link: "https://www.freecodecamp.org/news/how-to-get-started-with-serverless-architecture/" 367 | }, 368 | { 369 | Question: 370 | "Which type of cloud computing focuses on designing a product that is run and managed by the service provider?", 371 | Answer: "Software as a Service", 372 | Distractor1: "Platform as a Service", 373 | Distractor2: "Infrastructure as a Service", 374 | Distractor3: "Function as a Service", 375 | Explanation: 376 | "SaaS is a cloud-based software solution in which software providers deliver applications to users over the internet. SaaS companies provide access to their software most commonly via a website or an app.", 377 | Link: "https://en.wikipedia.org/wiki/Software_as_a_service" 378 | }, 379 | { 380 | Question: 381 | "Which type of cloud computing focuses on the deployment and management of your apps?", 382 | Answer: "Platform as a Service", 383 | Distractor1: "Software as a Service", 384 | Distractor2: "Infrastructure as a Service", 385 | Distractor3: "Function as a Service", 386 | Explanation: 387 | "PaaS provides access to a platform for companies to create apps, perform web development, or manage other programming projects.", 388 | Link: "https://www.freecodecamp.org/news/advantages-of-cloud-computing/" 389 | }, 390 | { 391 | Question: 392 | "Which type of cloud computing serves as the basic building blocks for cloud IT?", 393 | Answer: "Infrastructure as a Service", 394 | Distractor1: "Platform as a Service", 395 | Distractor2: "Software as a Service", 396 | Distractor3: "Function as a Service", 397 | Explanation: 398 | "Infrastructure as a Service providers allow users to forgo physical servers or data centers. With IaaS, the provider manages the infrastructure and the clients manage their software and applications.", 399 | Link: "https://www.freecodecamp.org/news/advantages-of-cloud-computing/" 400 | }, 401 | { 402 | Question: 403 | "Which cloud deployment model is when everything is built on a Cloud Service Provider?", 404 | Answer: "Public Cloud", 405 | Distractor1: "Private Cloud", 406 | Distractor2: "Hybrid Cloud", 407 | Distractor3: "Multi-Cloud", 408 | Explanation: 409 | "Public clouds are the most common type of cloud computing deployment. The cloud resources (like servers and storage) are owned and operated by a third-party cloud service provider and delivered over the internet.", 410 | Link: "https://www.freecodecamp.org/news/advantages-of-cloud-computing/" 411 | }, 412 | { 413 | Question: 414 | "Which cloud deployment model is when everything is built on a company's own data center?", 415 | Answer: "Private Cloud", 416 | Distractor1: "Public Cloud", 417 | Distractor2: "Hybrid Cloud", 418 | Distractor3: "Multi-Cloud", 419 | Explanation: 420 | "A private cloud consists of cloud computing resources used exclusively by one business or organization. The private cloud can be physically located at your organization's on-site data center, or it can be hosted by a third-party service provider.", 421 | Link: "https://www.freecodecamp.org/news/advantages-of-cloud-computing/" 422 | }, 423 | { 424 | Question: 425 | "Which cloud deployment model has workloads running across both a company's own data center and a Cloud Service Provider?", 426 | Answer: "Hybrid Cloud", 427 | Distractor1: "Public Cloud", 428 | Distractor2: "Private Cloud", 429 | Distractor3: "Multi-Cloud", 430 | Explanation: 431 | "Hybrid cloud computing refers to a computing environment that combines public cloud and on-premises infrastructure, including private cloud, by allowing data and applications to be shared between them.", 432 | Link: "https://www.freecodecamp.org/news/advantages-of-cloud-computing/" 433 | }, 434 | { 435 | Question: 436 | "Which cloud deployment model utilizes multiple Cloud Service Providers?", 437 | Answer: "Multi-Cloud", 438 | Distractor1: "Public Cloud", 439 | Distractor2: "Hybrid Cloud", 440 | Distractor3: "Public Cloud", 441 | Explanation: 442 | "Multi-Cloud computing refers to the use of multiple cloud computing services from more than one cloud provider—including private and public clouds—in a heterogeneous environment.", 443 | Link: "https://www.freecodecamp.org/news/advantages-of-cloud-computing/" 444 | }, 445 | { 446 | Question: 447 | "What cloud term describes when a company decides to build their web application first on a Cloud Service Provider?", 448 | Answer: "Cloud-First", 449 | Distractor1: "Cloud-Native", 450 | Distractor2: "Cloud Platform", 451 | Distractor3: "Cloud-Last", 452 | Explanation: 453 | "Cloud first is considering the cloud before any other possible solution, either when optimizing IT spend or launching new projects", 454 | Link: "https://www.freecodecamp.org/news/advantages-of-cloud-computing/" 455 | }, 456 | { 457 | Question: "What does CSP stand for in Cloud Computing?", 458 | Answer: "Cloud Service Provider", 459 | Distractor1: "Cloud Systems Provisioning", 460 | Distractor2: "Cloud Software Platform", 461 | Distractor3: "Cloud Systems Platform", 462 | Explanation: 463 | "A cloud service provider is a third-party company offering a cloud-based platform, infrastructure, application or storage services.", 464 | Link: "https://www.freecodecamp.org/news/advantages-of-cloud-computing/" 465 | }, 466 | { 467 | Question: "What does VPS stand for in Cloud Computing?", 468 | Answer: "Virtual Private Server", 469 | Distractor1: "Virtual Platform Service", 470 | Distractor2: "Video Platform System", 471 | Distractor3: "Varied Python Status", 472 | Explanation: 473 | "A Virtual Private Server (VPS) is a virtual machine sold as a service by an Internet hosting service.", 474 | Link: "https://en.wikipedia.org/wiki/Virtual_private_server" 475 | }, 476 | { 477 | Question: 478 | "What phenomenon is closely connected with Technology life cycles?", 479 | Answer: "K-Waves", 480 | Distractor1: "K-Pop", 481 | Distractor2: "Omega Directive", 482 | Distractor3: "SDLC", 483 | Explanation: "Cloud is speculated to be the current new K-Wave", 484 | Link: "https://en.wikipedia.org/wiki/Kondratiev_wave" 485 | } 486 | ]; 487 | export default cloudComputingQuiz; 488 | -------------------------------------------------------------------------------- /src/data/devops-quiz.ts: -------------------------------------------------------------------------------- 1 | const devopsQuiz = [ 2 | { 3 | Question: "What are Docker images built out of?", 4 | Answer: "Filesystem layers,", 5 | Distractor1: "Operating Systems", 6 | Distractor2: "Virtual Machines", 7 | Distractor3: "Containers", 8 | Explanation: 9 | "When you build a Docker image, each instruction in the Dockerfile contributes to a new layer. For example, if you have an instruction to install a software package, it creates a layer with the changes related to that installation.", 10 | Link: "https://www.freecodecamp.org/news/docker-devops-course/" 11 | }, 12 | { 13 | Question: 14 | "Within the realm of DevOps, what does 'Immutable Infrastructure' signify?", 15 | Answer: 16 | "An approach where infrastructure components are never modified but replaced entirely when changes are needed", 17 | Distractor1: "A strategy for manually configuring servers", 18 | Distractor2: "A method for continuously updating infrastructure", 19 | Distractor3: "A way to centralize infrastructure management", 20 | Explanation: 21 | "Immutable Infrastructure is a methodology that involves the complete replacement of servers and infrastructure components whenever modifications are required. This approach is in harmony with DevOps principles, underscoring the significance of automation in ensuring dependable and uniform operations", 22 | Link: "https://www.freecodecamp.org/news/learn-instructure-as-a-code-by-building-custom-machine-image-in-aws/" 23 | }, 24 | { 25 | Question: "What is 'Microservices Architecture' in DevOps?", 26 | Answer: 27 | "An architectural style where applications are composed of small, independent services", 28 | Distractor1: 29 | "A way to centralize all software components into a single monolithic application", 30 | Distractor2: "A method for managing server hardware", 31 | Distractor3: "A strategy for code versioning", 32 | Explanation: 33 | "Microservices is an architectural style where applications are composed of small, independent services that can be deployed and scaled individually as they promote flexibility and scalability in software development and deployment.", 34 | Link: "https://www.freecodecamp.org/news/microservices-and-software-system-design-course/" 35 | }, 36 | { 37 | Question: "What is the role of a 'Repository' in Continuous Integration?", 38 | Answer: "To store and version control source code", 39 | Distractor1: "To deploy applications to production servers", 40 | Distractor2: "To monitor system performance", 41 | Distractor3: "To automate infrastructure provisioning", 42 | Explanation: 43 | "A repository, often using version control systems like Git, is used to store and track changes to source code in CI/CD pipelines.", 44 | Link: "https://www.freecodecamp.org/news/git-and-github-crash-course/" 45 | }, 46 | { 47 | Question: "What is the purpose of a Dockerfile in containerization?", 48 | Answer: "To define the instructions for building a Docker container image", 49 | Distractor1: "To create a virtual machine", 50 | Distractor2: "To write unit tests for code", 51 | Distractor3: "To configure network settings", 52 | Explanation: 53 | "A Dockerfile is used to specify the instructions for building a Docker container image, including dependencies and configurations.", 54 | Link: "https://www.freecodecamp.org/news/the-docker-handbook/" 55 | }, 56 | { 57 | Question: "What is DevOps?", 58 | Answer: 59 | "a combination of software development and IT operations with the goal of shortening the systems development life cycle ", 60 | Distractor1: "a popular JavaScript library", 61 | Distractor2: "a popular SQL database", 62 | Distractor3: "a popular Python library", 63 | Explanation: 64 | "DevOps combines software development and IT operations with the goal of shortening the systems development life cycle and providing continuous delivery of software. ", 65 | Link: "https://www.freecodecamp.org/news/devops-engineering-course-for-beginners/" 66 | }, 67 | { 68 | Question: "What is Continuous Integration?", 69 | Answer: 70 | "the act of pushing small changes to a repository and running tests on those changes", 71 | Distractor1: "the act of cloning an entire repository to another computer", 72 | Distractor2: "the act of resolving a merge conflict in a repository", 73 | Distractor3: "the act of creating a new branch on a repository", 74 | Explanation: 75 | "Continuous Integration(CI) is the act of continuously pushing small changes to a central repository numerous times per day. And those changes are verified by automated computer software that runs the tests that the programmers have defined.", 76 | Link: "https://www.freecodecamp.org/news/devops-engineering-course-for-beginners/" 77 | }, 78 | { 79 | Question: "What is code coverage in DevOps?", 80 | Answer: 81 | "a metric used to determine how much of the codebase has been tested", 82 | Distractor1: 83 | "a metric used to determine how many commits were pushed to the project in a day", 84 | Distractor2: 85 | "a metric used to determine how many developers worked on the project that day", 86 | Distractor3: 87 | "a metric used to determine how many project files were added that day", 88 | Explanation: 89 | "Code coverage is a metric used to determine how much of the codebase has been tested.", 90 | Link: "https://youtu.be/j5Zsa_eOXeY?t=2085" 91 | }, 92 | { 93 | Question: "What is an ephemeral environment in DevOps?", 94 | Answer: 95 | "temporary environments that contain a self contained version of the entire application", 96 | Distractor1: "environments that will write all of your unit tests for you", 97 | Distractor2: "environments that will perform code reviews for you", 98 | Distractor3: "environments that will fix your mistakes as you code", 99 | Explanation: 100 | "Ephemeral environments are temporary environments that contain a self contained version of the entire application. Generally, for every feature branch, they're often spun up by a slack bot, or automatically on every commit using DevOps platforms like later ci itself, or Heroku.", 101 | Link: "https://youtu.be/j5Zsa_eOXeY?t=3456" 102 | }, 103 | { 104 | Question: "What is a virtual machine?", 105 | Answer: "a virtual instance of a computer that can run applications", 106 | Distractor1: "a type of software that installs project dependencies", 107 | Distractor2: "a type of software used to remove malware from computers", 108 | Distractor3: 109 | "a virtual instance of a computer only used to build mobile games", 110 | Explanation: 111 | "A Virtual Machine(VM) is a virtual instance of a computer that can run applications.", 112 | Link: "https://youtu.be/j5Zsa_eOXeY?t=4255" 113 | }, 114 | { 115 | Question: "What is a container in DevOps?", 116 | Answer: 117 | "a package that consists of the entire application and its dependencies", 118 | Distractor1: "a special tool used to install dependencies into a project", 119 | Distractor2: "a tool used to clone a repository from GitHub", 120 | Distractor3: "a package used to create unit tests for the project", 121 | Explanation: 122 | "A container is a package that consists of the entire application and its dependencies.", 123 | Link: "https://youtu.be/j5Zsa_eOXeY?t=4255" 124 | }, 125 | { 126 | Question: "What are rolling deployments in DevOps?", 127 | Answer: 128 | "a deployment strategy for replacing old versions of the app with new versions", 129 | Distractor1: 130 | "a deployment strategy for copying an entire application and its dependencies", 131 | Distractor2: 132 | "a strategy used to roll back the application to a prior state", 133 | Distractor3: 134 | "a strategy used to run test suites multiple times before deploying an application", 135 | Explanation: 136 | "Rolling deployments are a popular deployment strategy used to replace old versions of the app with new versions.", 137 | Link: "https://youtu.be/j5Zsa_eOXeY?t=5002" 138 | }, 139 | { 140 | Question: "What is Continuous Deployment in DevOps?", 141 | Answer: 142 | "a strategy used to push code into production that passed automated testing", 143 | Distractor1: 144 | "a strategy used to roll back the application to a prior state", 145 | Distractor2: 146 | "a strategy used to determine how much of the codebase has been tested", 147 | Distractor3: 148 | "a deployment strategy for replacing old versions of the app with new versions", 149 | Explanation: 150 | "Continuous Deployment is a strategy used to push code into production that passed automated testing", 151 | Link: "https://youtu.be/j5Zsa_eOXeY?t=5315" 152 | }, 153 | { 154 | Question: "Which of the following is NOT a common practice in DevOps?", 155 | Answer: "Continuous rebasing", 156 | Distractor1: "Continuous development", 157 | Distractor2: "Continuous deployment", 158 | Distractor3: "Continuous integration", 159 | Explanation: 160 | "Some common practices in DevOps include Continuous development, Continuous deployment and Continuous integration.", 161 | Link: "https://youtu.be/j5Zsa_eOXeY" 162 | }, 163 | { 164 | Question: "Which of the following is NOT a common method used in DevOps?", 165 | Answer: "Divide and Conquer strategy", 166 | Distractor1: "Agile", 167 | Distractor2: "Scrum", 168 | Distractor3: "Kanban", 169 | Explanation: 170 | "Some common methods in DevOps include Agile, Scrum and Kanban.", 171 | Link: "https://youtu.be/j5Zsa_eOXeY" 172 | }, 173 | { 174 | Question: 175 | "Which of the following testing tools is commonly used in DevOps?", 176 | Answer: "Selenium", 177 | Distractor1: "PyTorch", 178 | Distractor2: "Apache Commons", 179 | Distractor3: "jQuery", 180 | Explanation: 181 | "JUnit, Jenkins, and Selenium are some commonly used testing tools used in DevOps.", 182 | Link: "https://youtu.be/j5Zsa_eOXeY" 183 | }, 184 | { 185 | Question: 186 | "What is the primary goal of 'Infrastructure as Code' (IaC) in DevOps?", 187 | Answer: "To automate and manage infrastructure provisioning through code", 188 | Distractor1: "To manually configure servers for specific applications", 189 | Distractor2: "To optimize database performance", 190 | Distractor3: "To streamline the software development process", 191 | Explanation: 192 | "Infrastructure as Code (IaC) is a practice in DevOps that aims to automate and manage infrastructure provisioning through code, allowing for consistent and repeatable infrastructure deployments.", 193 | Link: "https://www.freecodecamp.org/news/what-is-infrastructure-as-code/" 194 | }, 195 | { 196 | Question: 197 | "What is the role of version control systems like Git in DevOps processes?", 198 | Answer: 199 | "Version control systems like Git help track changes to source code, manage collaborative development, and enable automation of code deployment and rollback processes.", 200 | Distractor1: 201 | "Version control systems like Git are used for container orchestration.", 202 | Distractor2: 203 | "Version control systems like Git are used for managing cloud infrastructure.", 204 | Distractor3: 205 | "Version control systems like Git are used for monitoring application performance.", 206 | Explanation: 207 | "Git and similar version control systems provide a centralized repository for storing and managing code. They allow developers to work on code collaboratively, track changes, and maintain a history of code versions. This is crucial for DevOps processes as it facilitates continuous integration, automated testing, and rollback mechanisms in case of issues.", 208 | Link: "https://www.freecodecamp.org/news/how-to-use-git-best-practices-for-beginners/#what-is-version-control" 209 | } 210 | ]; 211 | export default devopsQuiz; 212 | -------------------------------------------------------------------------------- /src/data/freecodecamp-quiz.ts: -------------------------------------------------------------------------------- 1 | const freecodecampQuiz = [ 2 | { 3 | Question: "What forum tool does freeCodeCamp use for its forum?", 4 | Answer: "Discourse", 5 | Distractor1: "NodeBB", 6 | Distractor2: "phpBB", 7 | Distractor3: "vBulletin", 8 | Explanation: 9 | "The freeCodeCamp community was an early adopter of Discourse, a powerful forum tool designed by Stack Overflow founder Jeff Atwood. Quincy Larson first met Jeff at an event in San Francisco in 2014, and the two talked about online communities. Jeff convinced Quincy to create a forum so that learners could easily help one another. One benefit of a forum is that other people can then discover past conversations, and use them to help get unstuck. If you ask a question on the freeCodeCamp forum, you will generally get an answer in just a few hours.", 10 | Link: "https://www.freecodecamp.org/news/the-future-of-the-freecodecamp-forum/" 11 | }, 12 | { 13 | Question: "freeCodeCamp.org first launched in:", 14 | Answer: "2014", 15 | Distractor1: "2001", 16 | Distractor2: "1910", 17 | Distractor3: "2030", 18 | Explanation: 19 | "The first version of the freeCodeCamp curriculum went live in 2014, from Quincy Larson's closet office in San Francisco. Other developers quickly stepped in to help expand the curriculum and save him from madness.", 20 | Link: "https://www.freecodecamp.org/news/about/" 21 | }, 22 | { 23 | Question: "freeCodeCamp's Code Radio is:", 24 | Answer: "An internet radio that plays music you can code to", 25 | Distractor1: 26 | "A form of communication America used during World War II created by the Navajo people", 27 | Distractor2: "A radio station for old acoustic modems", 28 | Distractor3: "A way to talk with beings from other solar systems", 29 | Explanation: 30 | "Code Radio is available 24/7, with more than 1,500 instrumental songs on rotation. Lots of developers enjoy listening to it as background music while they work.", 31 | Link: "https://www.freecodecamp.org/news/code-radio-24-7/" 32 | }, 33 | { 34 | Question: "What is DevDocs.io? ", 35 | Answer: 36 | "A powerful documentation website run by the freeCodeCamp community", 37 | Distractor1: "A community of doctors who know how to code", 38 | Distractor2: "Developers who work at the shipyard", 39 | Distractor3: 40 | "A fancy docking station you can put your laptop on while you code", 41 | Explanation: 42 | "DevDocs.io is a popular search engine for programming language documentation. You can download the full documentation for different tools and browse it offline. Perfect for when you need to code on the go and won't have an internet connection.", 43 | Link: "https://www.freecodecamp.org/news/devdocs-is-joining-the-freecodecamp-community-ae185a1c14a6/" 44 | }, 45 | { 46 | Question: 47 | "What is the name of freeCodeCamp's popular GitHub repository that teaches you how to contribute to open source?", 48 | Answer: "How to Contribute to Open Source", 49 | Distractor1: "GitGoing", 50 | Distractor2: "Project Octocat", 51 | Distractor3: "Open Sauce", 52 | Explanation: 53 | "One of the best ways to get real-world experience working with large legacy codebases is to contribute to open source. But this is an ambiguous process. So the freeCodeCamp community created this repository to help new developers get started.", 54 | Link: "https://www.freecodecamp.org/news/how-to-contribute-to-open-source-projects-beginners-guide/" 55 | }, 56 | { 57 | Question: 58 | "The freeCodeCamp learning platform is written in which programming language?", 59 | Answer: "JavaScript and Node.js", 60 | Distractor1: "Python and Django", 61 | Distractor2: "PHP and Laravel", 62 | Distractor3: "Java and Spring", 63 | Explanation: 64 | "freeCodeCamp teaches many different programming languages and frameworks, and could be written in any of these. This said, in 2014 when Quincy Larson sat down to start building the first version of freeCodeCamp, he chose JavaScript and Node.js. He did this because it had a huge package ecosystem and was relatively easy to program in. Node.js is also very fast, and works well at scale. Large websites like Netflix and LinkedIn use it as a primary language.", 65 | Link: "https://www.freecodecamp.org/news/the-definitive-node-js-handbook-6912378afc6e/" 66 | }, 67 | { 68 | Question: 69 | "freeCodeCamp is a 501(c)(3) public charity (nonprofit) with a mission to:", 70 | Answer: "To help people learn to code for free.", 71 | Distractor1: "Help companies recruit developers", 72 | Distractor2: "Advocate for open source software", 73 | Distractor3: "Make cat photo apps", 74 | Explanation: 75 | 'Even though freeCodeCamp does create open source projects, and does help developers get jobs, its mission is "to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons - all freely available to the public."', 76 | Link: "https://www.freecodecamp.org/news/about/" 77 | }, 78 | { 79 | Question: "What chat tool does freeCodeCamp use for its main chat server?", 80 | Answer: "Discord", 81 | Distractor1: "Slack", 82 | Distractor2: "RocketChat", 83 | Distractor3: "Gitter", 84 | Explanation: 85 | "The freeCodeCamp contributor community communicates mostly through our active Discord server, and in the past have used RocketChat, Slack, and Gitter.", 86 | Link: "https://www.freecodecamp.org/news/freecodecamp-discord-chat-room-server/" 87 | }, 88 | { 89 | Question: "freeCodeCamp's Mascot is:", 90 | Answer: "CamperBot", 91 | Distractor1: "freeCodeCampasaurus Rex", 92 | Distractor2: "Bill Murray", 93 | Distractor3: "Campy the Raccoon", 94 | Explanation: 95 | "The freeCodeCamp community created CamperBot early on to help out with automated tasks in our chat rooms. Since then, he has been helpful in many different places, including the freeCodeCamp forum. He is a helpful robot who runs on kindness.", 96 | Link: "https://www.freecodecamp.org/news/about/" 97 | }, 98 | { 99 | Question: 100 | "Which open-source community has been the biggest inspiration to freeCodeCamp?", 101 | Answer: "Wikipedia", 102 | Distractor1: "Linux", 103 | Distractor2: "Mozilla Firefox", 104 | Distractor3: "Open Office", 105 | Explanation: 106 | "All of these projects have been a source of inspiration, but Wikipedia is the closest analog to what the freeCodeCamp community would ultimately like to become: hundreds of languages represented, with thousands of contributors from a wide variety of backgrounds and interests.", 107 | Link: "https://www.freecodecamp.org/news/welcome-to-the-abundance-economy-there-are-free-lunches-all-over-the-place-b9d0a417fd1a/" 108 | }, 109 | { 110 | Question: "Who is the founder of freeCodeCamp?", 111 | Answer: "Quincy Larson", 112 | Distractor1: "Madison Kanna", 113 | Distractor2: "James Altucher", 114 | Distractor3: "Navin Kabra", 115 | Explanation: 116 | "Quincy Larson founded freeCodeCamp in 2014 as a program meant to help individuals learn the basics of programming and land a developer job.", 117 | Link: "https://www.freecodecamp.org/news/about/" 118 | }, 119 | { 120 | Question: 121 | "Which section of freeCodeCamp's curriculum focuses on JavaScript algorithms and data structures?", 122 | Answer: "JavaScript Algorithms and Data Structures Certification", 123 | Distractor1: "Responsive Web Design", 124 | Distractor2: "Machine Learning", 125 | Distractor3: "Cybersecurity", 126 | Explanation: 127 | "The 'JavaScript Algorithms and Data Structures Certification' is dedicated to teaching fundamental concepts related to algorithms and data structures.", 128 | Link: "https://www.freecodecamp.org/learn" 129 | } 130 | ]; 131 | 132 | export default freecodecampQuiz; 133 | -------------------------------------------------------------------------------- /src/data/git-quiz.ts: -------------------------------------------------------------------------------- 1 | const gitQuiz = [ 2 | { 3 | Question: 4 | "In Git, how can you stage a file that ends with a *.txt extension?", 5 | Answer: "git add *.txt", 6 | Distractor1: "git add *.text", 7 | Distractor2: "git add -a .txt", 8 | Distractor3: "git add - *.txt", 9 | Explanation: 10 | "git add is a command used to add a file that is in the working directory to the staging area. Use *.txt to add specific pattern.", 11 | Link: "https://www.freecodecamp.org/news/learn-the-basics-of-git-in-under-10-minutes-da548267cc91/" 12 | }, 13 | { 14 | Question: 15 | "In Git, how can you save uncommitted changes on your local machine so you can work on it later?", 16 | Answer: "git stash", 17 | Distractor1: "git copy into notepad.exe", 18 | Distractor2: "git save code", 19 | Distractor3: "git clone --for later", 20 | Explanation: 21 | "Stashes are temporary storage spaces where you can store your code. When you're done, you can put your code back from the stash using git stash pop. You won’t have to worry about losing any uncommitted changes!", 22 | Link: "https://www.freecodecamp.org/news/how-to-use-git-stash-as-temporary-storage-84a0a1e37a43/" 23 | }, 24 | { 25 | Question: "In Git, how can you check your configuration?", 26 | Answer: "git config -l", 27 | Distractor1: "git config -check", 28 | Distractor2: "git checkconfig -l", 29 | Distractor3: "git checkconfig -m", 30 | Explanation: 31 | "The command git config -l returns a list of information about your git configuration including user name and email", 32 | Link: "https://www.freecodecamp.org/news/git-cheat-sheet/" 33 | }, 34 | { 35 | Question: 36 | "In Git, how do you integrate changes from one branch to another?", 37 | Answer: "git merge", 38 | Distractor1: "git copy into", 39 | Distractor2: "git merge --docs", 40 | Distractor3: "git clone --docs", 41 | Explanation: 42 | "In the command line, you can use git merge to integrate changes from one branch to another", 43 | Link: "https://www.freecodecamp.org/news/git-and-github-for-beginners/" 44 | }, 45 | { 46 | Question: "In Git, what is a modified state?", 47 | Answer: 48 | "changes have been made to the files but those changes are not saved yet", 49 | Distractor1: "a new local repository has been created", 50 | Distractor2: "a new remote repository has been created", 51 | Distractor3: 52 | "the files have been saved and need to be pushed to the remote repository", 53 | Explanation: 54 | "The modified state is when changes have been made to the files but those changes are not saved yet", 55 | Link: "https://www.freecodecamp.org/news/git-and-github-for-beginners/" 56 | }, 57 | { 58 | Question: 59 | "In Git, how can you list all the commits in a local repository in reverse chronological order?", 60 | Answer: "git log", 61 | Distractor1: "git show", 62 | Distractor2: "git ls", 63 | Distractor3: "git commits", 64 | Explanation: 65 | "You can use git log to see the commits in a repository in reverse chronological order.", 66 | Link: "https://www.freecodecamp.org/news/what-is-git-learn-git-version-control/" 67 | }, 68 | { 69 | Question: 70 | "In Git, how can you list all the local branches in your repository?", 71 | Answer: "git branch", 72 | Distractor1: "git list", 73 | Distractor2: "git ls", 74 | Distractor3: "git branches", 75 | Explanation: 76 | "You can use git branch to list all the local branches in the repository. ", 77 | Link: "https://www.freecodecamp.org/news/10-important-git-commands-that-every-developer-should-know/" 78 | }, 79 | { 80 | Question: "What is the committed state in Git?", 81 | Answer: 82 | "all of the files have been saved to the local repo and are ready to be pushed to the remote repo", 83 | Distractor1: "the files need to be saved to the local repo", 84 | Distractor2: "the files have been successfully pushed to the remote repo", 85 | Distractor3: "the files have been deleted from the local repo", 86 | Explanation: 87 | "The committed state is when all of the files have been saved to the local repo and are ready to be pushed to the remote repo", 88 | Link: "https://www.freecodecamp.org/news/git-and-github-for-beginners/" 89 | }, 90 | { 91 | Question: "In Git, how do you push a local branch to a remote repository?", 92 | Answer: "git push -u ", 93 | Distractor1: "git push -u ", 94 | Distractor2: "git copy url ", 95 | Distractor3: "git pull url ", 96 | Explanation: 97 | "In the command line, you can use git push -u to push a branch from a local Git repository to a remote repository.", 98 | 99 | Link: "https://www.freecodecamp.org/news/10-important-git-commands-that-every-developer-should-know/" 100 | }, 101 | { 102 | Question: 103 | "In Git, how do you set your username for commits you make on all cloned repositories on your computer?", 104 | Answer: 'git config --global user.name "YOUR_USERNAME"', 105 | Distractor1: 'git config --global password "YOUR_USERNAME"', 106 | Distractor2: 'git config &user "YOUR_USERNAME"', 107 | Distractor3: 'git create --user "YOUR_USERNAME"', 108 | Explanation: 109 | 'In the command line, you can use git config --global user.name "YOUR_USERNAME"', 110 | Link: "https://www.freecodecamp.org/news/git-and-github-for-beginners/" 111 | }, 112 | { 113 | Question: "In Git, how do you initialize a new Git repository?", 114 | Answer: "git init", 115 | Distractor1: "git create new repo", 116 | Distractor2: "git config init repo", 117 | Distractor3: "git new repo", 118 | Explanation: 119 | "In the command line, you can use git init to initialize a new Git repository", 120 | Link: "https://www.freecodecamp.org/news/git-and-github-for-beginners/" 121 | }, 122 | { 123 | Question: "In Git, how do you add a specific file to be committed?", 124 | Answer: "git add filename", 125 | Distractor1: "git add < filename", 126 | Distractor2: "git add *filename", 127 | Distractor3: "git add %filename", 128 | Explanation: 129 | "In the command line, you can use git add filename to add a specific file.", 130 | Link: "https://www.freecodecamp.org/news/git-and-github-for-beginners/" 131 | }, 132 | { 133 | Question: "What is Git?", 134 | Answer: "A popular type of version control system ", 135 | Distractor1: "A sorting algorithm", 136 | Distractor2: "A data type", 137 | Distractor3: "A non-relational database", 138 | Explanation: 139 | "Git is an open source version control system that tracks changes to your files. ", 140 | Link: "https://www.freecodecamp.org/news/git-and-github-for-beginners/" 141 | }, 142 | { 143 | Question: 144 | "In Git, how do you create a connection between a local repository and a remote one?", 145 | Answer: "git remote add origin git-url", 146 | Distractor1: "git add remote and local", 147 | Distractor2: "git remote local", 148 | Distractor3: "git local remote", 149 | Explanation: 150 | "In the command line, you can use git remote add origin git-url to connect the local repository to the remote one.", 151 | Link: "https://www.freecodecamp.org/news/git-and-github-for-beginners/" 152 | }, 153 | { 154 | Question: "In Git, how can you create a new branch and switch to it?", 155 | Answer: "git checkout -b branch-name", 156 | Distractor1: "git switch branch-name", 157 | Distractor2: "git switch to branch-name", 158 | Distractor3: "git change branch-name", 159 | Explanation: 160 | "In the command line, you can use git checkout -b branch-name to switch to a different branch", 161 | Link: "https://www.freecodecamp.org/news/git-and-github-for-beginners/" 162 | }, 163 | { 164 | Question: "In Git, how do you commit files to the history of changes?", 165 | Answer: 'git commit -m "commit message"', 166 | Distractor1: "git commit --add message", 167 | Distractor2: "git commit < add message", 168 | Distractor3: "git add message", 169 | Explanation: 170 | 'In the command line, you can use git commit -m "commit message" to commit your changes.', 171 | Link: "https://www.freecodecamp.org/news/git-and-github-for-beginners/" 172 | }, 173 | { 174 | Question: 175 | "In Git, how do you push changes from the main branch of a local Git repository to a remote repository (origin)?", 176 | Answer: "git push -u origin main", 177 | Distractor1: "git push changes", 178 | Distractor2: "git push all changes", 179 | Distractor3: "git push --to main branch", 180 | Explanation: 181 | "In the command line, you can use git push -u origin main to push your changes from the main branch of a local Git repository to a remote repository.", 182 | Link: "https://www.freecodecamp.org/news/git-and-github-for-beginners/" 183 | }, 184 | { 185 | Question: "In Git, how can you delete a branch from a repository?", 186 | Answer: "git branch -d ", 187 | Distractor1: "git branch ", 188 | Distractor2: "git delete ", 189 | Distractor3: "git del ", 190 | Explanation: 191 | "You can use git branch -d to delete a branch from the repository.", 192 | Link: "https://www.freecodecamp.org/news/10-important-git-commands-that-every-developer-should-know/" 193 | }, 194 | { 195 | Question: 196 | "In Git, how do you add all of the files in the local Git repository?", 197 | Answer: "git add .", 198 | Distractor1: "git add all files", 199 | Distractor2: "git add --all files", 200 | Distractor3: "git add ", 230 | Distractor3: "git /version", 231 | Explanation: 232 | "In the command line, you can use git --version to check which version of Git is installed on your local machine", 233 | Link: "https://www.freecodecamp.org/news/git-and-github-for-beginners/" 234 | }, 235 | { 236 | Question: "In Git, how can you pull changes made to the remote repository?", 237 | Answer: "git pull ", 238 | Distractor1: "git pull", 239 | Distractor2: "git push ", 240 | Distractor3: "git pul ", 241 | Explanation: 242 | "You can pull changes from the remote repository with git pull .", 243 | Link: "https://www.freecodecamp.org/news/10-important-git-commands-that-every-developer-should-know/" 244 | }, 245 | { 246 | Question: "In Git, how do you clone a remote repository?", 247 | Answer: "git clone", 248 | Distractor1: "git copy", 249 | Distractor2: "git copy url", 250 | Distractor3: "git clone --copy", 251 | Explanation: 252 | "In the command line, you can use git clone followed by the remote url address for the repository you want to clone into your local machine", 253 | Link: "https://www.freecodecamp.org/news/git-and-github-for-beginners/" 254 | }, 255 | { 256 | Question: 257 | "In Git, how can you see the current status of the current branch?", 258 | Answer: "git status", 259 | Distractor1: "git info", 260 | Distractor2: "git show status", 261 | Distractor3: "git show", 262 | Explanation: 263 | "You can see the status of the current branch with git status in Git.", 264 | Link: "https://www.freecodecamp.org/news/10-important-git-commands-that-every-developer-should-know/" 265 | }, 266 | { 267 | Question: "In Git, how can you add color to git command outputs?", 268 | Answer: "git config --global color.ui true", 269 | Distractor1: "git config --global color.ui false", 270 | Distractor2: "git set --global color.ui true", 271 | Distractor3: "git config --global true", 272 | Explanation: 273 | "You can use git config --global color.ui true to add color to Git output.", 274 | Link: "https://www.freecodecamp.org/news/best-git-tutorial/" 275 | }, 276 | { 277 | Question: "In Git, how do you switch back to the main branch?", 278 | Answer: "git checkout main", 279 | Distractor1: "git switch main", 280 | Distractor2: "git change main", 281 | Distractor3: "git go to main", 282 | Explanation: 283 | "In the command line, you can use git checkout main to switch over to the main branch", 284 | Link: "https://www.freecodecamp.org/news/git-and-github-for-beginners/" 285 | }, 286 | { 287 | Question: "What is the -m flag in Git?", 288 | Answer: "Shorthand for message", 289 | Distractor1: "Shorthand for main", 290 | Distractor2: "Shorthand for mistake", 291 | Distractor3: "Shorthand for merge", 292 | Explanation: "The -m flag in Git is shorthand for message.", 293 | Link: "https://www.freecodecamp.org/news/git-and-github-for-beginners/" 294 | }, 295 | { 296 | Question: "In Git, how do you set your email associated with your commits?", 297 | Answer: 'git config --global user.email "YOUR_EMAIL"', 298 | Distractor1: 'git config --global set email address "YOUR_EMAIL"', 299 | Distractor2: 'git config --email address "YOUR_EMAIL"', 300 | Distractor3: 'git create user email "YOUR_EMAIL"', 301 | Explanation: 302 | 'In the command line, you can use git config --global user.email "YOUR_EMAIL" to set your email address in Git.', 303 | Link: "https://www.freecodecamp.org/news/git-and-github-for-beginners/" 304 | }, 305 | { 306 | Question: 307 | "In Git, how can you change the text editor used to write commit messages?", 308 | Answer: "git config --global core.editor ", 309 | Distractor1: "git config email ", 310 | Distractor2: "git set editor ", 311 | Distractor3: "git config ", 312 | Explanation: 313 | "You can use git config --global core.editor to set the text editor that will be used to write commit messages and to work with Git in general.", 314 | Link: "https://www.freecodecamp.org/news/best-git-tutorial/" 315 | }, 316 | { 317 | Question: 318 | "In Git, how can you check for the status of your working directory?", 319 | Answer: "git status", 320 | Distractor1: "git check status", 321 | Distractor2: "git share status", 322 | Distractor3: "git show status", 323 | Explanation: 324 | "In the command line, you can use git status to check the current status of your working directory", 325 | Link: "https://www.freecodecamp.org/news/git-and-github-for-beginners/" 326 | }, 327 | { 328 | Question: "In Git, how do you create a new branch and switch to it?", 329 | Answer: "git checkout -b new-branch-name", 330 | Distractor1: "git create -b new-branch-name", 331 | Distractor2: "git change -b new-branch-name", 332 | Distractor3: "git create --change -b new-branch-name", 333 | Explanation: 334 | "In the command line, you can use git checkout -b new-branch-name to create a new branch and switch to it", 335 | Link: "https://www.freecodecamp.org/news/git-and-github-for-beginners/" 336 | }, 337 | { 338 | Question: "In Git, how do you rename the current branch?", 339 | Answer: "git branch -m new-name", 340 | Distractor1: "git rename -b new-name", 341 | Distractor2: "git change -b new-branch-name", 342 | Distractor3: "git branch --rename new-name", 343 | Explanation: 344 | "In the command line, you can use git branch -m new-name to rename the current branch.", 345 | Link: "https://www.freecodecamp.org/news/renaming-a-git-branch-how-to-rename-the-current-branch-in-git/" 346 | }, 347 | { 348 | Question: 349 | "In Git, which command is used to list differences between your current working directory and your staging area?", 350 | Answer: "git diff", 351 | Distractor1: "git different", 352 | Distractor2: "git status", 353 | Distractor3: "git update", 354 | Explanation: 355 | "In the command line, you can use git diff to show all the differences between your current working directory and your staging area.", 356 | Link: "https://www.freecodecamp.org/news/git-diff-command/" 357 | }, 358 | { 359 | Question: 360 | "In Git, what do you do right after resolving a merge conflict in a file?", 361 | Answer: "git add file_that_had_conflict", 362 | Distractor1: "git commit", 363 | Distractor2: "git status", 364 | Distractor3: "git update", 365 | Explanation: 366 | "In the command line, after resolving the conflict you will need to stage the changes.", 367 | Link: "https://www.freecodecamp.org/news/resolve-merge-conflicts-in-git-a-practical-guide/" 368 | }, 369 | { 370 | Question: "In Git, what command is used to revert changes?", 371 | Answer: "git revert", 372 | Distractor1: "git undo", 373 | Distractor2: "git stash", 374 | Distractor3: "git update", 375 | Explanation: 376 | "In the command line, to undo unwanted changes you can run git revert with the hash of the commit you want to revert back to.", 377 | Link: "https://www.freecodecamp.org/news/10-important-git-commands-that-every-developer-should-know/" 378 | }, 379 | { 380 | Question: 381 | "In Git, which command is used to reset a branch to a previous commit?", 382 | Answer: "git reset", 383 | Distractor1: "git revert", 384 | Distractor2: "git rebase", 385 | Distractor3: "git reflog", 386 | Explanation: 387 | "The git reset command is used to reset your current HEAD to a specified state.", 388 | Link: "https://www.freecodecamp.org/news/the-ultimate-guide-to-git-reset-and-git-revert/" 389 | }, 390 | { 391 | Question: 392 | "In Git, how do you see your commit history including changes in files?", 393 | Answer: "git log -p", 394 | Distractor1: "git log --show", 395 | Distractor2: "git log -c", 396 | Distractor3: "git log", 397 | Explanation: 398 | "The git log -p command shows the commit's history including all files and their changes.", 399 | Link: "https://www.freecodecamp.org/news/git-cheat-sheet/" 400 | }, 401 | { 402 | Question: 403 | "In Git, which command is used to list all of the remote branches that Git is tracking?", 404 | Answer: "git branch -r", 405 | Distractor1: "git branch --show -r", 406 | Distractor2: "git -b -d", 407 | Distractor3: "git branch", 408 | Explanation: 409 | "The git branch -r command shows the name of all remote branches that Git is tracking for the current repository.", 410 | Link: "https://www.freecodecamp.org/news/git-cheat-sheet/" 411 | }, 412 | { 413 | Question: 414 | "In Git, which command is used to choose a commit from one branch and apply it to another?", 415 | Answer: "git cherry-pick ", 416 | Distractor1: "git write-over ", 417 | Distractor2: "git goto ", 418 | Distractor3: "git merge ", 419 | Explanation: 420 | "git cherry-pick selects a handpicked commit from one branch and applies it to another branch.", 421 | Link: "https://www.freecodecamp.org/news/the-git-cherry-pick-command/" 422 | }, 423 | { 424 | Question: "In Git, what is the correct syntax for the git tag command?", 425 | Answer: "git tag ", 426 | Distractor1: "git add-tag ", 427 | Distractor2: "git tag-add ", 428 | Distractor3: "git tag-on ", 429 | Explanation: 430 | "git tags point to a specific part in the Git history and are often used to mark specific version releases in the code.", 431 | Link: "https://www.freecodecamp.org/news/git-tag-explained-how-to-add-remove/" 432 | }, 433 | { 434 | Question: "In Git, how do you do a force push?", 435 | Answer: "git push -f", 436 | Distractor1: "git push -u", 437 | Distractor2: "git push", 438 | Distractor3: "git add fil*", 439 | Explanation: 440 | "The git push -f command will force a push request. This is usually fine for pull request branches because nobody else should have cloned them.", 441 | Link: "https://www.freecodecamp.org/news/git-cheat-sheet/" 442 | }, 443 | { 444 | Question: "In Git, how do you list multiple stashes?", 445 | Answer: "git stash list", 446 | Distractor1: "git list", 447 | Distractor2: "git apply stash", 448 | Distractor3: "git pull", 449 | Explanation: 450 | "To list multiple stashes that you have created you run git stash list.", 451 | Link: "https://git-scm.com/docs/git-stash" 452 | }, 453 | { 454 | Question: "How does Git know that changes have been made to a file?", 455 | Answer: 456 | "Everything is checksummed before it is stored and is referred to by that checksum", 457 | Distractor1: "Git takes snapshots of the changes", 458 | Distractor2: "Nearly every operation is local", 459 | Distractor3: "Git is a Distributed Version Control System", 460 | Explanation: 461 | "Git has integrity because everything in git is checksummed using SHA-1 mechanism.", 462 | Link: "https://git-scm.com/book/en/v2/Getting-Started-What-is-Git%3F#" 463 | }, 464 | { 465 | Question: "What is the difference between Git and GitHub?", 466 | Answer: 467 | "Git is a popular version control system and GitHub is a hosting service for Git repositories.", 468 | Distractor1: 469 | "GitHub is a type of version control system, while Git is a hosting service for Git repositories.", 470 | Distractor2: "Git and GitHub are the same thing", 471 | Distractor3: 472 | "Git is a version control system only used on Mac computers while GitHub is a version control system only used on Windows.", 473 | Explanation: 474 | "Git is a version control system for managing the source and history of code and GitHub is a hosting service for Git repositories.", 475 | Link: "https://www.freecodecamp.org/news/introduction-to-git-and-github/" 476 | }, 477 | { 478 | Question: "In Git, how do you apply a stash if you have multiple?", 479 | Answer: "git stash pop stash@{x}", 480 | Distractor1: "git stash pop", 481 | Distractor2: "git stash apply", 482 | Distractor3: "git commit", 483 | Explanation: 484 | "To apply a stash when you have multiple stashes, you use git stash pop stash@{x} where x is the number in the list of stash.", 485 | Link: "https://git-scm.com/docs/git-stash" 486 | }, 487 | { 488 | Question: "In Git, how do you see a summary for a single stash?", 489 | Answer: "git stash show", 490 | Distractor1: "git stash view", 491 | Distractor2: "git stash diff", 492 | Distractor3: "git stash summary", 493 | Explanation: 494 | "To view a summary for a single stash, you use git stash show which shows a summary of file changes.", 495 | Link: "https://git-scm.com/docs/git-stash" 496 | }, 497 | { 498 | Question: "In Git, how do you create a branch from your stash?", 499 | Answer: "git stash branch branch_name stash@{x}", 500 | Distractor1: "git checkout -b branch_name stash", 501 | Distractor2: "git -b branch_name stash@{x}", 502 | Distractor3: "git branch_name stash@{x}", 503 | Explanation: 504 | "To create a branch from a stash, you use git stash branch the_branch_name stash@{x} where x is the number in the list of stash.", 505 | Link: "https://git-scm.com/docs/git-stash" 506 | }, 507 | { 508 | Question: "In Git, how do you delete all the stashes?", 509 | Answer: "git stash clear", 510 | Distractor1: "git stash delete", 511 | Distractor2: "git stash remove", 512 | Distractor3: "git stash drop", 513 | Explanation: 514 | "To remove all stashes, you use git stash clear which will delete ALL stashes.", 515 | Link: "https://git-scm.com/docs/git-stash" 516 | }, 517 | { 518 | Question: "In Git, how do you delete a single stash?", 519 | Answer: "git stash drop stash@{x}", 520 | Distractor1: "git stash delete stash@{x}", 521 | Distractor2: "git stash remove stash@{x}", 522 | Distractor3: "git drop stash@{x}", 523 | Explanation: 524 | "To delete a SINGLE stash, you use git stash drop stash@{x} where x is the number in the list of stash.", 525 | Link: "https://git-scm.com/docs/git-stash" 526 | }, 527 | { 528 | Question: "How do you change the latest commit message in Git?", 529 | Answer: "git commit --amend", 530 | Distractor1: "git checkout -b change", 531 | Distractor2: "git rebase -i Head~4", 532 | Distractor3: "git drop stash@{change}", 533 | Explanation: 534 | "git commit --amend is the command used to change the latest commit message.", 535 | Link: "https://forum.freecodecamp.org/t/git-guide-how-to-amend-your-most-recent-git-commit-message/13186" 536 | }, 537 | { 538 | Question: 539 | "Which one of the following is the default text editor in Git Bash?", 540 | Answer: "Vim", 541 | Distractor1: "Emacs", 542 | Distractor2: "Nano", 543 | Distractor3: "VS Code", 544 | Explanation: 545 | "Vim stands for Vi Improved and it is terminal based text editor used among Linux users. You can open the editor by using the following command: vi fileName", 546 | Link: "https://www.freecodecamp.org/news/learn-vim-beginners-tutorial/" 547 | }, 548 | { 549 | Question: "How do you unstage a staged file in git?", 550 | Answer: "git restore --staged ", 551 | Distractor1: "git unstage ", 552 | Distractor2: "git restore ", 553 | Distractor3: "git restore --staged ", 554 | Explanation: 555 | "git restore --staged command is used to unstage a staged file in git.", 556 | Link: "https://www.git-tower.com/learn/git/commands/git-restore" 557 | }, 558 | { 559 | Question: 560 | "In Git, which command logs the previous commits in single line form?", 561 | Answer: "git log --oneline", 562 | Distractor1: "git log singleline", 563 | Distractor2: "git single log", 564 | Distractor3: "git log -1", 565 | Explanation: 566 | "git log --oneline is the command used to log the previous commits in single line form.", 567 | Link: "https://www.freecodecamp.org/news/git-cheat-sheet/" 568 | }, 569 | { 570 | Question: "In Git, what does a good commit message look like?", 571 | Answer: "It should be short, descriptive and in present tense", 572 | Distractor1: "It should be long", 573 | Distractor2: "It should be in one word", 574 | Distractor3: "None of these", 575 | Explanation: 576 | "A good commit message should be short, descriptive and in present tense.", 577 | Link: "https://www.freecodecamp.org/news/how-to-write-better-git-commit-messages/" 578 | }, 579 | { 580 | Question: 581 | "In Git, what is the shorthand command to stage and commit all changes?", 582 | Answer: "git commit -am ''", 583 | Distractor1: "git add -m 'commit message'", 584 | Distractor2: "git commit all 'commit message'", 585 | Distractor3: "git add commit -m 'commit message'", 586 | Explanation: 587 | "git commit -am '' is used to stage and commit all changes in the current directory and its subdirectories.", 588 | Link: "https://git-scm.com/docs/git-commit" 589 | }, 590 | { 591 | Question: 592 | "Which git command allows you to download objects and refs from another repository without committing to the main branch?", 593 | Answer: "git fetch ", 594 | Distractor1: "git pull ", 595 | Distractor2: "git push ", 596 | Distractor3: "git clone ", 597 | Explanation: 598 | "git fetch is used to download objects and refs without committing to the main branch that you are working on", 599 | Link: "https://git-scm.com/docs/git-fetch" 600 | }, 601 | { 602 | Question: "What is the purpose of the 'git branch' command in Git?", 603 | Answer: 604 | "git branch is used to list, create, or delete branches in a Git repository.", 605 | Distractor1: "git branch is used to commit changes in Git.", 606 | Distractor2: "git branch is used to merge branches in Git.", 607 | Distractor3: "git branch is used to clone a remote repository in Git.", 608 | Explanation: 609 | "The 'git branch' command is used to manage branches in a Git repository, including listing existing branches, creating new branches, and deleting branches.", 610 | Link: "https://git-scm.com/docs/git-branch" 611 | }, 612 | { 613 | Question: "In Git, what is the purpose of the 'git bisect' command?", 614 | Answer: 615 | "to find a commit that introduced a bug", 616 | Distractor1: "to find the latest commit in the repository", 617 | Distractor2: "to find the oldest commit in the repository", 618 | Distractor3: "to find the commit with the most changes", 619 | Explanation: 620 | "The 'git bisect' command uses a binary search algorithm to find which commit in your project's history introduced a bug.", 621 | Link: "https://git-scm.com/docs/git-bisect" 622 | }, 623 | { 624 | Question: "Which command displays help information about Git?", 625 | Answer: 626 | "git help", 627 | Distractor1: "git assist", 628 | Distractor2: "git commit", 629 | Distractor3: "git guide", 630 | Explanation: 631 | "The 'git help' command will display help information on common Git commands. The 'git help git' command will provide a complete overview of the system.", 632 | Link: "https://www.freecodecamp.org/news/best-git-tutorial/" 633 | }, 634 | { 635 | Question: "When using the 'git stash' command, what is one of the major disadvantages of using it?", 636 | Answer: 637 | "It contains clusters of saved drafts and causes confusion", 638 | Distractor1: "It is easy to use and understand", 639 | Distractor2: "It helps you save a draft of your current task and focus on another one", 640 | Distractor3: "It helps with merge conflicts when using the 'git fork' command", 641 | Explanation: 642 | "When working with the 'git stash' command, you may run into a situation where there are many drafts in a large project, which can confuse developers.", 643 | Link: "https://www.freecodecamp.org/news/how-to-use-git-stash-to-manage-code/" 644 | } 645 | ]; 646 | 647 | export default gitQuiz; 648 | -------------------------------------------------------------------------------- /src/data/modal-responses.ts: -------------------------------------------------------------------------------- 1 | export const correctModalResponses = [ 2 | "Correct! You're a rock star!", 3 | "Correct! Good Job!", 4 | "Correct! You're so smart!", 5 | "Correct! You are really good at this!", 6 | "Correct! Keep up the good work!", 7 | "Correct! You're doing great!", 8 | "Yes, that's correct.", 9 | "Correct! You're amazing!", 10 | "Correct! Stellar effort!", 11 | "Correct! You're a genius!", 12 | "Perfect! You're unbeatable!", 13 | "Correct! Outstanding!", 14 | "Correct! Bravo to you!", 15 | "Correct! Superb work!", 16 | "Correct! Terrific job!", 17 | "You're nailing it!", 18 | "Impressive, you're correct!" 19 | ]; 20 | 21 | export const incorrectModalResponses = [ 22 | "Incorrect. You'll get the next one.", 23 | "That was incorrect.", 24 | "Incorrect. Better luck next time.", 25 | "Unfortunately, your answer was incorrect.", 26 | "Oops! That is incorrect.", 27 | "Incorrect, try again", 28 | "That's a wrong answer, keep trying", 29 | "That's not quite right, keep trying", 30 | "Oops! That is not the correct answer", 31 | "Not quite the answer we were looking for, but keep going", 32 | "Oops, that is not it, but keep going", 33 | "Incorrect, but it is okay, keep trying", 34 | "Sorry, that is not the correct answer", 35 | "Incorrect, but do not give up", 36 | "Incorrect, but keep going", 37 | "Try agin, that is not correct", 38 | "Incorrect response, but keep trying" 39 | ]; 40 | -------------------------------------------------------------------------------- /src/data/quality-assurance-quiz.ts: -------------------------------------------------------------------------------- 1 | const qualityAssuranceQuiz = [ 2 | { 3 | Question: 4 | "The primary purpose of unit testing in software development is to:", 5 | Answer: 6 | "Break down the codebase into smaller parts (units) and test them in isolation.", 7 | Distractor1: 8 | "Validate the overall functionality of a software application.", 9 | Distractor2: 10 | "Ensure proper integration between different software components.", 11 | Distractor3: 12 | "Verify the user interface and user experience of the software.", 13 | Explanation: 14 | "Unit testing involves testing individual components or units of code in isolation to ensure they work as intended.", 15 | Link: "https://www.freecodecamp.org/news/unit-tests-explained/" 16 | }, 17 | { 18 | Question: "How does unit testing contribute to code documentation?", 19 | Answer: 20 | "Unit testing documents the behavior and flow of code, making it easier for new developers to understand.", 21 | Distractor1: "Unit testing is not related to code documentation.", 22 | Distractor2: "Unit testing generates automated documentation.", 23 | Distractor3: 24 | "Unit testing documentation is only for experienced developers.", 25 | Explanation: 26 | "Unit tests serve as living documentation that describes how code should behave.", 27 | Link: "https://www.freecodecamp.org/news/unit-tests-explained/" 28 | }, 29 | { 30 | Question: 31 | "Which software development approach often emphasizes the use of unit testing?", 32 | Answer: "Test-Driven Development (TDD).", 33 | Distractor1: "Waterfall model.", 34 | Distractor2: "Agile development.", 35 | Distractor3: "Scrum methodology.", 36 | Explanation: 37 | "TDD (Test-Driven Development) involves writing unit tests before implementing the code, making unit testing a fundamental practice.", 38 | Link: "https://www.freecodecamp.org/news/unit-tests-explained/" 39 | }, 40 | { 41 | Question: 42 | "In JavaScript, which assertion library is commonly used for writing unit tests?", 43 | Answer: "Chai", 44 | Distractor1: "Yii", 45 | Distractor2: "Spock", 46 | Distractor3: "NUnit", 47 | Explanation: 48 | "Chai is a popular assertion library often used in combination with testing frameworks like Mocha.", 49 | Link: "https://www.freecodecamp.org/news/unit-tests-explained/" 50 | }, 51 | { 52 | Question: 53 | "What is the typical process after writing unit tests in Test-Driven Development (TDD)?", 54 | Answer: 55 | "Implement the minimum code required to pass the test cases and then refactor the code.", 56 | Distractor1: "Ignore the test results and proceed with coding.", 57 | Distractor2: "Write additional test cases without implementing any code.", 58 | Distractor3: 59 | "Abandon the unit testing approach and rely on manual testing.", 60 | Explanation: 61 | "TDD involves an iterative process of writing tests, implementing code, and refactoring.", 62 | Link: "https://www.freecodecamp.org/news/unit-tests-explained/" 63 | }, 64 | { 65 | Question: "Which aspect of code quality does unit testing help enforce?", 66 | Answer: 67 | "Unit testing enforces good and extendable interfaces and patterns in the code.", 68 | Distractor1: "Unit testing focuses on code performance optimization.", 69 | Distractor2: "Unit testing ensures user interface design quality.", 70 | Distractor3: "Unit testing checks for code comments and documentation.", 71 | Explanation: 72 | "Unit tests encourage developers to think about code structure and maintainability.", 73 | Link: "https://www.freecodecamp.org/news/unit-tests-explained/" 74 | }, 75 | { 76 | Question: 77 | "What is the key benefit of unit testing in software development?", 78 | Answer: 79 | "Confidence to add changes, reuse, or refactor code without introducing bugs.", 80 | Distractor1: "Unit testing guarantees the absence of all bugs.", 81 | Distractor2: "Unit testing reduces the need for debugging.", 82 | Distractor3: "Unit testing simplifies user acceptance testing.", 83 | Explanation: 84 | "Unit testing provides confidence in code modifications and refactoring.", 85 | Link: "https://www.freecodecamp.org/news/unit-tests-explained/" 86 | }, 87 | { 88 | Question: 89 | "How does unit testing contribute to industry standards in software development?", 90 | Answer: 91 | "Unit testing is a common discipline and a requirement for many software companies, making it an industry standard.", 92 | Distractor1: "Unit testing is a niche practice adopted by a few companies.", 93 | Distractor2: "Unit testing is primarily used in academic research.", 94 | Distractor3: "Unit testing varies widely by geographical regions.", 95 | Explanation: 96 | "Many software companies consider unit testing essential for software quality and reliability.", 97 | Link: "https://www.freecodecamp.org/news/unit-tests-explained/" 98 | }, 99 | { 100 | Question: "What does the term defect clustering refer to?", 101 | Answer: 102 | "Most of the problems that are found occur in just a few parts of the application or software.", 103 | Distractor1: 104 | "The random distribution of defects throughout a software application.", 105 | Distractor2: 106 | "The problem that is only found in large software applications.", 107 | Distractor3: 108 | "The principle that 50% of the defects in a software application are caused by 50% of the modules.", 109 | Explanation: 110 | "Defect clustering is a common phenomenon in software development where a small number of modules in a software application contain a large proportion of the defects.", 111 | Link: "https://www.freecodecamp.org/news/software-testing-beginners-guide/#software-testing-principles" 112 | }, 113 | { 114 | Question: "What is the purpose of smoke testing?", 115 | Answer: 116 | "To verify that the basic functionality of a software application is working as expected.", 117 | Distractor1: "To identify all of the defects in a software application.", 118 | Distractor2: 119 | "To verify that a software application meets all of its requirements.", 120 | Distractor3: 121 | "To ensure that a software application is compatible with all of its supported environments.", 122 | Explanation: 123 | "It is a quick and lightweight test that is designed to identify any major issues with the software application before more detailed testing is performed.", 124 | Link: "https://www.freecodecamp.org/news/smoke-testing/#what-is-smoke-testing" 125 | }, 126 | { 127 | Question: "What is Cross-Browser Compatibility Testing?", 128 | Answer: 129 | "Quality assurance process in web development to ensure a website functions consistently across different web browsers.", 130 | Distractor1: "A method for developing new web browsers.", 131 | Distractor2: "A technique for improving website performance.", 132 | Distractor3: "A term for website accessibility testing.", 133 | Explanation: 134 | "Cross-Browser Compatibility Testing is crucial to deliver a consistent user experience across various web browsers, ensuring that a website works correctly and looks the same in all of them.", 135 | Link: "https://www.freecodecamp.org/news/cross-browser-compatibility-testing-best-practices-for-web-developers/" 136 | }, 137 | { 138 | Question: "Why is Cross-Browser Compatibility Testing important?", 139 | Answer: 140 | "Ensures a consistent user experience, maximizes market reach, maintains credibility, adapts to mobile devices, impacts SEO, and reduces support and maintenance.", 141 | Distractor1: 142 | "It is a non-essential practice in web development that primarily focuses on the visual design and layout of websites.", 143 | Distractor2: 144 | "It primarily addresses website performance, aiming to make sites load faster and use fewer resources, which is beneficial for user experience.", 145 | Distractor3: 146 | "It mainly concerns itself with enhancing website security by implementing encryption protocols and firewalls to protect user data.", 147 | Explanation: 148 | "Cross-Browser Compatibility Testing is crucial for various reasons, including user experience, market reach, credibility, mobile adaptability, SEO, and reducing ongoing support and maintenance efforts.", 149 | Link: "https://www.freecodecamp.org/news/cross-browser-compatibility-testing-best-practices-for-web-developers/" 150 | }, 151 | { 152 | Question: "What are common cross-browser compatibility issues?", 153 | Answer: 154 | "Differences in rendering, CSS styles, plugin compatibility, third-party dependencies, and browser-specific bugs.", 155 | Distractor1: 156 | "Cross-browser testing typically reveals no issues, as all browsers have standardized their rendering engines.", 157 | Distractor2: 158 | "Common issues often involve minor visual discrepancies in font sizes and spacing due to browser rendering inconsistencies.", 159 | Distractor3: 160 | "All browsers interpret code in the same way, resulting in a uniform user experience and visual presentation.", 161 | Explanation: 162 | "Common issues in cross-browser compatibility include rendering disparities, CSS style variations, plugin compatibility problems, third-party dependency issues, and browser-specific bugs.", 163 | Link: "https://www.freecodecamp.org/news/cross-browser-compatibility-testing-best-practices-for-web-developers/" 164 | }, 165 | { 166 | Question: 167 | "What is the purpose of a test case execution report in software testing?", 168 | Answer: "To track the progress of test execution", 169 | Distractor1: "To document test case design", 170 | Distractor2: "To describe the software architecture", 171 | Distractor3: "To specify user requirements", 172 | Explanation: 173 | "A test case execution report is used to track the progress of test case execution, including which test cases have been executed, their outcomes, and any defects found.", 174 | Link: "https://www.freecodecamp.org/news/software-quality-assurance-guide/" 175 | }, 176 | { 177 | Question: 178 | "What is the primary goal of quality assurance in software development?", 179 | Answer: "To ensure software quality", 180 | Distractor1: "To fix all software bugs", 181 | Distractor2: "To develop software faster", 182 | Distractor3: "To design software interfaces", 183 | Explanation: 184 | "The primary goal of quality assurance (QA) in software development is to ensure that the software meets the required quality standards and is free from major defects.", 185 | Link: "https://www.freecodecamp.org/news/software-quality-assurance-guide/" 186 | }, 187 | 188 | { 189 | Question: 190 | "What type of testing is done on a new feature to ensure that it doesn't accidentally break existing functionality?", 191 | Answer: "Regression", 192 | Distractor1: "Smoke", 193 | Distractor2: "End to End", 194 | Distractor3: "Integration", 195 | Explanation: 196 | "Regression testing is done on a new build to ensure that new functionality has not unintentionally broken previously tested functionality.", 197 | Link: "https://www.freecodecamp.org/news/software-quality-assurance-guide/" 198 | }, 199 | { 200 | Question: 201 | "Which of the following most accurately describes exhaustive testing?", 202 | Answer: "It's not possible.", 203 | Distractor1: "It's considered best practice.", 204 | Distractor2: "It's a standard procedure in the final steps before launch.", 205 | Distractor3: "It's what happens during end to end testing.", 206 | Explanation: 207 | "If you truly try to test every aspect and test case in your software, it will take too much time and effort, and it's not practical.", 208 | Link: "https://www.freecodecamp.org/news/software-testing-beginners-guide/#software-testing-principles" 209 | }, 210 | { 211 | Question: "What do the terms QA and QC stand for?", 212 | Answer: "Quality Assurance and Quality Control ", 213 | Distractor1: "Quality Assets and Quality completion", 214 | Distractor2: "Quality Analyst and Quantum Computing", 215 | Distractor3: "Quality Assessment and Quality Computing", 216 | Explanation: 217 | "Quality Assurance (commonly known as QA) and Quality Control (commonly known as QC)", 218 | Link: "https://www.freecodecamp.org/news/software-quality-assurance-guide/" 219 | }, 220 | { 221 | Question: "What type of test involves catching errors while writing code?", 222 | Answer: "Static Analysis", 223 | Distractor1: "Unit", 224 | Distractor2: "Integration", 225 | Distractor3: "End to End", 226 | Explanation: 227 | "One of the most common sources of bugs is related to typos and incorrect types. Static Analysis Testing lets you catch typos and type errors as you write the code.", 228 | Link: "https://www.freecodecamp.org/news/why-use-static-types-in-javascript-part-2-part-3-be699ee7be60/" 229 | }, 230 | { 231 | Question: 232 | "What type of test involves testing individual functions or components?", 233 | Answer: "Unit", 234 | Distractor1: "Static Analysis", 235 | Distractor2: "Integration", 236 | Distractor3: "End to End", 237 | Explanation: 238 | "Unit Testing lets us verify that individual, isolated parts work as expected.", 239 | Link: "https://www.freecodecamp.org/news/software-testing-beginners-guide/#types-of-software-testing" 240 | }, 241 | { 242 | Question: 243 | "What type of test involves testing groups of functions and/or components?", 244 | Answer: "Integration", 245 | Distractor1: "Static Analysis", 246 | Distractor2: "Unit", 247 | Distractor3: "End to End", 248 | Explanation: 249 | "Integration Testing lets us verify that several units work together in harmony.", 250 | Link: "https://www.freecodecamp.org/news/software-testing-beginners-guide/#types-of-software-testing" 251 | }, 252 | { 253 | Question: 254 | "What type of test behaves like a user to click around the app and verify that it functions correctly?", 255 | Answer: "End to End", 256 | Distractor1: "Static Analysis", 257 | Distractor2: "Unit", 258 | Distractor3: "Integration", 259 | Explanation: 260 | "End to End tests typically run the entire application (both frontend and backend) and your test will interact with the app just like a typical user would.", 261 | Link: "https://www.freecodecamp.org/news/end-to-end-testing-tutorial/" 262 | }, 263 | { 264 | Question: 265 | "Which of the following statements are false about using software tests?", 266 | Answer: 267 | "By using software tests, you automatically ensure that the app follows user requirements.", 268 | Distractor1: "Using software tests improves product security.", 269 | Distractor2: "Using software tests improves customer satisfaction.", 270 | Distractor3: "Using software tests saves money.", 271 | Explanation: 272 | "Even if the app is 99% bug free, if it doesn't meet consumer requirements or fulfill the original user requirements it is useless.", 273 | Link: "https://www.freecodecamp.org/news/software-testing-beginners-guide/" 274 | }, 275 | { 276 | Question: "What are regression tests?", 277 | Answer: "Re-applying tests at later stages of development.", 278 | Distractor1: "Only testing individual units of code", 279 | Distractor2: "tests that check for basic functionality only", 280 | Distractor3: "There is no such thing as regression tests", 281 | Explanation: 282 | "Regression tests refers to re-applying tests at later stages of development to ensure they still work.", 283 | Link: "https://www.freecodecamp.org/news/software-testing-beginners-guide/" 284 | }, 285 | { 286 | Question: 287 | "What type of test involves the process of testing integrated software?", 288 | Answer: "System", 289 | Distractor1: "Acceptance", 290 | Distractor2: "Unit", 291 | Distractor3: "Integration", 292 | Explanation: 293 | "In system testing, the quality assurance team evaluates how each component of the application/software work together in a full, integrated environment.", 294 | Link: "https://www.freecodecamp.org/news/software-testing-beginners-guide/#types-of-software-testing" 295 | }, 296 | { 297 | Question: "What does the term TDD stand for?", 298 | Answer: "Test-Driven Development", 299 | Distractor1: "Test-Driving Development", 300 | Distractor2: "Test-Distributing Development", 301 | Distractor3: "Test-Distinct Development", 302 | Explanation: 303 | "Test-driven development is the act of first deciding what you want your program to do (the specifications), formulating a failing test, then writing the code to make that test pass.", 304 | Link: "https://www.freecodecamp.org/news/an-introduction-to-test-driven-development-c4de6dce5c/" 305 | }, 306 | { 307 | Question: "Which of the following is true about TDD?", 308 | Answer: "With TDD, test logic precedes application logic.", 309 | Distractor1: "With TDD, application logic precedes test logic", 310 | Distractor2: "TDD stands for Test-Distributing Development", 311 | Distractor3: "TDD stands for Testing Distributed Development", 312 | Explanation: 313 | "The term TDD stands for Test-Driven Development and it is the act of first deciding what you want your program to do (the specifications), formulating a failing test, then writing the code to make that test pass.", 314 | Link: "https://www.freecodecamp.org/news/an-introduction-to-test-driven-development-c4de6dce5c/" 315 | }, 316 | { 317 | Question: 318 | "Which testing technique focuses on examining the internal logic and structure of a software application?", 319 | Answer: "White-Box Testing", 320 | Distractor1: "Black-Box Testing", 321 | Distractor2: "Grey-Box Testing", 322 | Distractor3: "User Acceptance Testing", 323 | Explanation: 324 | "White-box testing involves analyzing the internal code, logic, and structure of a software application to ensure thorough coverage of all code paths.", 325 | Link: "https://www.freecodecamp.org/news/4-testing-methods-which-are-mandatory-for-any-software-7731ad194fb3/" 326 | }, 327 | { 328 | Question: 329 | "What does SAST stand for in the context of software security testing?", 330 | Answer: "Static Application Security Testing", 331 | Distractor1: "Systematic Application Safety Testing", 332 | Distractor2: "Source Analysis Security Testing", 333 | Distractor3: "Secure Algorithmic Source Testing", 334 | Explanation: 335 | "Static Application Security Testing (SAST) involves analyzing the codebase for security vulnerabilities and violations of security rules, providing insights into potential issues before the final application build.", 336 | Link: "https://www.freecodecamp.org/news/4-testing-methods-which-are-mandatory-for-any-software-7731ad194fb3/" 337 | }, 338 | { 339 | Question: 340 | "How many phases/stages does the Software Development Life Cycle have?", 341 | Answer: "7", 342 | Distractor1: "3", 343 | Distractor2: "12", 344 | Distractor3: "5", 345 | Explanation: 346 | "A good QA engineer should understand the full life cycle of software products in order to effectively plan and test them. There are 7 phases of the Software Development Life Cycle", 347 | Link: "https://www.freecodecamp.org/news/how-to-become-a-quality-assurance-engineer-qa-engineer-career-guide/" 348 | }, 349 | { 350 | Question: "What is exploratory testing?", 351 | Answer: 352 | "An unscripted approach to testing in an effort to find unknown bugs and identify regressions", 353 | Distractor1: "Tests that check for basic functionality", 354 | Distractor2: "A replacement for scripted testing", 355 | Distractor3: 356 | "Focuses on one area of the software that will most likely contain bugs", 357 | Explanation: 358 | "An unscripted approach to testing, which relies on the tester's unique creativity in an effort to find unknown bugs and identify regressions", 359 | Link: "https://www.freecodecamp.org/news/software-quality-assurance-guide/" 360 | }, 361 | { 362 | Question: 363 | "What is the primary focus of quality assurance (QA) in the Software Development process, as compared to quality control (QC)?", 364 | Answer: 365 | "QA focuses on proactive processes and adherence to quality standards, while QC is primarily concerned with reactive corrections", 366 | Distractor1: 367 | "QA focuses on inspection and testing, while QC focuses on documentation, and audits.", 368 | Distractor2: 369 | "QA and QC implies the same thing and can be used interchangeably.", 370 | Distractor3: "QC is perfomed before QA.", 371 | Explanation: 372 | "QA focuses more on proactive processes while QC focuses more on reactive corrections. QA is concerned with processes and adherence, while QC is centered on inspections, testing and making corrections.", 373 | Link: "https://www.freecodecamp.org/news/how-to-become-a-quality-assurance-engineer-qa-engineer-career-guide/" 374 | }, 375 | { 376 | Question: 377 | "Which of the following skills is NOT typically required for a QA engineer?", 378 | Answer: "Proficiency in writing code.", 379 | Distractor1: "Good time management skills", 380 | Distractor2: "Strong listening skills", 381 | Distractor3: "Attention to detail", 382 | Explanation: 383 | "Core skills needed for becoming a good QA engineer are good time management skills, strong listening skills and attention to detail.", 384 | Link: "https://www.freecodecamp.org/news/how-to-become-a-quality-assurance-engineer-qa-engineer-career-guide/" 385 | }, 386 | { 387 | Question: "What is the scope of cross-browser testing?", 388 | Answer: 389 | "Focused on ensuring a website functions consistently across various web browsers.", 390 | Distractor1: 391 | "Cross-browser testing extends to evaluating all aspects of a website, including its design, content, and features, excluding only the browsers themselves.", 392 | Distractor2: 393 | "It's exclusively centered on analyzing the unique features and capabilities of a single web browser to enhance user experience.", 394 | Distractor3: 395 | "It encompasses the assessment of every website on the internet to guarantee their optimal performance and user satisfaction.", 396 | Explanation: 397 | "Cross-Browser Testing specifically targets ensuring a website's consistency across different web browsers and their versions.", 398 | Link: "https://www.freecodecamp.org/news/cross-browser-compatibility-testing-best-practices-for-web-developers/" 399 | }, 400 | { 401 | Question: 402 | "How does compatibility testing differ from cross-browser testing?", 403 | Answer: 404 | "Compatibility testing is broader, assessing different operating systems, devices, screen sizes, and network conditions, while cross-browser testing focuses specifically on browsers.", 405 | Distractor1: "Compatibility testing is limited to a single web browser.", 406 | Distractor2: 407 | "Compatibility testing and cross-browser testing are the same thing.", 408 | Distractor3: 409 | "Compatibility testing only checks the appearance of a website.", 410 | Explanation: 411 | "Compatibility testing encompasses a wide range of factors, including operating systems, devices, screen sizes, and network conditions, while cross-browser testing concentrates on web browsers.", 412 | Link: "https://www.freecodecamp.org/news/cross-browser-compatibility-testing-best-practices-for-web-developers/" 413 | }, 414 | { 415 | Question: 416 | "Which of the following is NOT an example of non-functional testing?", 417 | Answer: "Checking the actual features of our product. ", 418 | Distractor1: 419 | "Stress testing to check how infrastructure responsds to heavy usage.", 420 | Distractor2: 421 | "Security testing to check if an application is vulnerable to common hacking attacks.", 422 | Distractor3: 423 | "Accessibility testing to check if an an application is coded in a way that is accessible for people with different disabilities.", 424 | Explanation: 425 | "Non-functional testing refers to anything that's not strictly related to the core features of our product.", 426 | Link: "https://www.freecodecamp.org/news/test-a-react-app-with-jest-testing-library-and-cypress/" 427 | }, 428 | { 429 | Question: 430 | "Which testing technique focuses on testing what the user should perceive?", 431 | Answer: "Black Box Testing", 432 | Distractor1: "White Box Testing", 433 | Distractor2: "Grey Box Testing", 434 | Distractor3: "Green Box Testing", 435 | Explanation: 436 | "Black box testing is a method where the tester does not have any working knowledge of the internal structure of the software. It verifies the functionality of the software.", 437 | Link: "https://www.freecodecamp.org/news/4-testing-methods-which-are-mandatory-for-any-software-7731ad194fb3/" 438 | }, 439 | { 440 | Question: "What is a test-runner?", 441 | Answer: 442 | "A test-runner is piece of software that allows you to run tests to evaluate your app. ", 443 | Distractor1: 444 | "A test-runner is a programming language used for writing test cases and validating software applications.", 445 | Distractor2: 446 | "A test-runner is a device used in sports competitions to measure the speed and accuracy of athletes.", 447 | Distractor3: 448 | "A test-runner is a software tool that automatically generates test data for various software applications.", 449 | Explanation: 450 | "A test-runner is a piece of software that allows you to run tests to evaluate your app such as Jest, a JavaScript test-runner.", 451 | Link: "https://www.freecodecamp.org/news/test-a-react-app-with-jest-testing-library-and-cypress/" 452 | }, 453 | { 454 | Question: 455 | "What is the testing phase that's usually done when the software is almost 60 - 80% complete?", 456 | Answer: "Alpha testing", 457 | Distractor1: "Beta Testing", 458 | Distractor2: "Backend Testing", 459 | Distractor3: "GUI Testing", 460 | Explanation: 461 | "Alpha testing is done when the software is almost 60-80% complete. There is no fixed testing cycle. Each cycle might go up to two weeks. Alpha testing involves both black box and white box testing.", 462 | Link: "https://www.freecodecamp.org/news/4-testing-methods-which-are-mandatory-for-any-software-7731ad194fb3/" 463 | }, 464 | { 465 | Question: "What does CI/CD stand for?", 466 | Answer: "Continuous Integration/Continuous Delivery", 467 | Distractor1: "Combined Integration/Combined Delivery", 468 | Distractor2: "Contigency Integration/Contigency Delivery", 469 | Distractor3: "Customer Integration/Customer Delivery", 470 | Explanation: 471 | "Continuous Integration and Continuous Delivery (CI/CD) is a software development approach that aims to improve the speed, efficiency, and reliability of software delivery.", 472 | Link: "https://www.freecodecamp.org/news/what-is-ci-cd/" 473 | }, 474 | { 475 | Question: "What is Negative path testing used for?", 476 | Answer: 477 | "To produce an error state in an application and verify that the error is handled gracefully", 478 | Distractor1: "Tests that check for basic functionality", 479 | Distractor2: 480 | "To test individual components/modules together to ensure they connect and interact well with one another.", 481 | Distractor3: 482 | "To ensure that new functionality has not unintentionally broken previously tested functionality", 483 | Explanation: 484 | "Negative path testing is a testing scenario designed to produce an error state in a feature/application and verify that the error is handled gracefully", 485 | Link: "https://www.freecodecamp.org/news/software-quality-assurance-guide/" 486 | }, 487 | { 488 | Question: 489 | "Which of the following is a primary focus of non-functional testing in software development?", 490 | Answer: 491 | "Evaluating the software's performance, reliability, and scalability", 492 | Distractor1: 493 | "Verifying that the software meets specific functional requirements", 494 | Distractor2: 495 | "Testing the interaction between integrated components or modules", 496 | Distractor3: "Checking for syntax and logical errors in the code", 497 | Explanation: 498 | "Non-functional testing is a software testing method that tests for end-user experiences, such as performance and reliability under load.", 499 | Link: "https://www.freecodecamp.org/news/software-testing-beginners-guide#types-of-software-testing" 500 | } 501 | ]; 502 | 503 | export default qualityAssuranceQuiz; 504 | -------------------------------------------------------------------------------- /src/data/regex-quiz.ts: -------------------------------------------------------------------------------- 1 | const regexQuiz = [ 2 | { 3 | Question: 4 | "Which regex quantifier matches 0 or 1 occurrence of the preceding character or group?", 5 | Answer: "?", 6 | Distractor1: "*", 7 | Distractor2: "+", 8 | Distractor3: "{3}", 9 | Explanation: 10 | "The ? quantifier matches the preceding character or group 0 or 1 time, indicating that it is optional.", 11 | Link: "https://www.freecodecamp.org/news/practical-regex-guide-with-real-life-examples/" 12 | }, 13 | { 14 | Question: "What does the regex character class [A-Za-z] match?", 15 | Answer: "Any letter(both uppercase and lowercase)", 16 | Distractor1: "Any number", 17 | Distractor2: "Any special characters", 18 | Distractor3: "Only upper case letters", 19 | Explanation: 20 | "This character class matches any single letter, whether it's uppercase or lowercase.", 21 | Link: "https://www.freecodecamp.org/news/practical-regex-guide-with-real-life-examples/" 22 | }, 23 | { 24 | Question: 25 | "Which of the following regular expressions will match a string containing exactly three lowercase letters (a-z) in a row?", 26 | Answer: "[a-z]{3}", 27 | Distractor1: "[a-z]+", 28 | Distractor2: "[a-z]{2,3}", 29 | Distractor3: "[a-z]{4}", 30 | Explanation: 31 | "[a-z]{3} is the correct regular expression for matching a string containing exactly three lowercase letters (a-z) in a row.", 32 | Link: "https://www.freecodecamp.org/news/practical-regex-guide-with-real-life-examples/" 33 | }, 34 | { 35 | Question: 36 | "Which regular expression pattern can be used to match valid email addresses according to the most common email format standards?", 37 | Answer: "^[a-zA-Z0-9.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$", 38 | Distractor1: "^[a-zA-Z0-9.+-]+@[a-zA-Z0-9-]+.[a-z]{2,}$", 39 | Distractor2: "^[a-zA-Z0-9.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]{2,}$", 40 | Distractor3: "^[a-zA-Z0-9.+-]+@[a-zA-Z0-9-]+.[a-zA-Z]{2,}$", 41 | Explanation: 42 | "^[a-zA-Z0-9.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$ matches valid email addresses by ensuring alphanumeric characters, dots, underscores, plus signs, and hyphens before @ and a valid domain with at least one dot after @.", 43 | Link: "https://www.freecodecamp.org/news/practical-regex-guide-with-real-life-examples/" 44 | }, 45 | { 46 | Question: "What are Regular Expressions?", 47 | Answer: "Patterns that allow you to describe, match, or parse text", 48 | Distractor1: "popular type of compiler built in the 1980's", 49 | Distractor2: "a category of sorting algorithms", 50 | Distractor3: "Patterns that allow you to reverse strings", 51 | Explanation: 52 | "Regular expressions are patterns that allow you to describe, match, or parse text.", 53 | Link: "https://www.freecodecamp.org/news/regular-expressions-for-beginners/" 54 | }, 55 | { 56 | Question: 57 | "In JavaScript Regular Expressions, which of the following flags is used for global search?", 58 | Answer: "g", 59 | Distractor1: "i", 60 | Distractor2: "m", 61 | Distractor3: "?", 62 | Explanation: 63 | "The g flag is used for global search which means the search will not return after the first match.", 64 | Link: "https://www.freecodecamp.org/news/regular-expressions-for-beginners/" 65 | }, 66 | { 67 | Question: 68 | "In JavaScript Regular Expressions, which of the following flags is used for case-insensitive search?", 69 | Answer: "i", 70 | Distractor1: "g", 71 | Distractor2: "n", 72 | Distractor3: "j", 73 | Explanation: 74 | "The i flag is used for case-insensitive search meaning that a match can occur regardless of the casing.", 75 | Link: "https://www.freecodecamp.org/news/regular-expressions-for-beginners/" 76 | }, 77 | { 78 | Question: 79 | "In JavaScript Regular Expressions, which of the following flags is used for multiline search?", 80 | Answer: "m", 81 | Distractor1: "a", 82 | Distractor2: "d", 83 | Distractor3: "w", 84 | Explanation: "The m flag is used for multiline search.", 85 | Link: "https://www.freecodecamp.org/news/regular-expressions-for-beginners/" 86 | }, 87 | { 88 | Question: 89 | "In JavaScript Regular Expressions, which of the following flags is used for Unicode search?", 90 | Answer: "u", 91 | Distractor1: "k", 92 | Distractor2: "v", 93 | Distractor3: "e", 94 | Explanation: "The u flag is used for Unicode search.", 95 | Link: "https://www.freecodecamp.org/news/regular-expressions-for-beginners/" 96 | }, 97 | { 98 | Question: 99 | "In JavaScript Regular Expressions, which of the following characters matches the start of a line?", 100 | Answer: "^", 101 | Distractor1: "&", 102 | Distractor2: "*", 103 | Distractor3: "?", 104 | Explanation: 105 | "The ^ character matches the start of a line and anchors a literal at the beginning of that line.", 106 | Link: "https://www.freecodecamp.org/news/regular-expressions-for-beginners/" 107 | }, 108 | { 109 | Question: 110 | "In JavaScript Regular Expressions, which of the following characters matches the end of a line?", 111 | Answer: "$", 112 | Distractor1: "<", 113 | Distractor2: ">", 114 | Distractor3: "?", 115 | Explanation: 116 | "The $ character matches the end of a line and anchors a literal at the end of that line.", 117 | Link: "https://www.freecodecamp.org/news/regular-expressions-for-beginners/" 118 | }, 119 | { 120 | Question: 121 | "In JavaScript Regular Expressions, which of the following word boundaries matches the start or end of a word?", 122 | Answer: "\b", 123 | Distractor1: "g", 124 | Distractor2: "w", 125 | Distractor3: "\n", 126 | Explanation: "The \b word boundary matches the start or end of a word.", 127 | Link: "https://www.freecodecamp.org/news/regular-expressions-for-beginners/" 128 | }, 129 | { 130 | Question: "What is a character class in Regular Expressions?", 131 | Answer: 132 | "A character class is used to match any one of several characters in a particular position", 133 | Distractor1: "A character class is used to remove spaces from a string", 134 | Distractor2: "A character class is used to remove numbers from a string", 135 | Distractor3: 136 | "A character class is used to add alphanumeric characters to a string", 137 | Explanation: 138 | "A character class is used to match any one of several characters in a particular position.", 139 | Link: "https://www.freecodecamp.org/news/regular-expressions-for-beginners/" 140 | }, 141 | { 142 | Question: 143 | "Which of the following regex patterns can be used to match one or more occurrences of a digit in a string?", 144 | Answer: "d+", 145 | Distractor1: "d*", 146 | Distractor2: "d?", 147 | Distractor3: "d{2}", 148 | Explanation: 149 | "The regex pattern d+ matches one or more occurrences of a digit in a string. The plus sign (+) means 'one or more' in regular expressions.", 150 | Link: "https://www.freecodecamp.org/news/regular-expressions-for-beginners/" 151 | }, 152 | { 153 | Question: "What are the two Lookaround groups in regex?", 154 | Answer: "Lookahead and Lookbehind", 155 | Distractor1: "Lookfront and Lookback", 156 | Distractor2: "Lookstart and Lookend", 157 | Distractor3: "Lookplus and Lookminus", 158 | Explanation: 159 | "The Lookahead and Lookbehind are non capturing groups that search for the presence or absence of a regex pattern.", 160 | Link: "https://www.freecodecamp.org/news/regular-expressions-for-javascript-developers/" 161 | }, 162 | { 163 | Question: "Which of these patterns denotes a positive Lookahead?", 164 | Answer: "(?=)", 165 | Distractor1: "(?a)", 166 | Distractor2: "(?#)", 167 | Distractor3: "(?->)", 168 | Explanation: "The positive Lookahead is indicated by the = in the group.", 169 | Link: "https://www.freecodecamp.org/news/regular-expressions-for-javascript-developers/" 170 | }, 171 | { 172 | Question: "Which of these patterns denotes a negative Lookahead?", 173 | Answer: "(?!)", 174 | Distractor1: "(?~)", 175 | Distractor2: "(?-=)", 176 | Distractor3: "(?A)", 177 | Explanation: "The negative Lookahead is indicated by the ! in the group.", 178 | Link: "https://www.freecodecamp.org/news/regular-expressions-for-javascript-developers/" 179 | }, 180 | { 181 | Question: "Which of these patterns denotes a positive Lookbehind?", 182 | Answer: "(?<=)", 183 | Distractor1: "(?b)", 184 | Distractor2: "(?$)", 185 | Distractor3: "(?<-)", 186 | Explanation: "The positive Lookbehind is indicated by the <= in the group.", 187 | Link: "https://www.freecodecamp.org/news/regular-expressions-for-javascript-developers/" 188 | }, 189 | { 190 | Question: "Which of these patterns denotes a negative Lookbehind?", 191 | Answer: "(?", 205 | Explanation: "The parentheses, (), are used in grouping regex.", 206 | Link: "https://www.freecodecamp.org/news/regular-expressions-for-javascript-developers/" 207 | } 208 | ]; 209 | export default regexQuiz; 210 | -------------------------------------------------------------------------------- /src/image.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.webp" { 2 | const value: string; 3 | export default value; 4 | } 5 | -------------------------------------------------------------------------------- /src/images/background.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/freeCodeCamp/Developer_Quiz_Site/7855ac93bde30bb9429a68c910324bdd53595482/src/images/background.webp -------------------------------------------------------------------------------- /src/images/fcc_background.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/freeCodeCamp/Developer_Quiz_Site/7855ac93bde30bb9429a68c910324bdd53595482/src/images/fcc_background.webp -------------------------------------------------------------------------------- /src/images/fcc_primary_large.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/freeCodeCamp/Developer_Quiz_Site/7855ac93bde30bb9429a68c910324bdd53595482/src/images/fcc_primary_large.webp -------------------------------------------------------------------------------- /src/images/fcc_secondary_large.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/freeCodeCamp/Developer_Quiz_Site/7855ac93bde30bb9429a68c910324bdd53595482/src/images/fcc_secondary_large.webp -------------------------------------------------------------------------------- /src/images/main-character.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/freeCodeCamp/Developer_Quiz_Site/7855ac93bde30bb9429a68c910324bdd53595482/src/images/main-character.webp -------------------------------------------------------------------------------- /src/images/rpg-menu.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/freeCodeCamp/Developer_Quiz_Site/7855ac93bde30bb9429a68c910324bdd53595482/src/images/rpg-menu.webp -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { RouterProvider, createHashRouter } from "react-router-dom"; 4 | 5 | import reportWebVitals from "./reportWebVitals"; 6 | import App from "./App"; 7 | 8 | const router = createHashRouter([{ path: "*", Component: App }]); 9 | const root = document.getElementById("root"); 10 | 11 | createRoot(root || document.createElement("div")).render( 12 | 13 | 14 | 15 | ); 16 | 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages/Questions.tsx: -------------------------------------------------------------------------------- 1 | import { useNavigate } from "react-router-dom"; 2 | import QuizModal from "../components/QuizModal"; 3 | import React, { useEffect } from "react"; 4 | 5 | import { QuizProps } from "../types"; 6 | 7 | const Questions: React.FC = QuizProps => { 8 | const navigate = useNavigate(); 9 | useEffect(() => { 10 | if (!QuizProps.choicesArr.length) { 11 | navigate("/quizzes"); 12 | } 13 | }, [QuizProps.choicesArr]); 14 | return ( 15 | <> 16 |
17 |

18 | Question: {QuizProps.questionNumber}/{QuizProps.totalQuestions} 19 |

20 |

Points: {QuizProps.points}

21 |
22 |

Question {QuizProps.questionNumber}

23 |
24 | {QuizProps.chooseAnswer ? ( 25 | 26 | ) : ( 27 |
28 | 29 | 30 | Question {QuizProps.questionNumber} 31 | 32 | {QuizProps.currQuestion.Question} 33 | 34 |
    35 | {QuizProps.choicesArr.length > 0 && 36 | QuizProps.choicesArr[QuizProps.questionNumber - 1].map( 37 | (choice: string, index: number) => ( 38 |
  • 39 | 45 |
    • 46 | ) 47 | )} 48 |
49 |
50 | 57 |
58 | )} 59 |
60 | 61 | ); 62 | }; 63 | export default Questions; 64 | -------------------------------------------------------------------------------- /src/pages/Results.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import Confetti from "react-confetti"; 3 | import { PointTotals } from "../types"; 4 | 5 | const Results: React.FC = ({ 6 | points, 7 | totalQuestions, 8 | resetQuiz 9 | }: PointTotals) => { 10 | const totalPercentageCorrect = (Math.floor(points) / totalQuestions) * 100; 11 | const tweetMessage = `http://twitter.com/intent/tweet?text=I just scored ${totalPercentageCorrect}%25 on developerquiz.org. Wanna try it for yourself?&hashtags=freecodecamp`; 12 | 13 | const [windowSize, setWindowSize] = useState({ 14 | width: window.innerWidth, 15 | height: window.innerHeight 16 | }); 17 | 18 | const [showConfetti, setShowConfetti] = useState(false); 19 | 20 | useEffect(() => { 21 | // Update window size when it changes 22 | const handleResize = () => { 23 | setWindowSize({ 24 | width: window.innerWidth, 25 | height: window.innerHeight 26 | }); 27 | }; 28 | 29 | window.addEventListener("resize", handleResize); 30 | 31 | // Clean up the event listener on unmount 32 | return () => { 33 | window.removeEventListener("resize", handleResize); 34 | }; 35 | }, []); 36 | 37 | useEffect(() => { 38 | if (points === totalQuestions) { 39 | setShowConfetti(true); 40 | 41 | // Remove the confetti after 5 seconds 42 | const confettiTimeout = setTimeout(() => { 43 | setShowConfetti(false); 44 | }, 5000); 45 | 46 | // Clean up the timeout on unmount 47 | return () => { 48 | clearTimeout(confettiTimeout); 49 | }; 50 | } 51 | }, [points, totalQuestions]); 52 | 53 | return ( 54 |
55 |

Results

56 | {showConfetti && ( 57 | 58 | )} 59 |

60 | {points === totalQuestions ? "Wow! Perfect Score!" : "You received"}{" "} 61 | {points} out of {totalQuestions} points 62 |

63 |

64 | Wanna learn how to code? Download the free:  65 | 71 | RPG game 72 | 73 |

74 | 75 | 78 | 79 | {totalPercentageCorrect >= 70 && ( 80 | 86 | Tweet your quiz score 87 | 88 | )} 89 |
90 | ); 91 | }; 92 | export default Results; 93 | -------------------------------------------------------------------------------- /src/pages/SelectCategory.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { CATEGORIES } from "../constants"; 3 | import { SelectCategoryProps } from "../types"; 4 | 5 | const SelectCategory: React.FC = SelectCategoryProps => { 6 | return ( 7 |
8 |

Choose a Category

9 |
10 | {CATEGORIES.map((category: string, index: number) => ( 11 | 18 | ))} 19 | 25 |
26 |
27 | ); 28 | }; 29 | export default SelectCategory; 30 | -------------------------------------------------------------------------------- /src/pages/SelectQuestionsTotal.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { QUESTION_NUMS } from "../constants"; 3 | import { SelectQuestionsTotalProps } from "../types"; 4 | 5 | const SelectQuestionsTotal: React.FC = ({ 6 | totalQuestions, 7 | startQuiz 8 | }) => { 9 | const availableQuizLengths = QUESTION_NUMS.filter( 10 | length => length <= totalQuestions 11 | ); 12 | 13 | return ( 14 |
15 |

Choose a length for the Quiz

16 |
17 | {availableQuizLengths.map((choice: number, index: number) => ( 18 | 25 | ))} 26 | 27 | 33 |
34 |
35 | ); 36 | }; 37 | export default SelectQuestionsTotal; 38 | -------------------------------------------------------------------------------- /src/pages/WelcomePage.tsx: -------------------------------------------------------------------------------- 1 | import rpgMenu from "../images/rpg-menu.webp"; 2 | import mainCharacter from "../images/main-character.webp"; 3 | import fccBackground from "../images/fcc_background.webp"; 4 | import Navbar from "../components/Navbar"; 5 | import HeroSection from "../components/HeroSection"; 6 | import "../stylesheets/HomepageRow.css"; 7 | import React from "react"; 8 | import { ROUNDED_QUESTION_COUNT } from "../constants"; 9 | import ButtonLink from "../components/ButtonLink"; 10 | 11 | const WelcomePage: React.FC = () => { 12 | return ( 13 | <> 14 | 15 | 16 | 17 |
18 |
19 | 20 |
24 |
25 |

Want to test your knowledge?

26 |

27 | Brush up on your programming knowledge with{" "} 28 | {ROUNDED_QUESTION_COUNT}+ questions. 29 |

30 | Quiz 31 |
32 |
33 | main female character from rpg game 39 |
40 |
41 | 42 |
43 | 44 |
48 |
49 |

Brand new to programming?

50 |

51 | Learn to code for free and start your programming journey with{" "} 52 | 57 | freeCodeCamp.org 58 | 59 | . 60 |

61 |
62 |
63 | freeCodeCamp rpg logo 69 |
70 |
71 | 72 |
73 | 74 |
78 |
79 |

80 | Want to learn how to code while playing a game? 81 |

82 |

83 | {" "} 84 | Give the freeCodeCamp
{" "} 85 | 90 | Learn to Code RPG Game 91 | {" "} 92 | a go! 93 |

94 |

95 | Available for free download on
Windows, Mac and Linux. 96 |

97 |
98 |
99 | freeCodeCamp rpg logo 104 |
105 |
106 |
107 | 108 | ); 109 | }; 110 | 111 | export default WelcomePage; 112 | -------------------------------------------------------------------------------- /src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from "web-vitals"; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import "@testing-library/jest-dom"; 6 | -------------------------------------------------------------------------------- /src/shuffle-arr.ts: -------------------------------------------------------------------------------- 1 | //fisher yates shuffle 2 | function shuffle(array: Type[]): Type[] { 3 | let currentIndex = array.length, 4 | randomIndex: number; 5 | 6 | while (currentIndex > 0) { 7 | randomIndex = Math.floor(Math.random() * currentIndex); 8 | currentIndex--; 9 | 10 | [array[currentIndex], array[randomIndex]] = [ 11 | array[randomIndex], 12 | array[currentIndex] 13 | ]; 14 | } 15 | 16 | return array; 17 | } 18 | 19 | export default shuffle; 20 | -------------------------------------------------------------------------------- /src/stylesheets/App.css: -------------------------------------------------------------------------------- 1 | @import "./colors.css"; 2 | 3 | /* Basic CSS reset */ 4 | * { 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | } 9 | 10 | /* General styles */ 11 | 12 | fieldset { 13 | border: none; 14 | } 15 | 16 | html { 17 | overflow-x: hidden; 18 | } 19 | 20 | body { 21 | font-family: "Lato", sans-serif; 22 | background-color: var(--bg-primary); 23 | color: var(--text-primary); 24 | } 25 | 26 | a { 27 | color: var(--text-link); 28 | } 29 | 30 | a:hover { 31 | color: var(--text-link-hover); 32 | } 33 | 34 | .fcc-logo { 35 | max-width: 300px; 36 | padding-bottom: 50px; 37 | margin: auto; 38 | display: block; 39 | } 40 | 41 | .select-quiz-styles, 42 | .quiz-div, 43 | .results-div { 44 | display: flex; 45 | flex-direction: column; 46 | justify-content: center; 47 | align-items: center; 48 | } 49 | 50 | /* Quiz styles */ 51 | .quiz-heading, 52 | .results-heading { 53 | font-family: "Roboto Mono", monospace; 54 | text-align: center; 55 | } 56 | 57 | .select-btn-div { 58 | display: flex; 59 | flex-direction: column; 60 | margin: 1.25rem; 61 | width: 100%; 62 | padding: 0 10% 0; 63 | } 64 | 65 | .select-btns, 66 | .answers-btns { 67 | font-size: 1.2rem; 68 | margin: 10px 0; 69 | padding: 10px; 70 | background-color: var(--text-primary); 71 | border-radius: 15px; 72 | border: none; 73 | cursor: pointer; 74 | width: 100%; 75 | transition: all 0.4s ease-in-out; 76 | } 77 | 78 | .select-btns:hover, 79 | .answers-btns:hover { 80 | box-shadow: -1px -1px 15px var(--effect-shadow); 81 | } 82 | 83 | .answers-btns--selected { 84 | background-color: var(--bg-answer-selected); 85 | } 86 | 87 | .quiz-btn, 88 | .results-btn, 89 | .modal-btn { 90 | background-color: var(--bg-button); 91 | border: 3px solid var(--border-primary); 92 | font-size: 1.2rem; 93 | padding: 5px; 94 | } 95 | 96 | .quiz-answers-div { 97 | display: flex; 98 | flex-direction: column; 99 | margin: 1.25rem; 100 | width: 50%; 101 | } 102 | 103 | .quiz-answers-div legend { 104 | font-size: 2rem; 105 | margin-bottom: 2rem; 106 | } 107 | 108 | .quiz-answers-div ul { 109 | padding: 0; 110 | list-style: none; 111 | margin-bottom: 1rem; 112 | } 113 | hr { 114 | margin: 1rem 0; 115 | opacity: 0.25; 116 | } 117 | .quiz-btn { 118 | position: absolute; 119 | top: 0; 120 | left: 0; 121 | } 122 | 123 | .quiz-text { 124 | display: flex; 125 | justify-content: space-evenly; 126 | padding: 0 10px; 127 | font-size: 1.4rem; 128 | } 129 | 130 | .submit-btn { 131 | font-weight: bold; 132 | color: var(--text-primary); 133 | background-color: transparent; 134 | opacity: 0.5; 135 | border: 2px solid var(--text-primary); 136 | } 137 | 138 | /* Results styles */ 139 | .results-text { 140 | font-size: 1.3rem; 141 | margin-top: 1.25rem; 142 | } 143 | 144 | .results-rpg-link { 145 | color: var(--text-link); 146 | } 147 | 148 | @media screen and (max-width: 460px) { 149 | .quiz-answers-div { 150 | width: auto; 151 | } 152 | } 153 | 154 | @media screen and (min-width: 640px) { 155 | .select-btn-div { 156 | padding: 0 20% 0; 157 | } 158 | } 159 | 160 | @media screen and (min-width: 768px) { 161 | .select-btn-div { 162 | width: 25%; 163 | padding: 0; 164 | } 165 | } 166 | -------------------------------------------------------------------------------- /src/stylesheets/Button.css: -------------------------------------------------------------------------------- 1 | @import "./colors.css"; 2 | 3 | .btn-default { 4 | width: 100px; 5 | margin: 10px; 6 | font-family: "Roboto Mono", monospace; 7 | font-size: 18px; 8 | color: var(--bg-primary); 9 | background-color: var(--bg-gradient-end); 10 | background-image: linear-gradient( 11 | var(--bg-gradient-start), 12 | var(--bg-gradient-end) 13 | ); 14 | border-color: var(--bg-gradient-end); 15 | border-width: 3px; 16 | } 17 | 18 | .transparent-btn { 19 | height: 32px; 20 | font-family: "Lato", sans-serif; 21 | font-size: 18px; 22 | background: transparent; 23 | color: var(--gray-00, var(--text-primary)); 24 | border: 1px solid var(--gray-00, var(--border-transparent)); 25 | cursor: pointer; 26 | } 27 | 28 | .transparent-btn:hover { 29 | font-weight: bold; 30 | background-color: var(--gray-00, var(--bg-transparent-hover)); 31 | color: var(--bg-primary); 32 | } 33 | 34 | .large-btn { 35 | width: 400px; 36 | height: 70px; 37 | font-size: 25px; 38 | } 39 | 40 | @media screen and (max-width: 480px) { 41 | .large-btn { 42 | width: 200px; 43 | height: 75px; 44 | font-size: 22px; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/stylesheets/ButtonLink.css: -------------------------------------------------------------------------------- 1 | @import "./colors.css"; 2 | 3 | .btn-default.btn--link { 4 | /*i named it btn--link because bootstrap has already btn-link class*/ 5 | display: flex; 6 | align-items: center; 7 | text-align: center; 8 | justify-content: center; 9 | text-decoration: none; 10 | border-style: solid; 11 | border-bottom-color: var(--border-dark-color); 12 | border-right-color: var(--border-dark-color); 13 | } 14 | .btn--link:hover { 15 | color: var(--bg-primary); 16 | } 17 | .btn--link:active, 18 | .btn--link:focus { 19 | color: var(--bg-primary); 20 | border-bottom-color: var(--border-light-color); 21 | border-right-color: var(--border-light-color); 22 | border-top-color: var(--border-dark-color); 23 | border-left-color: var(--border-dark-color); 24 | } 25 | -------------------------------------------------------------------------------- /src/stylesheets/HeroSection.css: -------------------------------------------------------------------------------- 1 | @import "./colors.css"; 2 | 3 | .hero-container, 4 | .hero-content { 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | } 9 | 10 | .hero-container { 11 | background-image: url("../images/background.webp"); 12 | background-position: center; 13 | background-repeat: no-repeat; 14 | background-size: cover; 15 | position: relative; 16 | height: 100vh; /*Changing this to 100% breaks the homepage desktop layout*/ 17 | width: 100%; 18 | box-shadow: inset 0 0 0 1000px rgb(34 27 49 / 57%); 19 | object-fit: contain; 20 | } 21 | 22 | .hero-content { 23 | width: 800px; 24 | flex-wrap: wrap; 25 | } 26 | 27 | .hero-text { 28 | padding: 1.25rem; 29 | font-family: Lato, sans-serif; 30 | text-align: center; 31 | letter-spacing: 1px; 32 | line-height: 1.5em; 33 | background-color: var(--bg-primary-transparent); 34 | box-shadow: inset -5px -6px var(--box-shadow-inset); 35 | } 36 | 37 | .question-count { 38 | font-size: 2rem; 39 | } 40 | 41 | .hero-text h1 { 42 | font-weight: bold; 43 | font-size: clamp(2.1rem, 7vw, 3.75rem); 44 | } 45 | 46 | .hero-text h2 { 47 | font-size: clamp(1.5rem, 4vw, 1.8rem); 48 | } 49 | -------------------------------------------------------------------------------- /src/stylesheets/HomepageRow.css: -------------------------------------------------------------------------------- 1 | @import "./colors.css"; 2 | 3 | p { 4 | font-size: 1.2rem; 5 | } 6 | 7 | .featurette-heading { 8 | margin: 22px; 9 | font-weight: 700; 10 | } 11 | 12 | .content-section-img { 13 | width: 80%; 14 | } 15 | 16 | .content-row-container { 17 | width: 100vw; 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | padding-top: 1.25rem; 22 | padding-bottom: 1.25rem; 23 | background-color: var(--bg-primary); 24 | } 25 | 26 | .content-text-container { 27 | max-width: 485px !important; 28 | display: flex; 29 | flex-wrap: wrap; 30 | align-content: center; 31 | justify-content: center; 32 | padding: 1.25rem 30px !important; 33 | } 34 | 35 | .lead { 36 | width: 100%; 37 | } 38 | 39 | .content-img-container { 40 | display: flex; 41 | align-items: center; 42 | justify-content: center; 43 | } 44 | 45 | .content-img-container img { 46 | width: 80%; 47 | } 48 | 49 | #main-character-img { 50 | width: 285px; 51 | border-radius: 20% !important; 52 | } 53 | 54 | #divider { 55 | height: 2px; 56 | margin-top: 0; 57 | margin-bottom: 0; 58 | color: white; 59 | opacity: 0.8; 60 | } 61 | 62 | #fcc-image { 63 | width: 100%; 64 | height: 100%; 65 | padding-left: 0.625em; 66 | object-fit: contain; 67 | } 68 | 69 | @media screen and (min-width: 768px) { 70 | .content-row-container { 71 | height: 10%; 72 | } 73 | 74 | .content-main-container { 75 | height: 345px; 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /src/stylesheets/Modal.css: -------------------------------------------------------------------------------- 1 | @import "./colors.css"; 2 | 3 | .modal-link { 4 | color: var(--text-deep-blue); 5 | font-size: 1.238rem; 6 | } 7 | 8 | .modal-text { 9 | font-size: 1.6rem; 10 | } 11 | 12 | ::backdrop { 13 | background-color: black; 14 | opacity: 0.5; 15 | } 16 | 17 | .modal-header, 18 | .modal-footer, 19 | .modal-body { 20 | text-align: left; 21 | padding: 15px; 22 | background-color: white; 23 | h2, 24 | h3 { 25 | margin-top: 0; 26 | margin-bottom: 0.5rem; 27 | font-weight: 500; 28 | line-height: 1.2; 29 | } 30 | p { 31 | margin-top: 0; 32 | margin-bottom: 1rem; 33 | } 34 | } 35 | 36 | .modal-header { 37 | border-top-left-radius: 10px; 38 | border-top-right-radius: 10px; 39 | height: auto; 40 | display: block; 41 | border-bottom: 1px solid var(--border-light-gray); 42 | } 43 | 44 | .modal-footer { 45 | border-bottom-left-radius: 10px; 46 | border-bottom-right-radius: 10px; 47 | display: flex; 48 | border-top: 1px solid var(--border-light-gray); 49 | justify-content: flex-end; 50 | } 51 | 52 | /* Styling for the dialog box */ 53 | dialog { 54 | position: fixed; 55 | inset: 0; 56 | width: 100vw; 57 | height: 100vh; 58 | padding: 0; 59 | margin: 0 auto; 60 | border: none; 61 | background: transparent; 62 | } 63 | 64 | /* Dialog content styling */ 65 | .content { 66 | position: relative; 67 | width: 100%; 68 | max-width: 500px; 69 | background: white; 70 | border-radius: 8px; 71 | margin: auto; 72 | z-index: 2; 73 | top: 50%; 74 | transform: translateY(-50%); 75 | text-align: center; 76 | } 77 | -------------------------------------------------------------------------------- /src/stylesheets/Navbar.css: -------------------------------------------------------------------------------- 1 | @import "./colors.css"; 2 | 3 | header { 4 | height: 3rem; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | padding: 0.625rem; 9 | background-color: var(--bg-primary); 10 | } 11 | 12 | .homepage-navbar { 13 | position: relative; 14 | display: flex; 15 | flex-wrap: wrap; 16 | align-items: center; 17 | justify-content: center; 18 | padding-top: 0.5rem; 19 | padding-bottom: 0.5rem; 20 | } 21 | 22 | .navbar-buttons { 23 | margin: 0; 24 | } 25 | 26 | .website-logo { 27 | display: flex; 28 | width: auto; 29 | height: 35px; 30 | margin: 7px 0; 31 | } 32 | 33 | @media screen and (max-width: 590px) { 34 | .homepage-navbar { 35 | display: block; 36 | } 37 | 38 | .navbar-buttons { 39 | display: none; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/stylesheets/colors.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --white: #ffffff; 3 | --bg-primary: #0a0a23; 4 | --bg-primary-transparent: #0a0a23f2; 5 | --bg-button: #acd157; 6 | --bg-transparent-hover: var(--white); 7 | --bg-gradient-start: #fecc4c; 8 | --bg-gradient-end: #ffac33; 9 | --bg-answer-selected: #f1be32; 10 | --box-shadow-inset: #0a0a232e; 11 | --text-primary: var(--white); 12 | --text-link: #f1be32; 13 | --text-link-hover: #acd157; 14 | --text-deep-blue: #002ead; 15 | --border-primary: #acd157; 16 | --border-transparent: var(--white); 17 | --border-dark-color: #aa8144; 18 | --border-light-color: #f5aa3a; 19 | --border-light-gray: #dee2e6; 20 | --effect-shadow: rgba(245, 242, 247, 0.7); 21 | --gray-00: var(--white); 22 | } 23 | -------------------------------------------------------------------------------- /src/types.tsx: -------------------------------------------------------------------------------- 1 | import { MouseEventHandler } from "react"; 2 | import { NavLinkProps } from "react-router-dom"; 3 | 4 | export interface ButtonProps { 5 | text: string; 6 | isTransparent: boolean; 7 | size: string; 8 | handleClick: MouseEventHandler; 9 | } 10 | 11 | export interface ButtonLinkProps extends NavLinkProps { 12 | size?: string; 13 | } 14 | 15 | export interface QuizQuestion { 16 | message: string; 17 | points: number; 18 | chosenAnswer: string; 19 | correct: boolean; 20 | displayExplanation: string; 21 | showReference: string; 22 | nextQuestion: MouseEventHandler; 23 | show: boolean; 24 | } 25 | 26 | export interface QuizProps { 27 | currQuestion: { Question: string }; 28 | questionNumber: number; 29 | totalQuestions: number; 30 | modalProps: QuizQuestion; 31 | chooseAnswer: boolean; 32 | points: number; 33 | choicesArr: string[][]; 34 | selectedOption: string; 35 | selectOption: (option: string) => void; 36 | checkAnswer: () => void; 37 | } 38 | 39 | export interface PointTotals { 40 | points: number; 41 | totalQuestions: number; 42 | resetQuiz: () => void; 43 | } 44 | 45 | export interface SelectCategoryProps { 46 | selectQuiz: (category: string, index: number) => void; 47 | startRandomQuiz: () => void; 48 | } 49 | 50 | export interface SelectQuestionsTotalProps { 51 | startQuiz: (e: number) => void; 52 | totalQuestions: number; // Add the totalQuestions prop 53 | } 54 | -------------------------------------------------------------------------------- /testSetup.ts: -------------------------------------------------------------------------------- 1 | import { afterEach } from "vitest"; 2 | import { cleanup } from "@testing-library/react"; 3 | import "@testing-library/jest-dom/vitest"; 4 | 5 | // runs a cleanup after each test case (e.g. clearing jsdom) 6 | afterEach(() => { 7 | cleanup(); 8 | }); 9 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src"] 24 | } 25 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2022", 4 | "lib": ["ES2023"], 5 | "module": "ESNext", 6 | "skipLibCheck": true, 7 | 8 | /* Bundler mode */ 9 | "moduleResolution": "bundler", 10 | "allowImportingTsExtensions": true, 11 | "isolatedModules": true, 12 | "moduleDetection": "force", 13 | "noEmit": true, 14 | 15 | /* Linting */ 16 | "strict": true, 17 | "noUnusedLocals": true, 18 | "noUnusedParameters": true, 19 | "noFallthroughCasesInSwitch": true 20 | }, 21 | "include": ["vite.config.ts"] 22 | } 23 | -------------------------------------------------------------------------------- /vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | export default defineConfig({ 5 | plugins: [react()], 6 | server: { 7 | watch: { 8 | usePolling: true // required for container hot reloading 9 | }, 10 | port: 3000, 11 | host: true, // fixes container xdg-open issues 12 | open: true 13 | }, 14 | build: { 15 | outDir: "./dist", 16 | emptyOutDir: true 17 | }, 18 | test: { 19 | globals: true, 20 | environment: "happy-dom", 21 | setupFiles: "./testSetup.ts", 22 | exclude: [ 23 | "**/node_modules/**", 24 | "**/dist/**", 25 | "**/e2e/*" /* do not include playwright files */ 26 | ] 27 | } 28 | }); 29 | --------------------------------------------------------------------------------