made tabs view linkable

site/layouts/shortcodes/quiz_button.html

@@ -1 +1 @@
-<button data-quiz-id="{{ .Parent.Get "base" }}/{{ .Get "option" }}" type="button" class="btn btn-outline-primary option-button{{ if eq (.Get "hide") "true" }} hide{{ end }}">{{ .Get "option" }}</button>
+<button data-quiz-id="{{ .Parent.Get "base" |  lower }}/{{ .Get "option" | lower}}" type="button" class="btn btn-outline-primary option-button{{ if eq (.Get "hide") "true" }} hide{{ end }}">{{ .Get "option" }}</button>

site/layouts/shortcodes/quiz_instruction.html

@@ -6,7 +6,7 @@
 {{ $release := index $selected 3 }}
 {{ $installer := index $selected 4 }}
 
-<div data-quiz-id="{{ with .Get "id"}}{{.}}{{end}}" class="quiz-instruction">
+<div data-quiz-id="{{ with .Get "id" | lower }}{{.}}{{end}}" class="quiz-instruction">
 <p>To install the latest minikube <b>{{ lower $release }}</b> release on <b>{{ $arch }}</b> <b>{{ $os }}</b> using <b>{{ replace $installer "Binary" "binary" }}</b>:</p>
 {{ .Inner }}
 </div>

site/layouts/shortcodes/quiz_row.html

@@ -1,6 +1,6 @@
 {{ $level := .Get "base" | strings.Count "/" }}
 
-<div data-quiz-id="{{ .Get "base" }}" data-level="{{ $level }}" class="row option-row hide">
+<div data-quiz-id="{{ .Get "base" | lower}}" data-level="{{ $level }}" class="row option-row hide">
     <div class="col-lg-2 my-auto">
         <p>{{ with .Get "name"}}{{.}}{{end}}</p>
     </div>

site/static/js/quiz.js

