Connection test page (#382)

microbit-matt-hillsdon · web-flow · commit 03866e6c0792 · 2024-10-11T14:43:20.000+01:00
This is temporary - we have this page live now and don't want it to go
away when we deploy to live. A better integrated option would be
nice-to-have for the future.


The second part of this test isn't really relevant once we use the new simx approach. But leaving as it is for now.
diff --git a/public/test.html b/public/test.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset='utf-8'>
+  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+  <title>Connectivity test page</title>
+  <meta name='viewport' content='width=device-width, initial-scale=1'>
+  <style>
+    body {
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+      padding: 0.5em;
+    }
+
+    .row {
+      display: flex;
+      flex-direction: column;
+    }
+    @media screen and (min-width: 600px) {
+      .row {
+        flex-direction: row;
+        gap: 2em;
+      }
+    }
+    section {
+      flex: 1;
+    }
+  </style>
+</head>
+
+<body>
+  <h1>Connectivity test page</h1>
+  <p>Please check that the two websites embedded below load correctly.</p>
+  <div class="row">
+    <section>
+      <h2>
+        1. Microsoft MakeCode
+      </h2>
+      <p>You should see "on start" and "forever" code blocks in the section below:</p>
+      <iframe src="https://makecode.microbit.org" width="100%" height="300px"></iframe>
+      <p>This requires <a href="https://support.microbit.org/support/solutions/articles/19000030385-firewall-requirements-for-micro-bit-editors-and-websites">these domains to be accessible</a>.</p>
+    </section>
+    <section>
+      <h2>2. ML simulator</h2>
+      <p>You should see the text "ML event" and a drop-down list containing "unknown"</p>
+      <iframe src="https://microbit-foundation.github.io/makecode-microbit-ml-simulator/?parentOrigin=&language=en" width="100%" height="300px"></iframe>
+      <p>This requires microbit-foundation.github.io to be accessible.</p>
+    </section>
+  </div>
+</body>
+
+</html>
