<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>What Type of Coffee Are You?</title>    
<style>
  label { display: block; }
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background-color: #f5e8d8; 
  color: #3c2f2f; 
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}
 
        h1 {
            background-color: #D2B48C;
            font-size: 50px;
            color: #fff;
            padding: 40px 20px;
            text-align: center;
            margin-bottom: 30px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
p {
  font-size: 18px;
  text-align: center;
}

ol {
  list-style-position: inside;
  margin-bottom: 22px;
}

li {
  font-size: 20px;
  margin-bottom: 15px;
  font-weight: bold;
}

label {
  display: block;
  cursor: pointer;
}

input[type="radio"] {
  margin-right: 10px;
  accent-color: brown; 
  transform: scale(1.1);
}

button {
  display: block;
  width: 250px;
  margin: 20px auto;
  padding: 20px;
  background-color: #6f4e37; 
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 1.1em;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #8a5a44; 
}

#incomplete {
  text-align: center;
  font-size: 1.1em;
  color: #d9534f; 
  padding: 10px;
  background-color: #f8d7da;
}

#result0, #result1, #result2, #result3, #result4 {
  text-align: center;
  font-size: 1.2em;
  padding: 15px;
  margin: 10px 0;
  border:  #3c2f2f; 
  border-radius: 5px;
  background-color: #fff8e7;
}



#result0 img, #result1 img, #result2 img, #result3 img, #result4 img {
  display: block;
  max-width: 200px;
  margin: 10px auto;
  border-radius: 5px;
}
#coffee-image {
    position: absolute;
    top: 50%;
    right: 10%;
    max-width: 190px;
  }
  #coffee-image img {
    width: 100%;
    border-radius: 40px;

  }

</style>
</head>


<body>







<script src="cs100-s24-a3-quiz.js"></script>
<h1> What Type of Coffee are you?
<p>Take this fun quiz to find out which coffee matches your personality!</p> </h1>


