This has been boggling my brain for a few days and no matter how much I research or look at docs it doesn't seem to be easy to resolve as it seems.

I have written a website that is a quiz with 30 questions, I have separated each page to have 5 questions on each HTML page.

I also have an external JS sheet that works with the HTML when it is all on one page however, if I am to make it look neater and keep my 5 questions on each page I need to carry the variable across. At the moment when I click on "next page" that variable is reset back to 0 instead of remembering the score of the previous page.

I would like to be able to call the "score" from the previous page and continue on each subsequent page

Ideally I would also have a way to show the current score on the HTML page as a running total.

I am brand new to the concept of local storage and have only been working on coding for a relatively short time. All the answers I have found online have not been in language I have really understood and though I have tried to replicate the correct outcome I have not been successful, and so I come here to ask you wonderful people how on earth I can do this without breaking my brain?

I had considered trying to define the variable with global scope but all it suggested I do was change let to var and that didn't seem to work either.

Here is a snippet of code with my score variable and the function updating it.

let score = 0;

// ==========================QUESTION 1=============================================

function check1(){
    let cAns1 = 'Eurythmics';
    let input = document.getElementById("q1").value;
    


if(input.toLowerCase() == cAns1 ) {
    alert("That is correct")
    score++
    alert("You have a total of " + score + " points")
    
}else{
    alert("Incorrect.")
    };
};```

Many thanks for your input everyone