Update index.html

New drag-and-drop human verification Instantly shows right and wrong for each question Does not destroy the original project structure
4 months ago · c07579c423
parent c92b0bc3a8
commit c07579c423
1 changed files with 15 additions and 1 deletions
--- a/quiz-app/index.html
+++ b/quiz-app/index.html
@ -7,7 +7,20 @@
    <title>Quiz App</title>
  </head>
  <body>
-    <div class="quiz-container" id="quiz">
+    <div class="verify-container" id="verify">
+      <h2>Human Verification</h2>
+      <p class="verify-instr">
+        Drag the <span class="red-word">red</span> square onto the
+        <span class="blue-word">blue</span> square to start the quiz.
+      </p>
+      <div class="stage">
+        <div id="drop" class="block blue"></div>
+        <div id="drag" class="block red" draggable="true"></div>
+      </div>
+      <p id="verify-msg"></p>
+    </div>
+    
+    <div class="quiz-container hidden" id="quiz">
      <div class="quiz-header">
        <h2 id="question">Question text</h2>
        <ul>
@ -33,6 +46,7 @@
        </ul>
      </div>
      <button id="submit">Submit</button>
+      <p id="feedback" class="feedback"></p>
    </div>
    <script src="script.js"></script>
  </body>