<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cute Personality Quiz 💕</title>
<style>
body {
font-family: "Comic Sans MS", cursive, sans-serif;
background: #ffe4e6;
color: #333;
text-align: center;
padding: 20px;
}
h1 { color: #ff69b4; }
.question { margin: 15px 0; font-weight: bold; }
.options label { display: block; margin: 5px 0; }
button {
background: #ffb6c1;
border: none;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
border-radius: 8px;
color: #fff;
}
#result { margin-top: 25px; font-size: 22px; font-weight: bold; }
</style>
</head>
<body>
<h1>🌟 What’s Your Best Trait? 🌟</h1>
<form id="quizForm">
<!-- Question 1 -->
<div class="question">1) You see a friend being teased. You…</div>
<div class="options">
<label><input type="radio" name="q1" value="Brave"> Stand up for them, even if it's scary</label>
<label><input type="radio" name="q1" value="Funny"> Make a joke to lighten the mood</label>
<label><input type="radio" name="q1" value="Smart"> Think of the smartest way to handle it</label>
<label><input type="radio" name="q1" value="Loyal"> Comfort your friend and stay by their side</label>
</div>
<!-- Question 2 -->
<div class="question">2) Your ideal Saturday looks like…</div>
<div class="options">
<label><input type="radio" name="q2" value="Brave"> Trying something new</label>
<label><input type="radio" name="q2" value="Funny"> Watching a comedy</label>
<label><input type="radio" name="q2" value="Smart"> Reading or solving puzzles</label>
<label><input type="radio" name="q2" value="Down-to-earth"> Hanging out quietly with friends</label>
</div>
<!-- Question 3 -->
<div class="question">3) How do people describe you?</div>
<div class="options">
<label><input type="radio" name="q3" value="Brave"> Fearless or bold</label>
<label><input type="radio" name="q3" value="Funny"> Hilarious</label>
<label><input type="radio" name="q3" value="Smart"> Clever</label>
<label><input type="radio" name="q3" value="Loyal"> Trustworthy</label>
<label><input type="radio" name="q3" value="Sweet"> Sweet</label>
<label><input type="radio" name="q3" value="Kind"> Kind</label>
</div>
<!-- Question 4 -->
<div class="question">4) Your favorite way to help is…</div>
<div class="options">
<label><input type="radio" name="q4" value="Brave"> Protect someone</label>
<label><input type="radio" name="q4" value="Funny"> Cheer them up with jokes</label>
<label><input type="radio" name="q4" value="Smart"> Give thoughtful advice</label>
<label><input type="radio" name="q4" value="Loyal"> Be there always</label>
<label><input type="radio" name="q4" value="Sweet"> Give a cute gift</label>
<label><input type="radio" name="q4" value="Kind"> Help gently</label>
</div>
<!-- Question 5 -->
<div class="question">5) At a party you…</div>
<div class="options">
<label><input type="radio" name="q5" value="Brave"> Try every activity</label>
<label><input type="radio" name="q5" value="Funny"> Make everyone laugh</label>
<label><input type="radio" name="q5" value="Smart"> Observe and plan</label>
<label><input type="radio" name="q5" value="Down-to-earth"> Chill with close friends</label>
</div>
<!-- Question 6 -->
<div class="question">6) You find a stray animal. You…</div>
<div class="options">
<label><input type="radio" name="q6" value="Brave"> Protect it</label>
<label><input type="radio" name="q6" value="Funny"> Make a funny video</label>
<label><input type="radio" name="q6" value="Smart"> Research care tips</label>
<label><input type="radio" name="q6" value="Down-to-earth"> Stay calm and help it</label>
<label><input type="radio" name="q6" value="Sweet"> Feed and love it</label>
<label><input type="radio" name="q6" value="Kind"> Comfort it gently</label>
</div>
<!-- Question 7 -->
<div class="question">7) At a surprise party, your role is…</div>
<div class="options">
<label><input type="radio" name="q7" value="Brave"> Take charge</label>
<label><input type="radio" name="q7" value="Funny"> Think of funny games</label>
<label><input type="radio" name="q7" value="Smart"> Organize everything</label>
<label><input type="radio" name="q7" value="Loyal"> Help quietly</label>
<label><input type="radio" name="q7" value="Sweet"> Make cute decorations</label>
<label><input type="radio" name="q7" value="Kind"> Make everyone feel included</label>
</div>
<!-- Question 8 -->
<div class="question">8) Someone asks life advice. You…</div>
<div class="options">
<label><input type="radio" name="q8" value="Brave"> Encourage courage</label>
<label><input type="radio" name="q8" value="Funny"> Tell a light story</label>
<label><input type="radio" name="q8" value="Smart"> Give a smart plan</label>
<label><input type="radio" name="q8" value="Loyal"> Talk about friendship</label>
<label><input type="radio" name="q8" value="Sweet"> Encourage gently</label>
<label><input type="radio" name="q8" value="Kind"> Suggest kind acts</label>
</div>
<br>
<button type="button" onclick="showResult()">See Your Trait!</button>
</form>
<div id="result"></div>
<script>
function showResult() {
const form = document.forms["quizForm"];
let scores = {
Brave: 0, Funny: 0, Smart: 0, Loyal: 0,
"Down-to-earth": 0, Sweet: 0, Kind: 0
};
for (let i = 1; i <= 8; i++) {
const val = form["q"+i].value;
if (val) scores[val]++;
}
let best = Object.keys(scores).reduce((a,b) => scores[a] > scores[b] ? a : b);
document.getElementById("result").textContent =
"✨ Your best trait is: " + best + " ✨";
}
</script>
</body>
</html>