Basic song Questionnaire working

v003

by m4xout

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Song Questionnaire</title>

</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="Happy" hidden>
      <button class="toggle-button">Happy</button>
    </label>
    <label>
      <input type="checkbox" name="vibe" value="Sad" hidden>
      <button class="toggle-button">Sad</button>
    </label>

    <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>

    <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" name="musicalLines" value="Bass" hidden>
      <button class="toggle-button">Bass</button>
    </label>

    <h2>4. What is the most impactful/memorable part of this track?</h2>
    <label>
      <input type="checkbox" name="impactfulPart" value="Vocals" hidden>
      <button class="toggle-button">Vocals</button>
    </label>
    <label>
      <input type="checkbox" name="impactfulPart" value="Guitar" hidden>
      <button class="toggle-button">Guitar</button>
    </label>
    <label>
      <input type="checkbox" name="impactfulPart" value="Piano" hidden>
      <button class="toggle-button">Piano</button>
    </label>
    <label>
     ...

CSS

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;
    }
body {font-family: sans-serif;}

JavaScript

const toggleButtons = document.querySelectorAll('.toggle-button');

    toggleButtons.forEach(function(button) {
      button.addEventListener('click', function() {
        const checkbox = this.previousElementSibling;
        checkbox.checked = !checkbox.checked;
        this.classList.toggle('toggle-button-checked', checkbox.checked);
      });
    });

    document.querySelector('form').addEventListener('submit', function(event) {
      event.preventDefault();
      const formData = new FormData(this);

      // Retrieve the selected checkboxes for each question
      const vibe = Array.from(formData.getAll('vibe')).filter(Boolean);
      const feelings = Array.from(formData.getAll('feelings')).filter(Boolean);
      const musicalLines = Array.from(formData.getAll('musicalLines')).filter(Boolean);
      const impactfulPart = Array.from(formData.getAll('impactfulPart')).filter(Boolean);
      const storyArc = formData.get('storyArc');
      const notes = formData.get('notes');

      // Display the collected data
      console.log('Vibe:', vibe);
      console.log('Feelings:', feelings);
      console.log('Musical Lines:', musicalLines);
      console.log('Impactful Part:', impactfulPart);
      console.log('Story Arc:', storyArc);
      console.log('Notes:', notes);

      // You can perform further actions with the collected data here (e.g., send it to a server)
    });