From c1e04945e96ad19b1ac07432adfb9b0fd262291a Mon Sep 17 00:00:00 2001
From: Sem Bauke <semboot699@gmail.com>
Date: Tue, 21 May 2024 17:37:35 +0200
Subject: [PATCH] feat: convert projects to Playwright (#54689)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
---
 .github/workflows/e2e-web.yml                 |   6 +-
 .../client-only-routes/show-project-links.tsx |   1 -
 .../src/components/settings/certification.tsx |   2 -
 .../solution-display-widget/index.tsx         |  18 +-
 .../e2e/default/learn/challenges/projects.ts  | 262 -------
 .../show-cert-from-superblock.ts              |  78 ---
 e2e/fixtures/js-ads-projects.json             | 646 ++++++++++++++++++
 e2e/fixtures/tribute-page-css.json            |   5 +
 e2e/fixtures/tribute-page-html.json           |   5 +
 e2e/hotkeys.spec.ts                           |  20 +-
 e2e/projects.spec.ts                          | 306 +++++++++
 e2e/shortcuts-modal.spec.ts                   |  11 +-
 e2e/utils/editor.ts                           |  23 +-
 e2e/utils/request.ts                          |  18 +-
 e2e/utils/user-agent.ts                       |   1 +
 15 files changed, 1015 insertions(+), 387 deletions(-)
 delete mode 100644 cypress/e2e/default/learn/challenges/projects.ts
 create mode 100644 e2e/fixtures/js-ads-projects.json
 create mode 100644 e2e/fixtures/tribute-page-css.json
 create mode 100644 e2e/fixtures/tribute-page-html.json
 create mode 100644 e2e/projects.spec.ts
 create mode 100644 e2e/utils/user-agent.ts

diff --git a/.github/workflows/e2e-web.yml b/.github/workflows/e2e-web.yml
index adeb21bc4b0..bb805d48636 100644
--- a/.github/workflows/e2e-web.yml
+++ b/.github/workflows/e2e-web.yml
@@ -77,12 +77,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        browsers: [chrome, firefox, electron]
+        browsers: [chrome, firefox]
         node-version: [20.x]
-        include:
-          - browsers: electron
-            spec: cypress/e2e/default/learn/challenges/projects.ts
-
     services:
       mongodb:
         image: mongo:4.4
diff --git a/client/src/client-only-routes/show-project-links.tsx b/client/src/client-only-routes/show-project-links.tsx
index f57df8d5126..325e472133e 100644
--- a/client/src/client-only-routes/show-project-links.tsx
+++ b/client/src/client-only-routes/show-project-links.tsx
@@ -92,7 +92,6 @@ const ShowProjectLinks = (props: ShowProjectLinksProps): JSX.Element => {
     return (
       <SolutionDisplayWidget
         completedChallenge={completedProject}
-        dataCy={`${projectTitle} solution`}
         projectTitle={projectTitle}
         displayContext='certification'
         showUserCode={showUserCode}
diff --git a/client/src/components/settings/certification.tsx b/client/src/components/settings/certification.tsx
index c158f00c430..48e5e90475b 100644
--- a/client/src/components/settings/certification.tsx
+++ b/client/src/components/settings/certification.tsx
@@ -315,7 +315,6 @@ function CertificationSettings(props: CertificationSettingsProps) {
     return (
       <SolutionDisplayWidget
         completedChallenge={completedProject}
-        dataCy={projectTitle}
         projectTitle={projectTitle}
         showExamResults={showExamResults}
         showUserCode={showUserCode}
@@ -400,7 +399,6 @@ function CertificationSettings(props: CertificationSettingsProps) {
               block={true}
               variant='primary'
               href={certLocation}
-              data-cy={`btn-for-${certSlug}`}
               // This floating promise is acceptable
               // eslint-disable-next-line @typescript-eslint/no-misused-promises
               onClick={clickHandler}
diff --git a/client/src/components/solution-display-widget/index.tsx b/client/src/components/solution-display-widget/index.tsx
index 8dab385d16b..de3721def1b 100644
--- a/client/src/components/solution-display-widget/index.tsx
+++ b/client/src/components/solution-display-widget/index.tsx
@@ -10,7 +10,6 @@ import './solution-display-widget.css';
 import '@freecodecamp/ui/dist/base.css';
 interface Props {
   completedChallenge: CompletedChallenge;
-  dataCy?: string;
   projectTitle: string;
   showUserCode: () => void;
   showProjectPreview?: () => void;
@@ -20,7 +19,6 @@ interface Props {
 
 export function SolutionDisplayWidget({
   completedChallenge,
-  dataCy,
   projectTitle,
   showUserCode,
   showProjectPreview,
@@ -36,7 +34,7 @@ export function SolutionDisplayWidget({
   // two dropdowns for the same project on the page.
   const randomIdSuffix = Math.floor(Math.random() * 1_000_000);
   const ShowFilesSolutionForCertification = (
-    <Button block={true} data-cy={dataCy} onClick={showUserCode}>
+    <Button block={true} onClick={showUserCode}>
       {viewText}{' '}
       <span className='sr-only'>
         {t('settings.labels.solution-for', { projectTitle })}
@@ -100,12 +98,7 @@ export function SolutionDisplayWidget({
     <>{t('certification.project.no-solution')}</>
   );
   const ShowUserCode = (
-    <Button
-      block={true}
-      variant='primary'
-      data-cy={dataCy}
-      onClick={showUserCode}
-    >
+    <Button block={true} variant='primary' onClick={showUserCode}>
       {viewText}{' '}
       <span className='sr-only'>
         {t('settings.labels.solution-for', { projectTitle })}
@@ -190,12 +183,7 @@ export function SolutionDisplayWidget({
     </Button>
   );
   const ShowExamResults = (
-    <Button
-      block={true}
-      variant='primary'
-      data-cy={dataCy}
-      onClick={showExamResults}
-    >
+    <Button block={true} variant='primary' onClick={showExamResults}>
       {viewText}{' '}
       <span className='sr-only'>
         {t('settings.labels.results-for', { projectTitle })}
diff --git a/cypress/e2e/default/learn/challenges/projects.ts b/cypress/e2e/default/learn/challenges/projects.ts
deleted file mode 100644
index 08733d24367..00000000000
--- a/cypress/e2e/default/learn/challenges/projects.ts
+++ /dev/null
@@ -1,262 +0,0 @@
-import { SuperBlocks } from '../../../../../shared/config/superblocks';
-
-interface Meta {
-  challengeOrder: { id: string; title: string }[];
-}
-
-interface File {
-  contents: unknown;
-  fileKey: string;
-}
-
-type Solution = File[];
-
-interface Challenge {
-  title: string;
-  block: string;
-  superBlock: string;
-  dashedName: string;
-  solutions: Solution[];
-  isPrivate?: boolean;
-}
-
-interface Curriculum {
-  [key: string]: {
-    blocks: {
-      [key: string]: {
-        meta: Meta;
-        challenges: Challenge[];
-      };
-    };
-  };
-}
-
-const selectors = {
-  editor: '.react-monaco-editor-container'
-};
-
-const pythonProjects = {
-  superBlock: SuperBlocks.MachineLearningPy,
-  block: 'machine-learning-with-python-projects',
-  challenges: [
-    {
-      slug: 'book-recommendation-engine-using-knn',
-      nextChallengeText: 'Linear Regression Health Costs Calculator'
-    },
-    {
-      slug: 'cat-and-dog-image-classifier',
-      nextChallengeText: 'Book Recommendation Engine using KNN'
-    },
-    {
-      slug: 'linear-regression-health-costs-calculator',
-      nextChallengeText: 'Neural Network SMS Text Classifier'
-    },
-    {
-      slug: 'neural-network-sms-text-classifier',
-      nextChallengeText: 'Find the Symmetric Difference'
-    },
-    {
-      slug: 'rock-paper-scissors',
-      nextChallengeText: 'Cat and Dog Image Classifier'
-    }
-  ]
-};
-
-describe('project submission', () => {
-  beforeEach(() => {
-    cy.task('seed');
-    cy.login();
-  });
-  // NOTE: this will fail once challenge tests are added.
-  it('Should be possible to submit Python projects', () => {
-    const { superBlock, block, challenges } = pythonProjects;
-    challenges.forEach(({ slug }) => {
-      const url = `/learn/${superBlock}/${block}/${slug}`;
-      cy.visit(url);
-      cy.get('#dynamic-front-end-form')
-        .get('#solution')
-        .type('https://replit.com/@camperbot/python-project#main.py');
-
-      cy.contains("I've completed this challenge").click();
-      cy.contains('go to next challenge');
-      // clicking on 'Go to next challenge' seems to have caused flakiness, so
-      // it's commented out until we figure out why.
-      // cy.contains('Go to next challenge').click();
-
-      // The next two commands are to confirm that go to next challenge has
-      // moved us to the expected challenge before we loop again.
-      // cy.get('.title-text').should('include.text', nextChallengeText);
-      // cy.url().should('not.have.string', url);
-    });
-  });
-
-  // Access to the clipboard reliably works in Electron browser.
-  // In other browsers, there are popups asking for permission
-  // thus we should only run these tests in Electron
-  // Ref: https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__clipboard
-  it(
-    'JavaScript projects can be submitted and then viewed in /settings and on the certifications',
-    { browser: 'electron' },
-    () => {
-      cy.fixture('../../shared/config/curriculum.json').then(
-        (curriculum: Curriculum) => {
-          const targetBlock =
-            'javascript-algorithms-and-data-structures-projects';
-          const javaScriptSuperBlock = Object.values(curriculum).filter(
-            ({ blocks }) => blocks[targetBlock]
-          )[0];
-          const { challenges, meta } = javaScriptSuperBlock.blocks[targetBlock];
-
-          const projectTitles = meta.challengeOrder.map(({ title }) => title);
-          const projectsInOrder = projectTitles.map(projectTitle => {
-            return challenges.find(({ title }) => title === projectTitle);
-          }) as Challenge[];
-
-          const expectedPaths = projectsInOrder
-            .slice(1)
-            .map(({ block, superBlock, dashedName }) => {
-              return `/learn/${superBlock}/${block}/${dashedName}`;
-            });
-          expectedPaths.push(
-            `/learn/javascript-algorithms-and-data-structures/`
-          );
-
-          projectsInOrder.forEach(
-            ({ block, superBlock, dashedName, solutions }, i) => {
-              const url = `/learn/${superBlock}/${block}/${dashedName}`;
-              cy.visit(url);
-
-              solutions.forEach(files => {
-                files.forEach(({ contents }) => {
-                  cy.get(selectors.editor, { timeout: 16000 })
-                    .click()
-                    .focused()
-                    .type('{ctrl+a}{del}');
-                  // NOTE: clipboard operations are flaky in watch mode, because
-                  // the document can lose focus
-                  cy.window()
-                    .its('navigator.clipboard')
-                    .invoke('writeText', contents);
-                  cy.document().invoke('execCommand', 'paste');
-                  cy.contains('Run the Tests').click();
-                  cy.contains('Submit and go to next challenge', {
-                    timeout: 16000
-                  }).click();
-                  cy.url().should('include', expectedPaths[i]);
-                });
-              });
-            }
-          );
-
-          cy.visit('/settings');
-
-          projectTitles.forEach(title => {
-            cy.get(`[data-cy="${title}"]`).click();
-            // TODO: if we write a test to check that the solution is visible
-            // before reloading, we should include that here.
-            cy.contains('Solution for');
-            cy.get(`[data-cy="solution-viewer-close-btn"]`).click();
-          });
-
-          // Claim and view solutions on certification page
-
-          cy.setPrivacyTogglesToPublic();
-          cy.get(
-            '[data-cy="btn-for-javascript-algorithms-and-data-structures"]'
-          ).click();
-          cy.get(
-            '[data-cy="btn-for-javascript-algorithms-and-data-structures"]'
-          )
-            .should('contain.text', 'Show Certification')
-            .click();
-
-          projectTitles.forEach(title => {
-            cy.get(`[data-cy="${title} solution"]`).click();
-            // TODO: if we write a test to check that the solution is visible
-            // before reloading, we should include that here.
-            cy.contains('Solution for');
-            cy.contains('Close').click();
-          });
-        }
-      );
-    }
-  );
-
-  it(
-    'Ctrl + enter triggers the completion modal on multifile projects',
-    { browser: 'electron' },
-    () => {
-      cy.fixture('../../shared/config/curriculum.json').then(
-        (curriculum: Curriculum) => {
-          const targetBlock = 'build-a-personal-portfolio-webpage-project';
-          const portfolioBlock = Object.values(curriculum).filter(
-            ({ blocks }) => blocks[targetBlock]
-          )[0];
-          const { challenges, meta } = portfolioBlock.blocks[targetBlock];
-
-          const projectTitle = meta.challengeOrder[0].title;
-          const { block, superBlock, dashedName, solutions } = challenges.find(
-            ({ title }) => title === projectTitle
-          ) as Challenge;
-
-          const url = `/learn/${superBlock}/${block}/${dashedName}`;
-          cy.visit(url);
-
-          solutions[0].forEach(({ contents, fileKey }) => {
-            const tabSelector = `[data-cy=editor-tab-${fileKey}]`;
-            if (fileKey !== 'indexhtml') {
-              cy.get(tabSelector).click();
-            }
-            const editorContainerSelector = `[data-cy=editor-container-${fileKey}]`;
-            cy.get(editorContainerSelector, { timeout: 16000 })
-              .find(selectors.editor, { timeout: 16000 })
-              .click()
-              .focused()
-              .type('{ctrl+a}{del}');
-            // NOTE: clipboard operations are flaky in watch mode, because
-            // the document can lose focus
-            cy.window()
-              .its('navigator.clipboard')
-              .invoke('writeText', contents);
-            cy.document().invoke('execCommand', 'paste');
-          });
-
-          cy.get('[data-cy=editor-container-indexhtml', { timeout: 16000 })
-            .find(selectors.editor, { timeout: 16000 })
-            .click()
-            .focused()
-            .type('{ctrl+enter}');
-          // check the modal exists
-          cy.contains('Submit and go to next challenge');
-          cy.contains('Download my solution');
-        }
-      );
-    }
-  );
-
-  it('should not be possible to submit twice in quick succession', () => {
-    const { superBlock, block, challenges } = pythonProjects;
-    const { slug } = challenges[0];
-
-    cy.intercept('http://localhost:3000/project-completed', req => {
-      req.continue(_res => {
-        // delay the response by 0.5 seconds
-        const wait = new Promise<void>(resolve => setTimeout(resolve, 500));
-        return wait;
-      });
-    });
-
-    const url = `/learn/${superBlock}/${block}/${slug}`;
-    cy.visit(url);
-    cy.get('#dynamic-front-end-form')
-      .get('#solution')
-      .type('https://replit.com/@camperbot/python-project#main.py');
-
-    cy.contains("I've completed this challenge").click();
-    cy.get('div[role="dialog"]').should('exist');
-    cy.get('[data-cy=submit-challenge]').as('submitChallenge');
-    cy.get('@submitChallenge').click();
-    cy.get('@submitChallenge').should('have.attr', 'aria-disabled');
-    cy.get('div[role="dialog"]').should('not.exist');
-  });
-});
diff --git a/cypress/e2e/default/learn/responsive-web-design/show-cert-from-superblock.ts b/cypress/e2e/default/learn/responsive-web-design/show-cert-from-superblock.ts
index 2a220e02df2..d8e031ac93e 100644
--- a/cypress/e2e/default/learn/responsive-web-design/show-cert-from-superblock.ts
+++ b/cypress/e2e/default/learn/responsive-web-design/show-cert-from-superblock.ts
@@ -1,32 +1,3 @@
-import { SuperBlocks } from '../../../../../shared/config/superblocks';
-
-const projects = {
-  superBlock: SuperBlocks.FrontEndDevLibs,
-  block: 'front-end-development-libraries-projects',
-  challenges: [
-    {
-      slug: 'build-a-random-quote-machine',
-      solution: 'https://codepen.io/moT01/pen/ZpJpKp'
-    },
-    {
-      slug: 'build-a-markdown-previewer',
-      solution: 'https://codepen.io/moT01/pen/LrrjGz?editors=1010'
-    },
-    {
-      slug: 'build-a-drum-machine',
-      solution: 'https://codepen.io/moT01/full/qKyKYL/'
-    },
-    {
-      slug: 'build-a-javascript-calculator',
-      solution: 'https://codepen.io/moT01/full/JBvzNL/'
-    },
-    {
-      slug: 'build-a-25--5-clock',
-      solution: 'https://codepen.io/moT01/pen/vgOaoJ'
-    }
-  ]
-};
-
 describe('Front End Development Libraries Superblock', () => {
   before(() => {
     cy.task('seed');
@@ -42,53 +13,4 @@ describe('Front End Development Libraries Superblock', () => {
       );
     });
   });
-
-  describe('After submitting all 5 projects', () => {
-    before(() => {
-      cy.task('seed');
-      cy.login();
-      cy.visit('/settings');
-      cy.setPrivacyTogglesToPublic();
-    });
-
-    it('should be possible to view certifications from the settings page', () => {
-      submitFrontEndSolutions();
-      cy.visit(`/learn/${projects.superBlock}/`);
-      cy.contains('Go to settings to claim your certification').click();
-      cy.location().should(loc => {
-        expect(loc.pathname).to.include(`/settings`);
-      });
-      cy.get('[data-cy=btn-for-front-end-development-libraries]').click();
-      cy.contains('Show Certification').click();
-      cy.location().should(loc => {
-        expect(loc.pathname).to.include(
-          `/certification/developmentuser/${projects.superBlock}`
-        );
-      });
-    });
-
-    function submitFrontEndSolutions() {
-      const { superBlock, block, challenges } = projects;
-      challenges.forEach(({ slug, solution }) => {
-        const url = `/learn/${superBlock}/${block}/${slug}`;
-        cy.visit(url);
-        cy.get('#dynamic-front-end-form')
-          .get('#solution')
-          .type(solution, { force: true, delay: 0 });
-        cy.contains("I've completed this challenge")
-          .should('not.be.disabled')
-          .click();
-        cy.intercept(
-          `${String(Cypress.env('API_LOCATION'))}/project-completed`
-        ).as('challengeCompleted');
-        cy.contains('Submit and go to next challenge').click();
-        cy.wait('@challengeCompleted')
-          .its('response.statusCode')
-          .should('eq', 200);
-        cy.location().should(loc => {
-          expect(loc.pathname).to.not.include(url);
-        });
-      });
-    }
-  });
 });
diff --git a/e2e/fixtures/js-ads-projects.json b/e2e/fixtures/js-ads-projects.json
new file mode 100644
index 00000000000..0996b75c039
--- /dev/null
+++ b/e2e/fixtures/js-ads-projects.json
@@ -0,0 +1,646 @@
+{
+  "javascript-algorithms-and-data-structures-projects": {
+    "meta": {
+      "name": "JavaScript Algorithms and Data Structures Projects",
+      "isUpcomingChange": false,
+      "dashedName": "javascript-algorithms-and-data-structures-projects",
+      "helpCategory": "JavaScript",
+      "order": 9,
+      "time": "50 hours",
+      "template": "",
+      "required": [],
+      "superBlock": "javascript-algorithms-and-data-structures",
+      "challengeOrder": [
+        {
+          "id": "aaa48de84e1ecc7c742e1124",
+          "title": "Palindrome Checker"
+        },
+        {
+          "id": "a7f4d8f2483413a6ce226cac",
+          "title": "Roman Numeral Converter"
+        },
+        {
+          "id": "56533eb9ac21ba0edf2244e2",
+          "title": "Caesars Cipher"
+        },
+        {
+          "id": "aff0395860f5d3034dc0bfc9",
+          "title": "Telephone Number Validator"
+        },
+        {
+          "id": "aa2e6f85cab2ab736c9a9b24",
+          "title": "Cash Register"
+        }
+      ]
+    },
+    "challenges": [
+      {
+        "id": "56533eb9ac21ba0edf2244e2",
+        "title": "Caesars Cipher",
+        "challengeType": 5,
+        "forumTopicId": 16003,
+        "dashedName": "caesars-cipher",
+        "challengeFiles": [
+          {
+            "head": "",
+            "tail": "",
+            "id": "",
+            "editableRegionBoundaries": [],
+            "history": ["script.js"],
+            "name": "script",
+            "ext": "js",
+            "path": "script.js",
+            "fileKey": "scriptjs",
+            "contents": "function rot13(str) {\n  return str;\n}\n\nrot13(\"SERR PBQR PNZC\");",
+            "error": null,
+            "seed": "function rot13(str) {\n  return str;\n}\n\nrot13(\"SERR PBQR PNZC\");"
+          }
+        ],
+        "solutions": [
+          [
+            {
+              "head": "",
+              "tail": "",
+              "id": "",
+              "history": ["script.js"],
+              "name": "script",
+              "ext": "js",
+              "path": "script.js",
+              "fileKey": "scriptjs",
+              "contents": "var lookup = {\n  'A': 'N','B': 'O','C': 'P','D': 'Q',\n  'E': 'R','F': 'S','G': 'T','H': 'U',\n  'I': 'V','J': 'W','K': 'X','L': 'Y',\n  'M': 'Z','N': 'A','O': 'B','P': 'C',\n  'Q': 'D','R': 'E','S': 'F','T': 'G',\n  'U': 'H','V': 'I','W': 'J','X': 'K',\n  'Y': 'L','Z': 'M'\n};\n\nfunction rot13(encodedStr) {\n  var codeArr = encodedStr.split(\"\");  // String to Array\n  var decodedArr = []; // Your Result goes here\n  // Only change code below this line\n\n  decodedArr = codeArr.map(function(letter) {\n    if(lookup.hasOwnProperty(letter)) {\n      letter = lookup[letter];\n    }\n    return letter;\n  });\n\n  // Only change code above this line\n  return decodedArr.join(\"\"); // Array to String\n}",
+              "error": null,
+              "seed": "var lookup = {\n  'A': 'N','B': 'O','C': 'P','D': 'Q',\n  'E': 'R','F': 'S','G': 'T','H': 'U',\n  'I': 'V','J': 'W','K': 'X','L': 'Y',\n  'M': 'Z','N': 'A','O': 'B','P': 'C',\n  'Q': 'D','R': 'E','S': 'F','T': 'G',\n  'U': 'H','V': 'I','W': 'J','X': 'K',\n  'Y': 'L','Z': 'M'\n};\n\nfunction rot13(encodedStr) {\n  var codeArr = encodedStr.split(\"\");  // String to Array\n  var decodedArr = []; // Your Result goes here\n  // Only change code below this line\n\n  decodedArr = codeArr.map(function(letter) {\n    if(lookup.hasOwnProperty(letter)) {\n      letter = lookup[letter];\n    }\n    return letter;\n  });\n\n  // Only change code above this line\n  return decodedArr.join(\"\"); // Array to String\n}"
+            }
+          ]
+        ],
+        "assignments": [],
+        "tests": [
+          {
+            "text": "<p><code>rot13(\"SERR PBQR PNZC\")</code> should decode to the string <code>FREE CODE CAMP</code></p>",
+            "testString": "assert(rot13('SERR PBQR PNZC') === 'FREE CODE CAMP');"
+          },
+          {
+            "text": "<p><code>rot13(\"SERR CVMMN!\")</code> should decode to the string <code>FREE PIZZA!</code></p>",
+            "testString": "assert(rot13('SERR CVMMN!') === 'FREE PIZZA!');"
+          },
+          {
+            "text": "<p><code>rot13(\"SERR YBIR?\")</code> should decode to the string <code>FREE LOVE?</code></p>",
+            "testString": "assert(rot13('SERR YBIR?') === 'FREE LOVE?');"
+          },
+          {
+            "text": "<p><code>rot13(\"GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.\")</code> should decode to the string <code>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.</code></p>",
+            "testString": "assert(\n  rot13('GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.') ===\n    'THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.'\n);"
+          }
+        ],
+        "description": "<section id=\"description\">\n<p>One of the simplest and most widely known <dfn>ciphers</dfn> is a <dfn>Caesar cipher</dfn>, also known as a <dfn>shift cipher</dfn>. In a shift cipher the meanings of the letters are shifted by some set amount.</p>\n<p>A common modern use is the <a href=\"https://www.freecodecamp.org/news/how-to-code-the-caesar-cipher-an-introduction-to-basic-encryption-3bf77b4e19f7/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">ROT13</a> cipher, where the values of the letters are shifted by 13 places. Thus <code>A ↔ N</code>, <code>B ↔ O</code> and so on.</p>\n<p>Write a function which takes a <a href=\"https://www.freecodecamp.org/news/how-to-code-the-caesar-cipher-an-introduction-to-basic-encryption-3bf77b4e19f7/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">ROT13</a> encoded string as input and returns a decoded string.</p>\n<p>All letters will be uppercase. Do not transform any non-alphabetic character (i.e. spaces, punctuation), but do pass them on.</p>\n</section>",
+        "translationPending": false,
+        "block": "javascript-algorithms-and-data-structures-projects",
+        "hasEditableBoundaries": false,
+        "order": 9,
+        "superOrder": 19,
+        "certification": "javascript-algorithms-and-data-structures",
+        "superBlock": "javascript-algorithms-and-data-structures",
+        "challengeOrder": 2,
+        "required": [],
+        "template": "",
+        "time": "50 hours",
+        "helpCategory": "JavaScript",
+        "usesMultifileEditor": false,
+        "disableLoopProtectTests": false,
+        "disableLoopProtectPreview": false
+      },
+      {
+        "id": "aa2e6f85cab2ab736c9a9b24",
+        "title": "Cash Register",
+        "challengeType": 5,
+        "forumTopicId": 16012,
+        "dashedName": "cash-register",
+        "challengeFiles": [
+          {
+            "head": "",
+            "tail": "",
+            "id": "",
+            "editableRegionBoundaries": [],
+            "history": ["script.js"],
+            "name": "script",
+            "ext": "js",
+            "path": "script.js",
+            "fileKey": "scriptjs",
+            "contents": "function checkCashRegister(price, cash, cid) {\n  let change;\n  return change;\n}\n\ncheckCashRegister(19.5, 20, [[\"PENNY\", 1.01], [\"NICKEL\", 2.05], [\"DIME\", 3.1], [\"QUARTER\", 4.25], [\"ONE\", 90], [\"FIVE\", 55], [\"TEN\", 20], [\"TWENTY\", 60], [\"ONE HUNDRED\", 100]]);",
+            "error": null,
+            "seed": "function checkCashRegister(price, cash, cid) {\n  let change;\n  return change;\n}\n\ncheckCashRegister(19.5, 20, [[\"PENNY\", 1.01], [\"NICKEL\", 2.05], [\"DIME\", 3.1], [\"QUARTER\", 4.25], [\"ONE\", 90], [\"FIVE\", 55], [\"TEN\", 20], [\"TWENTY\", 60], [\"ONE HUNDRED\", 100]]);"
+          }
+        ],
+        "solutions": [
+          [
+            {
+              "head": "",
+              "tail": "",
+              "id": "",
+              "history": ["script.js"],
+              "name": "script",
+              "ext": "js",
+              "path": "script.js",
+              "fileKey": "scriptjs",
+              "contents": "const denom = [\n  { name: \"ONE HUNDRED\", val: 100 },\n  { name: \"TWENTY\", val: 20 },\n  { name: \"TEN\", val: 10 },\n  { name: \"FIVE\", val: 5 },\n  { name: \"ONE\", val: 1 },\n  { name: \"QUARTER\", val: 0.25 },\n  { name: \"DIME\", val: 0.1 },\n  { name: \"NICKEL\", val: 0.05 },\n  { name: \"PENNY\", val: 0.01 },\n];\n\nfunction checkCashRegister(price, cash, cid) {\n  const output = { status: null, change: [] };\n  let change = cash - price;\n  const register = cid.reduce(\n    function (acc, curr) {\n      acc.total += curr[1];\n      acc[curr[0]] = curr[1];\n      return acc;\n    },\n    { total: 0 }\n  );\n  if (register.total === change) {\n    output.status = \"CLOSED\";\n    output.change = cid;\n    return output;\n  }\n  if (register.total < change) {\n    output.status = \"INSUFFICIENT_FUNDS\";\n    return output;\n  }\n  const change_arr = denom.reduce(function (acc, curr) {\n    let value = 0;\n    while (register[curr.name] > 0 && change >= curr.val) {\n      change -= curr.val;\n      register[curr.name] -= curr.val;\n      value += curr.val;\n      change = Math.round(change * 100) / 100;\n    }\n    if (value > 0) {\n      acc.push([curr.name, value]);\n    }\n    return acc;\n  }, []);\n  if (change_arr.length < 1 || change > 0) {\n    output.status = \"INSUFFICIENT_FUNDS\";\n    return output;\n  }\n  output.status = \"OPEN\";\n  output.change = change_arr;\n  return output;\n}",
+              "error": null,
+              "seed": "const denom = [\n  { name: \"ONE HUNDRED\", val: 100 },\n  { name: \"TWENTY\", val: 20 },\n  { name: \"TEN\", val: 10 },\n  { name: \"FIVE\", val: 5 },\n  { name: \"ONE\", val: 1 },\n  { name: \"QUARTER\", val: 0.25 },\n  { name: \"DIME\", val: 0.1 },\n  { name: \"NICKEL\", val: 0.05 },\n  { name: \"PENNY\", val: 0.01 },\n];\n\nfunction checkCashRegister(price, cash, cid) {\n  const output = { status: null, change: [] };\n  let change = cash - price;\n  const register = cid.reduce(\n    function (acc, curr) {\n      acc.total += curr[1];\n      acc[curr[0]] = curr[1];\n      return acc;\n    },\n    { total: 0 }\n  );\n  if (register.total === change) {\n    output.status = \"CLOSED\";\n    output.change = cid;\n    return output;\n  }\n  if (register.total < change) {\n    output.status = \"INSUFFICIENT_FUNDS\";\n    return output;\n  }\n  const change_arr = denom.reduce(function (acc, curr) {\n    let value = 0;\n    while (register[curr.name] > 0 && change >= curr.val) {\n      change -= curr.val;\n      register[curr.name] -= curr.val;\n      value += curr.val;\n      change = Math.round(change * 100) / 100;\n    }\n    if (value > 0) {\n      acc.push([curr.name, value]);\n    }\n    return acc;\n  }, []);\n  if (change_arr.length < 1 || change > 0) {\n    output.status = \"INSUFFICIENT_FUNDS\";\n    return output;\n  }\n  output.status = \"OPEN\";\n  output.change = change_arr;\n  return output;\n}"
+            }
+          ]
+        ],
+        "assignments": [],
+        "tests": [
+          {
+            "text": "<p><code>checkCashRegister(19.5, 20, [[\"PENNY\", 1.01], [\"NICKEL\", 2.05], [\"DIME\", 3.1], [\"QUARTER\", 4.25], [\"ONE\", 90], [\"FIVE\", 55], [\"TEN\", 20], [\"TWENTY\", 60], [\"ONE HUNDRED\", 100]])</code> should return an object.</p>",
+            "testString": "assert.deepEqual(\n  Object.prototype.toString.call(\n    checkCashRegister(19.5, 20, [\n      ['PENNY', 1.01],\n      ['NICKEL', 2.05],\n      ['DIME', 3.1],\n      ['QUARTER', 4.25],\n      ['ONE', 90],\n      ['FIVE', 55],\n      ['TEN', 20],\n      ['TWENTY', 60],\n      ['ONE HUNDRED', 100]\n    ])\n  ),\n  '[object Object]'\n);"
+          },
+          {
+            "text": "<p><code>checkCashRegister(19.5, 20, [[\"PENNY\", 1.01], [\"NICKEL\", 2.05], [\"DIME\", 3.1], [\"QUARTER\", 4.25], [\"ONE\", 90], [\"FIVE\", 55], [\"TEN\", 20], [\"TWENTY\", 60], [\"ONE HUNDRED\", 100]])</code> should return <code>{status: \"OPEN\", change: [[\"QUARTER\", 0.5]]}</code>.</p>",
+            "testString": "assert.deepEqual(\n  checkCashRegister(19.5, 20, [\n    ['PENNY', 1.01],\n    ['NICKEL', 2.05],\n    ['DIME', 3.1],\n    ['QUARTER', 4.25],\n    ['ONE', 90],\n    ['FIVE', 55],\n    ['TEN', 20],\n    ['TWENTY', 60],\n    ['ONE HUNDRED', 100]\n  ]),\n  { status: 'OPEN', change: [['QUARTER', 0.5]] }\n);"
+          },
+          {
+            "text": "<p><code>checkCashRegister(3.26, 100, [[\"PENNY\", 1.01], [\"NICKEL\", 2.05], [\"DIME\", 3.1], [\"QUARTER\", 4.25], [\"ONE\", 90], [\"FIVE\", 55], [\"TEN\", 20], [\"TWENTY\", 60], [\"ONE HUNDRED\", 100]])</code> should return <code>{status: \"OPEN\", change: [[\"TWENTY\", 60], [\"TEN\", 20], [\"FIVE\", 15], [\"ONE\", 1], [\"QUARTER\", 0.5], [\"DIME\", 0.2], [\"PENNY\", 0.04]]}</code>.</p>",
+            "testString": "assert.deepEqual(\n  checkCashRegister(3.26, 100, [\n    ['PENNY', 1.01],\n    ['NICKEL', 2.05],\n    ['DIME', 3.1],\n    ['QUARTER', 4.25],\n    ['ONE', 90],\n    ['FIVE', 55],\n    ['TEN', 20],\n    ['TWENTY', 60],\n    ['ONE HUNDRED', 100]\n  ]),\n  {\n    status: 'OPEN',\n    change: [\n      ['TWENTY', 60],\n      ['TEN', 20],\n      ['FIVE', 15],\n      ['ONE', 1],\n      ['QUARTER', 0.5],\n      ['DIME', 0.2],\n      ['PENNY', 0.04]\n    ]\n  }\n);"
+          },
+          {
+            "text": "<p><code>checkCashRegister(19.5, 20, [[\"PENNY\", 0.01], [\"NICKEL\", 0], [\"DIME\", 0], [\"QUARTER\", 0], [\"ONE\", 0], [\"FIVE\", 0], [\"TEN\", 0], [\"TWENTY\", 0], [\"ONE HUNDRED\", 0]])</code> should return <code>{status: \"INSUFFICIENT_FUNDS\", change: []}</code>.</p>",
+            "testString": "assert.deepEqual(\n  checkCashRegister(19.5, 20, [\n    ['PENNY', 0.01],\n    ['NICKEL', 0],\n    ['DIME', 0],\n    ['QUARTER', 0],\n    ['ONE', 0],\n    ['FIVE', 0],\n    ['TEN', 0],\n    ['TWENTY', 0],\n    ['ONE HUNDRED', 0]\n  ]),\n  { status: 'INSUFFICIENT_FUNDS', change: [] }\n);"
+          },
+          {
+            "text": "<p><code>checkCashRegister(19.5, 20, [[\"PENNY\", 0.01], [\"NICKEL\", 0], [\"DIME\", 0], [\"QUARTER\", 0], [\"ONE\", 1], [\"FIVE\", 0], [\"TEN\", 0], [\"TWENTY\", 0], [\"ONE HUNDRED\", 0]])</code> should return <code>{status: \"INSUFFICIENT_FUNDS\", change: []}</code>.</p>",
+            "testString": "assert.deepEqual(\n  checkCashRegister(19.5, 20, [\n    ['PENNY', 0.01],\n    ['NICKEL', 0],\n    ['DIME', 0],\n    ['QUARTER', 0],\n    ['ONE', 1],\n    ['FIVE', 0],\n    ['TEN', 0],\n    ['TWENTY', 0],\n    ['ONE HUNDRED', 0]\n  ]),\n  { status: 'INSUFFICIENT_FUNDS', change: [] }\n);"
+          },
+          {
+            "text": "<p><code>checkCashRegister(19.5, 20, [[\"PENNY\", 0.5], [\"NICKEL\", 0], [\"DIME\", 0], [\"QUARTER\", 0], [\"ONE\", 0], [\"FIVE\", 0], [\"TEN\", 0], [\"TWENTY\", 0], [\"ONE HUNDRED\", 0]])</code> should return <code>{status: \"CLOSED\", change: [[\"PENNY\", 0.5], [\"NICKEL\", 0], [\"DIME\", 0], [\"QUARTER\", 0], [\"ONE\", 0], [\"FIVE\", 0], [\"TEN\", 0], [\"TWENTY\", 0], [\"ONE HUNDRED\", 0]]}</code>.</p>",
+            "testString": "assert.deepEqual(\n  checkCashRegister(19.5, 20, [\n    ['PENNY', 0.5],\n    ['NICKEL', 0],\n    ['DIME', 0],\n    ['QUARTER', 0],\n    ['ONE', 0],\n    ['FIVE', 0],\n    ['TEN', 0],\n    ['TWENTY', 0],\n    ['ONE HUNDRED', 0]\n  ]),\n  {\n    status: 'CLOSED',\n    change: [\n      ['PENNY', 0.5],\n      ['NICKEL', 0],\n      ['DIME', 0],\n      ['QUARTER', 0],\n      ['ONE', 0],\n      ['FIVE', 0],\n      ['TEN', 0],\n      ['TWENTY', 0],\n      ['ONE HUNDRED', 0]\n    ]\n  }\n);"
+          }
+        ],
+        "description": "<section id=\"description\">\n<p>Design a cash register drawer function <code>checkCashRegister()</code> that accepts purchase price as the first argument (<code>price</code>), payment as the second argument (<code>cash</code>), and cash-in-drawer (<code>cid</code>) as the third argument.</p>\n<p><code>cid</code> is a 2D array listing available currency.</p>\n<p>The <code>checkCashRegister()</code> function should always return an object with a <code>status</code> key and a <code>change</code> key.</p>\n<p>Return <code>{status: \"INSUFFICIENT_FUNDS\", change: []}</code> if cash-in-drawer is less than the change due, or if you cannot return the exact change.</p>\n<p>Return <code>{status: \"CLOSED\", change: [...]}</code> with cash-in-drawer as the value for the key <code>change</code> if it is equal to the change due.</p>\n<p>Otherwise, return <code>{status: \"OPEN\", change: [...]}</code>, with the change due in coins and bills, sorted in highest to lowest order, as the value of the <code>change</code> key.</p>\n<table><tbody><tr><th>Currency Unit</th><th>Amount</th></tr><tr><td>Penny</td><td>$0.01 (PENNY)</td></tr><tr><td>Nickel</td><td>$0.05 (NICKEL)</td></tr><tr><td>Dime</td><td>$0.1 (DIME)</td></tr><tr><td>Quarter</td><td>$0.25 (QUARTER)</td></tr><tr><td>Dollar</td><td>$1 (ONE)</td></tr><tr><td>Five Dollars</td><td>$5 (FIVE)</td></tr><tr><td>Ten Dollars</td><td>$10 (TEN)</td></tr><tr><td>Twenty Dollars</td><td>$20 (TWENTY)</td></tr><tr><td>One-hundred Dollars</td><td>$100 (ONE HUNDRED)</td></tr></tbody></table>\n<p>See below for an example of a cash-in-drawer array:</p>\n<pre><code class=\"language-js\">[\n  [\"PENNY\", 1.01],\n  [\"NICKEL\", 2.05],\n  [\"DIME\", 3.1],\n  [\"QUARTER\", 4.25],\n  [\"ONE\", 90],\n  [\"FIVE\", 55],\n  [\"TEN\", 20],\n  [\"TWENTY\", 60],\n  [\"ONE HUNDRED\", 100]\n]\n</code></pre>\n</section>",
+        "translationPending": false,
+        "block": "javascript-algorithms-and-data-structures-projects",
+        "hasEditableBoundaries": false,
+        "order": 9,
+        "superOrder": 19,
+        "certification": "javascript-algorithms-and-data-structures",
+        "superBlock": "javascript-algorithms-and-data-structures",
+        "challengeOrder": 4,
+        "required": [],
+        "template": "",
+        "time": "50 hours",
+        "helpCategory": "JavaScript",
+        "usesMultifileEditor": false,
+        "disableLoopProtectTests": false,
+        "disableLoopProtectPreview": false
+      },
+      {
+        "id": "aaa48de84e1ecc7c742e1124",
+        "title": "Palindrome Checker",
+        "challengeType": 5,
+        "forumTopicId": 16004,
+        "dashedName": "palindrome-checker",
+        "challengeFiles": [
+          {
+            "head": "",
+            "tail": "",
+            "id": "",
+            "editableRegionBoundaries": [],
+            "history": ["script.js"],
+            "name": "script",
+            "ext": "js",
+            "path": "script.js",
+            "fileKey": "scriptjs",
+            "contents": "function palindrome(str) {\n  return true;\n}\n\npalindrome(\"eye\");",
+            "error": null,
+            "seed": "function palindrome(str) {\n  return true;\n}\n\npalindrome(\"eye\");"
+          }
+        ],
+        "solutions": [
+          [
+            {
+              "head": "",
+              "tail": "",
+              "id": "",
+              "history": ["script.js"],
+              "name": "script",
+              "ext": "js",
+              "path": "script.js",
+              "fileKey": "scriptjs",
+              "contents": "function palindrome(str) {\n  var string = str.toLowerCase().split(/[^A-Za-z0-9]/gi).join('');\n  var aux = string.split('');\n  if (aux.join('') === aux.reverse().join('')){\n    return true;\n  }\n\n  return false;\n}",
+              "error": null,
+              "seed": "function palindrome(str) {\n  var string = str.toLowerCase().split(/[^A-Za-z0-9]/gi).join('');\n  var aux = string.split('');\n  if (aux.join('') === aux.reverse().join('')){\n    return true;\n  }\n\n  return false;\n}"
+            }
+          ]
+        ],
+        "assignments": [],
+        "tests": [
+          {
+            "text": "<p><code>palindrome(\"eye\")</code> should return a boolean.</p>",
+            "testString": "assert(typeof palindrome('eye') === 'boolean');"
+          },
+          {
+            "text": "<p><code>palindrome(\"eye\")</code> should return <code>true</code>.</p>",
+            "testString": "assert(palindrome('eye') === true);"
+          },
+          {
+            "text": "<p><code>palindrome(\"_eye\")</code> should return <code>true</code>.</p>",
+            "testString": "assert(palindrome('_eye') === true);"
+          },
+          {
+            "text": "<p><code>palindrome(\"race car\")</code> should return <code>true</code>.</p>",
+            "testString": "assert(palindrome('race car') === true);"
+          },
+          {
+            "text": "<p><code>palindrome(\"not a palindrome\")</code> should return <code>false</code>.</p>",
+            "testString": "assert(palindrome('not a palindrome') === false);"
+          },
+          {
+            "text": "<p><code>palindrome(\"A man, a plan, a canal. Panama\")</code> should return <code>true</code>.</p>",
+            "testString": "assert(palindrome('A man, a plan, a canal. Panama') === true);"
+          },
+          {
+            "text": "<p><code>palindrome(\"never odd or even\")</code> should return <code>true</code>.</p>",
+            "testString": "assert(palindrome('never odd or even') === true);"
+          },
+          {
+            "text": "<p><code>palindrome(\"nope\")</code> should return <code>false</code>.</p>",
+            "testString": "assert(palindrome('nope') === false);"
+          },
+          {
+            "text": "<p><code>palindrome(\"almostomla\")</code> should return <code>false</code>.</p>",
+            "testString": "assert(palindrome('almostomla') === false);"
+          },
+          {
+            "text": "<p><code>palindrome(\"My age is 0, 0 si ega ym.\")</code> should return <code>true</code>.</p>",
+            "testString": "assert(palindrome('My age is 0, 0 si ega ym.') === true);"
+          },
+          {
+            "text": "<p><code>palindrome(\"1 eye for of 1 eye.\")</code> should return <code>false</code>.</p>",
+            "testString": "assert(palindrome('1 eye for of 1 eye.') === false);"
+          },
+          {
+            "text": "<p><code>palindrome(\"0_0 (: /-\\ :) 0-0\")</code> should return <code>true</code>.</p>",
+            "testString": "assert(palindrome('0_0 (: /- :) 0-0') === true);"
+          },
+          {
+            "text": "<p><code>palindrome(\"five|\\_/|four\")</code> should return <code>false</code>.</p>",
+            "testString": "assert(palindrome('five|_/|four') === false);"
+          }
+        ],
+        "description": "<section id=\"description\">\n<p>Return <code>true</code> if the given string is a palindrome. Otherwise, return <code>false</code>.</p>\n<p>A <dfn>palindrome</dfn> is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</p>\n<p><strong>Note:</strong> You'll need to remove <strong>all non-alphanumeric characters</strong> (punctuation, spaces and symbols) and turn everything into the same case (lower or upper case) in order to check for palindromes.</p>\n<p>We'll pass strings with varying formats, such as <code>racecar</code>, <code>RaceCar</code>, and <code>race CAR</code> among others.</p>\n<p>We'll also pass strings with special symbols, such as <code>2A3*3a2</code>, <code>2A3 3a2</code>, and <code>2_A3*3#A2</code>.</p>\n</section>",
+        "translationPending": false,
+        "block": "javascript-algorithms-and-data-structures-projects",
+        "hasEditableBoundaries": false,
+        "order": 9,
+        "superOrder": 19,
+        "certification": "javascript-algorithms-and-data-structures",
+        "superBlock": "javascript-algorithms-and-data-structures",
+        "challengeOrder": 0,
+        "required": [],
+        "template": "",
+        "time": "50 hours",
+        "helpCategory": "JavaScript",
+        "usesMultifileEditor": false,
+        "disableLoopProtectTests": false,
+        "disableLoopProtectPreview": false
+      },
+      {
+        "id": "a7f4d8f2483413a6ce226cac",
+        "title": "Roman Numeral Converter",
+        "challengeType": 5,
+        "forumTopicId": 16044,
+        "dashedName": "roman-numeral-converter",
+        "challengeFiles": [
+          {
+            "head": "",
+            "tail": "",
+            "id": "",
+            "editableRegionBoundaries": [],
+            "history": ["script.js"],
+            "name": "script",
+            "ext": "js",
+            "path": "script.js",
+            "fileKey": "scriptjs",
+            "contents": "function convertToRoman(num) {\n return num;\n}\n\nconvertToRoman(36);",
+            "error": null,
+            "seed": "function convertToRoman(num) {\n return num;\n}\n\nconvertToRoman(36);"
+          }
+        ],
+        "solutions": [
+          [
+            {
+              "head": "",
+              "tail": "",
+              "id": "",
+              "history": ["script.js"],
+              "name": "script",
+              "ext": "js",
+              "path": "script.js",
+              "fileKey": "scriptjs",
+              "contents": "function convertToRoman(num) {\n  var ref = [['M', 1000], ['CM', 900], ['D', 500], ['CD', 400], ['C', 100], ['XC', 90], ['L', 50], ['XL', 40], ['X', 10], ['IX', 9], ['V', 5], ['IV', 4], ['I', 1]];\n  var res = [];\n  ref.forEach(function(p) {\n    while (num >= p[1]) {\n      res.push(p[0]);\n      num -= p[1];\n    }\n  });\n  return res.join('');\n}",
+              "error": null,
+              "seed": "function convertToRoman(num) {\n  var ref = [['M', 1000], ['CM', 900], ['D', 500], ['CD', 400], ['C', 100], ['XC', 90], ['L', 50], ['XL', 40], ['X', 10], ['IX', 9], ['V', 5], ['IV', 4], ['I', 1]];\n  var res = [];\n  ref.forEach(function(p) {\n    while (num >= p[1]) {\n      res.push(p[0]);\n      num -= p[1];\n    }\n  });\n  return res.join('');\n}"
+            }
+          ]
+        ],
+        "assignments": [],
+        "tests": [
+          {
+            "text": "<p><code>convertToRoman(2)</code> should return the string <code>II</code>.</p>",
+            "testString": "assert.deepEqual(convertToRoman(2), 'II');"
+          },
+          {
+            "text": "<p><code>convertToRoman(3)</code> should return the string <code>III</code>.</p>",
+            "testString": "assert.deepEqual(convertToRoman(3), 'III');"
+          },
+          {
+            "text": "<p><code>convertToRoman(4)</code> should return the string <code>IV</code>.</p>",
+            "testString": "assert.deepEqual(convertToRoman(4), 'IV');"
+          },
+          {
+            "text": "<p><code>convertToRoman(5)</code> should return the string <code>V</code>.</p>",
+            "testString": "assert.deepEqual(convertToRoman(5), 'V');"
+          },
+          {
+            "text": "<p><code>convertToRoman(9)</code> should return the string <code>IX</code>.</p>",
+            "testString": "assert.deepEqual(convertToRoman(9), 'IX');"
+          },
+          {
+            "text": "<p><code>convertToRoman(12)</code> should return the string <code>XII</code>.</p>",
+            "testString": "assert.deepEqual(convertToRoman(12), 'XII');"
+          },
+          {
+            "text": "<p><code>convertToRoman(16)</code> should return the string <code>XVI</code>.</p>",
+            "testString": "assert.deepEqual(convertToRoman(16), 'XVI');"
+          },
+          {
+            "text": "<p><code>convertToRoman(29)</code> should return the string <code>XXIX</code>.</p>",
+            "testString": "assert.deepEqual(convertToRoman(29), 'XXIX');"
+          },
+          {
+            "text": "<p><code>convertToRoman(44)</code> should return the string <code>XLIV</code>.</p>",
+            "testString": "assert.deepEqual(convertToRoman(44), 'XLIV');"
+          },
+          {
+            "text": "<p><code>convertToRoman(45)</code> should return the string <code>XLV</code>.</p>",
+            "testString": "assert.deepEqual(convertToRoman(45), 'XLV');"
+          },
+          {
+            "text": "<p><code>convertToRoman(68)</code> should return the string <code>LXVIII</code></p>",
+            "testString": "assert.deepEqual(convertToRoman(68), 'LXVIII');"
+          },
+          {
+            "text": "<p><code>convertToRoman(83)</code> should return the string <code>LXXXIII</code></p>",
+            "testString": "assert.deepEqual(convertToRoman(83), 'LXXXIII');"
+          },
+          {
+            "text": "<p><code>convertToRoman(97)</code> should return the string <code>XCVII</code></p>",
+            "testString": "assert.deepEqual(convertToRoman(97), 'XCVII');"
+          },
+          {
+            "text": "<p><code>convertToRoman(99)</code> should return the string <code>XCIX</code></p>",
+            "testString": "assert.deepEqual(convertToRoman(99), 'XCIX');"
+          },
+          {
+            "text": "<p><code>convertToRoman(400)</code> should return the string <code>CD</code></p>",
+            "testString": "assert.deepEqual(convertToRoman(400), 'CD');"
+          },
+          {
+            "text": "<p><code>convertToRoman(500)</code> should return the string <code>D</code></p>",
+            "testString": "assert.deepEqual(convertToRoman(500), 'D');"
+          },
+          {
+            "text": "<p><code>convertToRoman(501)</code> should return the string <code>DI</code></p>",
+            "testString": "assert.deepEqual(convertToRoman(501), 'DI');"
+          },
+          {
+            "text": "<p><code>convertToRoman(649)</code> should return the string <code>DCXLIX</code></p>",
+            "testString": "assert.deepEqual(convertToRoman(649), 'DCXLIX');"
+          },
+          {
+            "text": "<p><code>convertToRoman(798)</code> should return the string <code>DCCXCVIII</code></p>",
+            "testString": "assert.deepEqual(convertToRoman(798), 'DCCXCVIII');"
+          },
+          {
+            "text": "<p><code>convertToRoman(891)</code> should return the string <code>DCCCXCI</code></p>",
+            "testString": "assert.deepEqual(convertToRoman(891), 'DCCCXCI');"
+          },
+          {
+            "text": "<p><code>convertToRoman(1000)</code> should return the string <code>M</code></p>",
+            "testString": "assert.deepEqual(convertToRoman(1000), 'M');"
+          },
+          {
+            "text": "<p><code>convertToRoman(1004)</code> should return the string <code>MIV</code></p>",
+            "testString": "assert.deepEqual(convertToRoman(1004), 'MIV');"
+          },
+          {
+            "text": "<p><code>convertToRoman(1006)</code> should return the string <code>MVI</code></p>",
+            "testString": "assert.deepEqual(convertToRoman(1006), 'MVI');"
+          },
+          {
+            "text": "<p><code>convertToRoman(1023)</code> should return the string <code>MXXIII</code></p>",
+            "testString": "assert.deepEqual(convertToRoman(1023), 'MXXIII');"
+          },
+          {
+            "text": "<p><code>convertToRoman(2014)</code> should return the string <code>MMXIV</code></p>",
+            "testString": "assert.deepEqual(convertToRoman(2014), 'MMXIV');"
+          },
+          {
+            "text": "<p><code>convertToRoman(3999)</code> should return the string <code>MMMCMXCIX</code></p>",
+            "testString": "assert.deepEqual(convertToRoman(3999), 'MMMCMXCIX');"
+          }
+        ],
+        "description": "<section id=\"description\">\n<p>Convert the given number into a roman numeral.</p>\n<table>\n<thead>\n<tr>\n<th>Roman numerals</th>\n<th>Arabic numerals</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>M</td>\n<td>1000</td>\n</tr>\n<tr>\n<td>CM</td>\n<td>900</td>\n</tr>\n<tr>\n<td>D</td>\n<td>500</td>\n</tr>\n<tr>\n<td>CD</td>\n<td>400</td>\n</tr>\n<tr>\n<td>C</td>\n<td>100</td>\n</tr>\n<tr>\n<td>XC</td>\n<td>90</td>\n</tr>\n<tr>\n<td>L</td>\n<td>50</td>\n</tr>\n<tr>\n<td>XL</td>\n<td>40</td>\n</tr>\n<tr>\n<td>X</td>\n<td>10</td>\n</tr>\n<tr>\n<td>IX</td>\n<td>9</td>\n</tr>\n<tr>\n<td>V</td>\n<td>5</td>\n</tr>\n<tr>\n<td>IV</td>\n<td>4</td>\n</tr>\n<tr>\n<td>I</td>\n<td>1</td>\n</tr>\n</tbody>\n</table>\n<p>All roman numerals answers should be provided in upper-case.</p>\n</section>",
+        "translationPending": false,
+        "block": "javascript-algorithms-and-data-structures-projects",
+        "hasEditableBoundaries": false,
+        "order": 9,
+        "superOrder": 19,
+        "certification": "javascript-algorithms-and-data-structures",
+        "superBlock": "javascript-algorithms-and-data-structures",
+        "challengeOrder": 1,
+        "required": [],
+        "template": "",
+        "time": "50 hours",
+        "helpCategory": "JavaScript",
+        "usesMultifileEditor": false,
+        "disableLoopProtectTests": false,
+        "disableLoopProtectPreview": false
+      },
+      {
+        "id": "aff0395860f5d3034dc0bfc9",
+        "title": "Telephone Number Validator",
+        "challengeType": 5,
+        "forumTopicId": 16090,
+        "dashedName": "telephone-number-validator",
+        "challengeFiles": [
+          {
+            "head": "",
+            "tail": "",
+            "id": "",
+            "editableRegionBoundaries": [],
+            "history": ["script.js"],
+            "name": "script",
+            "ext": "js",
+            "path": "script.js",
+            "fileKey": "scriptjs",
+            "contents": "function telephoneCheck(str) {\n  return true;\n}\n\ntelephoneCheck(\"555-555-5555\");",
+            "error": null,
+            "seed": "function telephoneCheck(str) {\n  return true;\n}\n\ntelephoneCheck(\"555-555-5555\");"
+          }
+        ],
+        "solutions": [
+          [
+            {
+              "head": "",
+              "tail": "",
+              "id": "",
+              "history": ["script.js"],
+              "name": "script",
+              "ext": "js",
+              "path": "script.js",
+              "fileKey": "scriptjs",
+              "contents": "var re = /^([+]?1[\\s]?)?((?:[(](?:[2-9]1[02-9]|[2-9][02-8][0-9])[)][\\s]?)|(?:(?:[2-9]1[02-9]|[2-9][02-8][0-9])[\\s.-]?)){1}([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2}[\\s.-]?){1}([0-9]{4}){1}$/;\n\nfunction telephoneCheck(str) {\n  return re.test(str);\n}\n\ntelephoneCheck(\"555-555-5555\");",
+              "error": null,
+              "seed": "var re = /^([+]?1[\\s]?)?((?:[(](?:[2-9]1[02-9]|[2-9][02-8][0-9])[)][\\s]?)|(?:(?:[2-9]1[02-9]|[2-9][02-8][0-9])[\\s.-]?)){1}([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2}[\\s.-]?){1}([0-9]{4}){1}$/;\n\nfunction telephoneCheck(str) {\n  return re.test(str);\n}\n\ntelephoneCheck(\"555-555-5555\");"
+            }
+          ]
+        ],
+        "assignments": [],
+        "tests": [
+          {
+            "text": "<p><code>telephoneCheck(\"555-555-5555\")</code> should return a boolean.</p>",
+            "testString": "assert(typeof telephoneCheck('555-555-5555') === 'boolean');"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"1 555-555-5555\")</code> should return <code>true</code>.</p>",
+            "testString": "assert(telephoneCheck('1 555-555-5555') === true);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"1 (555) 555-5555\")</code> should return <code>true</code>.</p>",
+            "testString": "assert(telephoneCheck('1 (555) 555-5555') === true);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"5555555555\")</code> should return <code>true</code>.</p>",
+            "testString": "assert(telephoneCheck('5555555555') === true);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"555-555-5555\")</code> should return <code>true</code>.</p>",
+            "testString": "assert(telephoneCheck('555-555-5555') === true);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"(555)555-5555\")</code> should return <code>true</code>.</p>",
+            "testString": "assert(telephoneCheck('(555)555-5555') === true);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"1(555)555-5555\")</code> should return <code>true</code>.</p>",
+            "testString": "assert(telephoneCheck('1(555)555-5555') === true);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"555-5555\")</code> should return <code>false</code>.</p>",
+            "testString": "assert(telephoneCheck('555-5555') === false);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"5555555\")</code> should return <code>false</code>.</p>",
+            "testString": "assert(telephoneCheck('5555555') === false);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"1 555)555-5555\")</code> should return <code>false</code>.</p>",
+            "testString": "assert(telephoneCheck('1 555)555-5555') === false);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"1 555 555 5555\")</code> should return <code>true</code>.</p>",
+            "testString": "assert(telephoneCheck('1 555 555 5555') === true);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"1 456 789 4444\")</code> should return <code>true</code>.</p>",
+            "testString": "assert(telephoneCheck('1 456 789 4444') === true);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"123**&#x26;!!asdf#\")</code> should return <code>false</code>.</p>",
+            "testString": "assert(telephoneCheck('123**&!!asdf#') === false);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"55555555\")</code> should return <code>false</code>.</p>",
+            "testString": "assert(telephoneCheck('55555555') === false);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"(6054756961)\")</code> should return <code>false</code>.</p>",
+            "testString": "assert(telephoneCheck('(6054756961)') === false);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"2 (757) 622-7382\")</code> should return <code>false</code>.</p>",
+            "testString": "assert(telephoneCheck('2 (757) 622-7382') === false);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"0 (757) 622-7382\")</code> should return <code>false</code>.</p>",
+            "testString": "assert(telephoneCheck('0 (757) 622-7382') === false);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"-1 (757) 622-7382\")</code> should return <code>false</code>.</p>",
+            "testString": "assert(telephoneCheck('-1 (757) 622-7382') === false);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"2 757 622-7382\")</code> should return <code>false</code>.</p>",
+            "testString": "assert(telephoneCheck('2 757 622-7382') === false);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"10 (757) 622-7382\")</code> should return <code>false</code>.</p>",
+            "testString": "assert(telephoneCheck('10 (757) 622-7382') === false);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"27576227382\")</code> should return <code>false</code>.</p>",
+            "testString": "assert(telephoneCheck('27576227382') === false);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"(275)76227382\")</code> should return <code>false</code>.</p>",
+            "testString": "assert(telephoneCheck('(275)76227382') === false);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"2(757)6227382\")</code> should return <code>false</code>.</p>",
+            "testString": "assert(telephoneCheck('2(757)6227382') === false);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"2(757)622-7382\")</code> should return <code>false</code>.</p>",
+            "testString": "assert(telephoneCheck('2(757)622-7382') === false);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"555)-555-5555\")</code> should return <code>false</code>.</p>",
+            "testString": "assert(telephoneCheck('555)-555-5555') === false);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"(555-555-5555\")</code> should return <code>false</code>.</p>",
+            "testString": "assert(telephoneCheck('(555-555-5555') === false);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"(555)5(55?)-5555\")</code> should return <code>false</code>.</p>",
+            "testString": "assert(telephoneCheck('(555)5(55?)-5555') === false);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"55 55-55-555-5\")</code> should return <code>false</code>.</p>",
+            "testString": "assert(telephoneCheck('55 55-55-555-5') === false);"
+          },
+          {
+            "text": "<p><code>telephoneCheck(\"11 555-555-5555\")</code> should return <code>false</code>.</p>",
+            "testString": "assert(telephoneCheck('11 555-555-5555') === false);"
+          }
+        ],
+        "description": "<section id=\"description\">\n<p>Return <code>true</code> if the passed string looks like a valid US phone number.</p>\n<p>The user may fill out the form field any way they choose as long as it has the format of a valid US number. The following are examples of valid formats for US numbers (refer to the tests below for other variants):</p>\n<blockquote>555-555-5555<br>(555)555-5555<br>(555) 555-5555<br>555 555 5555<br>5555555555<br>1 555 555 5555</blockquote>\n<p>For this challenge you will be presented with a string such as <code>800-692-7753</code> or <code>8oo-six427676;laskdjf</code>. Your job is to validate or reject the US phone number based on any combination of the formats provided above. The area code is required. If the country code is provided, you must confirm that the country code is <code>1</code>. Return <code>true</code> if the string is a valid US phone number; otherwise return <code>false</code>.</p>\n</section>",
+        "translationPending": false,
+        "block": "javascript-algorithms-and-data-structures-projects",
+        "hasEditableBoundaries": false,
+        "order": 9,
+        "superOrder": 19,
+        "certification": "javascript-algorithms-and-data-structures",
+        "superBlock": "javascript-algorithms-and-data-structures",
+        "challengeOrder": 3,
+        "required": [],
+        "template": "",
+        "time": "50 hours",
+        "helpCategory": "JavaScript",
+        "usesMultifileEditor": false,
+        "disableLoopProtectTests": false,
+        "disableLoopProtectPreview": false
+      }
+    ]
+  }
+}
diff --git a/e2e/fixtures/tribute-page-css.json b/e2e/fixtures/tribute-page-css.json
new file mode 100644
index 00000000000..0723574f5d8
--- /dev/null
+++ b/e2e/fixtures/tribute-page-css.json
@@ -0,0 +1,5 @@
+{
+  "tribute-page-css": {
+    "contents": "#image{max-width:100%;height:auto;display:block;margin:0 auto;}"
+  }
+}
diff --git a/e2e/fixtures/tribute-page-html.json b/e2e/fixtures/tribute-page-html.json
new file mode 100644
index 00000000000..8f645d4a546
--- /dev/null
+++ b/e2e/fixtures/tribute-page-html.json
@@ -0,0 +1,5 @@
+{
+  "tribute-page-html": {
+    "contents": "<head><link rel=\"stylesheet\" href=\"styles.css\"></head><body><main id=\"main\"><div id=\"title\">D</div><div id=\"img-div\"><img id=\"image\" src=\"\" alt=\"D\" ><div id=\"img-caption\">s</div></div><div id=\"tribute-info\">s</div><a id=\"tribute-link\" href=\"\" target=\"_blank\">L</a></main></body></html>"
+  }
+}
diff --git a/e2e/hotkeys.spec.ts b/e2e/hotkeys.spec.ts
index b17016eefd0..adf8a0c5ce0 100644
--- a/e2e/hotkeys.spec.ts
+++ b/e2e/hotkeys.spec.ts
@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/test';
 
 import translations from '../client/i18n/locales/english/translations.json';
-import { authedPut } from './utils/request';
+import { authedRequest } from './utils/request';
 import { getEditors } from './utils/editor';
 
 const course =
@@ -10,15 +10,25 @@ const course =
 test.use({ storageState: 'playwright/.auth/certified-user.json' });
 
 test.beforeAll(async ({ request }) => {
-  await authedPut(request, 'update-my-keyboard-shortcuts', {
-    keyboardShortcuts: false
+  await authedRequest({
+    request,
+    endpoint: 'update-my-keyboard-shortcuts',
+    method: 'put',
+    data: {
+      keyboardShortcuts: false
+    }
   });
 });
 
 test.afterEach(
   async ({ request }) =>
-    await authedPut(request, 'update-my-keyboard-shortcuts', {
-      keyboardShortcuts: false
+    await authedRequest({
+      request,
+      method: 'put',
+      endpoint: 'update-my-keyboard-shortcuts',
+      data: {
+        keyboardShortcuts: false
+      }
     })
 );
 
diff --git a/e2e/projects.spec.ts b/e2e/projects.spec.ts
new file mode 100644
index 00000000000..7b77b14d752
--- /dev/null
+++ b/e2e/projects.spec.ts
@@ -0,0 +1,306 @@
+import { execSync } from 'child_process';
+import { test, expect, Page } from '@playwright/test';
+import { SuperBlocks } from '../shared/config/superblocks';
+import tributePageHtml from './fixtures/tribute-page-html.json';
+import tributePageCss from './fixtures/tribute-page-css.json';
+import curriculum from './fixtures/js-ads-projects.json';
+import { authedRequest } from './utils/request';
+
+import { focusEditor, getEditors, clearEditor } from './utils/editor';
+import { isMacOS } from './utils/user-agent';
+
+interface Meta {
+  challengeOrder: { id: string; title: string }[];
+}
+
+interface File {
+  contents: unknown;
+  fileKey: string;
+}
+
+type Solution = File[];
+
+interface Challenge {
+  title: string;
+  block: string;
+  superBlock: string;
+  dashedName: string;
+  solutions: Solution[];
+  isPrivate?: boolean;
+}
+
+interface block {
+  [key: string]: {
+    meta: Meta;
+    challenges: Challenge[];
+  };
+}
+
+const pythonProjects = {
+  superBlock: SuperBlocks.MachineLearningPy,
+  block: 'machine-learning-with-python-projects',
+  challenges: [
+    {
+      slug: 'book-recommendation-engine-using-knn',
+      nextChallengeText: 'Linear Regression Health Costs Calculator'
+    },
+    {
+      slug: 'cat-and-dog-image-classifier',
+      nextChallengeText: 'Book Recommendation Engine using KNN'
+    },
+    {
+      slug: 'linear-regression-health-costs-calculator',
+      nextChallengeText: 'Neural Network SMS Text Classifier'
+    },
+    {
+      slug: 'neural-network-sms-text-classifier',
+      nextChallengeText: 'Find the Symmetric Difference'
+    },
+    {
+      slug: 'rock-paper-scissors',
+      nextChallengeText: 'Cat and Dog Image Classifier'
+    }
+  ]
+};
+
+const pasteContent = async (page: Page) => {
+  if (isMacOS) {
+    await page.keyboard.press('Meta+v');
+  } else {
+    await page.keyboard.press('Control+v');
+  }
+};
+
+test.use({ storageState: 'playwright/.auth/development-user.json' });
+
+test.beforeAll(() => {
+  execSync('node ./tools/scripts/seed/seed-demo-user');
+});
+
+test.afterAll(() => {
+  execSync('node ./tools/scripts/seed/seed-demo-user certified-user');
+});
+
+test.describe('Projects', () => {
+  test('Should be possible to submit Python projects', async ({ page }) => {
+    const { superBlock, block, challenges } = pythonProjects; // Ensure these are defined or imported
+
+    for (const { slug } of challenges) {
+      const url = `/learn/${superBlock}/${block}/${slug}`;
+      await page.goto(url);
+      await page
+        .getByLabel('Solution Link')
+        .fill('https://replit.com/@camperbot/python-project#main.py');
+
+      await page
+        .getByRole('button', { name: "I've completed this challenge" })
+        .click();
+      await expect(
+        page.getByRole('button', { name: 'Go to next challenge' })
+      ).toBeVisible();
+    }
+  });
+});
+
+test.describe('JavaScript projects can be submitted and then viewed in /settings and on the certifications', () => {
+  test.skip(
+    ({ browserName }) => browserName !== 'chromium',
+    'Only chromium allows us to use the clipboard API.'
+  );
+
+  test('projects are submitted and viewed correctly', async ({
+    page,
+    browserName,
+    isMobile,
+    request,
+    context
+  }) => {
+    test.setTimeout(40000);
+    await context.grantPermissions(['clipboard-read', 'clipboard-write']);
+
+    const block: block = curriculum;
+    const targetBlock = 'javascript-algorithms-and-data-structures-projects';
+    const javaScriptSuperBlock = block[targetBlock];
+
+    const { challenges, meta } = javaScriptSuperBlock || {
+      challenges: [],
+      meta: {}
+    };
+
+    const projectTitles =
+      meta.challengeOrder?.map(({ title }: { title: string }) => title) ?? [];
+
+    const projectsInOrder = projectTitles.map(title =>
+      challenges.find(challenge => challenge.title === title)
+    ) as Challenge[];
+
+    const projectIdsInOrder = [
+      'aaa48de84e1ecc7c742e1124',
+      'a7f4d8f2483413a6ce226cac',
+      '56533eb9ac21ba0edf2244e2',
+      'aff0395860f5d3034dc0bfc9',
+      'aa2e6f85cab2ab736c9a9b24'
+    ];
+
+    const contents = projectsInOrder[0].solutions[0][0].contents as string;
+
+    await page.goto(
+      '/learn/javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker'
+    );
+
+    await focusEditor({ page, browserName, isMobile });
+    await clearEditor({ page, browserName });
+
+    await page.evaluate(
+      async contents => await navigator.clipboard.writeText(contents),
+      contents
+    );
+
+    await pasteContent(page);
+
+    await page.getByRole('button', { name: 'Run' }).click();
+
+    await page
+      .getByRole('button', { name: 'Go to next challenge', exact: false })
+      .click();
+
+    // Submit the rest with the API.
+    const submissionPromises = [];
+
+    for (let i = 1; i < projectsInOrder.length; i++) {
+      submissionPromises.push(
+        authedRequest({
+          request,
+          method: 'post',
+          endpoint: '/modern-challenge-completed',
+          data: {
+            id: projectIdsInOrder[i],
+            challengeType: 5,
+            files: projectsInOrder[i].solutions[0].map(({ contents }) => ({
+              contents: contents,
+              key: 'scriptjs',
+              ext: 'js',
+              name: 'script',
+              history: ['script.js']
+            }))
+          }
+        })
+      );
+    }
+
+    await Promise.all(submissionPromises);
+
+    await page.goto('/settings');
+
+    for (const projectTitle of projectTitles) {
+      await page
+        .getByRole('button', { name: `View Solution for ${projectTitle}` })
+        .click();
+      const solutionModal = page.getByRole('dialog', {
+        name: `Solution for ${projectTitle}`
+      });
+      await expect(solutionModal).toBeVisible();
+      await solutionModal
+        .getByRole('button', { name: 'Close' })
+        .first()
+        .click();
+      // Wait for the modal to disappear before continue
+      await expect(solutionModal).toBeHidden();
+    }
+
+    await page
+      .getByRole('button', {
+        name: "I agree to freeCodeCamp's Academic Honesty Policy."
+      })
+      .click();
+
+    await page
+      .getByRole('link', {
+        name: 'Claim Certification Legacy JavaScript Algorithms and Data Structures'
+      })
+      .click();
+
+    const showCertLink = page.getByRole('link', {
+      name: 'Show Certification Legacy JavaScript Algorithms and Data Structures'
+    });
+    await expect(showCertLink).toBeVisible();
+    await expect(showCertLink).toHaveAttribute(
+      'href',
+      '/certification/developmentuser/javascript-algorithms-and-data-structures'
+    );
+  });
+});
+
+test.describe('Completion modal should be shown after submitting a project', () => {
+  test.skip(
+    ({ browserName }) => browserName !== 'chromium',
+    'Only chromium allows us to use the clipboard API.'
+  );
+
+  test('Ctrl + enter triggers the completion modal on multifile projects', async ({
+    page,
+    context
+  }) => {
+    await context.grantPermissions(['clipboard-read', 'clipboard-write']);
+
+    const tributeContent = [
+      tributePageHtml['tribute-page-html'].contents,
+      tributePageCss['tribute-page-css'].contents
+    ];
+
+    await page.goto(
+      '/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page'
+    );
+    const editors = getEditors(page);
+    await page.getByRole('button', { name: 'styles.css' }).click();
+
+    for (let i = 0; i < 2; i++) {
+      await page.evaluate(
+        async contents => await navigator.clipboard.writeText(contents),
+        tributeContent[i]
+      );
+
+      await editors.nth(i).focus();
+      await pasteContent(page);
+    }
+
+    await page.keyboard.press('Control+Enter');
+    await page
+      .getByRole('button', { name: 'Go to next challenge', exact: false })
+      .click();
+  });
+});
+
+test.describe('Should not be able to submit in quick succesion', () => {
+  test('should not be possible to submit twice in quick succession', async ({
+    page
+  }) => {
+    const { superBlock, block, challenges } = pythonProjects;
+    const { slug } = challenges[0];
+
+    const url = `/learn/${superBlock}/${block}/${slug}`;
+    await page.goto(url);
+
+    await page
+      .getByLabel('Solution Link')
+      .fill('https://replit.com/@camperbot/python-project#main.py');
+
+    const completedButton = page.getByRole('button', {
+      name: "I've completed this challenge"
+    });
+
+    await completedButton.click();
+
+    await expect(page.getByRole('dialog')).toBeVisible();
+
+    const submitChallenge = page.getByRole('button', {
+      name: 'Go to next challenge',
+      exact: false
+    });
+    await submitChallenge.click();
+
+    await expect(completedButton).toBeDisabled();
+
+    await expect(page.getByRole('dialog')).not.toBeVisible();
+  });
+});
diff --git a/e2e/shortcuts-modal.spec.ts b/e2e/shortcuts-modal.spec.ts
index 7df65f74c90..8e27ad025ab 100644
--- a/e2e/shortcuts-modal.spec.ts
+++ b/e2e/shortcuts-modal.spec.ts
@@ -1,7 +1,7 @@
 import { APIRequestContext, Page, expect, test } from '@playwright/test';
 
 import translations from '../client/i18n/locales/english/translations.json';
-import { authedPut } from './utils/request';
+import { authedRequest } from './utils/request';
 import { getEditors } from './utils/editor';
 
 const course =
@@ -10,8 +10,13 @@ const course =
 test.use({ storageState: 'playwright/.auth/certified-user.json' });
 
 const enableKeyboardShortcuts = async (request: APIRequestContext) => {
-  const res = await authedPut(request, '/update-my-keyboard-shortcuts', {
-    keyboardShortcuts: true
+  const res = await authedRequest({
+    request,
+    endpoint: '/update-my-keyboard-shortcuts',
+    method: 'put',
+    data: {
+      keyboardShortcuts: true
+    }
   });
   expect(await res.json()).toEqual({
     message: 'flash.keyboard-shortcut-updated',
diff --git a/e2e/utils/editor.ts b/e2e/utils/editor.ts
index 17b8a09f2d0..f749c5cb7cc 100644
--- a/e2e/utils/editor.ts
+++ b/e2e/utils/editor.ts
@@ -1,17 +1,12 @@
 import { type Page } from '@playwright/test';
 
-/**
- * Retrieves any editor elements on the page.
- * @param page - The Playwright page object.
- * @returns The editor elements.
- */
-export function getEditors(page: Page) {
+export const getEditors = (page: Page) => {
   return page.getByLabel(
     'Editor content;Press Alt+F1 for Accessibility Options'
   );
-}
+};
 
-export async function focusEditor({
+export const focusEditor = async ({
   page,
   isMobile,
   browserName
@@ -19,7 +14,15 @@ export async function focusEditor({
   page: Page;
   isMobile: boolean;
   browserName: string;
-}) {
+}) => {
+  if (isMobile) {
+    const codeBtn = page.getByRole('tab', { name: 'Code' });
+    // The outer div intercepts the click action of its children,
+    // preventing Playwright from verifying if the children actually receive the click.
+    // In reality, the children do receive the click, so we bypass that check here.
+    await codeBtn.click({ force: true });
+  }
+
   // The editor has an overlay div, which prevents the click event from bubbling up in iOS Safari.
   // This is a quirk in this browser-OS combination, and the workaround here is to use `.focus()`
   // in place of `.click()` to focus on the editor.
@@ -29,7 +32,7 @@ export async function focusEditor({
   } else {
     await getEditors(page).click();
   }
-}
+};
 
 export async function clearEditor({
   page,
diff --git a/e2e/utils/request.ts b/e2e/utils/request.ts
index c86dcbf0a34..1f1f70c2c72 100644
--- a/e2e/utils/request.ts
+++ b/e2e/utils/request.ts
@@ -3,18 +3,24 @@ import { APIRequestContext, expect } from '@playwright/test';
 const ensureLeadingSlash = (endpoint: string) =>
   endpoint[0] === '/' ? endpoint : '/' + endpoint;
 
-export const authedPut = async (
-  request: APIRequestContext,
-  endpoint: string,
-  data: Record<string, unknown>
-) => {
+export const authedRequest = async ({
+  request,
+  method,
+  endpoint,
+  data
+}: {
+  request: APIRequestContext;
+  method: 'post' | 'put';
+  endpoint: string;
+  data: Record<string, unknown>;
+}) => {
   const csrfToken = (await request.storageState()).cookies.find(
     c => c.name === 'csrf_token'
   )?.value;
 
   expect(csrfToken).toBeTruthy();
 
-  const res = await request.put(
+  const res = await request[method](
     process.env.API_LOCATION + ensureLeadingSlash(endpoint),
     {
       data,
diff --git a/e2e/utils/user-agent.ts b/e2e/utils/user-agent.ts
new file mode 100644
index 00000000000..b7aad81f79b
--- /dev/null
+++ b/e2e/utils/user-agent.ts
@@ -0,0 +1 @@
+export const isMacOS = process.platform === 'darwin';