gistlib - create a quiz on soccer team crests in javascript

To create a quiz on soccer team crests in JavaScript, you can follow these steps:

Create an array of soccer team crests with their corresponding names.


index.tsx
const teamCrests = [
  {
    image: "man-city.png",
    name: "Manchester City",
  },
  {
    image: "man-united.png",
    name: "Manchester United",
  },
  {
    image: "chelsea.png",
    name: "Chelsea",
  },
  {
    image: "liverpool.png",
    name: "Liverpool",
  },
];
274 chars
19 lines

Shuffle the array so that the order of the team crests is randomized for each user.


index.tsx
function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

const shuffledCrests = shuffle(teamCrests);
240 chars
10 lines

Display the first team crest from the shuffled array along with four possible answers, only one of which is correct.


index.tsx
const firstCrest = shuffledCrests[0];

const quizContainer = document.getElementById("quiz-container");

quizContainer.innerHTML = `
  <div>
    <img src="crests/${firstCrest.image}" alt="${firstCrest.name}">
  </div>
  <div>
    <button>${shuffledCrests[0].name}</button>
    <button>${shuffledCrests[1].name}</button>
    <button>${shuffledCrests[2].name}</button>
    <button>${shuffledCrests[3].name}</button>
  </div>
`;
426 chars
16 lines

Add event listeners to each button that check whether the clicked answer is correct, and display the next team crest from the shuffled array along with four possible answers.


index.tsx
let score = 0;
let index = 0;

quizContainer.addEventListener("click", (event) => {
  if (event.target.tagName === "BUTTON") {
    const selectedName = event.target.innerText;
    const correctName = shuffledCrests[index].name;

    if (selectedName === correctName) {
      score++;
    }

    index++;

    if (index < shuffledCrests.length) {
      const currentCrest = shuffledCrests[index];

      quizContainer.innerHTML = `
        <div>
          <img src="crests/${currentCrest.image}" alt="${currentCrest.name}">
        </div>
        <div>
          <button>${shuffledCrests[index].name}</button>
          <button>${shuffledCrests[index + 1].name}</button>
          <button>${shuffledCrests[index + 2].name}</button>
          <button>${shuffledCrests[index + 3].name}</button>
        </div>
      `;
    } else {
      quizContainer.innerHTML = `
        <h2>Your score is ${score}/${shuffledCrests.length}!</h2>
        <button onClick="location.reload()">Try again!</button>
      `;
    }
  }
});
1016 chars
37 lines

Style the HTML elements with CSS to make the quiz visually appealing.


#quiz-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

img {
  max-width: 100%;
  max-height: 300px;
  margin-bottom: 20px;
}

button {
  margin: 10px;
  padding: 10px;
  width: 200px;
  border-radius: 5px;
  border: none;
  background-color: #4285f4;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  background-color: #3367d6;
}

button:active {
  background-color: #2c5bae;
}
478 chars
34 lines

With these steps, you can create a simple quiz on soccer team crests in JavaScript.

create a quiz on soccer team crests in javascript

similar javascript code snippets

related categories