About
Explore
Events & Classes
Support Us
Join
Sign In
purple_ghost
View Project Page
Run
Fullscreen
Color Personality Quiz!
HTML
CSS
JS
<!-- Created by purple_ghost, subject to copyright. --> <!DOCTYPE HTML> <html> <head> <title>Page Title</title> <meta charset="utf-8"> <meta name="author" content="purple_ghost"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="container"> <h1 class="q" id="q"></h1> <div class="answer-set"> <button onclick="selectAnswer1('a');" class="a-option" id="a1"></button> <button onclick="selectAnswer1('b');" class="a-option" id="a2"></button> <button onclick="selectAnswer1('c');" class="a-option" id="a3"></button> <button onclick="selectAnswer1('d');" class="a-option" id="a4"></button> </div> </div> <div class="color-div row" id="red" style="color: red;"> <div class="color-chosen" style="background-color: red;"></div> <div> <h1 class="color-name">Red</h1> <p class="color-desc"> You have lots of energy and a very good salesperson. You have a great heart and ready to love or befriend anyone. You have a lot of passion for the things you do and sometimes you can get angry. You may also get hungry often. </p> </div> </div> <div class="color-div row" id="blue" style="color: blue;"> <div class="color-chosen" style="background-color: blue;"></div> <div> <h1 class="color-name">Blue</h1> <p class="color-desc"> You are very reliable and wise. You are also often calm and faithful to all. Most of what you do stays natural and are very stable. You have power too. </p> </div> </div> <div class="color-div row" id="black" style="color: black;"> <div class="color-chosen" style="background-color: black;"></div> <div> <h1 class="color-name">Black</h1> <p class="color-desc"> You're the most mysterious and most powerful in town. You're very elegant, and maybe evil at times. You are bold and strong. </p> </div> </div> <div class="color-div row" id="green" style="color: green;"> <div class="color-chosen" style="background-color: green;"></div> <div> <h1 class="color-name">Green</h1> <p class="color-desc"> You are a soothing person and love the world around you. Sometimes you can be envious and jealous of other people. You balance stuff and are pretty restful. </p> </div> </div> <div class="color-div row" id="yellow" style="color: yellow;"> <div class="color-chosen" style="background-color: yellow;"></div> <div> <h1 class="color-name">Yellow</h1> <p class="color-desc"> You are cheerful and have a super sunny personality! You always have a smile on your face and can be a little childish. Sometimes you want attention. You are optimistic about everything and freshness and warmth to people is your job! You can also be very energized, meaning you are ready for anything! </p> </div> </div> <div class="color-div row" id="orange" style="color: orange;"> <div class="color-chosen" style="background-color: orange;"></div> <div> <h1 class="color-name">Orange</h1> <p class="color-desc"> You are healthy and attractive. You stand out of the crowd and are fun and bouncy. You are wealthy and are young. You are the happiest in the throng! </p> </div> </div> <div class="color-div row" id="pink" style="color: #ff9e9e;"> <div class="color-chosen" style="background-color: #ff9e9e;"></div> <div> <h1 class="color-name">Pink</h1> <p class="color-desc"> You are tender and sensitive about most things. You care for others and can be very emotional. You are sympathetic and give helpful advice to your friends! You have an ENORMOUS heart, very loveable and are ready to befriend anyone! </p> </div> </div> <div class="color-div row" id="purple" style="color: purple;"> <div class="color-chosen" style="background-color: purple;"></div> <div> <h1 class="color-name">Purple</h1> <p class="color-desc"> You can be mysterious and royal. You might be arrogant at times or get really creative. You like luxurious stuff and a little childish. You can also be the saddest around. </p> </div> </div> <div class="color-div row" id="white" style="color: white;"> <div class="color-chosen" style="background-color: white;"></div> <div> <h1 class="color-name">White</h1> <p class="color-desc"> You have hope and goodness in your heart forever. You are light and clean and like to keep stuff nice and simple. You are the coolest on your street. </p> </div> </div> </body> </html>
@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Grandstander&display=swap'); *:focus { outline: none; } .row { display: flex; flex-wrap: wrap; } body { background-color: #c9c9c9; color: #333; } .container { left: 50%; background-color: white; border: 1px solid black; width: 80%; padding: 10px; top: 30%; justify-content: center; text-align: center; align-items: center; border-radius: 5px; box-shadow: 0 0 10px 2px; position: absolute; transform: translate(-50%); } .q { font-family: 'Itim'; } .a-option { font-family: 'Grandstander'; border: 1px solid black; background-color: #ffc107; padding: 5px; width: 20%; cursor: pointer; color: #333; } .color-div { display: none; } .color-name { font-family: 'Itim'; } .color-desc { font-family: 'Grandstander'; } .color-chosen { border-radius: 50%; width: 100px; height: 100px; border: 1px solid #ebebeb; }
var answer1, answer2, answer3, answer4; var answer_set = document.getElementsByClassName("a-option"); document.getElementById("q").innerText = "What's your favorite flavor of ice-cream?"; setAnswers('Strawberry','Mint','Chocolate','Vanilla'); function setAnswers(a1, a2, a3, a4) { document.getElementById("a1").innerText = a1; document.getElementById("a2").innerText = a2; document.getElementById("a3").innerText = a3; document.getElementById("a4").innerText = a4; } function selectAnswer1(letter) { answer1 = letter; answer_set[0].setAttribute("onclick","selectAnswer2('a')"); answer_set[1].setAttribute("onclick","selectAnswer2('b')"); answer_set[2].setAttribute("onclick","selectAnswer2('c')"); answer_set[3].setAttribute("onclick","selectAnswer2('d')"); document.getElementById("q").innerText = "Which animal do you like best?"; setAnswers('Cat','Dog','Pigeon','Gorilla'); } function selectAnswer2(letter) { answer2 = letter; answer_set[0].setAttribute("onclick","selectAnswer3('a')"); answer_set[1].setAttribute("onclick","selectAnswer3('b')"); answer_set[2].setAttribute("onclick","selectAnswer3('c')"); answer_set[3].setAttribute("onclick","selectAnswer3('d')"); document.getElementById("q").innerText = "If someone made you angry/sad, what would you do?"; setAnswers('Relax','Breathe in Through Your Nose and Out Through Your Mouth','Count to Ten','Be Mean to the Person that Made You Angry/Sad'); } function selectAnswer3(letter) { answer3 = letter; answer_set[0].setAttribute("onclick","selectAnswer4('a')"); answer_set[1].setAttribute("onclick","selectAnswer4('b')"); answer_set[2].setAttribute("onclick","selectAnswer4('c')"); answer_set[3].setAttribute("onclick","selectAnswer4('d')"); document.getElementById("q").innerText = "If your best friend left you, what would you do?"; setAnswers("Don't Worry","Make Friends With Someone New","Try to Be Friends Again","Be Mean to Your Best Friend"); } function selectAnswer4(letter) { answer4 = letter; showColor(); document.querySelector(".container").style.display = "none"; } function showColor() { if(answer1=="a" && answer2=="a" && answer3=="a" && answer4=="a") { document.querySelector("#pink").style.display = "block"; } if(answer1=="b" && answer2=="b" && answer3=="b" && answer4=="b") { document.querySelector("#orange").style.display = "block"; } if(answer1=="c" && answer2=="c" && answer3=="c" && answer4=="c") { document.querySelector("#purple").style.display = "block"; } if(answer1=="d" && answer2=="d" && answer3=="d" && answer4=="d") { document.querySelector("#black").style.display = "block"; } if(answer1=="a" && answer2=="b" && answer3=="c" && answer4=="d") { document.querySelector("#green").style.display = "block"; } if(answer1=="d" && answer2=="c" && answer3=="b" && answer4=="a") { document.querySelector("#white").style.display = "block"; } if(answer1=="d" && answer2=="c" && answer3=="c" && answer4=="d") { document.querySelector("#red").style.display = "block"; } if(answer1=="c" && answer2=="d" && answer3=="c" && answer4=="d") { document.querySelector("#black").style.display = "block"; } if(answer1=="c" && answer2=="d" && answer3=="a" && answer4=="b") { document.querySelector("#white").style.display = "block"; } if(answer1=="b" && answer2=="c" && answer3=="d" && answer4=="a") { document.querySelector("#green").style.display = "block"; } if(answer1=="b" && answer2=="c" && answer3=="a" && answer4=="b") { document.querySelector("#blue").style.display = "block"; } if(answer1=="d" && answer2=="a" && answer3=="a" && answer4=="c") { document.querySelector("#yellow").style.display = "block"; } if(answer1=="d" && answer2=="d" && answer3=="a" && answer4=="a") { document.querySelector("#blue").style.display = "block"; } if(answer1=="c" && answer2=="d" && answer3=="d" && answer4=="d") { document.querySelector("#green").style.display = "block"; } if(answer1=="a" && answer2=="a" && answer3=="a" && answer4=="b") { document.querySelector("#red").style.display = "block"; } if(answer1=="d" && answer2=="c" && answer3=="c" && answer4=="c") { document.querySelector("#orange").style.display = "block"; } if(answer1=="a" && answer2=="a" && answer3=="a" && answer4=="c") { document.querySelector("#purple").style.display = "block"; } if(answer1=="c" && answer2=="a" && answer3=="c" && answer4=="d") { document.querySelector("#green").style.display = "block"; } if(answer1=="c" && answer2=="c" && answer3=="d" && answer4=="c") { document.querySelector("#green").style.display = "block"; } if(answer1=="b" && answer2=="b" && answer3=="b" && answer4=="a") { document.querySelector("#white").style.display = "block"; } if(answer1=="a" && answer2=="c" && answer3=="a" && answer4=="a") { document.querySelector("#pink").style.display = "block"; } if(answer1=="b" && answer2=="a" && answer3=="a" && answer4=="b") { document.querySelector("#orange").style.display = "block"; } if(answer1=="c" && answer2=="a" && answer3=="d" && answer4=="d") { document.querySelector("#black").style.display = "block"; } if(answer1=="c" && answer2=="d" && answer3=="a" && answer4=="c") { document.querySelector("#white").style.display = "block"; } if(answer1=="b" && answer2=="c" && answer3=="a" && answer4=="a") { document.querySelector("#orange").style.display = "block"; } if(answer1=="b" && answer2=="c" && answer3=="a" && answer4=="d") { document.querySelector("#green").style.display = "block"; } if(answer1=="b" && answer2=="c" && answer3=="a" && answer4=="c") { document.querySelector("#blue").style.display = "block"; } if(answer1=="d" && answer2=="a" && answer3=="b" && answer4=="c") { document.querySelector("#white").style.display = "block"; } if(answer1=="c" && answer2=="a" && answer3=="b" && answer4=="c") { document.querySelector("#white").style.display = "block"; } if(answer1=="a" && answer2=="c" && answer3=="a" && answer4=="c") { document.querySelector("#white").style.display = "block"; } if(answer1=="a" && answer2=="a" && answer3=="b" && answer4=="c") { document.querySelector("#orange").style.display = "block"; } if(answer1=="c" && answer2=="a" && answer3=="d" && answer4=="c") { document.querySelector("#green").style.display = "block"; } if(answer1=="c" && answer2=="c" && answer3=="a" && answer4=="c") { document.querySelector("#blue").style.display = "block"; } if(answer1=="a" && answer2=="a" && answer3=="b" && answer4=="b") { document.querySelector("#yellow").style.display = "block"; } if(answer1=="a" && answer2=="d" && answer3=="b" && answer4=="c") { document.querySelector("#blue").style.display = "block"; } if(answer1=="d" && answer2=="b" && answer3=="c" && answer4=="a") { document.querySelector("#orange").style.display = "block"; } }
About
Explore
Events & Classes
Support Us
Join
Sign In
.png)