Ways to customize a webpage depending on a visitor's previous interactions with the website

I am new to the world of html/css and my knowledge of javascript is limited, so I'm unsure where to begin with this project. Please forgive me if I misuse any terms! I am currently developing a piece of interactive fiction using html/css, where users will navigate through a town based on hyperlinks embedded in a webpage called places.html. The links direct them to:

  • sheriff.html
  • saloon.html
  • stables.html
  • clocktower.html
  • bank.html
  • store.html

However, I want to incorporate one more webpage, graveyard.html, but only make it visible after the user has visited at least three of the aforementioned webpages. I have looked into using cookies as a solution, but I could only find resources that explain how to change the initial page seen by the user upon visiting. Searching online has not provided me with a suitable solution either. I hope this explanation clarifies my dilemma, and I would greatly appreciate any assistance!

Answer №1

We do not have enough details to provide a functional example.

Include an id and style in your burial ground hyperlink, allowing easy access using JS and the option to hide it until necessary.

<a href="cemetery.html" id="hiddenlink" style="display:none;">Cemetery</a>

Each page must include the following script, which adds the page name to a list stored in localStorage. If there are more than 3 pages in the list, the cemetery link will be visible.

Upon visiting the cemetery page, the list is reset and hidden again. (optional)

document.addEventListener("DOMContentLoaded", () => {
    let page = window.location.pathname.split('/').pop()
    let list = JSON.parse(localStorage.getItem("list") || "[]")
    if (!list.includes(page)) { 
        list.push(page)
        localStorage.setItem("list", JSON.stringify(list))
    }
    if (list.length > 3) {
        document.getElementById("hiddenlink").style.display="block"
    }
    if (page == "cemetery.html") {
        localStorage.setItem("list", "[]")
    }
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to pass the "getjson" capability from one function to another in a seamless manner?

Currently, I am dealing with a situation where a getjson call is used to retrieve a large amount of data. However, I find myself constantly having to check if the data is null or not. Here is an example: if (data.Height == "") { $(&ap ...

Tips for preserving a blob file and utilizing it with wavesurfer

I'm currently developing a chat platform that allows users to send audio messages. During the development process, I encountered some challenges when trying to create blobs using react-mic. I'm wondering if it's possible to stringify the b ...

Personalized scrollbar extends beyond the screen

I have been working on creating my own scroll bar, and for the most part, it's functioning well. However, there is one small issue that I'm facing. Whenever I reach the bottom of the page, the handle of the scroll bar disappears underneath the v ...

Eradicate HTML by assigning empty values to certain attributes

Allowing the user to copy the HTML code of a div by clicking a button. Some attributes, such as for videos: <video loop muted autoplay> may appear like this after copying: <video loop="" muted="" autoplay=""> The ...

Ways to avoid CSS caching on a website

As I dive into the world of developing xhtml and css web pages, I find myself constantly making changes to my CSS. However, these changes often don't reflect on the page due to browser caching. When I manually clear the cache, I can see the latest eff ...

Attempting to adjust the width upon hovering with CSS

I have attempted this previously and cannot figure out why it is not functioning properly. I am attempting to do the following: http://jsfiddle.net/geometron/u3M6r/1/ <ul> <li><a href="content1.html"> Demo 1 </a></li> ...

I have a dynamic blog site that is generated on the fly using Ajax, making the content unsearchable

I have a blog website that is created dynamically using Ajax (XMLHttpRequest) and the HTML History API. One issue I am facing is that my content is not searchable by search engines like Googlebot. I know that Google is now able to analyze such sites, but w ...

Emails not getting sent by Nodemailer following a Stripe payment charge that was successful

Having some trouble sending an email to myself after a Stripe purchase. I have both personal and business emails set up, but it's not working as expected. I'm new to node.js and struggling to understand why. I thought adding the code as an argum ...

Each click on Named Window in window.open results in the opening of a new window

Whenever I use window.open() to launch a new window, clicking the button creates a new browser instance each time, even if the function specifies a named window. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &l ...

Utilize the `npm ls somepackage` command to adhere to version range specifications

I need to utilize npm ls to pinpoint the source of security warnings. Reference to the documentation states that: Positional arguments consist of name@version-range identifiers, which will restrict the outcomes to only the paths leading to the specified ...

Preventing users from clicking on links unless they double click by using CSS rotation

I'm struggling to figure out why only the white portion of my links is clickable. The links are designed as "3D" buttons using CSS rotate transitions, but I can't seem to fix the issue. Any assistance would be greatly appreciated! Check out the ...

Error during minification process for file opentok.js at line 1310: react-scripts build

I encountered an error while trying to minify the code in my React project using npm run build. The snippet below seems to be the cause of the issue. Any suggestions on how I can resolve this problem? const createLogger = memoize(namespace => { /** ...

What is the best way to populate an observable using query parameters?

I am currently working on an ASP.NET/MVC application and have a requirement to populate a Knockout observable with a value passed through the URL. For example, if I need to open the following page: http://example.com/Controller/Action?param=test I want t ...

Using PHP and MySQL to display various data on an HTML table

I need to convert integer values in a table display to words like "yes" or "no". For example, my query will show Product ID and Product completion which are stored as 1 or 0. Instead of displaying 1 or 0, I want to show "yes" or "no" respectively in the ta ...

What causes an image background to take precedence over the background color of Bootstrap buttons?

Why is the CSS overriding the bootstrap button background styling and making it transparent instead of the default color? For example, if I have a button with the following styling in my document that sets the background-image of the entire body to an ima ...

Modifying the background color of a div with ng-click functionality

Having trouble changing the background color of a div that is already styled with white for odd elements and grey for even elements. I'm not sure why it's not working in Jsfiddle. The div also has an ng-click attribute that I haven't include ...

Converting HTML files to PDF documents using dompdf

After downloading dompdf from GitHub and extracting it onto my webserver, I encountered an error (I'm using Windows). I also attempted a solution but it did not resolve the issue. define('DOMPDF_ENABLE_AUTOLOAD', false); <br /&g ...

Incorporating a dynamic variable into HTML using a separate C# class

In my ASP.NET framework, I am looking to personalize the paragraph text on the welcome page for users after they log in. Currently, the code has the following paragraph: <p> Welcome to the website! </p> What I want is to include their logi ...

Looking to dictate which image is displayed when sharing a webpage on social media or mobile devices?

I am managing an e-commerce website and I'm looking for a way to choose which image appears when users share my product description. The product description page includes a gallery of product images and an aside section with related products. The iss ...

Tips for personalizing a jQuery Mobile popup

Is there a way to customize the appearance of a dialog box using CSS? I've been struggling with my attempts so far... <div data-role="dialog" id="confirm-clear" class="dialog-custom" > <div data-role="content" > <p>Some ...