I created JavaScript quizzes for my users to complete. Once they click the finished button at the end of the quiz, I want to highlight the box on the home page with a green outline to indicate completion. The complete button is located on the challenge1.html page, and I aim to outline the item in the grid on home.html. Can someone provide guidance on how to achieve this?
Files: home.html, challenge1.html, home.css, challenge1.css, and quiz.js
home.html
<div class="grid-container">
<a href="challenge1.html"><div class="grid-item item1">1. Discover HTML Basics and Tags</div></a>
<a href="challenge2.html"><div class="grid-item item2">2. Styling HTML with Tags</div></a>
<a href="challenge3.html" class="grid-item item3"><div>3. Creating Links and Images</div></a>
<a href="challenge4.html"><div class="grid-item item4">4. Building Features</div></a>
<a href="challenge5.html"><div class="grid-item item5">5. Building Lists</div></a>
</div>
challenge1.html
<div class="container">
<div id="question-container" class="hide">
<div id="question">Question</div>
<div id="answer-buttons" class="btn-grid">
<button class="btn">Answer 1</button>
<button class="btn">Answer 2</button>
<button class="btn">Answer 3</button>
<button class="btn">Answer 4</button>
</div>
</div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start</button>
<button id="next-btn" class="next-btn btn hide">Next</button>
<a href="home.html"><button id="complete-btn" class="complete-btn btn hide">Complete</button></a>
</div>
</div>
home.css
.grid-container {
display: grid;
margin-top: 30px;
grid-gap: 10px;
background-color: #FFFFFF;
padding: 10px;
}
.grid-container3 {
display: grid;
margin-top: 30px;
grid-gap: 10px;
background-color: #FFFFFF;
padding: 10px;
margin-bottom: 100px;
}
.grid-item {
background-color: #E26CBA;
padding: 20px;
font-size: 20px;
border-radius: 20px;
font-family: 'Poppins', sans-serif;
color: #3F0068;
}
.item3 {
grid-column: 1 / span 2;
grid-row: 2;
}
challenge.css
*, *::before, *::after {
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
:root {
--hue-neutral: 200;
--hue-wrong: 0;
--hue-correct: 145;
}
...
quiz.JS
...