prepared answer box in html

index.html

@@ -15,8 +15,11 @@
         <p id="title"></p>
         <p id="dlg-text"></p>
     </div>
-    <div id="answer-box">
-        <p>Test</p>
+    <div hidden="true" id="answer-box">
+        <p id="answer"></p>
+        <p id="answer"></p>
+        <p id="answer"></p>
+        <p id="answer"></p>
     </div>
     <img draggable="false" hidden="true" id="triangle" src="text_horror/assets/triangle.png">
     <p class="thx-for-playing">Thanks for playing</p>

text_horror/app.js

@@ -1,8 +1,8 @@
 var speed = 50;
 var typeindex = 0;
-var dlgFile = {};
-let dlgLines = [];
 var dlgPointer = 0;
+var dlgFile;
+let dlgLines;
 
 function load() {
   fetch("text_horror/dialogue.json")

text_horror/style.css

@@ -57,6 +57,24 @@ body {
     animation: float 1.5s ease-in-out infinite;
 }
 
+#answer-box {
+    border-style: solid;
+    border-width: 5px;
+    border-color: white;
+    background-color: black;
+    width: 15%;
+    padding-inline: 20px;
+    position: absolute;
+    right: 12%;
+    bottom: 68%;
+}
+
+#answer {
+    text-decoration: underline;
+    font-size: 30px;
+}
+
+
 @keyframes float {
     0% {
         transform: translatey(0px);