diff --git a/client/src/templates/Challenges/utils/frame.ts b/client/src/templates/Challenges/utils/frame.ts
index 9628bca95ed..6955fb7e2b4 100644
--- a/client/src/templates/Challenges/utils/frame.ts
+++ b/client/src/templates/Challenges/utils/frame.ts
@@ -70,7 +70,7 @@ export const scrollManager = new ScrollManager();
 // main iframe is responsible rendering the preview and is where we proxy the
 export const mainPreviewId = 'fcc-main-frame';
 // the test frame is responsible for running the assert tests
-const testId = 'fcc-test-frame';
+export const testId = 'fcc-test-frame';
 // the project preview frame demos the finished project
 export const projectPreviewId = 'fcc-project-preview-frame';
 
@@ -86,7 +86,7 @@ const DOCUMENT_NOT_FOUND_ERROR = 'misc.document-notfound';
 // of the frame.  React dom errors already appear in the console, so onerror
 // does not need to pass them on to the default error handler.
 
-const createHeader = (id = mainPreviewId) => `
+export const createHeader = (id = mainPreviewId) => `
   <base href='' />
   <script>
     window.__frameId = '${id}';
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md b/curriculum/challenges/english/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md
index 1977a7fa42e..5c655fba6ce 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md
@@ -280,3 +280,12 @@ p{
   height: 100vh;
 }
 ```
+
+---
+
+```html
+<head><style>@media (max-width: 500px){nav{display: none;}}</style></head><body><nav id="navbar"><a href="#projects">text</a> | </nav><main><section id="welcome-section"><h1>text</h1></section><hr><section id="projects"><h1>Projects</h1><h2 class="project-tile"><a id="profile-link" target="_blank" href="https://freecodecamp.org">text</a></h2></section><hr></body></html>
+```
+
+```css
+```
diff --git a/curriculum/test/test-challenges.js b/curriculum/test/test-challenges.js
index 11a0fcef839..bedb892f0f1 100644
--- a/curriculum/test/test-challenges.js
+++ b/curriculum/test/test-challenges.js
@@ -46,6 +46,10 @@ const { getLines } = require('../../shared/utils/get-lines');
 const { getChallengesForLang, getMetaForBlock } = require('../get-challenges');
 const { challengeSchemaValidator } = require('../schema/challenge-schema');
 const { testedLang, getSuperOrder } = require('../utils');
+const {
+  createHeader,
+  testId
+} = require('../../client/src/templates/Challenges/utils/frame');
 const ChallengeTitles = require('./utils/challenge-titles');
 const MongoIds = require('./utils/mongo-ids');
 const createPseudoWorker = require('./utils/pseudo-worker');
@@ -664,7 +668,7 @@ async function getWorkerEvaluator(build, sources, code, runsInPythonWorker) {
 
 async function initializeTestRunner(build, sources, code, loadEnzyme) {
   await page.reload();
-  await page.setContent(build);
+  await page.setContent(createHeader(testId) + build);
   await page.evaluate(
     async (code, sources, loadEnzyme) => {
       const getUserInput = fileName => sources[fileName];
