JSFiddle - React, Tailwind, and code Playground

by Alex Cowan

HTML

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Curate Mental Health</title>
</head>
<body>
    <header>
        <h1>Curate Mental Health</h1>
    </header>

    <div class="container">
        <section id="feelings">
            <div id="quiz-container">
                <h3>Anxiety Quiz</h3>
                <p>Answer the following questions to understand your anxiety better:</p>

                <!-- Quiz questions -->
                <form id="quiz-form">
                    <div id="question-container">
                        <p><strong>Question 1:</strong> Do you often feel restless or on edge?</p>
                        <label>
                            <input type="radio" name="q1" value="yes"> Yes
                        </label>
                        <label>
                            <input type="radio" name="q1" value="no"> No
                        </label>
                    </div>

                    <!-- Add more questions here as needed -->
                </form>

                <!-- Quiz results -->
                <div id="result-container" style="display: none;">
                    <h3>Quiz Results</h3>
                    <p id="result-description">Your result description will appear here.</p>
                </div>
            </div>
        </section>
    </div>

    <footer>
        <p>&copy; 2023 Curate - Your Mental Health Companion</p>
    </footer>

CSS

/* Header styling */
header {
    background-color: #87CEEB; /* Sky Blue background color for the header */
    text-align: center;
    font-family: Arial, sans-serif;
    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: 
}

JavaScript

// Define quiz questions
const questions = [
  "Do you have trouble concentrating or your mind going blank?",
  "Do you feel easily fatigued?",
  "Do you have irritability?",
  "Do you experience muscle tension?",
  "Do you have sleep disturbances?",
  "Do you worry excessively?",
  "Do you fear losing control or going crazy?",
  "Do you avoid situations because they make you anxious?",
  "Do you have a fear of being judged or embarrassed in public"
];

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

// Function to calculate the quiz result
function calculateResult() {
  const yesCount = questions.reduce((count, question, index) => {
    const inputName = `q${index + 1}`;
    const selectedAnswer = document.querySelector(`input[name="${inputName}"]:checked`);
    if (selectedAnswer && selectedAnswer.value === "yes") {
      return count + 1;
    }
    return count;
  }, 0);

  if ((yesCount / questions.length) >= 0.4) {
    return "Based on your answers, it's recommended to consider the following treatment options:\n1. Cognitive Behavioral Therapy (CBT)\n2. Medication under the guidance of a mental health professional\n3. Stress management techniques\n4. Support groups\n5. Relaxation exercises";
  } else {
    return "Your quiz results do not indicate a high level of anxiety. If you have concerns, consult with a mental health professional for personalized advice.";
  }
}

// Function to display the quiz questions
function displayQuestions() {
  const quizContainer = document.getElementById("question-container");

  questions.forEach((question, index) => {
    const inputName = `q${index + 1}`;
    const questionElement = document.createElement("div");
    questionElement.className = "question";
    questionElement.innerHTML = `
            <p><strong>Question ${index + 2}:</strong> ${question}</p>
            <label>
                <input type="radio" name="${inputName}" value="yes"> Yes
            </label>
            <label>
                <input...