Labs: Make input and textarea fonts and margins match surroundings

david-a-wheeler · david-a-wheeler · commit 97e5aeec0622 · 2024-03-23T13:02:29.000-04:00
Signed-off-by: David A. Wheeler &lt;dwheeler@dwheeler.com&gt;
diff --git a/docs/labs/checker.css b/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;
+}
diff --git a/docs/labs/csp1.html b/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();
 
diff --git a/docs/labs/hello.html b/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! -->
 
diff --git a/docs/labs/input1.html b/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! -->
 
diff --git a/docs/labs/input2.html b/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">