<ol>
  <li>What do you prefer to do in your spare time?</li>
  <label><input type="radio" name="q0" value="0"> Reading a book</label>
  <label><input type="radio" name="q0" value="1"> Going on an adventure</label>
  <label><input type="radio" name="q0" value="2"> Relaxing at home</label>
  <label><input type="radio" name="q0" value="3"> Socializing with friends</label>
  <label><input type="radio" name="q0" value="4"> Trying something new</label>

  <li>How do you like your coffee?</li>
  <label><input type="radio" name="q1" value="0"> Strong and black</label>
  <label><input type="radio" name="q1" value="1"> With a splash of milk</label>
  <label><input type="radio" name="q1" value="2"> Sweet and creamy</label>
  <label><input type="radio" name="q1" value="3"> Iced and refreshing</label>

  <li>What’s your ideal vacation?</li>
  <label><input type="radio" name="q2" value="0"> A cozy cabin in the mountains</label>
  <label><input type="radio" name="q2" value="1"> A thrilling city adventure</label>
  <label><input type="radio" name="q2" value="2"> A tropical beach retreat</label>
  <label><input type="radio" name="q2" value="3"> Camping alone in the jungle</label>
  
  <li>Which describes you best?</li>
  <label><input type="radio" name="q3" value="0"> Calm and collected</label>
  <label><input type="radio" name="q3" value="1"> Spontaneous and energetic</label>
  <label><input type="radio" name="q3" value="2"> Warm and friendly</label>
  <label><input type="radio" name="q3" value="3"> Strong and independent</label>
  <label><input type="radio" name="q3" value="4"> Easy going and laid back</label>

  <li>What’s your go-to morning routine?</li>
  <label><input type="radio" name="q4" value="0"> Meditating or journaling</label>
  <label><input type="radio" name="q4" value="1"> Going to the gym</label>
  <label><input type="radio" name="q4" value="2"> Grabbing coffee and heading out</label>
  <label><input type="radio" name="q4" value="3"> Sleeping in</label>

  <li>Which dessert do you prefer?</li>
  <label><input type="radio" name="q5" value="0"> Dark chocolate</label>
  <label><input type="radio" name="q5" value="1"> Cheesecake</label>
  <label><input type="radio" name="q5" value="2"> Ice cream sundae</label>
  <label><input type="radio" name="q5" value="3"> Chocolate lava cake</label>
  <label><input type="radio" name="q5" value="4"> Funnel cake</label>

  <li>What kind of weather do you love?</li>
  <label><input type="radio" name="q6" value="0"> Cold and snowy</label>
  <label><input type="radio" name="q6" value="1"> Warm and sunny</label>
  <label><input type="radio" name="q6" value="2"> Rainy and cozy</label>
  <label><input type="radio" name="q6" value="3"> Thunderstorms</label>
  <label><input type="radio" name="q6" value="4"> Cloudy and foggy</label>

  <li>Pick a hobby:</li>
  <label><input type="radio" name="q7" value="0"> Cooking</label>
  <label><input type="radio" name="q7" value="1"> Traveling</label>
  <label><input type="radio" name="q7" value="2"> Painting</label>
  <label><input type="radio" name="q7" value="3"> Playing sports</label>
  <label><input type="radio" name="q7" value="4"> Playing an instrument</label>

  <li>Which pet would you choose?</li>
  <label><input type="radio" name="q8" value="0"> Dog</label>
  <label><input type="radio" name="q8" value="1"> Cat</label>
  <label><input type="radio" name="q8" value="2"> Fish</label>
  <label><input type="radio" name="q8" value="3"> Reptile</label>

  <li>How do you handle stress?</li>
  <label><input type="radio" name="q9" value="0"> Staying calm and analyzing the situation</label>
  <label><input type="radio" name="q9" value="1"> Taking a break and relaxing</label>
  <label><input type="radio" name="q9" value="2"> Powering through it</label>

  <li>What’s your favorite time of day?</li>
  <label><input type="radio" name="q10" value="0"> Early morning</label>
  <label><input type="radio" name="q10" value="1"> Afternoon</label>
  <label><input type="radio" name="q10" value="2"> Late night</label>

  <li>Which movie genre do you enjoy the most?</li>
  <label><input type="radio" name="q11" value="0"> Drama</label>
  <label><input type="radio" name="q11" value="1"> Action</label>
  <label><input type="radio" name="q11" value="2"> Comedy</label>
  <label><input type="radio" name="q11" value="3"> Adventure</label>
  <label><input type="radio" name="q11" value="4"> Horror</label>

  <li>What’s your dream job?</li>
  <label><input type="radio" name="q12" value="0"> Writer</label>
  <label><input type="radio" name="q12" value="1"> Entrepreneur</label>
  <label><input type="radio" name="q12" value="2"> Artist</label>
  <label><input type="radio" name="q12" value="3"> Doctor</label>
  <label><input type="radio" name="q12" value="4"> Engineer</label>

  <li>What is your favorite type of music?</li>
  <label><input type="radio" name="q13" value="0"> Classical</label>
  <label><input type="radio" name="q13" value="1"> Rock</label>
  <label><input type="radio" name="q13" value="2"> Pop</label>
  <label><input type="radio" name="q13" value="3"> Rap</label>
  <label><input type="radio" name="q13" value="4"> Jazz</label>
</ol>

<button type="button" onclick="quiz()">Find out what kind of coffee you are!</button>

<div id="incomplete" style="display: none;">
You have not answered all of the questions!
</div>

<div id="result0" style="display: none;">
You are a Latte! Smooth, creamy, and comforting. You are a type of person who is warm and like simple things. You are able to blend with different people always bringing comfort to those around you, you're an easygoing and laid-back individual always bringing a sense of peace to any situation.
<img src="https://www.cuisinart.com/dw/image/v2/ABAF_PRD/on/demandware.static/-/Sites-us-cuisinart-sfra-Library/default/dw2ca0aa66/images/recipe-Images/cafe-latte1-recipe.jpg?sw=1200&sh=1200&sm=fit">
</div>

<div id="result1" style="display: none;">
You are a Cappuccino! Bold, foamy, and full of energy. You like to be placed in fast pased enviornments whether that's in your professional or personal life. You are both bold and soft, and have an engaging personality. You are energetic anc inspire others to take action.
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Cappuccino_in_original.jpg/540px-Cappuccino_in_original.jpg">
</div>

<div id="result2" style="display: none;">
You are an Americano! Strong, classic, and reliable. You are very trustworthy and always get the job done. You enjoy basic things and staying down to earth, others can count on you to be proactive in any siutation and your reliability makes you a great fun.
<img src="https://assets.beanbox.com/blog_images/AB7ud4YSE6nmOX0iGlgA.jpeg">
</div>

<div id="result3" style="display: none;">
You are an Espresso! Intensse, sophisticated, and full of depth. You are a passionate individual and take on challenges. You don't shy away from your ambitions and goals, you are a confident person with a confident attitude.
<img src="https://aeropress.com/cdn/shop/articles/Espresso-cup-with-coffee-beans_600x.jpg?v=1681501296">
</div>

