Is there an effective method for page navigation in HTML based on previous choices?

Question

I am learning HTML and want to make a website. I had a question about navigation and I attached a picture for reference.

Basically, my menu will give user some choices (A and B). As a generic example, let's say this is a tutoring website that asks how the user wants to learn. A is video learning and B is reading tutorial learning. No matter the choice, they will navigate to the options page. In this case, it can ask what subject they would like to learn. 1 can be Science, 2 can be Math, 3 can be English. Then, based on the choice from the menu page, they navigate to one of the landing pages. So, A1 would be video science lessons while A2 would be video math lessons and A3 would be video English lessons. My question is: is it possible to have only one options page and navigate to one of the landing pages by using if statements that saved the user's selection of A or B from the menu page?

score 0 · Answer 1 · answered Jun 27 '20 at 18:08

Maybe you meant by different html page then you can use a href. Using jQuery rather than javaScript.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
<div class="menu">
<button id="button-A">Choose A</button>
<button id="button-B">Choose B</button>
</div>
<div class="options">
<button id="button-1">Choose 1</button>
<button id="button-2">Choose 2</button>
<button id="button-3">Choose 3</button>
</div>
<div class="landing">
<span id="A-1">This is A 1</span>
<span id="A-2">This is A 2</span>
<span id="A-3">This is A 3</span>
<span id="B-1">This is B 1</span>
<span id="B-2">This is B 2</span>
<span id="B-3">This is B 3</span>

At Script (here is only button A and button 1):

// Button A-B
$('#button-A').click(function(){ // When button A is clicked,
localStorage.setItem('optionAorB' , 'A'); // Save the value of "optionAorB" to local storage, as "A"
$('.options').fadeIn(); // Show the options from first option,
$('.menu').fadeOut();
});
// Button 1-2-3
$('#button-1').click(function(){
var destination = localStorage.getItem('optionAorB'); // Load the value either it’s "A" or "B"
$('.menu').hide();
if (destination == 'A'){$('#A-1').css('display', 'block');} // Show specific landing page 1, if it’s A,
else {$('#B-1').css('display', 'block');} // If it’s B
});

While in CSS (style):

.menu, .options{
height: 100%;
width: 100%;
margin: 0;
display: block;
position: relative;
}

.options{display: none}

#A-1, #A-2, #A-3, #B-1, #B-2, #B-3{
background: #9C3535;
color: #B4BD90;
min-height: 20px;
width: 80%;
margin: 10%;
display: none;
position: relative;
}

#B-1, #B-2, B-3{
filter: hue-rotate(180deg);
}

Yes, I am using different HTML pages. So after pressing href A or B, it would lead to another page that has href 1, 2, and 3. Then, it would navigate to one of the landing pages accordingly. Can you teach me how to do that? — Kobe Zheng, Jun 28 '20 at 15:13

Woobie · Accepted Answer · 2020-06-29T09:36:01.940

Updated example,

