Initial implementation of next button

Author: facundoy

src/haz3lweb/app/editors/mode/TutorialsMode.re

@@ -208,6 +208,8 @@ module Update = {
   let update =
       (~globals: Globals.t, ~schedule_action, action: t, model: Model.t) => {
     switch (action) {
+    | Tutorial(TutorialMode.Update.MoveToNextExercise) =>
+      Model.{current: model.current + 1, exercises: model.exercises} |> return
     | Tutorial(action) =>
       let current = List.nth(model.exercises, model.current);
       let* new_current =

src/haz3lweb/view/TutorialMode.re

@@ -88,26 +88,16 @@ module Update = {
       : Updated.t(Model.t) => {
     let instructor_mode = settings.instructor_mode;
     switch (action) {
+    // This MoveToNextExercise is only here so that Tutorial(TutorialMode.Update.MoveToNextExercise)
+    // is called in TutorialsMode. This is a dummy update because this function requires Updated(Model.t)
     | MoveToNextExercise =>
-      let total_exercises = List.length(TutorialSettings.exercises);
-
-      /* Prevent division by zero */
-      let next_index =
-        if (total_exercises == 0) {
-          0;
-        } else {
-          (model.spec.version + 1) mod total_exercises;
-        };
-      let updated_spec = {...model.spec, version: next_index};
-
-      /* Return the properly wrapped model */
-      return(
-        ~is_edit=true,
-        ~recalculate=true, /* Forces UI to refresh */
-        ~scroll_active=true,
-        ~logged=true,
-        {...model, spec: updated_spec} /* Update spec with new version */
-      );
+      Updated.return_quiet({
+        ...model,
+        editors: {
+          ...model.editors,
+          show_report: model.editors.show_report,
+        },
+      })
     | Editor(pos, MainEditor(action))
         when Tutorial.visible_in(pos, ~instructor_mode) =>
       // Redirect to editors
@@ -461,6 +451,14 @@ module View = {
                           ),
                         ],
                       ),
+                      div(
+                        ~attrs=[Attr.class_("next-button")],
+                        [
+                          Widgets.button(Icons.forward, _ =>
+                            inject(MoveToNextExercise)
+                          ),
+                        ],
+                      ),
                     ],
                   );
                 } else {

src/haz3lweb/www/style/tutorial-mode.css

@@ -329,7 +329,8 @@
 
 #main.Tutorial .title-cell {
   display: flex;
-  align-items: flex-start; /* Align to the left */
+  align-items: flex-start;
+  /* Align to the left */
   justify-content: flex-start;
   width: 100%;
   padding: 0 !important;
@@ -363,10 +364,11 @@
   margin-bottom: 2em !important;
   padding: 0 !important;
 }
+
 #main.Tutorial .tutorial-content {
   display: flex;
   flex-direction: column;
-  gap: 2em; 
+  gap: 2em;
 }
 
 /* .cross {
@@ -382,7 +384,8 @@
   width: 80px;
   height: 80px;
   color: black;
-  background-color: #838282;;
+  background-color: #838282;
+  ;
   border-radius: 50%;
   display: flex;
   justify-content: center;
@@ -426,29 +429,32 @@
 }
 
 .cross:hover::after {
-  opacity: 1; /* Show on hover */
+  opacity: 1;
+  /* Show on hover */
 }
 
 .cross {
-  position: relative; 
+  position: relative;
 }
 
 .your-impl-wrapper {
-  margin-bottom: 1em; /* or try 1.5em for bigger space */
+  margin-bottom: 1em;
+  /* or try 1.5em for bigger space */
 }
 
 .hint-with-icon {
   display: flex;
   align-items: center;
-  gap: 0.4em; /* space between text and icon */
+  gap: 0.4em;
+  /* space between text and icon */
   font-size: 0.9em;
   color: #333;
   align-content: right;
   /* margin-top: 0.5em; */
 }
 
 .highlight-icon svg {
-  fill: var(--ci-icon-bkg) !important; 
+  fill: var(--ci-icon-bkg) !important;
 }
 
 /* .highlight-icon {
@@ -458,10 +464,11 @@
 } */
 
 .hint-content code {
-  font-size: 0.75em; /* Smaller font for code blocks */
+  font-size: 0.75em;
+  /* Smaller font for code blocks */
   font-family: monospace;
   background-color: #f5f5f5;
   padding: 1px 1px;
   /* border-radius: 3px; */
-  line-height: 0; 
+  line-height: 0;
 }