<!DOCTYPE html>
<html>
<head>
<!-- Title of the HTML document -->
<title>NHL Standings Quiz</title>
<!-- CSS styling for the HTML document -->
<style>
/* Styling for the body element */
body {
display: flex; /* Makes the body a flex container */
flex-direction: column; /* Sets the direction of the flex items (children of body in this case) to a column (vertical) */
align-items: center; /* Aligns the flex items to the center horizontally */
justify-content: flex-start; /* Aligns the flex items at the start vertically */
height: 100vh; /* Makes the height of the body 100% of the viewport's height */
margin: 0; /* Removes default margins */
padding: 0; /* Removes default padding */
background-color: #f0f0f0; /* Sets the background color of the body */
font-family: Arial, sans-serif; /* Sets the font of the body text */
}
/* Styling for the elements with class 'quiz-container' */
.quiz-container {
display: flex;
flex-direction: column;
align-items: center;
position: fixed; /* Makes the quiz container stay at a fixed place in the viewport */
top: 20px; /* Sets the distance from the top of the viewport to the quiz container to 20px */
}
/* Styling for the elements with class 'team-button' */
.team-button {
padding: 20px;
margin: 10px;
font-size: 24px;
cursor: pointer; /* Changes the mouse cursor when hovering over a team button */
border: none;
background-color: #4CAF50;
color: white;
text-align: center;
border-radius: 10px; /* Makes the corners of the team buttons rounded */
transition: background-color 0.3s ease; /* Makes the background color change smoothly when hovering over a team button */
}
/* Changes the background color of a team button when it's hovered over */
.team-button:hover {
background-color: #45a049;
}
/* Styling for the elements with class 'standings-container' */
.standings-container {
margin-top: 330px;
width: 200px;
text-align: left;
overflow-y: auto; /* Allows scrolling vertically if the content is too long to fit within the container */
height: calc(100vh - 200px); /* Sets the height of the standings container to the height of the viewport minus 200px */
}
/* Styling for the element with id 'feedback' */
#feedback {
color: red;
font-weight: bold; /* Makes the feedback text bold */
}
/* Styling for h1 and h2 elements */
h1, h2 {
text-align: center; /* Centers the text within these elements */
}
</style>
</head>
<body>
<!-- The container for the quiz -->
<div class="quiz-container">
<!-- The title of the quiz -->
<h1>NHL Standings Quiz</h1>
<!-- Two team buttons. When clicked, they call the 'selectTeam' function with either 0 or 1 as argument -->
<p id="team1" class="team-button" onclick="selectTeam(0)">Loading...</p>
<p id="team2" class="team-button" onclick="selectTeam(1)">Loading...</p>
<!-- The element that will contain the feedback for the user -->
<p id="feedback"></p>
</div>
<!-- The container for the standings -->
<div class="standings-container">
<!-- The title of the standings list -->
<h2>Standings:</h2>
<!-- The ordered list that will contain the standings -->
<ol id="standings"></ol>
</div>
</body>
</html>
<script>
/* An array containing the NHL standings */
var standings = [
'Boston',
'Carolina',
'New Jersey',
// ...
'Anaheim'
];
/* Variables to keep track of the current quiz state */
var currentIndex = 0; /* The index of the current team */
var remainingTeams = [...standings]; /* A copy of the standings array to keep track of the remaining teams */
var correctIndex = 0; /* The index of the correct team */
/* Function to load two teams into the quiz */
function loadTeams() {
if (currentIndex < standings.length) {
/* Choosing a random team from the remaining teams that isn't the correct one */
var randomWrongIndex = Math.floor(Math.random() * remainingTeams.length);
/* Deciding randomly which team button will be the correct one */
correctIndex = Math.random() < 0.5 ? 0 : 1;
/* Setting the correct team button's text to the correct team's name */
document.getElementById("team" + (correctIndex + 1)).innerText = standings[currentIndex];
/* Setting the other team button's text to the wrong team's name */
document.getElementById("team" + ((correctIndex + 1) % 2 + 1)).innerText = remainingTeams[randomWrongIndex];
/* Clearing the feedback text */
document.getElementById("feedback").innerText = "";
} else {
/* If all teams have been through, show a completion alert */
alert("Quiz complete!");
}
}
/* Function to handle the selection of a team */
function selectTeam(index) {
if (index === correctIndex) {
/* If the correct team button was clicked, remove that team from the list of remaining teams */
var correctTeam = standings[currentIndex];
remainingTeams = remainingTeams.filter(function(team) {
return team !== correctTeam;
});
/* Move on to the next team and load new teams */
currentIndex += 1;
loadTeams();
} else {
/* If the wrong team button was clicked, show a feedback message */
document.getElementById("feedback").innerText = "Try again!";
}
/* Update the displayed standings */
updateStandings();
}
/* Function to update the displayed standings */
function updateStandings() {
var standingsList = document.getElementById("standings");
standingsList.innerHTML = ""; /* Clear the current standings */
/* For each team that has been through the quiz, add a list item to the standings list */
for (var i = 0; i < currentIndex; i++) {
var listItem = document.createElement("li");
listItem.innerText = standings[i];
standingsList.appendChild(listItem);
}
}
/* Load the initial teams when the page loads */
loadTeams();
</script>
</body>
</html>
