knowledge - rate.html - redirect a link

I have three pages. Ideally, on page 1, I need to click a button to go to page 3. However, it will first go to page 2, then it will let the user rate page 1, and finally, it will automatically go to page 3

To achieve this flow, you can use JavaScript to control the navigation and actions across the three pages. Here is an example approach:

HTML Structure

Create three HTML pages: page1.html, page2.html, and page3.html.

page1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page 1</title>
    <script>
        function goToPage2() {
            // Save the rating for page 1
            localStorage.setItem('page1Rated', 'true');
            // Redirect to page 2
            window.location.href = 'page2.html';
        }
    </script>
</head>
<body>
    <h1>Page 1</h1>
    <button onclick="goToPage2()">Go to Page 3</button>
</body>
</html>

page2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page 2</title>
    <script>
        function ratePage1() {
            // Assume the rating is done here
            // Redirect to page 3 after rating
            window.location.href = 'page3.html';
        }

        window.onload = function() {
            // Check if page 1 was rated
            if (localStorage.getItem('page1Rated') === 'true') {
                ratePage1();
            }
        }
    </script>
</head>
<body>
    <h1>Page 2</h1>
</body>
</html>

page3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page 3</title>
</head>
<body>
    <h1>Page 3</h1>
</body>
</html>

Explanation

Page 1: Contains a button that, when clicked, sets a flag in localStorage to indicate that page 1 has been rated, and then navigates to page 2.
Page 2: On loading, it checks if page 1 has been rated by looking at the flag in localStorage. If the flag is set, it simulates the rating process and automatically navigates to page 3.
Page 3: Simply displays the content of page 3.

This setup ensures that when the user clicks the button on page 1, they are first redirected to page 2 to rate page 1, and then automatically sent to page 3.

r9young / DECO7140-Final-Project