Use | for seperating questions.

Contact me link because this is technically breaking though I doubt anyone is using this feature.
TetraspaceW · Apr 17, 2024 · c81564e · c81564e
1 parent 008de7e
commit c81564e
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 42 deletions.
diff --git a/index.html b/index.html
@@ -1,46 +1,48 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>AI Views Snapshots</title>
-    <link rel="stylesheet" type="text/css" href="style.css" />
-    <meta name="title" property="og:title" content="AI Views Snapshots" />
-    <meta name="image" property="og:image" content="preview.jpeg" />
-  </head>
-  <body>
-    <div id="content">
-      <div class="colour-code-background">
-        <div class="colour-code-container">
-          <p class="key-caption">Colour code:</p>
-          <div class="mine key-container">
-            My probability is roughly something like this.
-          </div>
-          <div class="possible key-container">
-            I could maybe see myself updating to a view like this after a lot
-            more thinking or after seeing a little more evidence.
-          </div>
-          <div class="reasonable key-container">
-            I feel confident this view is wrong, but I could easily see a
-            reasonable and informed person having this view.
-          </div>
-          <div class="unreasonable key-container">
-            I don't currently see a way for a reasonable and well-informed
-            person to end up with this view.
-          </div>
-        </div>
 
-        <label class="colour-blind-checkbox" id="colour-blind-checkbox"
-          >Colour blind mode:
-          <input type="checkbox" onClick="toggleColourBlind()"
-        /></label>
-      </div>
+<head>
+  <title>AI Views Snapshots</title>
+  <link rel="stylesheet" type="text/css" href="style.css" />
+  <meta name="title" property="og:title" content="AI Views Snapshots" />
+  <meta name="image" property="og:image" content="preview.jpeg" />
+</head>
 
-      <div id="tablesContainer" class="table-container">
-        <p id="introText" class="intro-text"></p>
+<body>
+  <div id="content">
+    <div class="colour-code-background">
+      <div class="colour-code-container">
+        <p class="key-caption">Colour code:</p>
+        <div class="mine key-container">
+          My probability is roughly something like this.
+        </div>
+        <div class="possible key-container">
+          I could maybe see myself updating to a view like this after a lot
+          more thinking or after seeing a little more evidence.
+        </div>
+        <div class="reasonable key-container">
+          I feel confident this view is wrong, but I could easily see a
+          reasonable and informed person having this view.
+        </div>
+        <div class="unreasonable key-container">
+          I don't currently see a way for a reasonable and well-informed
+          person to end up with this view.
+        </div>
       </div>
+
+      <label class="colour-blind-checkbox" id="colour-blind-checkbox">Colour blind mode:
+        <input type="checkbox" onClick="toggleColourBlind()" /></label>
     </div>
-    <br />
-    <button id="exportBtn" class="export-button">Export as Image</button>
-    <script src="script.js"></script>
-    <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
-  </body>
-</html>
+
+    <div id="tablesContainer" class="table-container">
+      <p id="introText" class="intro-text"></p>
+    </div>
+  </div>
+  <br />
+  <button id="exportBtn" class="export-button">Export as Image</button>
+  <p class="contact-link"><a href="https://thetetra.space/#/#contact">Contact Tetra</a> for feedback or bug reports.</p>
+  <script src="script.js"></script>
+  <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -34,7 +34,7 @@ document.addEventListener("DOMContentLoaded", function () {
   const questionsParam = urlParams.get("questions");
   if (questionsParam) {
     questions.length = 0;
-    const questionsArray = questionsParam.split(",");
+    const questionsArray = questionsParam.split("|");
     for (let i = 0; i < questionsArray.length; i += 2) {
       questions.push(questionsArray.slice(i, i + 2));
     }

diff --git a/style.css b/style.css
@@ -17,9 +17,11 @@ td {
   background-color: #d9ead3ff;
   height: 1px;
 }
+
 .mine.key-container {
   border-color: #b6d7a8;
 }
+
 .colour-blind .mine.mine {
   background-color: #38761dff;
   color: #ffffff;
@@ -29,9 +31,11 @@ td {
   background-color: #c9daf8ff;
   height: 1px;
 }
+
 .possible.key-container {
   border-color: #a4c2f4;
 }
+
 .colour-blind .possible {
   background-color: #6d9eebff;
 }
@@ -40,9 +44,11 @@ td {
   background-color: #d9d2e9ff;
   height: 1px;
 }
+
 .reasonable.key-container {
   border-color: #b4a7d6;
 }
+
 .colour-blind .reasonable {
   background-color: #b4a7d6ff;
 }
@@ -51,9 +57,11 @@ td {
   background-color: #f4ccccff;
   height: 1px;
 }
+
 .unreasonable.key-container {
   border-color: #e6b8af;
 }
+
 .colour-blind .unreasonable {
   background-color: #f4ccccff;
 }
@@ -67,6 +75,7 @@ td {
   background-color: #eef5f6ff;
   padding: 0.5em 1em;
 }
+
 .colour-code-container {
   display: flex;
   flex-direction: column;
@@ -78,6 +87,7 @@ td {
     flex-direction: row;
   }
 }
+
 .key-container {
   border-style: dashed;
   border-width: 2px;
@@ -87,20 +97,25 @@ td {
   padding: 0.5em;
   height: auto;
 }
+
 .colour-blind .key-container {
   color: #000000;
 }
+
 .key-caption {
   color: #666666;
   margin: 0.5em;
 }
+
 .colour-blind .key-caption {
   color: #000000;
 }
+
 .colour-blind-checkbox {
   margin: auto;
   color: #666666;
 }
+
 .colour-blind .colour-blind-checkbox {
   color: #000000;
 }
@@ -115,10 +130,12 @@ td {
     margin: 0;
   }
 }
+
 .table-container {
   display: flex;
   flex-direction: column;
 }
+
 .row-container {
   display: flex;
   flex-direction: column;
@@ -147,10 +164,25 @@ td {
   cursor: pointer;
 }
 
+.contact-link {
+  text-align: center;
+  margin: 1em 0;
+  color: #666666;
+
+  a {
+    color: inherit;
+  }
+
+  a:active {
+    color: inherit;
+  }
+
+}
+
 iframe {
   position: absolute;
   left: -100000px;
   top: -100000px;
   width: 1280px;
   height: 100%;
-}
+}