Changed around line 1
+ const celebrities = [
+ {
+ name: "Tom Hanks",
+ image: "tom-hanks.jpg"
+ },
+ // Add more celebrities here
+ ];
+
+ class CelebrityQuiz {
+ constructor() {
+ this.currentQuestion = 0;
+ this.score = 0;
+ this.questions = this.generateQuestions();
+
+ this.elements = {
+ questionNumber: document.getElementById('question-number'),
+ progressFill: document.getElementById('progress-fill'),
+ celebImage: document.getElementById('celeb-image'),
+ optionsContainer: document.getElementById('options-container'),
+ resultContainer: document.getElementById('result-container'),
+ finalScore: document.getElementById('final-score'),
+ restartBtn: document.getElementById('restart-btn'),
+ options: document.querySelectorAll('.option')
+ };
+
+ this.initializeListeners();
+ this.startQuiz();
+ }
+
+ generateQuestions() {
+ return celebrities
+ .sort(() => Math.random() - 0.5)
+ .slice(0, 10)
+ .map(celebrity => {
+ const incorrectOptions = celebrities
+ .filter(c => c.name !== celebrity.name)
+ .sort(() => Math.random() - 0.5)
+ .slice(0, 3)
+ .map(c => c.name);
+
+ const options = [...incorrectOptions, celebrity.name]
+ .sort(() => Math.random() - 0.5);
+
+ return {
+ image: celebrity.image,
+ correctAnswer: celebrity.name,
+ options
+ };
+ });
+ }
+
+ initializeListeners() {
+ this.elements.options.forEach(option => {
+ option.addEventListener('click', (e) => this.handleAnswer(e));
+ });
+
+ this.elements.restartBtn.addEventListener('click', () => this.restartQuiz());
+ }
+
+ startQuiz() {
+ this.currentQuestion = 0;
+ this.score = 0;
+ this.showQuestion();
+ }
+
+ showQuestion() {
+ const question = this.questions[this.currentQuestion];
+ this.elements.questionNumber.textContent = `Question ${this.currentQuestion + 1}/10`;
+ this.elements.progressFill.style.width = `${(this.currentQuestion + 1) * 10}%`;
+ this.elements.celebImage.src = question.image;
+ this.elements.celebImage.alt = `Celebrity ${this.currentQuestion + 1}`;
+
+ this.elements.options.forEach((option, index) => {
+ option.textContent = question.options[index];
+ option.className = 'option';
+ option.disabled = false;
+ });
+ }
+
+ handleAnswer(e) {
+ const selectedOption = e.target;
+ const selectedAnswer = selectedOption.textContent;
+ const correctAnswer = this.questions[this.currentQuestion].correctAnswer;
+
+ if (selectedAnswer === correctAnswer) {
+ selectedOption.classList.add('correct');
+ this.score++;
+ } else {
+ selectedOption.classList.add('wrong');
+ this.elements.options.forEach(option => {
+ if (option.textContent === correctAnswer) {
+ option.classList.add('correct');
+ }
+ });
+ }
+
+ this.elements.options.forEach(option => {
+ option.disabled = true;
+ });
+
+ setTimeout(() => this.nextQuestion(), 1500);
+ }
+
+ nextQuestion() {
+ this.currentQuestion++;
+
+ if (this.currentQuestion < this.questions.length) {
+ this.showQuestion();
+ } else {
+ this.showResults();
+ }
+ }
+
+ showResults() {
+ document.getElementById('question-container').classList.add('hidden');
+ this.elements.resultContainer.classList.remove('hidden');
+ this.elements.finalScore.textContent = this.score;
+ }
+
+ restartQuiz() {
+ this.questions = this.generateQuestions();
+ document.getElementById('question-container').classList.remove('hidden');
+ this.elements.resultContainer.classList.add('hidden');
+ this.startQuiz();
+ }
+ }
+
+ document.addEventListener('DOMContentLoaded', () => {
+ new CelebrityQuiz();
+ });
![\"Celebrity](\"placeholder.jpg\")
\n