<div id="result4" style="display: none;">
You are a Mocha! A perfect mix of sweet and bitter. You are they type of person who likes the best of both worlds, sweet and salty! You're not afraid of taking on challenges and can express your feelings. You are a creative individual and your unique qualities make you a person to remember. 
<img src="https://www.folgerscoffee.com/folgers/recipes/_Hero%20Images/Detail%20Pages/5598/image-thumb__5598__responsive_3398_JPEG/MochaIced-hero.35dcaff7.jpg">
</div>

<div id="coffee-image">
  <img src="https://media.istockphoto.com/id/1175851148/vector/kawaii-coffee-cup-character-in-meditate-pose.jpg?s=612x612&w=0&k=20&c=6xn41fxI3T2_TIsRzZg0b6fmc2riNLN3JpS_7802ba8=">
</div>

<script>

  
  const num_results = 5
  

const weights = [
  [[3, 1, 2, -2, 4], [-2, 5, 1, 3, 2], [5, 0, 3, -1, 2], [4, 2, 1, -3, 3], [1, 4, 0, 2, 5]],    
  [[-2, 2, 5, 4, 1], [3, 4, 2, 1, 0], [5, 3, -1, -2, 4], [2, 1, 0, 3, 5]],                       
  [[4, 1, 3, 0, 2], [0, 5, 2, 4, 1], [5, 2, 1, -1, 4], [-2, 3, 4, 5, 0]],                        
  [[5, 0, 3, 2, 1], [-1, 5, 0, 4, 2], [4, 2, 1, -2, 3], [0, 1, 5, 4, -1], [3, -1, 2, 0, 5]],   
  [[4, 1, 3, 2, 0], [-1, 5, 2, 4, 1], [2, 3, 4, 1, 0], [3, 0, 1, -2, 5]],                       
  [[1, 0, 4, 5, 2], [4, 2, 1, 0, 3], [5, 3, 0, -1, 4], [2, 1, 3, 4, 0], [3, 4, -1, 0, 5]],  
  [[2, 0, 3, 4, 1], [3, 4, 1, 0, 5], [5, 1, 2, -1, 3], [0, 5, 4, 3, 1], [4, 2, 0, 1, 3]],   
  [[5, 1, 2, 0, 3], [0, 5, 2, 4, 1], [4, 2, 1, 0, 3], [1, 4, 3, 5, 0], [3, 0, 1, 2, 5]],     
  [[3, 4, 2, 1, 0], [4, 1, 0, 2, 5], [5, 0, 1, -1, 3], [0, 3, 4, 5, 2]],                       
  [[5, 1, 3, 2, 0], [4, 0, 1, -1, 5], [0, 4, 5, 3, 1]],                                        
  [[4, 1, 3, 2, 0], [2, 4, 1, 0, 5], [0, 2, 4, 5, 3]],                                        
  [[4, 0, 2, 1, 3], [0, 5, 3, 4, 1], [5, 2, 1, 0, 4], [1, 4, 2, 5, 0], [2, 1, 0, 3, 5]],      
  [[5, 0, 1, 2, 3], [0, 5, 2, 4, 1], [4, 1, 0, 2, 5], [1, 2, 5, 3, 0], [3, 4, 1, 0, 2]],     
  [[4, 0, 2, 3, 1], [0, 5, 3, 4, 1], [5, 2, 1, 0, 4], [1, 4, 0, 5, 2], [3, 1, 2, 0, 5]]     
]



var always_show = false;

function quiz() {
  let scores = new Array(num_results).fill(0);
  let totalQuestions = weights.length;

  for (let q = 0; q < totalQuestions; q++) {
    let options = document.getElementsByName(`q${q}`);
    let selected = Array.from(options).findIndex(option => option.checked);
    if (selected === -1) {
      if (!always_show) {
        document.getElementById("incomplete").style.display = "block";
        for (let i = 0; i < num_results; i++) {
          document.getElementById(`result${i}`).style.display = "none";
        }
      }
      return;
    }
    for (let r = 0; r < num_results; r++) {
      scores[r] += weights[q][selected][r];
    }
  }

  document.getElementById("incomplete").style.display = "none";
  if (always_show) {
    for (let i = 0; i < num_results; i++) {
      document.getElementById(`result${i}`).style.display = "block";
    }
  } else {
    let maxScore = Math.max(...scores);
    let resultIndex = scores.indexOf(maxScore);
    for (let i = 0; i < num_results; i++) {
      document.getElementById(`result${i}`).style.display = (i === resultIndex) ? "block" : "none";
    }
  }
}
</script>

</body></html>

any css changes to make it more cool website?