Basic song Questionnaire working

v002

by m4xout

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Song Questionnaire</title>
  <style>
    label {
      display: inline-block;
      margin-bottom: 5px;
    }
    .toggle-button {
      display: inline-block;
      padding: 8px 16px;
      border: none;
      background-color: #eee;
      color: #555;
      cursor: pointer;
      outline: none;
    }
    .toggle-button.toggle-button-checked {
      background-color: green;
      color: white;
    }
    textarea {
      width: 100%;
      height: 100px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>Song Questionnaire</h1>
  <form>
    <h2>1. What is the overall vibe of this track?</h2>
    <label>
      <input type="checkbox" name="vibe" value="Aggressive" hidden>
      <button class="toggle-button">Aggressive</button>
    </label>
    <label>
      <input type="checkbox" name="vibe" value="Atmospheric" hidden>
      <button class="toggle-button">Atmospheric</button>
    </label>
    <!-- Add the rest of the checkboxes for the vibe here -->

    <h2>2. What feelings does this track evoke in you?</h2>
    <label>
      <input type="checkbox" name="feelings" value="Happy" hidden>
      <button class="toggle-button">Happy</button>
    </label>
    <label>
      <input type="checkbox" name="feelings" value="Sad" hidden>
      <button class="toggle-button">Sad</button>
    </label>
    <!-- Add the rest of the checkboxes for the feelings here -->

    <h2>3. What are the top 3 musical lines driving this track?</h2>
    <label>
      <input type="checkbox" name="musicalLines" value="Vocals" hidden>
      <button class="toggle-button">Vocals</button>
    </label>
    <label>
      <input type="checkbox" name="musicalLines" value="Guitar" hidden>
      <button class="toggle-button">Guitar</button>
    </label>
    <label>
      <input type="checkbox" name="musicalLines" value="Piano" hidden>
      <button class="toggle-button">Piano</button>
    </label>
    <label>
      <input type="checkbox"...