-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Minor bug fixes and created game template in test
- Loading branch information
Showing
7 changed files
with
219 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| let score = 0; | ||
| let combo = 0; | ||
| let currentQuestionIndex = 0; | ||
|
|
||
| function loadQuestion() { | ||
| const questionElement = document.getElementById('question'); | ||
| const optionContainers = document.querySelectorAll('.option-container'); | ||
| const optionsElements = document.querySelectorAll('.option'); | ||
|
|
||
| const currentQuestion = questions[currentQuestionIndex]; | ||
| questionElement.textContent = currentQuestion.question; | ||
|
|
||
| optionsElements.forEach((option, index) => { | ||
| option.textContent = currentQuestion.options[index]; | ||
| option.style.backgroundColor = '#e0e0e0'; | ||
| option.disabled = false; | ||
| }); | ||
|
|
||
| optionContainers.forEach((container, index) => { | ||
| const imgElement = container.querySelector('.option-image'); | ||
| imgElement.src = currentQuestion.images[index]; // Assuming you have an array of images in your question | ||
| imgElement.alt = `Option ${index + 1} Image`; | ||
| }); | ||
|
|
||
| document.getElementById('explanation').classList.add('hidden'); | ||
| document.getElementById('next-button').classList.add('hidden'); | ||
| } | ||
|
|
||
| function checkAnswer(selectedOption) { | ||
| const options = document.querySelectorAll('.option'); | ||
| const explanation = document.getElementById('explanation'); | ||
| const currentQuestion = questions[currentQuestionIndex]; | ||
|
|
||
| if (selectedOption === currentQuestion.correctAnswer) { | ||
| options[currentQuestion.correctAnswer - 1].style.backgroundColor = 'green'; | ||
| combo += 1; | ||
| score += 100 + (100 * 25 * combo) / 100; | ||
| explanation.classList.add('hidden'); | ||
| } else { | ||
| options.forEach((option, index) => { | ||
| if (index === currentQuestion.correctAnswer - 1) { | ||
| option.style.backgroundColor = 'green'; | ||
| } else { | ||
| option.style.backgroundColor = 'red'; | ||
| } | ||
| }); | ||
| combo = 0; | ||
| explanation.textContent = currentQuestion.explanation; | ||
| explanation.classList.remove('hidden'); | ||
| } | ||
|
|
||
| document.getElementById('score').textContent = `Score: ${Math.floor(score)}`; | ||
|
|
||
| // Disable all options after one is selected | ||
| options.forEach(option => option.disabled = true); | ||
|
|
||
| // Show the next question button | ||
| document.getElementById('next-button').classList.remove('hidden'); | ||
| } | ||
|
|
||
| function nextQuestion() { | ||
| currentQuestionIndex += 1; | ||
| if (currentQuestionIndex < questions.length) { | ||
| loadQuestion(); | ||
| } else { | ||
| document.getElementById('question-container').innerHTML = '<p>Congratulations! You have completed the quiz.</p>'; | ||
| document.getElementById('next-button').classList.add('hidden'); | ||
| } | ||
| } | ||
|
|
||
| // Directly call loadQuestion to initialize the first question | ||
| loadQuestion(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| .quiz-container { | ||
| max-width: 600px; | ||
| margin: auto; | ||
| text-align: center; | ||
| font-family: Arial, sans-serif; | ||
| } | ||
|
|
||
| .options { | ||
| display: flex; | ||
| justify-content: space-around; | ||
| margin: 10px 0; | ||
| } | ||
|
|
||
| .option-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .option-image { | ||
| width: 100px; /* Adjust the size as needed */ | ||
| height: 100px; | ||
| object-fit: cover; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .option { | ||
| padding: 10px 20px; | ||
| font-size: 16px; | ||
| background-color: #e0e0e0; | ||
| border: none; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| transition: background-color 0.3s; | ||
| } | ||
|
|
||
| .option:hover { | ||
| background-color: #d0d0d0; | ||
| } | ||
|
|
||
| .hidden { | ||
| display: none; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Quiz Game</title> | ||
| <link rel="stylesheet" href="main.css"> | ||
| </head> | ||
| <body> | ||
| <div class="quiz-container"> | ||
| <h1>Quiz Game</h1> | ||
| <div id="question-container"> | ||
| <p id="question"></p> | ||
| <div class="options"> | ||
| <div class="option-container"> | ||
| <img class="option-image" src="" alt="Option 1 Image"> | ||
| <button class="option" onclick="checkAnswer(1)"></button> | ||
| </div> | ||
| <div class="option-container"> | ||
| <img class="option-image" src="" alt="Option 2 Image"> | ||
| <button class="option" onclick="checkAnswer(2)"></button> | ||
| </div> | ||
| </div> | ||
| <div class="options"> | ||
| <div class="option-container"> | ||
| <img class="option-image" src="" alt="Option 3 Image"> | ||
| <button class="option" onclick="checkAnswer(3)"></button> | ||
| </div> | ||
| <div class="option-container"> | ||
| <img class="option-image" src="" alt="Option 4 Image"> | ||
| <button class="option" onclick="checkAnswer(4)"></button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <p id="explanation" class="hidden"></p> | ||
| <p id="score">Score: 0</p> | ||
| <button id="next-button" class="hidden" onclick="nextQuestion()">Next Question</button> | ||
| </div> | ||
|
|
||
| <!-- Background Music --> | ||
| <audio id="bgm" src="path/to/your/music.mp3" autoplay loop></audio> | ||
|
|
||
| <script src="question_bank.js"></script> | ||
| <script src="game.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| const questions = [ | ||
| { | ||
| question: "What is the capital of France?", | ||
| options: ["Berlin", "Madrid", "Paris", "Rome"], | ||
| images: ["path/to/berlin.jpg", "path/to/madrid.jpg", "path/to/paris.jpg", "path/to/rome.jpg"], | ||
| correctAnswer: 3, | ||
| explanation: "The correct answer is Paris, the capital city of France." | ||
| }, | ||
| { | ||
| question: "Which planet is known as the Red Planet?", | ||
| options: ["Earth", "Mars", "Jupiter", "Saturn"], | ||
| images: ["path/to/earth.jpg", "path/to/mars.jpg", "path/to/jupiter.jpg", "path/to/saturn.jpg"], | ||
| correctAnswer: 2, | ||
| explanation: "Mars is known as the Red Planet due to its reddish appearance." | ||
| }, | ||
| { | ||
| question: "Who wrote 'Romeo and Juliet'?", | ||
| options: ["William Shakespeare", "Charles Dickens", "Mark Twain", "Jane Austen"], | ||
| images: ["path/to/shakespeare.jpg", "path/to/dickens.jpg", "path/to/twain.jpg", "path/to/austen.jpg"], | ||
| correctAnswer: 1, | ||
| explanation: "William Shakespeare is the author of 'Romeo and Juliet'." | ||
| } | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| List of items to be completed | ||
| 1. Create a question timer - around 2 mins long | ||
| 2. Create question bank - can be randomly generated by code | ||
| - Randomly assigning the number of slits, wavelengths etc and ask them to guess | ||
| - Each Question has 4 options, one correct answer | ||
| 3. Create a point system | ||
| - No combo: 100 point | ||
| - Combo formula: 100 * (100 + 25 * N)%, where N is the combo number | ||
| Combo 2: 100 * 150% = 150 pts | ||
| Combo 5: 100 * 225% = 225 pts | ||
| - Stars/tier system: | ||
| 1 star(Novice): 500 pts | ||
| 2 stars (Intermediate): 1000 pts | ||
| 3 stars (Expert): 1500 pts | ||
| 4 stars (Professional): 2000 pts | ||
| 5 stars (Einstein): 2500 pts | ||
|
|
||
|
|
||
|
|