add progress bar

client/MainView.jsx

@@ -221,6 +221,23 @@ export default () => (state, actions) => {
           {
             // Offline mode for a student, after starting, or free mode
             !state.adminKey && (state.free || state.kind == 'OFFLINE') && state.slides.length > 0 && <div class="my-3 p-3 bg-white rounded shadow-sm" style={style}>
+              <div class="progress-container" key={"pgc-" + state.currentFreeSlideId}>
+                {
+                  state.slides.map((s, i) => <div
+                    key={"progress-question-state-" + i}
+                    class={
+                      "question-box" +
+                      (state.offlineConfirmedState[state.shuffledSlidesIndex[i]]?.confirmed ? " confirmed" : "") +
+                      (i == state.currentFreeSlideId ? " current" : "") +
+                      (state.offlineConfirmedState[state.shuffledSlidesIndex[i]] &&
+                        !state.offlineConfirmedState[state.shuffledSlidesIndex[i]].confirmed ? " unconfirmed" : "") +
+                      (state.offlineConfirmedState[state.shuffledSlidesIndex[i]]?.confirmed &&
+                        !state.offlineAnswers[state.shuffledSlidesIndex[i]]?.length ? " unconfirmed" : "")
+                    }
+                    onclick={actions.setFreeSlide.bind(null, i)}
+                  ></div>)
+                }
+              </div>
               <button
                 disabled={state.currentFreeSlideId == 0 ? 'disabled' : ''}
                 onclick={actions.previousFreeSlide}

client/style.css

@@ -8,6 +8,43 @@ p code {
     max-width:700px;
 }
 
+.progress-container {
+    display: flex;
+    gap: 0px;
+    width: 700px;
+    border-left:1px solid gray;
+    margin-bottom: 10px;
+}
+.question-box {
+    width: calc(100% / 75 - 1px);
+    height: 10px;
+    background-color: rgb(230,230,230);
+    position: relative;
+    border-right: 1px solid gray;
+    border-top: 1px solid gray;
+    border-bottom: 1px solid gray;
+    cursor: pointer;
+}
+.question-box:hover {
+    background-color: rgb(150,150,150);
+}
+.question-box.confirmed {
+  background-color: rgb(0, 200, 0);
+}
+.question-box.confirmed:hover {
+  background-color: rgb(0, 150, 0);
+}
+.question-box.unconfirmed {
+  background-color: #ff8738;
+}
+.question-box.unconfirmed:hover {
+  background-color: #ff6a00;
+}
+
+.question-box.current {
+  border: 3px solid rgb(0, 0, 200);
+}
+
 .progress {
   position: absolute;
   top: 0;