Find Your Red Quiz

by Jiaming0324

HTML

<div class="quiz-container">
  <div id="quiz">
    <h1>❤️ Find Your Red</h1>

    <p class="intro">
      Discover the red energy that represents your current state.
      Answer these questions and find your unique red.
    </p>

    <p id="progressText" class="progress-text"></p>

    <div id="questionBox"></div>

    <p id="errorMessage" class="error-message"></p>

    <button id="nextBtn" type="button">Next</button>
  </div>

  <div id="result" class="hidden">
    <h1 id="resultTitle"></h1>

    <div class="result-card">
      <h2 id="resultName"></h2>
      <p id="resultDesc"></p>
      <p id="resultEnergy"></p>
    </div>

    <div class="share-box">
      <strong>📸 Share Your Red Result!</strong>

      <p>
        Screenshot your result and share it in the
        community comments.
      </p>
    </div>

    <button id="restartBtn" type="button">
      Take the Quiz Again
    </button>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 20px;
  font-family: Arial, sans-serif;
  color: #333;
  background: #fff5f5;
}

.quiz-container {
  width: 100%;
  max-width: 650px;
  margin: 30px auto;
  padding: 25px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #c62828;
}

h2 {
  line-height: 1.45;
}

.intro {
  text-align: center;
  line-height: 1.6;
}

.progress-text {
  margin: 20px 0 8px;
  color: #777;
  font-size: 14px;
  text-align: center;
}

.option {
  display: block;
  margin: 12px 0;
  padding: 15px;
  line-height: 1.5;
  border: 1px solid #ddd;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.2s;
}

.option:hover,
.option.selected {
  background: #ffecec;
  border-color: #d32f2f;
}

.option input {
  margin-right: 10px;
  accent-color: #d32f2f;
}

button {
  width: 100%;
  margin-top: 15px;
  padding: 14px;
  color: white;
  background: #d32f2f;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  opacity: 0.9;
}

.hidden {
  display: none;
}

.result-card {
  margin: 20px 0;
  padding: 25px;
  background: #fff0f0;
  border-radius: 15px;
  line-height: 1.6;
}

.share-box {
  padding: 20px;
  line-height: 1.6;
  background: #fff8e1;
  border-radius: 15px;
}

.error-message {
  min-height: 22px;
  margin: 10px 0 0;
  color: #c62828;
  text-align: center;
}

@media (max-width: 600px) {
  body {
    padding: 10px;
  }

  .quiz-container {
    margin: 10px auto;
    padding: 20px;
  }
}

JavaScript

function initQuiz() {
  var questions = [
    {
      q: "Recently, when crafting, what feeling do you enjoy the most?",
      a: [
        [
          "Creating a long-awaited project and enjoying the achievement",
          4
        ],
        [
          "Making a gift to express my feelings for someone",
          3
        ],
        [
          "Crafting quietly and enjoying relaxation and happiness",
          2
        ],
        [
          "Trying something casually without focusing on the result",
          1
        ]
      ]
    },
    {
      q: "If you start a new craft project now, you would:",
      a: [
        [
          "Set a goal and create something that represents yourself",
          4
        ],
        [
          "Invite friends and create a shared memory together",
          3
        ],
        [
          "Choose a fun and simple project to add joy to life",
          2
        ],
        [
          "See if you are interested before deciding",
          1
        ]
      ]
    },
    {
      q: "Your current energy feels closest to:",
      a: [
        [
          "I am motivated and working toward my goals",
          4
        ],
        [
          "I feel supported and connected with people around me",
          3
        ],
        [
          "I want to slow down and enjoy life",
          2
        ],
        [
          "I feel tired and need time to recover",
          1
        ]
      ]
    },
    {
      q: "When facing a complicated craft tutorial, you would:",
      a: [
        [
          "Study the method and challenge myself to finish it",
          4
        ],
        [
          "Discuss with others and solve it together",
          3
        ],
        [
          "Modify it into a simpler version that suits me",
          2
        ],
        [
          "Put it aside and continue when I feel interested",
          1
       ...