UPDATE 2
SITUATION
To prevent access to quiz content until the page is refreshed, I am employing a semi-transparent image with a top-margin off-set.
The following code functions flawlessly on one specific page and only once:
JavaScript
window.addEventListener('DOMContentLoaded', (event) => { //document ready event
const question1Elm = document.querySelector('#question-1');
const question1Clicked = window.localStorage.getItem('question1Clicked');
if (question1Clicked) {
question1Elm.classList.add('quiz-lock-d-none');
} else {
question1Elm.classList.add('quiz-lock');
question1Elm.addEventListener('click', (event) => {
window.localStorage.setItem('question1Clicked', '1')
window.location.reload();
});
}
});
CSS
.quiz-lock img {
margin-top: -235px;
}
.quiz-lock img:hover {
margin-top: -235px;
cursor: pointer;
}
.quiz-lock-d-none {
display: none;
}
HTML
[quiz shortcode]
<span id="question-1" class="quiz-lock">
<img src="images/lock-panel.png" />
</span>
There are 57 sections each with a pre and post quiz. Users can complete multiple sections in one session. The quiz lock functionality needs to work independently for each section page.
I attempted to implement naveen's method for handling multiple elements, resulting in the following code:
window.addEventListener('DOMContentLoaded', (event) => { //document ready event
const question1Elm = document.querySelector('#question-1');
const clickedQuestions = JSOn.parse(localStorage.getItem('clickedQuestions'));
if (question1Clicked) {
question1Elm.classList.add('quiz-lock-d-none');
} else {
question1Elm.classList.add('quiz-lock');
question1Elm.addEventListener('click', (event) => {
window.localStorage.setItem('clickedQuestions', JSON.stringify([1, 3, 5))
window.location.reload();
});
}
});
However, this modification completely disrupts the functionality. It is evident that I have made an error somewhere.
Thank you for your assistance.