.

oef/templates/oef/questions.html

@@ -2,6 +2,20 @@
 {% block content %}
 <h2>Questions</h2>
 There are {{ questions|length }} question sets.
+<div class="offcanvas offcanvas-end bg-dark" tabindex="-1" id="offcanvasExample" data-bs-scroll="true" data-bs-backdrop="false" aria-labelledby="offcanvasExampleLabel">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Comparisons</h5>
+    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+  <div class="offcanvas-body">
+    <div>
+        <ul id="sidebar-list">
+        </ul>
+      
+    </div>
+    <button _="on click remove <li.sidebar-item/>">Clear</button>
+  </div>
+</div>
 
 <ul>
     {% for question in questions %}
@@ -29,6 +43,14 @@ There are {{ questions|length }} question sets.
         <button class="btn btn-sm" _="on click set #question2.value to the innerHTML of the previous <pre/> then go to #question2 ">
             Diff2
         </button>
+<button class="btn btn-sm" type="button" 
+_="on click set q to the innerHTML of the previous <pre/> then log q then set el to `<li class='sidebar-item'>${q}</li>` then log el then put el at end of #sidebar-list then 
+js
+new bootstrap.Offcanvas(document.getElementById('offcanvasExample')).show();
+end
+">
+    Add to sidebar
+  </button>
     </li>
     {% endfor %}
 </ul>