Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@manmita
manmita authored Jun 6, 2024
1 parent fd83c1f commit 9078799
Show file tree
Hide file tree
Showing 4 changed files with 394 additions and 0 deletions.
Binary file added Games/Disney_Trivia/disney_b.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 33 additions & 0 deletions Games/Disney_Trivia/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disney Trivia Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Disney Trivia Game</h1>
<div id="question-container" class="hide">
<div id="timer">Time left: <span id="time">15</span> seconds</div>
<div id="question">Question text</div>
<div id="answer-buttons" class="btn-container">
<button class="btn">Answer 1</button>
<button class="btn">Answer 2</button>
<button class="btn">Answer 3</button>
<button class="btn">Answer 4</button>
</div>
</div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start</button>
<button id="next-btn" class="next-btn btn hide">Next</button>
</div>
<div id="score-container">
<p id="score">Your Score: 0</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

283 changes: 283 additions & 0 deletions Games/Disney_Trivia/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,283 @@
// script.js

const startButton = document.getElementById('start-btn');
const nextButton = document.getElementById('next-btn');
const questionContainerElement = document.getElementById('question-container');
const questionElement = document.getElementById('question');
const answerButtonsElement = document.getElementById('answer-buttons');
const scoreContainer = document.getElementById('score-container');
const scoreElement = document.getElementById('score');
const timerElement = document.getElementById('time');

let shuffledQuestions, currentQuestionIndex, score, timeLeft, timerInterval;

// define questions array with question and answer
const questions = [
{
question: 'What was the first animated feature film released by Disney?',
answers: [
{ text: 'Snow White and the Seven Dwarfs', correct: true },
{ text: 'Cinderella', correct: false },
{ text: 'Sleeping Beauty', correct: false },
{ text: 'Bambi', correct: false }
]
},
{
question: 'In "The Lion King," what is the name of Simba\'s father?',
answers: [
{ text: 'Scar', correct: false },
{ text: 'Mufasa', correct: true },
{ text: 'Timon', correct: false },
{ text: 'Pumbaa', correct: false }
]
},
{
question: 'What is the name of the toy cowboy in "Toy Story"?',
answers: [
{ text: 'Buzz Lightyear', correct: false },
{ text: 'Jessie', correct: false },
{ text: 'Bullseye', correct: false },
{ text: 'Woody', correct: true },
]
},
{
question: 'Which Disney princess has a pet tiger named Rajah?',
answers: [
{ text: 'Jasmine', correct: true },
{ text: 'Ariel', correct: false },
{ text: 'Belle', correct: false },
{ text: 'Mulan', correct: false }
]
},
{
question: 'What does the crocodile swallow in "Peter Pan"?',
answers: [
{ text: 'Captain Hook\'s hook', correct: false },
{ text: 'Peter Pan\'s hat', correct: false },
{ text: 'A clock', correct: true },
{ text: 'A map', correct: false }
]
},
{
question: 'What kind of animal is Dumbo?',
answers: [
{ text: 'A mouse', correct: false },
{ text: 'An elephant', correct: true },
{ text: 'A lion', correct: false },
{ text: 'A bear', correct: false }
]
},
{
question: 'In "Beauty and the Beast," what is the name of the teapot?',
answers: [
{ text: 'Mrs. Potts', correct: true },
{ text: 'Lumière', correct: false },
{ text: 'Cogsworth', correct: false },
{ text: 'Belle', correct: false }
]
},
{
question: 'In which Disney movie do two dogs share a plate of spaghetti?',
answers: [
{ text: '101 Dalmatians', correct: false },
{ text: 'The Fox and the Hound', correct: false },
{ text: 'Lady and the Tramp', correct: true },
{ text: 'Oliver & Company', correct: false }
]
},
{
question: 'What is the name of the bear in "The Jungle Book"?',
answers: [
{ text: 'Baloo', correct: true },
{ text: 'Bagheera', correct: false },
{ text: 'Shere Khan', correct: false },
{ text: 'Kaa', correct: false }
]
},
{
question: 'Which Disney princess sings "Part of Your World"?',
answers: [
{ text: 'Belle', correct: false },
{ text: 'Cinderella', correct: false },
{ text: 'Rapunzel', correct: false },
{ text: 'Ariel', correct: true },
]
},
{
question: 'In "Aladdin," what is the name of Aladdin\'s pet monkey?',
answers: [
{ text: 'Iago', correct: false },
{ text: 'Abu', correct: true },
{ text: 'Rajah', correct: false },
{ text: 'Sultan', correct: false }
]
},
{
question: 'In "Finding Nemo," what kind of fish is Nemo?',
answers: [
{ text: 'Clownfish', correct: true },
{ text: 'Goldfish', correct: false },
{ text: 'Betta fish', correct: false },
{ text: 'Angelfish', correct: false }
]
},
{
question: 'In "Frozen," which song does Elsa sing as she builds the castle?',
answers: [
{ text: 'Let It Go', correct: true },
{ text: 'Do You Want to Build a Snowman?', correct: false },
{ text: 'For the First Time in Forever', correct: false },
{ text: 'Love Is an Open Door', correct: false }
]
},
{
question: 'In "Mulan," what is the name of Mulan\'s dragon guardian?',
answers: [
{ text: 'Shan Yu', correct: false },
{ text: 'Crikee', correct: false },
{ text: 'Mushu', correct: true },
{ text: 'Li Shang', correct: false }
]
},
{
question: 'What does Rapunzel use to hit Flynn Ryder over the head?',
answers: [
{ text: 'A book', correct: false },
{ text: 'A frying pan', correct: true },
{ text: 'A chair', correct: false },
{ text: 'A vase', correct: false }
]
},
{
question: 'In "Hercules," what are the names of the two little demons that work for Hades?',
answers: [
{ text: 'Famine and Pestilence', correct: false },
{ text: 'Destruction and Chaos', correct: false },
{ text: 'Pain and Panic', correct: true },
{ text: 'Wrath and Fury', correct: false }
]
},
{
question: 'In "Cinderella," what are the names of Cinderella\'s stepsisters?',
answers: [
{ text: 'Beatrice and Eugenie', correct: false },
{ text: 'Hilda and Helga', correct: false },
{ text: 'Flora and Fauna', correct: false },
{ text: 'Anastasia and Drizella', correct: true },
]
},
{
question: 'In "The Little Mermaid," what does Ariel call the fork she collects?',
answers: [
{ text: 'Dinglehopper', correct: true },
{ text: 'Snarfblatt', correct: false },
{ text: 'Thingamabob', correct: false },
{ text: 'Gizmo', correct: false }
]
}
];