In the starting page:

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="example.css" />
    <style>
    *, *:after, *::before{box-sizing: border-box;tap-highlight-color: rgba(0,0,0,0);tap-highlight-color: transparent;touch-callout: none;focus-ring-color:rgba(0,0,0,0);user-select: none;outline: none;text-decoration: none;}
    html, body{background: #EEE;color: #333;font: normal 15px Arial;line-height: 1.4;min-height: 100vh;width: 100vw;padding: 4vw;margin: 0;display: flex;position: relative;flex-direction: column;align-items: center;justify-content: space-around;z-index: 0;}
    main{background: #EEE;color: #333;min-height: 80px;width: 80%;padding: 4vw;margin: 0;display: flex;position: relative;flex-direction: column;align-items: center;justify-content: space-around;z-index: 1;border: 4px double #777;border-radius: 8px;}
    h2{font-size: 26px;}
    p{font-size: 18px;}
    .buttons-container{background: #EEE;color: #333;min-height: 98px;width: 100%;display: flex;display: box;position: relative;align-items: center;flex-direction: column;justify-content: space-between;z-index: 2;}
    a{background: #444;color: #EEE;font: bold 16px Arial;text-align: center;line-height: 38px;height: 40px;width: 70%;margin: 0;display: block;position: relative;border: 2px solid #777;border-radius: 8px;}
    </style>

    <script src="example.js"></script>

    <!-- Script below is not needed, it’s only for testing the variable, load the script at "body" onload then print the saved variable at div "#print-saved-value" -->
    <!-- Session Storage is for temporary store until user’s browser is closed -->
    <!-- Local Storage is for lasting store even after user’s browser is closed -->
    <script>
    function printingAorB(){
    if (typeof(Storage) !== "undefined"){
    localStorage.getItem("userChoice");
    if (localStorage.userChoice === "isA"){document.getElementById("print-saved-value").innerHTML = "User choose A";} 
    else if (localStorage.userChoice === "B"){document.getElementById("print-saved-value").innerHTML = "User choose B";} 
    else {document.getElementById("print-saved-value").innerHTML = "Choice is blank";}
    }
    }
    </script>

    </head>

    <body onload="printingAorB()">
    <main>
    <h2>The Start Page</h2>
    <hr/>
    <p>Below are option A and B. By clicking a link, the link will saving either variable "isA" or "B" and open "index2.html" page.<br><br><span style="color:#777">Session Storage is for temporary store until user’s browser is closed, while Local Storage is for lasting store even after user’s browser is closed.</span></p>
    <div class="buttons-container">
    <!-- Saving the variable to be used for next session, the index2.html -->
    <a onclick="localStorage.setItem('userChoice', 'isA');" href="index2.html">A is good</a>
    <a onclick="localStorage.setItem('userChoice', 'B');" href="index2.html">B is not bad</a>
    </div>
    <div id="print-saved-value"></div>
    </main>
    </body>
    </html>

Then the page before the destination, say it is "index2.html",

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <style>*, *:after, *::before{box-sizing: border-box;tap-highlight-color: rgba(0,0,0,0);tap-highlight-color: transparent;touch-callout: none;focus-ring-color:rgba(0,0,0,0);user-select: none;outline: none;text-decoration: none;}html, body{background: #EEE;color: #333;font: normal 15px Arial;line-height: 1.4;min-height: 100vh;width: 100vw;padding: 4vw;margin: 0;display: flex;position: relative;flex-direction: column;align-items: center;justify-content: space-around;z-index: 0;}main{background: #EEE;color: #333;min-height: 80px;width: 80%;padding: 4vw;margin: 0;display: flex;position: relative;flex-direction: column;align-items: center;justify-content: space-around;z-index: 1;border: 4px double #777;border-radius: 8px;}h2{font-size: 26px;}p{font-size: 18px;}.buttons-container{background: #EEE;color: #333;min-height: 98px;width: 100%;display: flex;display: box;position: relative;align-items: center;flex-direction: column;justify-content: space-between;z-index: 2;}a{background: #444;color: #EEE;font: bold 16px Arial;text-align: center;line-height: 38px;height: 40px;width: 70%;margin: 0;display: block;position: relative;border: 2px solid #777;border-radius: 8px;}</style>
    <!-- Script is loaded at body onload but can be placed at page’s bottom. Used by Version 1. -->
    <script>
    /* Version 1: load the saved variable then changing the landing page href based on the saved data. */
    function changeLinks(){

    /* Button/choice 1 */
    document.getElementById("choice-1").onclick = function(){
    localStorage.getItem("userChoice");
    var destination1 = document.getElementById("choice-1");
    if (localStorage.userChoice === "isA"){
    destination1.setAttribute("href", "page_1_a.html");
    } else {destination1.setAttribute("href", "page_1_b.html");
    } return false;
    }

    /* Button/choice 2 */
    document.getElementById("choice-2").onclick = function(){
    localStorage.getItem("userChoice");
    var destination2 = document.getElementById("choice-2");
    if (localStorage.userChoice === "isA"){
    destination2.setAttribute("onclick", "location.href='page_2_a.html'");
    } else {destination2.setAttribute("onclick", "location.href='page_2_b.html'");
    } return false;
    }

    }
    </script>

    </head> 
    <body onload="changeLinks()">
    <main>
    <h2>The Bridge Version 1</h2>
    <hr/>
    <p>Below are Choice 1 to 2 (before 3 and the rest). The landing pages for this will be like: page_1_a.html, page_1_b.html, page_2_a.html, and so on...</p>
    <div class="buttons-container">
    <a id="choice-1">Choice 1</a>
    <a id="choice-2">Choice 2</a>
    </div>
    </main>
    
    <main>
    <h2>The Bridge Version 2</h2>
    <hr/>
    <p>Below are Choice 1 to 2 (before 3 to the rest). The script at landing pages will determine either is it A or B.</p>
    <div class="buttons-container">
    <a id="choice-1" href="page_1.html">Choice 1</a>
    <a id="choice-2" href="page_2.html">Choice 2</a>
    </div>
    </main>

    </body>
    </html>

And an example of page _1.html , when using 2nd version.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <style>*, *:after, *::before{box-sizing: border-box;tap-highlight-color: rgba(0,0,0,0);tap-highlight-color: transparent;touch-callout: none;focus-ring-color:rgba(0,0,0,0);user-select: none;outline: none;text-decoration: none;}html, body{background: #EEE;color: #333;font: normal 15px Arial;line-height: 1.4;min-height: 100vh;width: 100vw;padding: 4vw;margin: 0;display: flex;position: relative;flex-direction: column;align-items: center;justify-content: space-around;z-index: 0;}main{background: #EEE;color: #333;min-height: 80px;width: 80%;padding: 4vw;margin: 0;display: flex;position: relative;flex-direction: column;align-items: center;justify-content: space-around;z-index: 1;border: 4px double #777;border-radius: 8px;}h2{font-size: 26px;}p{font-size: 18px;}.buttons-container{background: #EEE;color: #333;min-height: 98px;width: 100%;display: flex;display: box;position: relative;align-items: center;flex-direction: column;justify-content: space-between;z-index: 2;}a{background: #444;color: #EEE;font: bold 16px Arial;text-align: center;line-height: 38px;height: 40px;width: 70%;margin: 0;display: block;position: relative;border: 2px solid #777;border-radius: 8px;}</style>
    <!-- Showing content A or content B -->
    <script>
    function determine2ShowingAorB(){
    if (typeof(Storage) !== "undefined"){
    localStorage.getItem("userChoice");
    if (localStorage.userChoice === "isA"){
    document.getElementById("content-a").style.display = "block";
    } else if (localStorage.userChoice === "isA"){
    document.getElementById("content-b").style.display = "block";
    } else {}
    }
    }
    </script>

    <style>
    #content-a, #content-b{display: none;}
    </style>

    </head> 
    <body onload="determine2ShowingAorB()">
    <main>
    <h2>The Landing, Page 1</h2>
    <hr/>
    <p>Below will be content of A or B. If there’s nothing, then the variable is not loaded.</p>
    <div id="content-a">
    <h1>This is content A</h1>
    </div>
    <div id="content-b">
    <h1>This is content B</h1>
    </div>
    </main>
    
    </body>
    </html>

Is there an effective method for page navigation in HTML based on previous choices?

2 Answers2