diff --git a/site/layouts/shortcodes/quiz_button.html b/site/layouts/shortcodes/quiz_button.html
index 700c13bd12..ac02105575 100644
--- a/site/layouts/shortcodes/quiz_button.html
+++ b/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>
diff --git a/site/layouts/shortcodes/quiz_instruction.html b/site/layouts/shortcodes/quiz_instruction.html
index b02229e475..53dcea58ac 100644
--- a/site/layouts/shortcodes/quiz_instruction.html
+++ b/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>
diff --git a/site/layouts/shortcodes/quiz_row.html b/site/layouts/shortcodes/quiz_row.html
index c36b739eee..f16fdd96e3 100644
--- a/site/layouts/shortcodes/quiz_row.html
+++ b/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>
diff --git a/site/static/js/quiz.js b/site/static/js/quiz.js
index 68a6e4ce11..6512fac83e 100644
--- a/site/static/js/quiz.js
+++ b/site/static/js/quiz.js
@@ -1,57 +1,97 @@
-function selectQuizOption(selectedId) {
- const currentLevel = selectedId.split('/').length - 1;
- $('.option-row').each(function (i) {
- const rowId = $(this).attr('data-quiz-id');
- // 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
- if ($(this).attr('data-level') < currentLevel) {
- 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'));
+function selectQuizOption(selectedId, autoselect = true) {
+ const currentLevel = selectedId.split("/").length - 1;
+ $(".option-row").each(function (i) {
+ const rowId = $(this).attr("data-quiz-id");
+ // 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
+ if ($(this).attr("data-level") < currentLevel) {
+ 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 && 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 {
- $('.option-button').click(function(e) {
- $(this).parent().find('.option-button').removeClass('active');
- $(this).addClass('active');
- const dataContainerId = $(this).attr('data-quiz-id');
+ try {
+ $(".option-button").click(function (e) {
+ $(this).parent().find(".option-button").removeClass("active");
+ $(this).addClass("active");
+ const dataContainerId = $(this).attr("data-quiz-id");
- selectQuizOption(dataContainerId);
- });
- let userOS = getUserOS();
- if (userOS === 'Mac') {
- // use the name "macOS" to match the button
- userOS = 'macOS';
- }
- $('.option-row[data-level=0]').removeClass('hide');
- // 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");
- }
+ const url = new URL(window.location);
+ url.searchParams.set("arch", dataContainerId); // Add selectedId as query parameter
+
+ window.history.replaceState({}, document.title, url);
+ // Update the browser's location with the new URL
+
+ selectQuizOption(dataContainerId);
+ });
+ let userOS = getUserOS().toLowerCase();
+ if (userOS === "mac") {
+ // use the name "macos" to match the button
+ userOS = "macos";
}
+ $(".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");
+ }
+ }
}
diff --git a/site/static/js/tabs.js b/site/static/js/tabs.js
index ec09a010b4..b0d72a2137 100644
--- a/site/static/js/tabs.js
+++ b/site/static/js/tabs.js
@@ -1,35 +1,70 @@
/* Tabs JS implementation. Borrowed from Skaffold */
function initTabs() {
- try{
- $('.tab-content').children('.tab-pane').each(function(idx, item) {
- var navTabs = $(this).closest('.code-tabs').children('.nav-tabs'),
- title = escape($(this).attr('title')).replace(/%20/g, ' '),
- os = escape($(this).attr('os') || '');
- navTabs.append('<li class="nav-tab '+os+'"><a href="#" class="nav-tab">'+title+'</a></li>');
+ try {
+ $(".tab-content")
+ .children(".tab-pane")
+ .each(function (idx, item) {
+ var navTabs = $(this).closest(".code-tabs").children(".nav-tabs"),
+ 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() {
- let tabSelector = getTabSelector(this);
- $(this).find('div'+tabSelector).addClass('active');
- })
-
- $('.nav-tabs a').click(function(e){
+ $(".nav-tabs a").click(function (e) {
e.preventDefault();
var tab = $(this).parent(),
- tabIndex = tab.index(),
- tabPanel = $(this).closest('.code-tabs'),
- tabPane = tabPanel.find('.tab-content:first').children('.tab-pane').eq(tabIndex);
- tab.siblings().removeClass('active');
- tabPane.siblings().removeClass('active');
- tab.addClass('active');
- tabPane.addClass('active');
+ tabIndex = tab.index(),
+ tabPanel = $(this).closest(".code-tabs"),
+ tabPane = tabPanel
+ .find(".tab-content:first")
+ .children(".tab-pane")
+ .eq(tabIndex);
+ 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 => {
- let osSelector = '.'+getUserOS();
- let hasMatchingOSTab = $(currElement).find(osSelector).length;
- return hasMatchingOSTab ? osSelector : ':first';
-}
+const getTabSelector = (currElement) => {
+ let osSelector = "." + getUserOS();
+ let hasMatchingOSTab = $(currElement).find(osSelector).length;
+ return hasMatchingOSTab ? osSelector : ":first";
+};
const getUserOS = () => {
- let os = ['Linux', 'Mac', 'Windows'];
- let userAgent = navigator.userAgent;
- for (let currentOS of os) {
- if (userAgent.indexOf(currentOS) !== -1) return currentOS;
- }
- return 'Linux';
-}
+ let os = ["Linux", "Mac", "Windows"];
+ let userAgent = navigator.userAgent;
+ for (let currentOS of os) {
+ if (userAgent.indexOf(currentOS) !== -1) return currentOS;
+ }
+ return "Linux";
+};