diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..d59cff1 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,30 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "name": "Launch Program", + "program": "${workspaceFolder}/app.js", + "request": "launch", + "skipFiles": [ + "/**" + ], + "type": "node" + }, + { + "type": "node", + "request": "launch", + "name": "Launch Program", + "skipFiles": [ + "/**" + ], + "program": "${workspaceFolder}/script.ts", + "preLaunchTask": "tsc: build - tsconfig.json", + "outFiles": [ + "${workspaceFolder}/**/*.js" + ] + } + ] +} \ No newline at end of file diff --git a/about.html b/about.html index 5adbad6..e2898d8 100644 --- a/about.html +++ b/about.html @@ -1,10 +1,121 @@ - - - - - About - - - - + + + + + + About + + + + + + + + + + + + +
+
+

Team Fire Team Two

+

+ This project is a part of Technigo's Web Bootcamp to further our knowleadge on Web accessibility tool. + + Our Web Accessibility page is an interactive webpage + that demonstrates key accessibility principles in action. This webpage serves as a practical example + of inclusive design, incorporating features such as keyboard navigation, screen reader compatibility, and color + contrast adjustments. + + This page includes practice required WCAG guidelines, ARIA roles, and best practices for designing inclusive web + experiences. By engaging with the quiz, users can assess their understanding and identify areas for improvement + in creating accessible digital content. +

+ Team Fire 2 is made up of Sofia, Varia and Jonny.
+
+

+
+ +
+

Web Accessibility

+

+ Web accessibility ensures that all users, including those with disabilities, can interact with digital content + effectively. The Web Content Accessibility Guidelines (WCAG) provide a framework for making websites more + inclusive, covering areas like alt text for images, color contrast, and keyboard navigation. + + Alt text is essential for screen readers but should be avoided for decorative images by using alt="" . + Informational images need descriptive alt text, while functional images (like icons) require alt text describing + their purpose, such as alt= "Search". + + WCAG has three compliance levels: A, covering basic requirements like alt text; AA, ensuring better + accessibility with features like proper color contrast; and AAA, the highest standard, including advanced + features like sign language interpretation for videos. Most websites aim for AA compliance to balance + accessibility and practicality. + + Clear language is key to accessibility. For example, “Flowers symbolize emotions and culture” is easier to + understand than abstract phrases like “nature’s drip—bold and meaningful.” Simple, direct language benefits + users with cognitive disabilities and screen reader users. + + Other best practices include keyboard-friendly navigation, ensuring text has at least a 4.5:1 contrast ratio, + and adding captions or transcripts for multimedia content. ARIA attributes like aria-label help improve screen + reader navigation. + + By following WCAG guidelines, developers can create digital experiences that are inclusive, accessible, and + user-friendly for everyone. Accessibility is about more than compliance—it’s about equal access for all. +

+ +
+ Diagram showing WCAG compliance levels A, AA, and AAA with accessibility icons + +
+
+
+ + +
+
+ +

© 2025 Accessibility Quiz for Beginners. All rights reserved by Jonny, Sofia, and Varia.

