diff --git a/docs/labs/csp1.html b/docs/labs/csp1.html
index 97f8eb29..cf438cf5 100644
--- a/docs/labs/csp1.html
+++ b/docs/labs/csp1.html
@@ -7,199 +7,11 @@
 <link rel="stylesheet" href="checker.css">
 <script src="js-yaml.min.js"></script>
 <script src="checker.js"></script>
+<script src="csp1.js"></script>
 <link rel="license" href="https://creativecommons.org/licenses/by/4.0/">
 
 <!-- See create_labs.md for how to create your own lab! -->
 
-<!-- Sample expected answer -->
-<script id="expected0" type="plain/text">
-const helmet = require("helmet");
-</script>
-<!--
--->
-<script id="expected1" type="plain/text">
-app.use(helmet({
-  contentSecurityPolicy: {
-    directives: {
-      "script-src": ["'self'", "https://example.com"],
-      "style-src": ["'self'"]
-    },
-  }
-}));
-</script>
-
-<!-- Full pattern of correct answer -->
-<script id="correct0" type="plain/text">
-\s* const\s+helmet = require \( ("helmet"|'helmet'|`helmet`) \) ; \s*
-</script>
-<!--
-\s* const helmet = require \( ("helmet"|'helmet'|`helmet`) \) ; \s*
--->
-<script id="correct1" type="plain/text">
-\s* app \. use \( helmet \( \{
-    contentSecurityPolicy: \{
-      directives: \{
-        "script-src": \[ "'self'" , "https://example\.com" \] ,
-        "style-src": \[ "'self'" \] ,?
-      \} ,?
-    \} ,?
-  \} \) \) ;
-\s*
-</script>
-<!--
-\s* app \. use \( helmet \( \{
-    contentSecurityPolicy: \{
-      directives: \{
-        "script-src": \[ "'self'" ,
-           (["'`])https://example\.com\1 \] ,
-        "style-src": \[ "'self'" \]
-      \} ,?
-    \}
-  \} \) \) ;
--->
-
-<script id="info" type="application/yaml">
----
-hints:
-- present: "import"
-  text: Yes, many JavaScript implementations support an import statement.
-    However, in this exercise we will use a require form. Please use that
-    instead.
-  examples:
-  - - 'import express from "express";'
-- absent: "const"
-  text: Start with const.
-- absent: 'const\s+helmet ='
-  text: Create a constant name named helmet using the form const helmet = ...
-  examples:
-  - - 'const'
-  - - 'consthelmet = '
-- present: 'require \( helmet \)'
-  text: The parameter of a requirement statement must be string.
-    Surround the term helment with double-quotes.
-  examples:
-  - - '  const helmet = require(helmet);'
-- absent: "; $"
-  text: JavaScript doesn''t require semicolon terminators, but the rest of
-    the code uses them. You should try to match a coding style when modifying
-    existing code unless there''s an important reason not to.
-    Please update the first statment.
-  examples:
-  - - '  const helmet = require("helmet")'
-- absent: '\s* app \. use \( helmet \( \{'
-  index: 1
-  text: Your code should begin with app.use(helmet({
-- absent: |
-    \s* app \. use \( helmet \( \{
-          contentSecurityPolicy: \{ \s*
-  index: 1
-  text: |
-    Your code should begin with:
-    app.use(helmet({
-      contentSecurityPolicy: {
-- absent: |
-    \s* app \. use \( helmet \( \{
-          contentSecurityPolicy: \{
-            directives: \{ \s*
-  index: 1
-  text: |
-    Your code should begin with:
-    app.use(helmet({
-      contentSecurityPolicy: {
-            directives: {
-- absent: |
-    \s* app \. use \( helmet \( \{
-          contentSecurityPolicy: \{
-            directives: \{
-                "script-src": \[ "'self'" , ["']https://example.com["'] \] , \s*
-  index: 1
-  text: |
-    Your code should continue with:
-    app.use(helmet({
-      contentSecurityPolicy: {
-            directives: {
-              "script-src": ["'self'", "https://example.com"],
-- absent: |
-    "style-src": \[ "'self'" \]
-  index: 1
-  text: |
-    Don't forget to include "style-src": ["'self'"]
-- absent: '; $'
-  index: 1
-  text: JavaScript doesn''t require semicolon terminators, but the rest of
-    the code uses them. You should try to match a coding style when modifying
-    existing code unless there''s an important reason not to.
-    Please update the second statement to use a semicolon terminator.
-- absent: |-
-    \} \} \) \) ; $
-  index: 1
-  text: The correct answer is expected to end with `} } ) ) ;` ignoring
-    whitespace. Check that you have matching parentheses and braces.
-- text: I do not have more specific hints to provide. Please ensure that
-    the parentheses, braces, and brackets pair correctly, as that is
-    often the problem.
-# debug: true
-</script>
-
-
-<!-- More examples:
-- absent: query \( ["'`]id["'`] \)
-  text: Add query("id") to verify its value.
-  examples:
-  - - ","
-  - - "  query(),"
-- present: query \( ["'`]id["'`] \) [^. ]
-  text: After query("id") use a period to invoke a verification method.
-  examples:
-  - - "  query('id'),"
-- present: "(isint|Isint|IsInt|ISINT)"
-  text: JavaScript is case-sensitive. Use isInt instead of the case you have.
-  examples:
-  - - "  query('id').isint(),"
-  - - "  query('id').IsInt(),"
-- absent: isInt
-  text: Use isInt to determine if the parameter is an integer.
-  examples:
-  - - "  query('id').,"
-- present: ' query \( ["''`]id["''`] \).*\([^)]*$'
-  text: After query("id") you have an ( but there's no matching ).
-  examples:
-  - - "  query('id').isInt(,"
-- absent: isInt \(.*\)
-  text: isInt should be followed by (...).
-  examples:
-  - - "  query('id').isInt,"
-- present: "\\{[^}]*$"
-  text: You have started an object using { but there's no matching }.
-  examples:
-  - - "  query('id').isInt({),"
-- absent: isInt \( \{.*\} \)
-  text: Inside the parenthesis of isInt() you should have an object like {...}.
-  examples:
-  - - "  query('id').isInt(),"
-- absent: min
-  text: 'Use min: to specify a minimum value.'
-  examples:
-  - - "  query('id').isInt({}),"
-- absent: max
-  text: 'Use max: to specify a minimum value.'
-  examples:
-  - - "  query('id').isInt({min: 1}),"
-- present: max.*min
-  text: JavaScript allows hash entries to be in any order,
-    but this can be confusing to humans. Conventionally minimum values
-    are given before maximum values; please follow that convention.
-  examples:
-  - - "  query('id').isInt({max: 9999, min: 1}),"
-successes:
-- - " query ( 'id' ) . isInt ( {min: 1 , max: 9999 } ) ,"
-- - " query ( `id` ) . isInt ( {min: 1 , max: 9_999 } ) ,   "
-- - 'query ( "id" ) . isInt ( {min: 1 , max: 9_999 } ) ,'
-failures:
-- - " query,"
-- - 'query(''id'').isint({min: 1, max: 9999})'
-- - 'query(''id'').isInt({min: 1, max: 9999})'
--->
 </head>
 <body>
 <!-- For GitHub Pages formatting: -->
diff --git a/docs/labs/csp1.js b/docs/labs/csp1.js
new file mode 100644
index 00000000..078e7810
--- /dev/null
+++ b/docs/labs/csp1.js
@@ -0,0 +1,110 @@
+info =
+{
+  hints: [
+    {
+      present: "import",
+      text: "Yes, many JavaScript implementations support an import statement. However, in this exercise we will use a require form. Please use that instead.",
+      examples: [
+        [
+          "import express from \"express\";"
+        ]
+      ]
+    },
+    {
+      absent: "const",
+      text: "Start with const."
+    },
+    {
+      absent: String.raw`const\s+helmet =`,
+      text: "Create a constant name named helmet using the form const helmet = ...",
+      examples: [
+        [ "const" ],
+        [ "consthelmet = " ]
+      ]
+    },
+    {
+      present: String.raw`require \( helmet \)`,
+      text: "The parameter of a requirement statement must be string. Surround the term helment with double-quotes.",
+      examples: [
+        [ "  const helmet = require(helmet);" ]
+      ]
+    },
+    {
+      absent: "; $",
+      text: "JavaScript doesn''t require semicolon terminators, but the rest of the code uses them. You should try to match a coding style when modifying existing code unless there''s an important reason not to. Please update the first statment.",
+      examples: [
+        [ "  const helmet = require(\"helmet\")" ]
+      ]
+    },
+    {
+      absent: String.raw`\s* app \. use \( helmet \( \{`,
+      index: 1,
+      text: "Your code should begin with app.use(helmet({"
+    },
+    {
+      absent: String.raw`\s* app \. use \( helmet \( \{
+      contentSecurityPolicy: \{ \s*
+`,
+      index: 1,
+      text: "Your code should begin with:\napp.use(helmet({\n  contentSecurityPolicy: {\n"
+    },
+    {
+      absent: String.raw`\s* app \. use \( helmet \( \{
+      contentSecurityPolicy: \{
+        directives: \{ \s*
+`,
+      index: 1,
+      text: "Your code should begin with:\napp.use(helmet({\n  contentSecurityPolicy: {\n        directives: {\n"
+    },
+    {
+      absent: String.raw`\s* app \. use \( helmet \( \{
+      contentSecurityPolicy: \{
+        directives: \{
+            "script-src": \[ "'self'" , ["']https://example.com["'] \] , \s*
+`,
+      index: 1,
+      text: "Your code should continue with:\napp.use(helmet({\n  contentSecurityPolicy: {\n        directives: {\n          \"script-src\": [\"'self'\", \"https://example.com\"],\n"
+    },
+    {
+      absent: String.raw`"style-src": \[ "'self'" \]
+`,
+      index: 1,
+      text: "Don't forget to include \"style-src\": [\"'self'\"]\n"
+    },
+    {
+      absent: "; $",
+      index: 1,
+      text: "JavaScript doesn''t require semicolon terminators, but the rest of the code uses them. You should try to match a coding style when modifying existing code unless there''s an important reason not to. Please update the second statement to use a semicolon terminator."
+    },
+    {
+      absent: String.raw`\} \} \) \) ; $`,
+      index: 1,
+      text: "The correct answer is expected to end with `} } ) ) ;` ignoring whitespace. Check that you have matching parentheses and braces."
+    },
+    {
+      text: "I do not have more specific hints to provide. Please ensure that the parentheses, braces, and brackets pair correctly, as that is often the problem."
+    }
+  ],
+  expected: [
+    'const helmet = require("helmet");',
+    `app.use(helmet({
+  contentSecurityPolicy: {
+    directives: {
+      "script-src": ["'self'", "https://example.com"],
+      "style-src": ["'self'"]
+    },
+  }
+}));`
+  ],
+  correct: [
+    String.raw`\s* const\s+helmet = require \( ("helmet"|'helmet'|${BACKQUOTE}helmet${BACKQUOTE}) \) ; \s*`,
+    String.raw`\s* app \. use \( helmet \( \{
+    contentSecurityPolicy: \{
+      directives: \{
+        "script-src": \[ "'self'" , "https://example\.com" \] ,
+        "style-src": \[ "'self'" \] ,?
+      \} ,?
+    \} ,?
+  \} \) \) ; \s*`
+  ],
+}