DHLeitfaden.eu

Educational explanation of the code

Code Structure: Overview

This project is an interactive quiz game based on a spinning wheel, which randomly selects a category (e.g., History, Art, etc.). After each spin, the user is presented with a multiple-choice question.

The code is made of three main parts:

Language	Main Purpose
HTML	Defines the structure of the webpage and game elements
CSS	Handles the visual appearance, layout, colors, and animations
JavaScript	Controls game logic: wheel spin, questions, answers, and scoring

---

HTML – Page Structure

1. Header:

<header>🎓 Humanistic Journey – Interactive Wheel</header>

• Displays the title of the game at the top with a styled background.

2. Wheel and Button:

<div class="wheel" id="wheel">
  <button class="spin-btn" id="spin-btn">Spin the Wheel</button>
</div>

• A circular element visually representing the spinning wheel.
• The central button “Spin the Wheel” starts the spin animation.

3. Question Section:

<div id="question">Loading question...</div>
<div class="answers" id="answers"></div>
<div id="score">Score: 0</div>

• question: Displays the current question.
• answers: Holds the multiple-choice answer buttons.
• score: Displays the player’s current score.

---

CSS – Styling and Layout

1. Interactive Wheel Using a Gradient:

css.wheel {
  background-image: conic-gradient(...);
}

• Uses conic-gradient() to divide the wheel into colorful sectors—visually mimicking a game wheel.

2. Button Hover Effect:

.answers button:hover {
  background-color: var(--accent);
  color: #000;
}

• When a user hovers over an answer button, it changes color to indicate interactivity.

3. Answer Feedback Colors:

.correct {
  background-color: #a2e58c;
}
.wrong {
  background-color: #f28b82;
}

• Highlights the answer button in green if correct, or red if incorrect.

---

JavaScript – Game Logic

1. Question Categories and Answers:

javascript const categories = [
  {
    name: 'History',
    questions: [
      {
        question: 'Who was the first Roman emperor?',
        answers: ['Caesar', 'Augustus', 'Nero', 'Constantine'],
        correct: 'Augustus'
      }
    ]
  }
];

• Each category has a set of questions with multiple answers and a defined correct answer.

2. Wheel Rotation Logic:

javascript const randomAngle = Math.floor(Math.random() * 3600) + 3600;
wheel.style.transform = `rotate(${randomAngle}deg)`;

• When the button is clicked, the wheel spins a random number of degrees.
• After spinning, a category is selected based on the angle.

3. Answer Validation:

javascript function checkAnswer(button, selectedAnswer, correctAnswer) {
  if (selectedAnswer === correctAnswer) {
    score++;
    button.classList.add('correct');
  } else {
    button.classList.add('wrong');
  }
}

• Compares the user’s answer with the correct one.
• Applies visual feedback and updates the score

Footer with Credits

<footer>
  <p>Images from <a href="https://www.freepik.com">Freepik.com</a></p>
  <p>Code Copyright 2025 © <a href="https://www.dhleitfaden.eu">www.dhleitfaden.eu</a></p>
</footer>

• Provides image source attribution and project copyright.
• Important for ethical and academic practices, especially in Digital Humanities projects.

---

Educational Conclusion

This project is an excellent example of how to blend design, cultural content, and interactivity. It teaches students how to:

• Work with structured JavaScript functions and conditionals.
• Use semantic HTML to organize a page.
• Apply modern CSS for an engaging user interface.
• Develop interfaces for educational or cultural content.