Merge pull request #427 from ossf/pre_code3

Pre code3

Author: david-a-wheeler

docs/labs/checker.css

@@ -0,0 +1,9 @@
+pre, pre code, pre input, pre textarea {
+    font-family: "SFMono-Regular", Consolas, "Liberation Mono",
+                 Menlo, Courier, monospace;
+    font-size: 16px;
+}
+pre input, pre textarea {
+    /* Line up with text surrounding text */
+    margin-left: -5px;
+}

docs/labs/csp1.html

@@ -3,8 +3,10 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="/assets/css/style.css">
+<link rel="stylesheet" href="checker.css">
 <script src="js-yaml.min.js"></script>
 <script src="checker.js"></script>
+<link rel="license" href="https://creativecommons.org/licenses/by/4.0/">
 
 <!-- See create_labs.md for how to create your own lab! -->
 
@@ -387,7 +389,8 @@ <h2>Interactive Lab (<span id="grade"></span>)</h2>
 <pre><code>
 const express = require("express");
 <input id="attempt0" type="text" size="70" spellcheck="false"
-value="const"> 
+ value="const">
+</textarea>
 
 const app = express();
 

docs/labs/hello.html

@@ -3,8 +3,10 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="/assets/css/style.css">
+<link rel="stylesheet" href="checker.css">
 <script src="js-yaml.min.js"></script>
 <script src="checker.js"></script>
+<link rel="license" href="https://creativecommons.org/licenses/by/4.0/">
 
 <!-- See create_labs.md for how to create your own lab! -->
 
@@ -83,7 +85,7 @@
 # ADVANCED use - define our own preprocessing commands.
 # I suggest using "|-" (stripping the trailing newlines)
 # preprocessing:
-#   - 
+#   -
 #     - |-
 #         [\n\r]+
 #     - ""
@@ -146,10 +148,10 @@ <h2>Interactive Lab (<span id="grade"></span>)</h2>
 <textarea id="attempt" rows="2" cols="70">...</textarea>
 -->
 <form id="lab">
-<pre>
-<input id="attempt0" type="text" size="70"
+<pre><code>
+<input id="attempt0" type="text" size="70" spellcheck="false"
        value='console.log("Goodbye.");'>
-</pre>
+</code></pre>
 <button type="button" id="hintButton">Hint</button>
 <button type="button" id="resetButton">Reset</button>
 <button type="button" id="giveUpButton">Give up</button>

docs/labs/input1.html

@@ -3,8 +3,10 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="/assets/css/style.css">
+<link rel="stylesheet" href="checker.css">
 <script src="js-yaml.min.js"></script>
 <script src="checker.js"></script>
+<link rel="license" href="https://creativecommons.org/licenses/by/4.0/">
 
 <!-- See create_labs.md for how to create your own lab! -->
 
@@ -85,7 +87,7 @@
 # ADVANCED use - define our own preprocessing commands.
 # I suggest using "|-" (stripping the trailing newlines)
 # preprocessing:
-#   - 
+#   -
 #     - |-
 #         [\n\r]+
 #     - ""
@@ -200,15 +202,16 @@ <h2>Interactive Lab (<span id="grade"></span>)</h2>
 <textarea id="attempt" rows="2" cols="70">...</textarea>
 -->
 <form id="lab">
-<pre>
+<pre></code>
 // Set up Express framework and express-validator library
 const express = require("express");
 const app = express();
 const { query, matchedData, validationResult } = require('express-validator');
 
 // Implement requests such as http://localhost:3000/invoices?id=1
 app.get('/invoices',
-<input id="attempt0" type="text" size="70" value="  query('id'),"> 
+<input id="attempt0" type="text" size="70" spellcheck="false"
+ value="  query('id'),">
   (req, res) =&gt; { // Execute this code if /invoices seen
     const result = validationResult(req); // Retrieve errors
     if (result.isEmpty()) { // No errors
@@ -217,7 +220,7 @@ <h2>Interactive Lab (<span id="grade"></span>)</h2>
     }
     res.status(422).send(`Invalid input`);
   })
-</pre>
+</code></pre>
 <button type="button" id="hintButton">Hint</button>
 <button type="button" id="resetButton">Reset</button>
 <button type="button" id="giveUpButton">Give up</button>

docs/labs/input2.html

@@ -3,8 +3,10 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="/assets/css/style.css">
+<link rel="stylesheet" href="checker.css">
 <script src="js-yaml.min.js"></script>
 <script src="checker.js"></script>
+<link rel="license" href="https://creativecommons.org/licenses/by/4.0/">
 
 <!-- Sample expected answer -->
 <script id="expected0" type="plain/text">
@@ -111,7 +113,7 @@ <h2>Background</h2>
 
 <p>
 However, this time we're going to do input validation for a specific
-data value using regular expressions. Many programs have 
+data value using regular expressions. Many programs have
 specialized data values that are easily tested using
 regular expressions.
 
@@ -191,15 +193,16 @@ <h2>Interactive Lab (<span id="grade"></span>)</h2>
 <textarea id="attempt" rows="2" cols="70">...</textarea>
 -->
 <form id="lab">
-<pre>
+<pre><code>
 // Set up Express framework and express-validator library
 const express = require("express");
 const app = express();
 const { query, matchedData, validationResult } = require('express-validator');
 
 // Implement requests such as http://localhost:3000/parts?id=1
 app.get('/parts',
-<input id="attempt0" type="text" size="70" value="  ,"> 
+<input id="attempt0" type="text" size="70" spellcheck="false"
+ value="  ,">
   (req, res) =&gt; { // Execute this code if /invoices seen
     const result = validationResult(req); // Retrieve errors
     if (result.isEmpty()) { // No errors
@@ -208,7 +211,7 @@ <h2>Interactive Lab (<span id="grade"></span>)</h2>
     }
     res.status(422).send(`Invalid input`);
   })
-</pre>
+</code></pre>
 <button type="button" id="hintButton">Hint</button>
 <button type="button" id="resetButton">Reset</button>
 <button type="button" id="giveUpButton">Give up</button>