startButton.addEventListener('click', startGame);
nextButton.addEventListener('click', () => {
currentQuestionIndex++;
setNextQuestion();
});

skipButton.addEventListener('click', () => {
currentQuestionIndex++;
setNextQuestion();
});

// function to start the game
function startGame() {
startButton.classList.add('hide'); // hide start button
shuffledQuestions = questions.sort(() => Math.random() - 0.5);
currentQuestionIndex = 0; // reset question
score = 0; // reset score
scoreContainer.classList.add('hide'); //hide score container
questionContainerElement.classList.remove('hide'); //show question container
setNextQuestion();
}

// function to set next question
function setNextQuestion() {
resetState();
showQuestion(shuffledQuestions[currentQuestionIndex]);
startTimer();
}

// function to display the question and answers
function showQuestion(question) {
questionElement.innerText = question.question;
question.answers.forEach(answer => {
const button = document.createElement('button'); // create a button for each answer
button.innerText = answer.text;
button.classList.add('btn');
if (answer.correct) {
button.dataset.correct = answer.correct;
}
button.addEventListener('click', selectAnswer);
answerButtonsElement.appendChild(button);
});
}

// function to reset
function resetState() {
clearInterval(timerInterval);
timerElement.innerText = '15';
nextButton.classList.add('hide');
while (answerButtonsElement.firstChild) {
answerButtonsElement.removeChild(answerButtonsElement.firstChild);
}
}

// function to select answer
function selectAnswer(e) {
const selectedButton = e.target;
const correct = selectedButton.dataset.correct;
if (correct) {
score++; // if correct answer then increment score
}
Array.from(answerButtonsElement.children).forEach(button => {
setStatusClass(button, button.dataset.correct);
});
if (shuffledQuestions.length > currentQuestionIndex + 1) {
nextButton.classList.remove('hide');
} else {
startButton.innerText = 'Restart';
startButton.classList.remove('hide');
scoreContainer.classList.remove('hide');
scoreElement.innerText = `Your Score: ${score}`;
questionContainerElement.classList.add('hide');
}
}

function setStatusClass(element, correct) {
clearStatusClass(element);
if (correct) {
element.classList.add('correct');
} else {
element.classList.add('wrong');
}
}

function clearStatusClass(element) {
element.classList.remove('correct');
element.classList.remove('wrong');
}

// function to start timer
function startTimer() {
timeLeft = 15;
timerInterval = setInterval(() => {
timeLeft--;
timerElement.innerText = timeLeft;
if (timeLeft <= 0) {
clearInterval(timerInterval);
currentQuestionIndex++;
setNextQuestion();
}
}, 1000);
}

78 changes: 78 additions & 0 deletions Games/Disney_Trivia/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
/* style.css */

body {
background-image: url("/home/manmita/Desktop/Disney_Trivia/disney_b.jpg");
background-repeat: no-repeat;
background-size: 1920px 1080px;
display: flex;
font-family: 'Arial', sans-serif;
justify-content: center;
align-items: center;
height: 100vh;

}

.container {
text-align: center;
width: 80%;
max-width: 600px;
width: 100%;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(25, 89, 172, 0.1);
text-align: center;
}

h1 {
margin-bottom: 20px;
}

.btn {
border: none;
outline: none;
padding: 10px 20px;
margin: 10px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s;
}

.btn:hover {
background-color: #dcdcdc;
}

.btn-container {
display: flex;
flex-direction: column;
}

.next-btn {
margin-top: 20px;
}

.btn.answer {
background-color: #e0e0e0;
}

.btn.correct {
background-color: #4CAF50;
color: white;
}

.btn.wrong {
background-color: #f44336;
color: white;
}

.hide {
display: none;
}

#timer {
font-size: 18px;
margin-bottom: 20px;
}


0 comments on commit 9078799

Please sign in to comment.