Initial version

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "prettier.singleAttributePerLine": true,
+  "prettier.bracketSameLine": true,
+  "prettier.htmlWhitespaceSensitivity": "ignore"
+}

block.html

@@ -0,0 +1,75 @@
+<div
+  id="WORD_ID-_WORD_ID"
+  class="dropdown-menu d-block position-static border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px"
+  data-bs-theme="dark">
+  <div class="d-flex flex-fill align-items-center bg-white">
+    <img
+      class="img-fluid mx-auto d-block"
+      src="img/_IMAGE_FILE" />
+  </div>
+  <a
+    class="dropdown-item d-flex justify-content-end align-items-center gap-2 py-2"
+    href="#">
+    <span class="d-inline-block bg-secondary badge text-bg-primary">
+      &nbsp;&nbsp;_WORD_DISPLAY_ID&nbsp;&nbsp;
+    </span>
+  </a>
+  <form class="pt-0 p-2 mb-2 bg-dark border-bottom border-dark">
+    <div
+      id="FULLWORD-_WORD_ID"
+      class="form-control bg-dark form-control-lg">
+      <h2>_FULLWORD</h2>
+    </div>
+  </form>
+  <ul class="list-unstyled mb-0">
+    <li id="_CHOIC_0">
+      <a
+        class="dropdown-item d-flex align-items-center gap-2 py-2"
+        href="#">
+        <span class="d-inline-block bg-success rounded-circle p-1">
+          &nbsp;&nbsp;1&nbsp;&nbsp;
+        </span>
+        _WORD-0
+      </a>
+    </li>
+    <li id="_CHOIC_1">
+      <a
+        class="dropdown-item d-flex align-items-center gap-2 py-2"
+        href="#">
+        <span class="d-inline-block bg-primary rounded-circle p-1">
+          &nbsp;&nbsp;2&nbsp;&nbsp;
+        </span>
+        _WORD-1
+      </a>
+    </li>
+    <li id="_CHOIC_2">
+      <a
+        class="dropdown-item d-flex align-items-center gap-2 py-2"
+        href="#">
+        <span class="d-inline-block bg-danger rounded-circle p-1">
+          &nbsp;&nbsp;3&nbsp;&nbsp;
+        </span>
+        _WORD-2
+      </a>
+    </li>
+    <li id="_CHOIC_3">
+      <a
+        class="dropdown-item d-flex align-items-center gap-2 py-2"
+        href="#">
+        <span class="d-inline-block bg-info rounded-circle p-1">
+          &nbsp;&nbsp;4&nbsp;&nbsp;
+        </span>
+        _WORD-3
+      </a>
+    </li>
+    <li>
+      <a
+        class="pe-none dropdown-item align-items-center gap-2 py-2 text-center"
+        href="#"
+        id="_RESULT"
+        aria-disabled="true">
+        <span class="text-secondary">NO ANSWER</span>
+      </a>
+    </li>
+  </ul>
+</div>