Here's an explanation of this code in bullet points:

  • The page is built in HTML with CSS styles and JavaScript interactivity.
  • It contains two main sections: a quiz section and a standings section.
  • The quiz section features two buttons, each representing a team in the NHL.
  • The standings section displays a list of the teams based on the quiz progression.

Breaking it down:

  1. HTML

    • The page has a title "NHL Standings Quiz".
    • There are two main div containers: one for the quiz (class="quiz-container") and one for displaying the standings (class="standings-container").
    • In the quiz container, there's a heading and two buttons (using p tags with class team-button) that, when clicked, call a function selectTeam with an argument of 0 or 1.
    • There's also a feedback paragraph with an id="feedback" to provide feedback to the user.
    • The standings container displays an ordered list (ol), with id="standings", which will contain the team standings as list items (li).

  2. CSS

    • The styling is used to create a centered, vertical layout for the page. The background color is set, the font is selected, and the page is made to fit the entire viewport height.
    • The .quiz-container and .standings-container divs are styled to be visually distinguishable and to provide a good user experience.
    • The buttons are styled for a more engaging interface. They have a specified color, size, and cursor style. They also have a hover effect that changes their color when the mouse pointer is over them.

  3. JavaScript

    • The script defines a list of NHL team names in the standings array.
    • It also sets up variables (currentIndex, remainingTeams, correctIndex) to track the state of the quiz.
    • The loadTeams function is used to set the names on the two team buttons. One team is selected randomly from the remaining teams (not including the current team) and the other is the current team. One button is assigned the correct team and the other button the randomly chosen team.
    • The selectTeam function is called when a team button is clicked. If the correct team is selected, the team is removed from the remainingTeams array, and the loadTeams function is called to get the next set of teams. If the wrong team is selected, a feedback message "Try again!" is displayed.
    • The updateStandings function is used to update the displayed standings. It creates a new list item for each team that has been through the quiz and adds it to the standings list.
    • The loadTeams function is called initially when the page loads to start the quiz.