JSFiddle - React, Tailwind, and code Playground

by Alex Cowan

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Curate Mental Health</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>

  <body>
    <header>
      <h1>Curate Mental Health</h1>
    </header>

    <div class="container">
      <section id="feelings">
        <h2>Understanding Your Feelings</h2>
        <h4>Self-awareness for Anxiety Management</h4>
        <p>Self-awareness is designed to help you understand your feelings and provide insights into managing anxiety. Answer the following questions honestly to gain valuable self-assessment.</p>
      </section>

      <section id="happiness-quiz">
        <h2>Happiness Measure</h2>
        <p>The Happiness Measure quiz aims to gauge your overall happiness levels.</p>

        <div id="quiz-container">
          <!-- New question -->
          <!-- New question -->
          <div id="additional-question" class="question-box">
            <h3>In general, how happy or unhappy do you usually feel?</h3>
            <select id="general-happiness">
              <option value="extremely-happy">Extremely Happy</option>
              <option value="very-happy">Very Happy</option>
              <option value="pretty-happy">Pretty Happy</option>
              <option value="mildly-happy">Mildly Happy</option>
              <option value="slightly-happy">Slightly Happy</option>
              <option value="neutral">Neutral</option>
              <option value="slightly-unhappy">Slightly Unhappy</option>
              <option value="mildly-unhappy">Mildly Unhappy</option>
              <option value="pretty-unhappy">Pretty Unhappy</option>
              <option value="very-unhappy">Very Unhappy</option>
              <option value="extremely-unhappy">Extremely Unhappy</option>
            </select>
          </div>

          <!-- Happiness Measure options -->
          <div...

CSS

/* Header styling */
header {
  background-color: #87CEEB;
  /* Sky Blue background color for the header */
  text-align: center;
  font-family: Arial, sans-serif;
  color: white;
  /* Set font color to white */
  padding: 20px;
}

/* Background styling for the content */
body {
  background-color: #f2f2f2;
  /* Plain gray background color */
  font-family: Arial, sans-serif;
}

/* Container for the content */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.9);
  /* Semi-transparent white background for content */
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  /* Shadow for the content container */
}

/* Happiness Measure options styling */
#happiness-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

#happiness-options label {
  display: block;
}

/* Style for the submit button */
#submit-button {
  background-color: #87CEEB;
  /* Sky Blue background color for the button */
  color: white;
  /* Set font color to white */
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  margin-top: 10px;
}

#submit-button:disabled {
  background-color: lightgray;
  /* Change button color when disabled */
  cursor: not-allowed;
}

JavaScript

const questions = [];

// Answers for each question
const answers = {};

// Function to calculate the quiz result
function calculateResult() {
  const selectedAnswer = document.querySelector('input[name="happiness"]:checked');

  if (selectedAnswer) {
    return `Your happiness measure result: ${selectedAnswer.value}`;
  } else {
    return "Please select an option to get your happiness measure result.";
  }
}

// Function to display the quiz result
function displayResult() {
  const resultDescription = calculateResult();
  document.getElementById("result-description").textContent = resultDescription;
  document.getElementById("result-container").style.display = "block";
}

// Event listener for the quiz submission
document.addEventListener("DOMContentLoaded", displayQuestions)
// Function to calculate the quiz result
function calculateResult() {
  const happyPercent = parseInt(document.getElementById('happy-percent').value) || 0;
  const unhappyPercent = parseInt(document.getElementById('unhappy-percent').value) || 0;
  const neutralPercent = parseInt(document.getElementById('neutral-percent').value) || 0;

  const totalPercentage = happyPercent + unhappyPercent + neutralPercent;
  const submitButton = document.getElementById('submit-button');

  if (totalPercentage === 100) {
    submitButton.removeAttribute('disabled');
  } else {
    submitButton.setAttribute('disabled', 'true');
  }

  // Your existing logic for calculating happiness measure result
  const selectedAnswer = document.querySelector('input[name="happiness"]:checked');
  if (selectedAnswer) {
    return `Your happiness measure result: ${selectedAnswer.value}`;
  } else {
    return "Please select an option to get your happiness measure result.";
  }
} 
script >
  function calculateSatisfaction() {
    // You can use JavaScript to calculate the overall satisfaction score based on user responses
    // For example, add up the values of all selected radio buttons and display the result
    // Adjust...