Technigo · Anna2024WebDev · Sep 11, 2024 · Sep 13, 2024 · Sep 14, 2024 · Sep 15, 2024
diff --git 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
diff --git a/code/assets/note.png b/code/assets/note.png
diff --git a/code/assets/user.png b/code/assets/user.png
diff --git a/code/index.html b/code/index.html
@@ -8,22 +8,27 @@
     <link
       href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
       rel="stylesheet" />
-    <title>Chatbot</title>
+      <link rel="preconnect" href="https://fonts.googleapis.com">
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+      <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+    <title>Music Maven</title>
   </head>
 
   <body>
-    <h1>Welcome to my chatbot!</h1>
+    <header>
+    <h1><img src="assets/note.png">Music Maven</h1>
+    <h2>Test your knowledge about music</h2>
+   </header>
     <main>
       <section class="chat" id="chat"></section>
       <div class="input-wrapper" id="input-wrapper">
         <form id="name-form">
-          <label for="name-input">Name</label>
-          <input id="name-input" type="text" />
+          <input id="name-input" type="text" placeholder=""/>
           <button class="send-btn" type="submit">
-            Send
           </button>
         </form>
       </div>
+      </div>
     </main>
 
     <script src="./script.js"></script>

diff --git a/code/script.js b/code/script.js
@@ -1,12 +1,67 @@
 // 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 += `
       <section class="user-msg">
@@ -16,8 +71,6 @@ const showMessage = (message, sender) => {
         <img src="assets/user.png" alt="User" />  
       </section>
     `
-    // 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 += `
       <section class="bot-msg">
@@ -28,26 +81,160 @@ const showMessage = (message, sender) => {
       </section>
     `
   }
-
-  // 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 = `
+    <input id="name-input" placeholder="Enter name" />
+    <button id="name-submit">Submit</button>
+  `
+
+  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 = `
+    <button id="yes">Yes</button>
+    <button id="no">No</button>
+  `
+
+  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)
+  })
 }
 
-// Eventlisteners goes here 👇
 
-// Here we invoke the first function to get the chatbot to ask the first question when
-// the website is loaded. Normally we invoke functions like this: greeting()
-// To add a little delay to it, we can wrap it in a setTimeout (a built in JavaScript function):
-// and pass along two arguments:
-// 1.) the function we want to delay, and 2.) the delay in milliseconds 
-// This means the greeting function will be called one second after the website is loaded.
-setTimeout(greetUser, 1000)
+
+// 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. Each button has a unique id (option-0, option-1, option-2, option-3, for example for question nr 1-option 0 is Britney Spears, option1 is Christina Aguilera etc. ${currentQuestion.options[0]}, ${currentQuestion.options[1]}, etc., are placeholders that get replaced with the actual options for the current question.
+
+    inputWrapper.innerHTML = `
+      <div class="option-buttons">
+      <button id="option-0">${currentQuestion.options[0]}</button>
+      <button id="option-1">${currentQuestion.options[1]}</button>
+      <button id="option-2">${currentQuestion.options[2]}</button>
+      <button id="option-3">${currentQuestion.options[3]}</button>
+      </div>
+    `  
+
+    // Add event listeners to the buttons
+    currentQuestion.options.forEach((option, index) => {
+      document.getElementById(`option-${index}`).addEventListener('click', () => {
+        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
+  }
+}
+
+// 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
+}
+
+// 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)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+