do step by step navigation

web/_layouts/custom.html

@@ -1,25 +1,44 @@
 ---
 layout: page
 ---
-
-<div id="sidebar-index"><button type="button" id="sidebar-toggle">&gt;</button></div>
+<button class="prev">Previous</button>
+<button class="next">Next</button>
+<div id="sidebar-index" class="collapsed"><button type="button" id="sidebar-toggle">&lt;</button></div>
 
 {{ content }}
 
+<button class="prev">Previous</button>
+<button class="next">Next</button>
 <!-- _layouts/page.html -->
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-<script lang="JavaScript">
-$(document).ready(function() {
+<script>
+function hierarchyMenu(steps, changeIndex){
   var hierarchy = [$('<ul>')];
   var currentLevel = 2;
 
-  var headings = $('.page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6');
+  var headings = $('.page-content h2, .page-content h3');
   headings.each(function(i, heading) {
     var level = parseInt(heading.tagName.slice(1));
     var id = $(heading).attr('id');
     var text = $(heading).text();
-    var link = $('<a>').attr('href', '#' + id).text(text);
+    var link = $('<a>').attr('href', '#').text(text);
+
+    link.click(function() {
+      var step;
+
+      if(level==2){
+        step=$($(heading).parents('.section')[0]).find('.step:first')[0];
+      }
+      else{
+        step=$(heading).parents('.step')[0];
+      }
+      let current=steps.index(step);
+      changeIndex(current);
+    });
+
+
+
     var item = $('<li>').append(link);
 
     if (level > currentLevel) {
@@ -40,12 +59,13 @@
   });
 
   $('#sidebar-index').append(hierarchy[0]);
-
   $('#sidebar-toggle').click(function() {
     $('#sidebar-index').toggleClass('collapsed');
     $('#sidebar-index').hasClass('collapsed') ? $(this).text('<') : $(this).text('>');
   });
+}
 
+function codeCopy(){
   $('pre code').each(function() {
     var button = $('<button>').attr('type', 'button').attr('title','Copy').addClass('copy-button').text('📋');
     $(this).parent().prepend(button);
@@ -76,5 +96,57 @@
       alert('Failed to copy text');
     });
   });
+}
+
+function tutorial(){
+  let steps = $('.step');
+  let currentIndex = 0;
+
+  // Show the first section
+  steps[currentIndex].classList.add('active');
+  $(steps[currentIndex]).parents('.section')[0].classList.add('active');
+
+  let changeIndex= (index)=>{
+    $(steps[currentIndex]).parents('.section')[0].classList.remove('active');
+    steps[currentIndex].classList.remove('active');
+    currentIndex=index;
+    steps[currentIndex].classList.add('active');
+    $(steps[currentIndex]).parents('.section')[0].classList.add('active');
+    if(currentIndex>0){
+      $('button.prev').removeAttr('disabled');
+    }
+    else{
+      $('button.prev').attr('disabled','disabled');
+    }
+    if(currentIndex<steps.length-1){
+      $('button.next').removeAttr('disabled');
+    }
+    else{
+      $('button.next').attr('disabled','disabled');
+    }
+  };
+
+  let movePrev=() => {
+    if (currentIndex > 0) {
+        changeIndex(currentIndex-1);
+    }
+  };
+  let moveNext= () => {
+    if (currentIndex < steps.length - 1) {
+        changeIndex(currentIndex+1);
+      }
+  }
+
+  $('button.prev').each((i,btn)=>btn.addEventListener('click',movePrev,false));
+  $('button.next').each((i,btn)=>btn.addEventListener('click',moveNext,false));
+
+  changeIndex(0);
+
+  hierarchyMenu(steps,changeIndex);
+}
+
+$(document).ready(function() {
+  codeCopy();
+  tutorial();
 });
 </script>

web/_sass/_exercises.scss

@@ -0,0 +1,16 @@
+/* CSS */
+.section {
+    display: none;
+  }
+
+.section.active {
+    display: block;
+}
+
+.step {
+    display: none;
+}
+
+.step.active {
+    display: block;
+}

web/_site/assets/css/custom.css

@@ -17,3 +17,11 @@ pre .copy-button { position: absolute; top: 0; right: 0; padding: 2px 5px; backg
 #sidebar-index a { display: block; margin-bottom: 0.5em; }
 
 @media screen and (max-width: 1200px) { #sidebar-index { display: none; } }
+/* CSS */
+.section { display: none; }
+
+.section.active { display: block; }
+
+.step { display: none; }
+
+.step.active { display: block; }

web/_site/feed.xml

@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.9.0">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2024-05-23T12:12:57+02:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Demos and labs</title><subtitle>Demos of tools and Azure services.</subtitle></feed>
+<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.9.0">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2024-05-23T15:26:28+02:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Demos and labs</title><subtitle>Demos of tools and Azure services.</subtitle></feed>

web/_site/index.html

@@ -43,88 +43,13 @@ <h1 class="post-title">Home</h1>
   </header>
 
   <div class="post-content">
-    <div id="sidebar-index"><button type="button" id="sidebar-toggle">&gt;</button></div>
-
-<p>Here’s a list of all the pages on this site:</p>
+    <p>Here’s a list of all the pages on this site:</p>
 
 <ul>
   <li><a href="/prompt-engineering">Prompt Engineering Hands-on Lab</a></li>
 </ul>
 
 
-
-<!-- _layouts/page.html -->
-
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-<script lang="JavaScript">
-$(document).ready(function() {
-  var hierarchy = [$('<ul>')];
-  var currentLevel = 2;
-
-  var headings = $('.page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6');
-  headings.each(function(i, heading) {
-    var level = parseInt(heading.tagName.slice(1));
-    var id = $(heading).attr('id');
-    var text = $(heading).text();
-    var link = $('<a>').attr('href', '#' + id).text(text);
-    var item = $('<li>').append(link);
-
-    if (level > currentLevel) {
-      var newLevel = $('<ul>');
-      var button = $('<button>').attr('type','button').addClass('collapser').text('+').click(function() {
-        newLevel.toggle();
-        button.text(newLevel.is(':visible') ? '-' : '+');
-      });
-      hierarchy[hierarchy.length - 1].children().last().append(button);
-      hierarchy[hierarchy.length - 1].children().last().append(newLevel);
-      hierarchy.push(newLevel);
-    } else if (level < currentLevel) {
-      hierarchy.pop();
-    }
-
-    hierarchy[hierarchy.length - 1].append(item);
-    currentLevel = level;
-  });
-
-  $('#sidebar-index').append(hierarchy[0]);
-
-  $('#sidebar-toggle').click(function() {
-    $('#sidebar-index').toggleClass('collapsed');
-    $('#sidebar-index').hasClass('collapsed') ? $(this).text('<') : $(this).text('>');
-  });
-
-  $('pre code').each(function() {
-    var button = $('<button>').attr('type', 'button').attr('title','Copy').addClass('copy-button').text('📋');
-    $(this).parent().prepend(button);
-  });
-
-  var message = $('<div>').attr('id', 'copy-message').text('Text copied to clipboard').hide();
-  $('body').append(message);
-
-  $('.copy-button').click(function() {
-    var code = $(this).siblings('code').text();
-    var position = $(this).offset();
-
-    navigator.clipboard.writeText(code).then(function() {
-      // Get the position of the button
-
-      // Set the position of the message
-      $('#copy-message').css({
-        top: position.top + 'px',
-        left: (position.left - $('#copy-message').width()) + 'px'
-      });
-      // Show the message
-      $('#copy-message').fadeIn('slow', function() {
-        // Hide the message after 800 ms
-        $(this).delay(800).fadeOut('slow');
-      });
-    }, function() {
-      // failure
-      alert('Failed to copy text');
-    });
-  });
-});
-</script>
   </div>
 
 </article>