Editor styling

ref-test/app/editor/static/css/editor.css

@@ -0,0 +1,46 @@
+.accordion-button {
+    color: inherit;
+    background-color: inherit;
+    display: block;
+    border: 1px solid rgb(0 0 0 / .3);
+    height: 60px;
+}
+
+.editor-controls {
+    width: fit-content;
+    display: block;
+    margin: 10px auto;
+}
+
+.editor-controls a {
+    margin: 0 10px;
+    z-index: 10;
+}
+
+.accordion-button div {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
+}
+
+.accordion-button a {
+    transform: translate(-50%, -50%);
+    top: 50%;
+    right: 0%;
+    position: absolute;
+}
+
+.accordion-button::after {
+    content: none;
+}
+
+.accordion-error {
+    background-color: #bb2d3b;
+    color: white;
+}
+
+.accordion-error:not(.collapsed) {
+    background-color: #bb2d3b;
+    color: white;
+}

ref-test/app/editor/static/js/editor.js

@@ -0,0 +1,68 @@
+const root = $('#editor-root')
+
+var data = [
+    {
+        "type": "question",
+        "q_no": 3,
+        "text": "The ball is gathered by the defensive division and a player throws it forward, hitting the korf in the other division.",
+        "options": [
+          "Play on",
+          "Opposite team restart under their defensive post",
+          "Opposite team restart where the ball was thrown from"
+        ],
+        "correct": 0,
+        "q_type": "Multiple Choice",
+        "tags": [
+          "scoring from the defence zone"
+        ]
+      },
+      {
+        "type": "question",
+        "q_no": 4,
+        "text": "At the end of the game, after the final whistle, a coach loudly confronts the referee. What can the referee do?",
+        "options": [
+          "Ignore the coach as the match has ended",
+          "Ignore the coach or inform the coach they will be reported",
+          "Ignore the coach, inform the coach they will be reported and/or show the coach a card"
+        ],
+        "correct": 2,
+        "q_type": "List",
+        "tags": [
+          "discipline"
+        ]
+      },
+]
+
+for (var i = 0; i < data.length; i++) {
+    if (data[i]['type'] == 'question') {
+        var obj = `
+            <div class="accordion-item" id="i${i}">
+                <h2 class="accordion-header" id="h${i}">
+                    <div class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c${i}" aria-expanded="true" aria-controls="c${i}">
+                        <div class="float-start">Question ${i+1}</div>
+                        <a href="javascript:void(0)" class="btn btn-success panel-control" data-id="${i}" data-action="remove">X</a>
+                    </div>
+                </h2>
+                <div id="c${i}" class="accordion-collapse collapse" aria-labelledby="h${i}" data-bs-parent="#editor-root">
+                    <div class="accordion-body">
+                        <div class="question-text">
+                            ${data[i]['text']}
+                        </div>
+                        <ul>
+                            <li>
+                                ${data[i]['options'].join("</li><li>")}
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        `
+        root.append(obj)
+    }
+}
+
+$('.panel-control').click(function(event) {
+    console.log($(this).data('id'))
+    var id = $(this).data('id')
+    $(`#i${id}`).remove()
+})