diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..f673a71b
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5502
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 60f55e53..798d6730 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,14 @@
# Project Name
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+The second project of the Javascript sprint was to create a chat bot using functions, DOM selectors and conditionals.
## The problem
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+I had a hard time getting started with this. I understand the overall logic but found it difficult to put everything in place. The most difficult part was to put together the ask question function and getting it to check correct answer. I needed a lot of help from chat gpt for that, also with the final score function. I also found it hard with the order of things and getting each step to work.
-## View it live
+I also watched the videos about DOMs and functions again to try to understand the whole concept and putting it together but I must say that I still am somewhat confused and need to read more about this.
-Have you deployed your project somewhere? Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+If I had more time I would add a function to restart the quiz. I would also add some sounds since it is a music quiz, that could be fun.
+
+## View it live
+https://musicmaven.netlify.app/
diff --git a/code/assets/bot.png b/code/assets/bot.png
index 2c894b15..0cbfe2eb 100644
Binary files a/code/assets/bot.png and b/code/assets/bot.png differ
diff --git a/code/assets/note.png b/code/assets/note.png
new file mode 100644
index 00000000..d7587475
Binary files /dev/null and b/code/assets/note.png differ
diff --git a/code/assets/user.png b/code/assets/user.png
index 6d95f08f..ba9e9498 100644
Binary files a/code/assets/user.png and b/code/assets/user.png differ
diff --git a/code/index.html b/code/index.html
index 316eb187..b44ee077 100644
--- a/code/index.html
+++ b/code/index.html
@@ -8,22 +8,27 @@
- Chatbot
+
+
+
+ Music Maven
-
Welcome to my chatbot!
+
+
Music Maven
+
Test your knowledge about music
+
+
diff --git a/code/script.js b/code/script.js
index 125d6904..8573a53c 100644
--- a/code/script.js
+++ b/code/script.js
@@ -1,12 +1,66 @@
// DOM selectors (variables that point to selected DOM elements) goes here π
-const chat = document.getElementById('chat')
+const chat = document.getElementById("chat")
+const inputWrapper = document.getElementById("input-wrapper")
+const form = document.getElementById("name-form")
+const nameInput = document.getElementById("name-input")
-// Functions goes here π
+let currentQuestionNumber = 1 // Start with Question 1
+let score = 0
+
+// Question data
+const Question1 = {
+ question: "Who released a single in 1999 called Genie In a Bottle?",
+ options: ["Britney Spears", "Christina Aguilera", "Robyn", "Corona"],
+ correctAnswer: "Christina Aguilera"
+}
+
+const Question2 = {
+ question: "Which song has the lyrics: 'ItΒ΄s like ten thousand spoons when all you need is a knife'?",
+ options: ["Torn", "Ironic", "Killing me softly", "You learn"],
+ correctAnswer: "Ironic"
+}
+
+const Question3 = {
+ question: "Who wrote the song 'I will always love you'?",
+ options: ["Whitney Houston", "Celine Dion", "Dolly Parton", "Mariah Carey"],
+ correctAnswer: "Dolly Parton"
+}
+
+const Question4= {
+ question: "Which artist has not competed in the Eurovision Song Contest?",
+ options: ["Celine Dion", "Julio Iglesias", "Bonnie Tyler", "Vanessa Paradis"],
+ correctAnswer: "Vanessa Paradis"
+}
+
+const Question5= {
+ question: "Who is the composer of 'Moonlight Sonata'?",
+ options: ["Bach", "Beethoven", "Mozart", "Hendel"],
+ correctAnswer: "Beethoven"
+}
+
+const Question6= {
+ question: "What band was Kurt Cobain the lead singer of?",
+ options: ["Pearl Jam", "Nirvana", "Soundgarden", "Hole"],
+ correctAnswer: "Nirvana"
+}
+
+const Question7= {
+ question: "Which artist had a 2019 hit with the song 'Bad Guy'?",
+ options: ["Billie Eilish", "Ariana Grande", "Selena Gomez", "Lizzo"],
+ correctAnswer: "Billie Eilish"
+}
+
+const Question8= {
+ question: "Who won the first season of American Idol?",
+ options: ["Jennifer Hudson", "Adam Lambert", "Kelly Clarkson", "Carrie Underwood"],
+ correctAnswer: "Kelly Clarkson"
+}
+
+// Array of questions
+const questions = [Question1, Question2, Question3, Question4, Question5, Question6, Question7, Question8]
// A function that will add a chat bubble in the correct place based on who the sender is
const showMessage = (message, sender) => {
- // The if statement checks if the sender is the user and if that's the case it inserts
- // an HTML section inside the chat with the posted message from the user
if (sender === 'user') {
chat.innerHTML += `
@@ -16,8 +70,6 @@ const showMessage = (message, sender) => {
`
- // The else if statement checks if the sender is the bot and if that's the case it inserts
- // an HTML section inside the chat with the posted message from the bot
} else if (sender === 'bot') {
chat.innerHTML += `
@@ -28,26 +80,404 @@ const showMessage = (message, sender) => {
`
}
-
- // This little thing makes the chat scroll to the last message when there are too many to
- // be shown in the chat box
- chat.scrollTop = chat.scrollHeight
-}
+ // Scroll only after new content has been added
+ setTimeout(() => {
+ chat.scrollTop = chat.scrollHeight;
+ }, 100);
+};
// A function to start the conversation
const greetUser = () => {
- // Here we call the function showMessage, that we declared earlier with the argument:
- // "Hello there, what's your name?" for message, and the argument "bot" for sender
showMessage("Hello there, what's your name?", 'bot')
- // Just to check it out, change 'bot' to 'user' here π and see what happens
+
+ // Show the name input field
+ inputWrapper.innerHTML = `
+
+
+ `
+
+ document.getElementById('name-submit').addEventListener('click', () => {
+ const userName = document.getElementById('name-input').value
+ if (userName) {
+ showMessage(userName, 'user')
+ setTimeout(() => {
+ showMessage(`Nice to meet you, ${userName}! Are you ready for a quiz?`, 'bot')
+ setTimeout(showYesNoButtons, 900)
+ }, 700)
+ }
+ })
+}
+
+// Show Yes/No buttons for quiz confirmation
+const showYesNoButtons = () => {
+ inputWrapper.innerHTML = `
+
+
+ `
+
+ document.getElementById("yes").addEventListener('click', () => {
+ showMessage("Yes", "user")
+ inputWrapper.innerHTML = '' // Remove Yes/No buttons
+ setTimeout(() => askQuestion(), 1000) // Start the quiz
+ })
+
+ document.getElementById('no').addEventListener('click', () => {
+ showMessage("No", "user")
+ setTimeout(() => {
+ showMessage("Ok, see you another time!", 'bot')
+ inputWrapper.innerHTML = '' // Clear buttons
+ }, 700)
+ })
+}
+
+// Ask the current question and show answer options
+const askQuestion = () => {
+ const currentQuestion = questions[currentQuestionNumber - 1]
+
+ if (currentQuestion) {
+ showMessage(currentQuestion.question, 'bot')
+
+ // Show options as buttons
+ inputWrapper.innerHTML = `
+
+
+
+
+
+
+ `
+
+ // Add event listeners to the buttons
+ currentQuestion.options.forEach((option, index) => {
+ const optionButton = document.getElementById(`option-${index}`);
+
+ optionButton.addEventListener('click', () => {
+ // Disable buttons after one is clicked
+ disableButtons();
+
+ showMessage(option, 'user');
+ checkAnswer(option); // Check the selected answer
+ });
+ });
+ } else {
+ // If there are no more questions, end the quiz
+ showMessage("Quiz finished! Thanks for playing.", 'bot')
+ inputWrapper.innerHTML = '' // Clear buttons after the quiz ends
+ }
+}
+
+// Function to disable all answer buttons after one is clicked
+const disableButtons = () => {
+ const buttons = document.querySelectorAll(".option-buttons button");
+ buttons.forEach(button => {
+ button.disabled = true; // Disable the button
+ });
+}
+
+// Check the user's answer and move to the next question
+const checkAnswer = (selectedOption) => {
+ setTimeout(() => {
+ const currentQuestion = questions[currentQuestionNumber - 1]
+
+ if (selectedOption === currentQuestion.correctAnswer) {
+ showMessage("Correct!", 'bot')
+ score++ // Increment the score for a correct answer
+ } else {
+ showMessage(`Wrong! The correct answer is ${currentQuestion.correctAnswer}.`, 'bot')
+ }
+ }, 900)
+
+ // After answering, move to the next question if there are more questions
+ setTimeout(() => {
+ inputWrapper.innerHTML = '' // Clear buttons after selecting an answer
+ currentQuestionNumber++ // Increment the question number
+
+ if (currentQuestionNumber <= questions.length) {
+ askQuestion() // Ask the next question
+ } else {
+ showFinalScore() // Show the final score at the end
+ }
+ }, 900) // Timeout
}
-// Eventlisteners goes here π
+// Function to display the final score
+const showFinalScore = () => {
+ setTimeout(() => {
+ showMessage(`Quiz finished! You got ${score} out of ${questions.length} correct. Thanks for playing!`, 'bot')
+ inputWrapper.innerHTML = '' // Clear buttons after the quiz ends
+ }, 900) // Timeout
+}
+
+// Start the conversation
+setTimeout(greetUser, 900)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// // DOM selectors (variables that point to selected DOM elements) goes here π
+// const chat = document.getElementById("chat")
+// const inputWrapper = document.getElementById("input-wrapper")
+// const form = document.getElementById("name-form")
+// const nameInput = document.getElementById("name-input")
+
+// let currentQuestionNumber = 1 // Start with Question 1
+// let score= 0
+
+// // Question data
+// const Question1 = {
+// question: "Who released a single in 1999 called Genie In a Bottle?",
+// options: ["Britney Spears", "Christina Aguilera", "Robyn", "Corona"],
+// correctAnswer: "Christina Aguilera"
+// }
+
+// const Question2 = {
+// question: "Which song has the lyrics: 'ItΒ΄s like ten thousand spoons when all you need is a knife'?",
+// options: ["Torn", "Ironic", "Killing me softly", "You learn"],
+// correctAnswer: "Ironic"
+// }
+
+// const Question3 = {
+// question: "Who wrote the song 'I will always love you'?",
+// options: ["Whitney Houston", "Celine Dion", "Dolly Parton", "Mariah Carey"],
+// correctAnswer: "Dolly Parton"
+// }
+
+// const Question4= {
+// question: "Which artist has not competed in the Eurovision Song Contest?",
+// options: ["Celine Dion", "Julio Iglesias", "Bonnie Tyler", "Vanessa Paradis"],
+// correctAnswer: "Vanessa Paradis"
+// }
+
+// const Question5= {
+// question: "Who is the composer of 'Moonlight Sonata'?",
+// options: ["Bach", "Beethoven", "Mozart", "Hendel"],
+// correctAnswer: "Beethoven"
+// }
+
+// const Question6= {
+// question: "What band was Kurt Cobain the lead singer of?",
+// options: ["Pearl Jam", "Nirvana", "Soundgarden", "Hole"],
+// correctAnswer: "Nirvana"
+// }
+
+// const Question7= {
+// question: "Which artist had a 2019 hit with the song 'Bad Guy'?",
+// options: ["Billie Eilish", "Ariana Grande", "Selena Gomez", "Lizzo"],
+// correctAnswer: "Billie Eilish"
+// }
+
+// const Question8= {
+// question: "Who won the first season of American Idol?",
+// options: ["Jennifer Hudson", "Adam Lambert", "Kelly Clarkson", "Carrie Underwood"],
+// correctAnswer: "Kelly Clarkson"
+// }
+
+
+// // Array of questions
+// const questions = [Question1, Question2, Question3, Question4, Question5, Question6, Question7, Question8]
+
+// // A function that will add a chat bubble in the correct place based on who the sender is
+// const showMessage = (message, sender) => {
+// if (sender === 'user') {
+// chat.innerHTML += `
+//
+//
Music Maven
+//