JSFiddle - React, Tailwind, and code Playground

by Kofod

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<body>
    <div id="intro-text">
    Happy valentine's day! <br>
    Are you lonely this valentine? Would you like to go on a date?<br>
    Answer these questions and we will match you op on a blind date!<br>
    Click the button below to tell us who you got matched with, and show us how you would look on the date!<br><br>
    <a id="contest" href="https://en.virtualpopstar.com/social/forum?category=11&topic=364544

Link for thread" target="_blank">CLICK HERE</a>
    </div>
    <div id="quiz-container">
        <h2 id="question"></h2>
        <div id="answers"></div>
        <div id="result"></div>
    </div>
    <script src="quiz.js"></script>
</body>

CSS

body {
    font-family: papyrus, Fantasy;
    font-weight: bold;
    text-align: center;
    background-image: url(https://i.imgur.com/EgrGEmB.png);
    background-repeat: no-repeat;
    width: 100%;
    margin: 0;
    padding: 0;
}
#intro-text {
  position: relative;
  top: 39vh;
  max-width: 70%;
  max-height: 50%;
  margin: 0 auto;
  line-height: 1.5;
  font-size: 1.2rem;
}
#contest {
    padding: 10px;
    border-radius: 7px;
    font-family: papyrus, Fantasy;
    font-weight: bold;
    font-size: 0.7rem;
    background-color: #e1cad3;
    border: 1px solid #9d5c75;
}
#contest:hover {
    background-color: #9d5c75;
}
#quiz-container {
    position: relative;
    top: 40vh;
    width: 60%;
    height: 10vh;
    margin: auto;
    border-radius: 10px;
}

.answer {
    display: block;
    margin: 10px 100px 1px 100px;
    padding: 5px;
    cursor: pointer;
    border: 1px solid #9d5c75;
    border-radius: 10px;
    background-color: #e1cad3;
    font-weight: normal;
}
.answer:hover {
    background-color: #cd91a8;
    font-weight: bold;
}
#result {
    font-size: 20px;
    font-weight: bold;
    margin-top: 20px;
}

JavaScript

/* Format is: question, answer 1, point, answer 2, point and so on */
/* Add more questions as needed */
var questions = [
    { question: "What would be the perfect date for you?", answers: [ 
    { text: "Going to a cafe before visiting the pet store", points: 1 },    
    { text: "Going to a bar to experience a music concert", points: 7 },
    { text: "Going for a multi-day camping trip in the wilderness", points: 15 },
    { text: "Going to a serial killer exhibit at a museum", points: 22 },
    { text: "Going for a picnic near the beach", points:30 }] },
    
    
    { question: "What pet do you want the most?", answers: [ 
    { text: "A lot of mice", points: 1 }, 
    { text: "I don’t want any pets", points: 6 }, 
    { text: "A big dog", points: 12 },
    { text: "An old turtle", points: 18 },
    { text: "A black cat", points: 24 },
    { text: "A big dragon", points: 30 } ] },
    
    
    { question: "What kind of drink would you prefer?", answers: [ 
        { text: "Something sweet", points: 1 }, 
    { text: "Something bland", points: 6 }, 
    { text: "Something bitter", points: 12 }, 
    { text: "Something spicy", points: 18 },
    { text: "Something salty", points: 24 },
    { text: "Something sour", points: 30 } ] },
    
    
    { question: "What do you like to do in your spare time?", answers: [ 
    { text: "To listen to music while being creative with my hands", points: 1 }, 
    { text: "To take long walks with my pet", points: 6 },     
    { text: "To experience something new", points: 12 },
    { text: "To go star-gazing", points: 18 },
    { text: "To be at home with a good book or movie", points: 24 },
    { text: "To plan my next crime", points: 30 } ] },
    
    
    { question: "What’s your favorite word?", answers: [ 
    { text: "Ah!", points: 1 },
    { text: "Woof!", points: 7 }, 
    { text: "Rawr~", points: 15 },
    { text: "Mhh...", points: 22 }, 
    { text: "Love", points: 30 } ] },
    
    
    { question: "What do...