@@ -1,57 +1,99 @@
-function selectQuizOption(selectedId) {
+function selectQuizOption(selectedId, autoselect = true) {
-    const currentLevel = selectedId.split('/').length - 1;
+  const currentLevel = selectedId.split("/").length - 1;
-    $('.option-row').each(function (i) {
+  $(".option-row").each(function (i) {
-        const rowId = $(this).attr('data-quiz-id');
+    const rowId = $(this).attr("data-quiz-id");
-        // don't hide option rows if it has a lower level
+    // don't hide option rows if it has a lower level
-        // e.g. when clicking "x86_64" under Linux, we don't want to hide the operating system row
+    // e.g. when clicking "x86_64" under Linux, we don't want to hide the operating system row
-        if ($(this).attr('data-level') < currentLevel) {
+    if ($(this).attr("data-level") < currentLevel) {
-            return;
+      return;
-        }
-        if (rowId === selectedId) {
-            $(this).removeClass('hide');
-            $(this).find('.option-button').removeClass('active');
-            return;
-        }
-        // hide all other option rows
-        $(this).addClass('hide');
-    });
-    // hide other answers
-    $('.quiz-instruction').addClass('hide');
-    // show the selected answer
-    $('.quiz-instruction[data-quiz-id=\'' + selectedId + '\']').removeClass('hide');
-
-    const buttons = $('.option-row[data-quiz-id=\'' + selectedId + '\']').find('.option-button');
-    // auto-select the first option for the user, to reduce the number of clicks
-    if (buttons.length > 0) {
-        const btn = buttons.first();
-        btn.addClass('active');
-        selectQuizOption(btn.attr('data-quiz-id'));
     }
+    if (rowId === selectedId) {
+      $(this).removeClass("hide");
+      $(this).find(".option-button").removeClass("active");
+      return;
+    }
+    // hide all other option rows
+    $(this).addClass("hide");
+  });
+  // hide other answers
+  $(".quiz-instruction").addClass("hide");
+  // show the selected answer
+  $(".quiz-instruction[data-quiz-id='" + selectedId + "']").removeClass("hide");
+
+  const buttons = $(".option-row[data-quiz-id='" + selectedId + "']").find(
+    ".option-button"
+  );
+  //auto-select the first option for the user, to reduce the number of clicks
+  if (buttons.length > 0) {
+    if (autoselect) {
+      const btn = buttons.first();
+      const dataContainerId = btn.attr("data-quiz-id");
+      btn.addClass("active");
+      const url = new URL(window.location);
+      url.searchParams.set("arch", dataContainerId); // Add selectedId as query parameter
+
+      // Update the browser's location with the new URL
+      window.history.replaceState({}, document.title, url);
+
+      selectQuizOption(dataContainerId);
+    }
+  }
 }
 
 function initQuiz() {
-    try {
+  try {
-        $('.option-button').click(function(e) {
+    $(".option-button").click(function (e) {
-            $(this).parent().find('.option-button').removeClass('active');
+      $(this).parent().find(".option-button").removeClass("active");
-            $(this).addClass('active');
+      $(this).addClass("active");
-            const dataContainerId = $(this).attr('data-quiz-id');
+      const dataContainerId = $(this).attr("data-quiz-id");
 
-            selectQuizOption(dataContainerId);
+      const url = new URL(window.location);
-        });
+      url.searchParams.set("arch", dataContainerId); // Add selectedId as query parameter
-        let userOS = getUserOS();
+
-        if (userOS === 'Mac') {
+      window.history.replaceState({}, document.title, url);
-            // use the name "macOS" to match the button
+      // Update the browser's location with the new URL
-            userOS = 'macOS';
+
-        }
+      selectQuizOption(dataContainerId);
-        $('.option-row[data-level=0]').removeClass('hide');
+    });
-        // auto-select the OS for user
+    let userOS = getUserOS().toLowerCase();
-        const btn = $('.option-button[data-quiz-id=\'/' + userOS + '\']').first();
+    if (userOS === "Mac") {
-        btn.addClass('active');
+      // use the name "macos" to match the button
-        selectQuizOption(btn.attr('data-quiz-id'));
+      userOS = "macos";
-    } catch(e) {
-        const elements = document.getElementsByClassName("quiz-instruction");
-        for (let element of elements) {
-            element.classList.remove("hide");
-        }
     }
+    $(".option-row[data-level=0]").removeClass("hide");
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const archParam = urlParams.get("arch");
+
+    //checks for query params and process each option one by one
+
+    if (archParam) {
+      const options = archParam.split("/").filter(Boolean);
+      let quizId = "";
+      options.forEach((option, index) => {
+        quizId = quizId + "/" + option;
+        const archBtn = $(
+          ".option-button[data-quiz-id='" + quizId + "']"
+        ).first();
+        archBtn.addClass("active");
+
+        // passes false as argument when there are more options to process to prevent auto selection of 1st option in following options
+        if (index === option.length - 1) {
+          selectQuizOption(archBtn.attr("data-quiz-id"));
+        } else {
+          selectQuizOption(archBtn.attr("data-quiz-id"), false);
+        }
+      });
+    } else {
+      // auto-select the OS for user
+      const btn = $(".option-button[data-quiz-id='/" + userOS + "']").first();
+      btn.addClass("active");
+      selectQuizOption(btn.attr("data-quiz-id"));
+    }
+  } catch (e) {
+    const elements = document.getElementsByClassName("quiz-instruction");
+    for (let element of elements) {
+      element.classList.remove("hide");
+    }
+  }
 }

site/static/js/tabs.js

@@ -1,35 +1,70 @@
 /* Tabs JS implementation. Borrowed from Skaffold */
 function initTabs() {
-  try{
+  try {
-    $('.tab-content').children('.tab-pane').each(function(idx, item) {
+    $(".tab-content")
-      var navTabs = $(this).closest('.code-tabs').children('.nav-tabs'),
+      .children(".tab-pane")
-          title = escape($(this).attr('title')).replace(/%20/g, ' '),
+      .each(function (idx, item) {
-          os = escape($(this).attr('os') || '');
+        var navTabs = $(this).closest(".code-tabs").children(".nav-tabs"),
-      navTabs.append('<li class="nav-tab '+os+'"><a href="#" class="nav-tab">'+title+'</a></li>');
+          title = escape($(this).attr("title")).replace(/%20/g, " "),
+          os = escape($(this).attr("os") || "");
+        navTabs.append(
+          '<li class="nav-tab ' +
+            os +
+            '"><a href="#' +
+            title +
+            '" class="nav-tab">' +
+            title +
+            "</a></li>"
+        );
+      });
+
+    $(".code-tabs ul.nav-tabs").each(function () {
+      let tabSelector = getTabSelector(this);
+      $(this)
+        .find("li" + tabSelector)
+        .addClass("active");
     });
 
-    $('.code-tabs ul.nav-tabs').each(function() {
+    $(".code-tabs .tab-content").each(function () {
       let tabSelector = getTabSelector(this);
-      $(this).find('li'+tabSelector).addClass('active');
+      $(this)
+        .find("div" + tabSelector)
+        .addClass("active");
     });
 
-    $('.code-tabs .tab-content').each(function() {
+    $(".nav-tabs a").click(function (e) {
-      let tabSelector = getTabSelector(this);
-      $(this).find('div'+tabSelector).addClass('active');
-    })
-
-    $('.nav-tabs a').click(function(e){
       e.preventDefault();
       var tab = $(this).parent(),
-          tabIndex = tab.index(),
+        tabIndex = tab.index(),
-          tabPanel = $(this).closest('.code-tabs'),
+        tabPanel = $(this).closest(".code-tabs"),
-          tabPane = tabPanel.find('.tab-content:first').children('.tab-pane').eq(tabIndex);
+        tabPane = tabPanel
-      tab.siblings().removeClass('active');
+          .find(".tab-content:first")
-      tabPane.siblings().removeClass('active');
+          .children(".tab-pane")
-      tab.addClass('active');
+          .eq(tabIndex);
-      tabPane.addClass('active');
+      tab.siblings().removeClass("active");
+      tabPane.siblings().removeClass("active");
+      tab.addClass("active");
+      tabPane.addClass("active");
+
+      // changes the anchor in the url
+      var tabTitle = $(this).attr("href");
+      window.location.hash = tabTitle;
     });
-  } catch(e) {
+
+    const hash = window.location.hash;
+
+    // checks for anchor in the url and simulate anchor click to see the particular tab
+    if (hash) {
+      const tabTitle = unescape(hash.replace("#", ""));
+      const tab = $(".nav-tabs a[href='#" + tabTitle + "']");
+      tab.click(); // Trigger click to activate the tab
+    }
+    const url = new URL(window.location);
+    if (url.pathname === "/docs/handbook/addons/ingress-dns/") {
+      url.hash = getUserOS();
+      window.history.replaceState({}, document.title, url);
+    }
+  } catch (e) {
     const elements = document.getElementsByClassName("tab-pane");
     for (let element of elements) {
       element.style.display = "block";
@@ -41,17 +76,17 @@ function initTabs() {
   }
 }
 
-const getTabSelector = currElement => {
+const getTabSelector = (currElement) => {
-    let osSelector = '.'+getUserOS();
+  let osSelector = "." + getUserOS();
-    let hasMatchingOSTab = $(currElement).find(osSelector).length;
+  let hasMatchingOSTab = $(currElement).find(osSelector).length;
-    return hasMatchingOSTab ? osSelector : ':first';
+  return hasMatchingOSTab ? osSelector : ":first";
-}
+};
 
 const getUserOS = () => {
-    let os = ['Linux', 'Mac', 'Windows'];
+  let os = ["Linux", "Mac", "Windows"];
-    let userAgent = navigator.userAgent;
+  let userAgent = navigator.userAgent;
-    for (let currentOS of os) {
+  for (let currentOS of os) {
-      if (userAgent.indexOf(currentOS) !== -1) return currentOS;
+    if (userAgent.indexOf(currentOS) !== -1) return currentOS;
-    }
+  }
-    return 'Linux';
+  return "Linux";
-}
+};