+
+
+ + + + + + \ No newline at end of file diff --git a/css/styles.css b/css/styles.css index e69de29..a31e1e4 100644 --- a/css/styles.css +++ b/css/styles.css @@ -0,0 +1,359 @@ +:root { + /*Teal Shades */ + + --teal-90: #022b30; + --teal-70: #005d5d; + /*below 50 use text-dark above use text light*/ + + --teal-50: #009d9a; + --teal-30: #3ddbd9; + + /* Accent Color - Coral */ + --accent-coral: #ea7348; + + /* Supporting Contrast Colors */ + --dark-gray: #2F2F2F; + --light-gray: #EAEAEA; + + --background-light: #D9FDFD; + --backgorund-dark: #022b30; + + --text-light: #D9FDFD; + --text-dark: #081a1c; + + /* Shadows */ + --shadow-sm: 0px 2px 4px rgba(8, 26, 28, 0.1); + --shadow-md: 0px 4px 8px rgba(8, 26, 28, 0.15); + --shadow-lg: 0px 6px 12px rgba(8, 26, 28, 0.2); + + /* Heights */ + --height-sm: 2rem; + --height-md: 3rem; + --height-lg: 4rem; + + /*font*/ + --default-font: "Roboto", sans-serif; + --secondary-font: "Roboto Mono", sans-serif; + + /* more readability*/ + --default-font-size: 1rem; + +} + + +/* Apply box-sizing border-box to all elements */ +*, +*::before, +*::after { + box-sizing: border-box; + align-items: center; +} + +:focus { + outline: 2px solid var(--accent-coral); +} + +body { + + display: flex; + flex-direction: column; + font-family: var(--default-font); + background-color: var(--background-light); + font-size: var(--default-font-size); + margin: 0; + padding: 0; + min-height: 100dvh; +} + +body::after { + content: ''; + display: block; + + /* Set same as footer's height */ +} + +.header-content { + margin: 0 15vw; +} + +.skip-link { + position: absolute; + top: -40px; + left: 0; + background: var(--teal-90); + color: var(--background-light); + outline: 1px solid var(--accent-coral); + padding: .5rem; + z-index: 100; + transition: top 0.3s; +} + +.skip-link:focus { + top: 0; + outline: var(--accent-coral); + outline-offset: 3px; +} + +header { + position: relative; + width: 100vw; + margin-left: calc(-50vw + 50%); + margin-right: calc(-50vw + 50%); + background-color: var(--teal-70); + color: var(--text-light); + padding: 1.5 rem 0; + box-shadow: var(--shadow-md); + row-gap: var(--height-sm); + background-image: url("/img/header-img.jpg"); + background-repeat: space; + background-size: cover; +} + +main h1, +h2, +h3 { + margin-bottom: 1rem; + color: var(--teal-70); +} + +.card-header h2 { + + color: var(--text-light); +} + +p { + color: var(--teal-70); +} + + +#decorative-img { + display: none; + width: 100vw; + max-height: 14rem; + object-fit: cover; + filter: hue-rotate(-37deg) saturate(.5); + box-shadow: var(--shadow-lg); +} + +a { + color: var(--text-light); + text-decoration: none; +} + + +nav ul { + display: flex; + flex-direction: row; + gap: 1em; + list-style-type: none; + padding: 0; +} + +#quizInstructions { + display: none; + +} + +main { + justify-content: space-evenly; + text-align: justify; + flex: 1; + color: var(--tea-70); +} + +section { + display: flex; + flex-direction: column; + justify-content: start; + width: 100dvw; + align-content: center; + margin-bottom: 2rem; + padding: 0 2rem; +} + +#facts { + gap: var(--height-sm); + margin-bottom: 0; + +} + +#introduction { + padding: 0 1rem; +} + +#quizSection { + padding: clamp(0 10rem, 75%, 20rem); +} + +#quiz-form { + display: flex; + flex-direction: column; + flex-wrap: wrap; + border: var(--teal-70) 3px solid; + border-radius: 1rem; + box-shadow: var(--shadow-lg); + margin: clamp(.5rem, 50%, 1rem) +} + + +.card-header { + background-color: var(--teal-70); + border: var(--teal-70) 2cqmin solid; + width: 100%; + text-align: center; + color: var(--text-light); + margin: 0; + border-top-left-radius: .75rem; + border-top-right-radius: .75rem; + padding: clamp(.5rem, 50%, 1.5rem); + +} + + + +fieldset { + display: flex; + flex-direction: column; + align-self: center; + width: auto; + border: none; + background-color: transparent; + padding: 1rem; + gap: 1rem; +} + +label input[type="radio"] { + height: 1rem; + width: 1rem; + border: 2px solid var(--accent-coral); + cursor: pointer; + color: var(--accent-coral); +} + +label { + display: flex; + justify-items: center; + position: relative; + cursor: pointer; + width: 50vw; + font-size: 1rem; + font-weight: 600; + column-gap: 1rem; + background-color: var(--teal-70); + padding: .5rem; + border-radius: .5rem; + color: var(--background-light); + text-wrap: wrap; +} + +label :focus { + display: flex; + justify-items: center; + position: relative; + cursor: pointer; + font-size: 1rem; + font-weight: 300; + column-gap: 1rem; + background-color: var(---70); + color: var(--background-light); + border-color: 2px solid (--accent-coral); + +} + +label:hover { + border-color: 2px solid (--accent-coral); +} + +#quizOptions { + display: flex; + flex-direction: column; + align-items: start; + text-align: left; + width: auto; + gap: 1rem; + margin: 1rem; +} + +button { + background-color: var(--teal-70); + color: var(--text-light); + box-shadow: var(--shadow-md); + border-radius: 1rem; + border: var(--teal-70) 1px solid; + font-size: var(--default-font); + height: var(--height-sm); + font-weight: 600; + margin-bottom: 2rem; + width: 100%; + padding: 0 2rem; +} + +botton:hover { + background: var(--accent-coral); + color: #022b30; + +} + +.informative-image { + width: 100dvw; +} + +.accessibility-item { + display: flex; + flex-direction: column; +} + +footer { + position: static; + bottom: 0; + width: 100vw; + height: auto; + padding: 0 2rem; + background-color: var(--teal-70); + bottom: 0; + color: var(--text-light); + padding: 0 +} + +.footer-content { + text-wrap: wrap; + padding: 0 2rem; +} + + + +@media (min-width: 52rem) { + + H2, + h3 { + transform: scale(125%); + } + + main { + text-align: left; + } + + #decorative-img { + display: block; + } + + .card-header { + padding: 0 3rem; + } + + #quizSection { + padding: 0 20rem; + } + + #quizInstructions { + display: block; + text-align: center; + } + + + .informative-image { + width: 75dvw; + margin-bottom: var(--height-sm); + } + +} \ No newline at end of file diff --git a/img/Levels.png b/img/Levels.png new file mode 100644 index 0000000..3b6371e Binary files /dev/null and b/img/Levels.png differ diff --git a/img/header-img.jpg b/img/header-img.jpg new file mode 100644 index 0000000..c6c326f Binary files /dev/null and b/img/header-img.jpg differ diff --git a/img/keyboard.jpg b/img/keyboard.jpg new file mode 100644 index 0000000..7e48297 Binary files /dev/null and b/img/keyboard.jpg differ diff --git a/index.html b/index.html index a9a33db..cfc3979 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,91 @@ - - - - - Title - - - -

This is the starting point.

- - - + + + + + + Web Accessibility Quiz for beginners + + + + + + + + + + + + +
+ Pictue of keyboard with accessibility keys +
+
+
+

Welcome to the Quiz

+

This quiz is designed to test your knowlege of web accessibility principles,

+
+ + +
+ +

Accessibility Quiz

+

+ Use the Arrow keys to navigate through options, press Space to select an answer, and press Enter to submit. +

+ +
+ +
+
+
+

+
+
+ +
+
+ + +
+
+ +
+
+
+ +
+ +
+ +
+
+ +

© 2025 Accessibility Quiz for beginners by Jonny, Sofia and Varia.

+
+
+ + + + + \ No newline at end of file diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..e72f372 --- /dev/null +++ b/js/script.js @@ -0,0 +1,112 @@ +"use strict"; +const quiz = [ + { + ask: "When should you avoid using descriptive alt text for images?", + choose: ["For decorative images", "For informational images ", "For functional images"], + answer: "For decorative images" + }, + { + ask: "What are the different levels of the Web content accessibility guidelines (WCAG)?", + choose: ["A, B, C ", "G, VG, MVG ", "A, AA, AAA"], answer: "A, AA, AAA" + }, + { + ask: "Which description of flowers is easiest to understand?", + choose: ["Flowers symbolize emotions and culture.", "Flowers are nature's drip—bold and meaningful.", "Flowers are colorful plants that show feelings."], + answer: "Flowers symbolize emotions and culture." + } +]; +const quizSection = document.getElementById("quizSection"); +const quizCard = document.getElementById("quizCard"); +const quizQuestion = document.getElementById("quizQuestion"); +const quizOptions = document.getElementById("quizOptions"); +const quizAnswer = document.getElementById("quizAnswer"); +const score = document.getElementById("score"); +const restartBtn = document.getElementById("restartBtn"); +const submitAnswer = document.getElementById("submitAnswer"); +const quizFeedback = document.getElementById("quizFeedback"); +let index = 0, scr = 0; +let selectedOption = null; +const quizInstructions = document.getElementById("quizInstructions"); +quizInstructions === null || quizInstructions === void 0 ? void 0 : quizInstructions.focus(); +function loadQuestion() { + if (index >= quiz.length) + return endQ(); + const getQ = quiz[index]; + if (quizQuestion) + quizQuestion.textContent = getQ.ask; + if (quizOptions) + quizOptions.innerHTML = ""; + getQ.choose.forEach((element, i) => { + const btn = document.createElement("input"); + btn.type = "radio"; + btn.name = "option"; + btn.id = `option-${i}`; + btn.value = `${i + 1}. ${element}`; + btn.tabIndex = 0; + btn.onclick = () => { + selectedOption = element; + }; + const label = document.createElement("label"); + label.htmlFor = btn.id; + label.appendChild(btn); + label.append(` ${element}`); + submitAnswer.onclick = (event) => { + event.preventDefault(); + if (selectedOption !== null) { + checkA(selectedOption); + } + else { + quizSection.insertAdjacentHTML("beforeend", `
+

No option is selecten, please select an option and click submit!

+
`); + } + }; + quizOptions === null || quizOptions === void 0 ? void 0 : quizOptions.appendChild(label); + }); +} +function checkA(opt) { + const quizFeedback = document.getElementById("quizFeedback"); + if (quizFeedback) { + quizFeedback.remove(); + } + if (opt === quiz[index].answer) { + scr++; + quizSection.insertAdjacentHTML("beforeend", `
+

Correct answer!

+ +
`); + } + else if (opt !== quiz[index].answer) { + quizSection.insertAdjacentHTML("beforeend", `
+

Oh no wrong answer, try again or continue to the next question!

+ +
`); + } + else if (selectedOption !== null) { + quizSection.insertAdjacentHTML("beforeend", `
+

No option is selecten, please select an option and click submit!

+
`); + } + const continueBtn = document.getElementById("continueBtn"); + if (continueBtn) { + continueBtn.addEventListener("click", (event) => { + event.preventDefault(); + const quizFeedback = document.getElementById("quizFeedback"); + if (quizFeedback) { + quizFeedback.remove(); + } + index++; + loadQuestion(); + }); + } +} +function endQ() { + quizQuestion === null || quizQuestion === void 0 ? void 0 : quizQuestion.style.setProperty('display', 'none'); + quizOptions === null || quizOptions === void 0 ? void 0 : quizOptions.style.setProperty('display', 'none'); + quizAnswer === null || quizAnswer === void 0 ? void 0 : quizAnswer.style.setProperty('display', 'block'); + if (score) + score.textContent = scr.toString(); + restartBtn === null || restartBtn === void 0 ? void 0 : restartBtn.style.setProperty('display', 'block'); + submitAnswer.style.setProperty('display', 'none'); +} +loadQuestion(); diff --git a/script.ts b/script.ts new file mode 100644 index 0000000..137d524 --- /dev/null +++ b/script.ts @@ -0,0 +1,207 @@ +interface quizData { + ask: string; + choose: string[]; + answer: string; +} + +//Quiz data +const quiz: quizData[] = [ + { + ask: "When should you avoid using descriptive alt text for images?", + choose: ["For decorative images", "For informational images ", "For functional images"], + answer: "For decorative images" + }, + { + ask: "What are the different levels of the Web content accessibility guidelines (WCAG)?", + choose: ["A, B, C ", "G, VG, MVG ", "A, AA, AAA"], answer: "A, AA, AAA" + }, + { + ask: "Which description of flowers is easiest to understand?", + choose: ["Flowers symbolize emotions and culture.", "Flowers are nature's drip—bold and meaningful.", "Flowers are colorful plants that show feelings."], + answer: "Flowers symbolize emotions and culture." + } +] + +//DOM Selectors +const quizSection = document.getElementById("quizSection") as HTMLSelectElement +const quizCard = document.getElementById("quizCard") as HTMLFieldSetElement +const quizQuestion = document.getElementById("quizQuestion") as HTMLHeadElement +const quizOptions = document.getElementById("quizOptions") as HTMLInputElement +const quizAnswer = document.getElementById("quizAnswer") as HTMLDivElement +const score = document.getElementById("score") as HTMLSpanElement +const restartBtn = document.getElementById("restartBtn") as HTMLButtonElement +const submitAnswer = document.getElementById("submitAnswer") as HTMLButtonElement +const quizFeedback = document.getElementById("quizFeedback") as HTMLDivElement + +let index = 0, scr = 0; +let selectedOption: string | null = null; + +//instructions for screen readers at the start of the quiz +const quizInstructions = document.getElementById("quizInstructions"); +quizInstructions?.focus(); // Focus on instructions first + +//Function to load the question +function loadQuestion(): void { + if (index >= quiz.length) return endQ(); // End if no more questions + + const getQ = quiz[index]; + + if (quizQuestion) quizQuestion.textContent = getQ.ask; + if (quizOptions) quizOptions.innerHTML = ""; // Clear previous options + + getQ.choose.forEach((element, i) => { + const btn = document.createElement("input"); + btn.type = "radio"; + btn.name = "option"; + btn.id = `option-${i}`; // Unique ID for accessibility + btn.value = `${i + 1}. ${element}`; + btn.tabIndex = 0; + btn.setAttribute("aria-labelledby", `labeel-${i}`); //V Uses aria-labelledby for better screen reader support + btn.setAttribute("role", "radio"); //V + + // V for thee fiirst radio button selected by deefault + if (i === 0) { + btn.checked = true; + selectedOption = element; + + } + + // Allow arrow key navigation + btn.addEventListener("keydown", (event) => { + const radioButtons = document.querySelectorAll('input[name="option"]'); + const currentIndex = Array.from(radioButtons).indexOf(btn); + + if (event.key === "ArrowDown" || event.key === "ArrowRight") { + event.preventDefault(); + const nextIndex = (currentIndex + 1) % radioButtons.length; + radioButtons[nextIndex].focus(); + radioButtons[nextIndex].checked = true; + selectedOption = radioButtons[nextIndex].value; + } else if (event.key === "ArrowUp" || event.key === "ArrowLeft") { + event.preventDefault(); + const prevIndex = (currentIndex - 1 + radioButtons.length) % radioButtons.length; + radioButtons[prevIndex].focus(); + radioButtons[prevIndex].checked = true; + selectedOption = radioButtons[prevIndex].value; + } + }); + + btn.onclick = () => { + selectedOption = element; + }; + + const label = document.createElement("label"); + label.htmlFor = btn.id; + + label.appendChild(btn); + label.append(` ${element}`) + + submitAnswer.onclick = (event) => { + event.preventDefault(); //Stops form submission from refreshing the page + + if (selectedOption !== null) { + checkA(selectedOption); + } else { + quizSection.insertAdjacentHTML( + "beforeend", + `
+

No option is selecten, please select an option and click submit!

+
`) + } + }; + + // Append elements + quizOptions?.appendChild(label); + }); + + trapFocus(); + +} + +function checkA(opt: string): void { + //Remove quiz feedback + const quizFeedback = document.getElementById("quizFeedback") as HTMLDivElement | null; + if (quizFeedback) { + quizFeedback.remove(); + } + + if (opt === quiz[index].answer) { + scr++; + // index++; + // loadQuestion(); + quizSection.insertAdjacentHTML( + "beforeend", + `
+

Correct answer!

+ +
`); + } else if (opt !== quiz[index].answer) { + quizSection.insertAdjacentHTML( + "beforeend", + `
+

Oh no wrong answer, try again or continue to the next question!

+ +
`); + } else if (selectedOption !== null) { + quizSection.insertAdjacentHTML( + "beforeend", + `
+

No option is selecten, please select an option and click submit!

+
`) + } + + const continueBtn = document.getElementById("continueBtn") as HTMLButtonElement | null; + if (continueBtn) { + continueBtn.addEventListener("click", (event) => { + event.preventDefault();//Stops form submission from refreshing the page + + //Remove quiz feedback + const quizFeedback = document.getElementById("quizFeedback") as HTMLDivElement | null; + if (quizFeedback) { + quizFeedback.remove(); + } + + index++; + loadQuestion() + }) + } +} + +function endQ(): void { + quizQuestion?.style.setProperty('display', 'none'); + quizOptions?.style.setProperty('display', 'none'); + quizAnswer?.style.setProperty('display', 'block'); + if (score) score.textContent = scr.toString(); + restartBtn?.style.setProperty('display', 'block'); + submitAnswer.style.setProperty('display', 'none'); +} + +loadQuestion(); + +// V trrap focus +function trapFocus() { + const focusableElements = quizCard.querySelectorAll( + 'input, button' + ); + const firstElement = focusableElements[0]; + const lastElement = focusableElements[focusableElements.length - 1]; + + quizCard.addEventListener("keydown", (event) => { + if (event.key === "Tab") { + if (event.shiftKey) { + // Shift + Tab moves focus backward + if (document.activeElement === firstElement) { + event.preventDefault(); + lastElement.focus(); + } + } else { + // Tab moves focus forward + if (document.activeElement === lastElement) { + event.preventDefault(); + firstElement.focus(); + } + } + } + }); +} + diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..3cff097 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,105 @@ +{ + "compilerOptions": { + /* Visit https://aka.ms/tsconfig to read more about this file */ + /* Projects */ + // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ + // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ + // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ + // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ + // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ + // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ + /* Language and Environment */ + "target": "es2017", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ + // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ + // "jsx": "preserve", /* Specify what JSX code is generated. */ + // "libReplacement": true, /* Enable lib replacement. */ + // "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */ + // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ + // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ + // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ + // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ + // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ + // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ + // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ + // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ + /* Modules */ + "module": "commonjs", /* Specify what module code is generated. */ + "rootDir": "./", /* Specify the root folder within your source files. */ + // "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */ + // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ + // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ + // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ + // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ + // "types": [], /* Specify type package names to be included without being referenced in a source file. */ + // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ + // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ + // "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */ + // "rewriteRelativeImportExtensions": true, /* Rewrite '.ts', '.tsx', '.mts', and '.cts' file extensions in relative import paths to their JavaScript equivalent in output files. */ + // "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */ + // "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */ + // "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */ + // "noUncheckedSideEffectImports": true, /* Check side effect imports. */ + // "resolveJsonModule": true, /* Enable importing .json files. */ + // "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */ + // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ + /* JavaScript Support */ + // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ + // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ + // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ + /* Emit */ + // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ + // "declarationMap": true, /* Create sourcemaps for d.ts files. */ + // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ + // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ + // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ + // "noEmit": true, /* Disable emitting files from a compilation. */ + // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ + "outDir": "./js/", /* Specify an output folder for all emitted files. */ + "removeComments": true, /* Disable emitting comments. */ + // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ + // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ + // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ + // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ + // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ + // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ + // "newLine": "crlf", /* Set the newline character for emitting files. */ + // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ + // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ + "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ + // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ + // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ + /* Interop Constraints */ + // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ + // "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */ + // "isolatedDeclarations": true, /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */ + // "erasableSyntaxOnly": true, /* Do not allow runtime constructs that are not part of ECMAScript. */ + // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ + "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ + // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ + "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ + /* Type Checking */ + "strict": true, /* Enable all strict type-checking options. */ + // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ + // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ + // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ + // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ + // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ + // "strictBuiltinIteratorReturn": true, /* Built-in iterators are instantiated with a 'TReturn' type of 'undefined' instead of 'any'. */ + // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ + // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ + // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ + // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ + // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ + // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ + // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ + // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ + // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ + // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ + // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ + // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ + // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ + /* Completeness */ + // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ + "skipLibCheck": true /* Skip type checking all .d.ts files. */ + } +} \ No newline at end of file